:root {
  color-scheme: light;
  --primary:#0A57D6; --primary-dark:#043FA3; --primary-light:#E4EDFE;
  --primary-soft:#EAF2FF; --accent:#065AD8;
  --bg:#F3F6FB; --border:#E2E8F0;
  --surface:#FFFFFF; --surface-2:#F8FAFC;
  --text-primary:#0B1A33; --text-secondary:#5B6B85; --text-muted:#94A3B8;
  --danger:#EF4444; --success:#22C55E;
  --overlay:rgba(4,15,35,0.6);
  --radius:14px; --radius-sm:10px; --radius-xs:6px;
  --shadow:0 1px 3px rgba(4,32,84,0.08),0 4px 16px rgba(4,32,84,0.05);
  --shadow-lg:0 12px 36px rgba(4,32,84,0.16);
  --transition:0.18s ease;

  /* ── iOS Design System v2 ──────────────────────────────────────────
     Token tambahan buat rombak tampilan ala iOS: radius lebih besar,
     shadow lebih lembut/menyebar, warna "tint" lembut per-fitur (biru,
     hijau, ungu, oranye) yang dipakai di ikon bulat/badge, dan sistem
     spacing konsisten. Semua komponen baru (home, header, bottom nav,
     dsb) pakai token di bawah ini -- token lama di atas TETAP dipakai
     komponen lama yang belum dirombak, supaya tidak saling bentrok. */
  --ios-radius-xl:28px; --ios-radius-lg:22px; --ios-radius-md:16px; --ios-radius-sm:12px;
  --ios-shadow-card:0 1px 2px rgba(15,23,42,0.04),0 8px 24px -6px rgba(15,23,42,0.10);
  --ios-shadow-float:0 10px 30px -8px rgba(15,23,42,0.18);
  --ios-tint-blue:#0A57D6; --ios-tint-blue-bg:#EAF1FF;
  --ios-tint-green:#12B76A; --ios-tint-green-bg:#E7F9EF;
  --ios-tint-purple:#7C5CFC; --ios-tint-purple-bg:#F1EDFF;
  --ios-tint-orange:#F79009; --ios-tint-orange-bg:#FFF4E4;
  --ios-tint-red:#F04438; --ios-tint-red-bg:#FEECEB;
  --ios-tint-cyan:#0BA5EC; --ios-tint-cyan-bg:#E6F7FE;
  --ios-sep:rgba(60,60,67,0.1);
}
html.wt-dark, body.wt-dark{
  --ios-shadow-card:0 1px 2px rgba(0,0,0,0.3),0 8px 24px -6px rgba(0,0,0,0.45);
  --ios-shadow-float:0 10px 30px -8px rgba(0,0,0,0.6);
  --ios-tint-blue-bg:#132449; --ios-tint-green-bg:#0E2E22; --ios-tint-purple-bg:#241C46;
  --ios-tint-orange-bg:#3A2712; --ios-tint-red-bg:#3A1817; --ios-tint-cyan-bg:#0E2C38;
  --ios-sep:rgba(255,255,255,0.08);
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;
  -webkit-user-select:none;-moz-user-select:none;user-select:none;}
html,body{height:var(--vn-vh,100%);height:var(--vn-vh,-webkit-fill-available);overflow:hidden;
  font-family:'Plus Jakarta Sans','Sora','Segoe UI','Helvetica Neue',Arial,sans-serif;
  font-size:14px;color:var(--text-primary);background:var(--bg);}
.hidden{display:none!important;}
button{cursor:pointer;border:none;background:none;font-family:inherit;}
input,textarea{font-family:inherit;outline:none;border:none;}

/* ── Transisi ala iOS: kurva easing "spring" Apple (cubic-bezier
   0.32,0.72,0,1) dipakai di sheet/overlay, sementara elemen yang bisa
   ditekan (tombol, kartu, baris list) dapat feedback tekan halus
   (scale-down ringan) supaya berasa lebih "fisik" seperti native app. */
:root{ --ios-ease:cubic-bezier(0.32,0.72,0,1); --ios-ease-soft:cubic-bezier(0.25,0.1,0.25,1); }
/* Cuma transisikan transform+opacity (murah, di-GPU) supaya animasi tetap
   mulus di HP kelas menengah/bawah. Selector DIBATASI ke komponen baris/
   kartu yang jelas ukurannya (bukan `[onclick]` generik) -- selector umum
   itu ternyata ikut kena ke wrapper besar (baris terpilih, banner, dsb)
   dan bikin efek tekan (opacity dim) terlihat seperti "seluruh halaman
   jadi transparan sebentar". PENTING: JANGAN pasang transform:translateZ(0)
   atau will-change di sini -- itu maksa browser bikin GPU layer terpisah
   untuk SETIAP elemen yang cocok secara permanen, penyebab macet/freeze
   pas render list besar. */
button,.vn-app-card,.vn-list-row,.vn-history-row,.vn-pending-card,
.vn-country-row,.vn-operator-row,.vn-inline-order-btn,.vn-sort-tab{
  transition:transform .12s ease-out,opacity .12s ease-out;
}
button:active{ transform:scale(0.96); opacity:.8; }
.vn-app-card:active,.vn-list-row:active,.vn-history-row:active,
.vn-pending-card:active,.vn-country-row:active,.vn-operator-row:active{ opacity:.6; }
/* Transisi masuk antar halaman (Home/Deposit/Beli/Activity/Profil)
   dijalankan lewat Web Animations API di vnAnimatePageSwap() (ui.js).
   overflow-x:hidden di sini cuma buat mencegah scrollbar horizontal
   kelihatan sesaat waktu halaman baru meluncur masuk dari samping. */
#vnPageBody{ overflow-x:hidden; }
#vnBuySheetPanel{ transition:transform .38s var(--ios-ease)!important; }
#vnBuySheetOverlay{ transition:background-color .3s var(--ios-ease-soft); }

/* ── Custom Background (user) ────────────────────────────────────────
   Begitu user pasang background sendiri, chrome app (yang mana-mana
   pakai var(--bg)/var(--surface)/var(--surface-2)) dibikin semi-transparan
   lewat class ini di <body>, supaya background custom-nya kelihatan
   nembus dari belakang tanpa perlu ubah tiap komponen satu-satu.
   Dipasang juga di <html> (bukan cuma <body>) -- pola yang sama kayak
   wt-dark, lihat komentar applyTheme() di index.html untuk alasannya. */
html.vn-custom-bg-active,body.vn-custom-bg-active{
  --bg:rgba(243,246,251,0.55); --surface:rgba(255,255,255,0.72);
  --surface-2:rgba(248,250,252,0.6); background:transparent!important;
}
html.vn-custom-bg-active.wt-dark,body.vn-custom-bg-active.wt-dark{
  --bg:rgba(15,23,42,0.55); --surface:rgba(30,41,59,0.72);
  --surface-2:rgba(30,41,59,0.6);
}

#regOtpInput,#regEmail,#loginEmail,#loginOtpInput,
.ref-input,.page-input,.vn-search input,
.sp-search-bar input,.wt-search input{
  -webkit-user-select:text;-moz-user-select:text;user-select:text;}
.material-icons-round{font-size:22px;vertical-align:middle;line-height:1;}

/* ══════════════════════════════════════════════════════════════════
   VN ICON SYSTEM -- styling untuk SVG hasil upgrade dari
   .material-icons-round (lihat public/js/iconSystem.js). Ukuran &
   warna otomatis ikut font-size/color yang sudah ada di setiap
   pemakaian .material-icons-round (lihat aturan-aturan di bawah ini),
   karena SVG di-set width/height:1em dan stroke/fill:currentColor.
   TIDAK berlaku untuk ikon di dalam toast (lihat VN_ICON_SKIP_SELECTOR
   di iconSystem.js -- toast sudah pakai SVG sendiri, tidak pernah
   masuk sini).
   ══════════════════════════════════════════════════════════════════ */
.vn-icon-host{ display:inline-flex; align-items:center; justify-content:center; }
.vn-icon{ width:1em; height:1em; vertical-align:middle; flex-shrink:0; }
::-webkit-scrollbar{display:none;width:0;}
::-webkit-scrollbar-track{display:none;}
::-webkit-scrollbar-thumb{display:none;}
*{scrollbar-width:none;-ms-overflow-style:none;}


@keyframes sc-spin{to{transform:rotate(360deg);}}

/* Dipakai tombol refresh mana pun saat ditekan -- display:inline-block
   dipaksa eksplisit di sini (bukan cuma andalkan default font ikonnya)
   supaya animasi rotate-nya PASTI kelihatan berputar di semua browser. */
.vn-icon-spin{display:inline-block;animation:sc-spin .7s linear infinite;}

/* ── Animasi badge "Terverifikasi" ─────────────────────────────────
   Efek "pop-in" (muncul dengan sedikit overshoot) begitu halaman Profil
   dibuka, lanjut denyut glow pelan berulang -- biar kelihatan hidup
   tanpa norak/mengganggu. */
@keyframes vnVerifiedPop{
  0%{transform:scale(0) rotate(-25deg);opacity:0;}
  55%{transform:scale(1.35) rotate(8deg);opacity:1;}
  75%{transform:scale(0.92) rotate(-4deg);}
  100%{transform:scale(1) rotate(0deg);}
}
@keyframes vnVerifiedGlow{
  0%,100%{filter:drop-shadow(0 0 0 rgba(10,87,214,0));}
  50%{filter:drop-shadow(0 0 5px rgba(10,87,214,0.55));}
}
#vnProfileVerifiedBadge{
  display:inline-block;
  animation:vnVerifiedPop .6s cubic-bezier(.34,1.56,.64,1) both,
            vnVerifiedGlow 2.2s ease-in-out .6s infinite;
}
@keyframes spin{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}
@keyframes vnMarquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
@keyframes vnModalIn{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}
@keyframes toastSpringIn{0%{opacity:0;transform:translateX(-50%) translateY(-24px) scale(.85);}55%{opacity:1;transform:translateX(-50%) translateY(3px) scale(1.02);}100%{opacity:1;transform:translateX(-50%) translateY(0) scale(1);}}
@keyframes toastSpringOut{from{opacity:1;transform:translateX(-50%) translateY(0) scale(1);}to{opacity:0;transform:translateX(-50%) translateY(-16px) scale(.9);}}
@keyframes toastSpin{to{transform:rotate(360deg);}}
@keyframes sessionSpin{to{transform:rotate(360deg);}}
@keyframes officialPopupFadeIn{from{opacity:0;}to{opacity:1;}}
@keyframes officialPopupSlideUp{0%{opacity:0;transform:translateY(26px) scale(0.94);}60%{opacity:1;transform:translateY(-2px) scale(1.012);}100%{opacity:1;transform:translateY(0) scale(1);}}

/* ── Pop-up / Modal / Bottom Sheet — sistem global iOS-native ────────
   Dipakai oleh SEMUA dialog & sheet di situs ini (showConfirm/
   showAlertPopup di utils.js, panel notifikasi, success sheet, info
   sheet, dsb) supaya satu perubahan di sini otomatis kebawa ke semua
   pop-up yang memakainya -- bukan style satuan per pop-up. */
@keyframes iosOverlayIn{from{opacity:0;}to{opacity:1;}}
@keyframes iosOverlayOut{from{opacity:1;}to{opacity:0;}}
@keyframes iosModalIn{0%{opacity:0;transform:translateY(16px) scale(.9);}60%{opacity:1;transform:translateY(-2px) scale(1.015);}100%{opacity:1;transform:translateY(0) scale(1);}}
@keyframes iosModalOut{from{opacity:1;transform:translateY(0) scale(1);}to{opacity:0;transform:translateY(10px) scale(.94);}}
@keyframes iosSheetIn{from{opacity:0;transform:translateY(100%);}to{opacity:1;transform:translateY(0);}}
@keyframes iosSheetOut{from{opacity:1;transform:translateY(0);}to{opacity:0;transform:translateY(60px);}}

.ios-modal-overlay{position:fixed;inset:0;background:rgba(10,14,28,0.4);backdrop-filter:blur(4px) saturate(1.1);-webkit-backdrop-filter:blur(4px) saturate(1.1);z-index:99999;display:flex;align-items:center;justify-content:center;padding:24px;animation:iosOverlayIn .2s ease both;}
.ios-modal-overlay.ios-out{animation:iosOverlayOut .18s ease forwards;}
.ios-modal-box{background:color-mix(in srgb, var(--surface) 97%, transparent);border-radius:var(--ios-radius-xl,28px);padding:28px 24px 20px;max-width:302px;width:100%;box-shadow:var(--ios-shadow-float,0 20px 60px rgba(0,0,0,.25));text-align:center;animation:iosModalIn .4s var(--ios-ease,cubic-bezier(.32,.72,0,1)) both;}
.ios-modal-box.ios-out{animation:iosModalOut .2s cubic-bezier(.4,0,1,1) forwards;}
.ios-modal-icon{width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 15px;flex-shrink:0;}
.ios-modal-icon svg{width:26px;height:26px;display:block;}
.ios-modal-title{font-size:16.5px;font-weight:800;color:var(--text-primary);margin-bottom:6px;letter-spacing:-0.01em;line-height:1.3;}
.ios-modal-desc{font-size:13.5px;color:var(--text-secondary);line-height:1.55;margin:0 0 22px;}
.ios-modal-actions{display:flex;gap:8px;}
.ios-modal-btn{flex:1;padding:13px 10px;border:none;border-radius:999px;font-size:13.5px;font-weight:700;cursor:pointer;transition:transform .12s ease-out,opacity .12s ease-out;}
.ios-modal-btn:active{transform:scale(.96);opacity:.82;}
.ios-modal-btn-cancel{background:var(--surface-2);color:var(--text-secondary);}
.ios-modal-btn-primary{background:var(--ios-tint-blue,var(--primary));color:#fff;}
.ios-modal-btn-danger{background:var(--ios-tint-red,#F04438);color:#fff;}

.ios-sheet-overlay{position:fixed;inset:0;background:rgba(10,14,28,0.38);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);z-index:99998;display:flex;align-items:flex-end;justify-content:center;animation:iosOverlayIn .2s ease both;}
.ios-sheet-overlay.ios-out{animation:iosOverlayOut .18s ease forwards;}
.ios-sheet-box{background:var(--surface);border-radius:28px 28px 0 0;max-width:480px;width:100%;max-height:80vh;display:flex;flex-direction:column;box-shadow:0 -14px 44px rgba(15,23,42,.2);animation:iosSheetIn .4s var(--ios-ease,cubic-bezier(.32,.72,0,1)) both;padding-bottom:env(safe-area-inset-bottom,0px);}
.ios-sheet-box.ios-out{animation:iosSheetOut .22s cubic-bezier(.4,0,1,1) forwards;}
.ios-sheet-handle{width:36px;height:5px;border-radius:3px;background:var(--border);margin:10px auto 0;flex-shrink:0;}
.ios-sheet-header{display:flex;align-items:center;justify-content:space-between;padding:14px 18px 10px;flex-shrink:0;}
.ios-sheet-title{font-size:16px;font-weight:800;color:var(--text-primary);display:flex;align-items:center;gap:8px;letter-spacing:-0.01em;}
.ios-sheet-close{width:29px;height:29px;border-radius:50%;border:none;background:var(--surface-2);color:var(--text-muted);display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;padding:0;transition:background .15s,transform .12s;}
.ios-sheet-close:active{transform:scale(.9);}
.ios-sheet-close svg{width:12px;height:12px;}
.ios-sheet-body{overflow-y:auto;padding:6px 18px 22px;flex:1;-webkit-overflow-scrolling:touch;}

body.wt-dark .ios-modal-overlay,body.wt-dark .ios-sheet-overlay{background:rgba(0,0,0,0.56);}
body.wt-dark .ios-modal-box{background:color-mix(in srgb, var(--surface-2) 96%, transparent);}
body.wt-dark .ios-sheet-box{background:var(--surface-2);}

#updateOverlay{
  display:none;position:fixed;top:0;left:0;right:0;bottom:0;
  background:linear-gradient(160deg,#031747 0%,#043FA3 55%,#0A57D6 100%);
  z-index:99999;flex-direction:column;align-items:center;justify-content:center;gap:24px;padding:32px;}

#authScreen{
  position:fixed;top:0;left:0;right:0;bottom:0;display:none;flex-direction:column;align-items:stretch;justify-content:flex-start;
  background:var(--bg);overflow-y:auto;
  transform:translateZ(0);-webkit-transform:translateZ(0);will-change:transform;
  z-index:9999;box-sizing:border-box;}
#authScreen::-webkit-scrollbar{display:none;}
.auth-card{width:100%;max-width:400px;background:#fff;border-radius:22px;padding:36px 30px;box-shadow:var(--shadow-lg);border:1px solid var(--border);animation:authCardIn 0.32s cubic-bezier(0.22,1,0.36,1);margin:0 auto;}
@keyframes authCardIn{from{opacity:0;transform:translateY(14px) scale(0.97);}to{opacity:1;transform:translateY(0) scale(1);}}
.auth-logo{text-align:center;margin-bottom:22px;}
.auth-logo h1{font-size:26px;font-weight:700;color:var(--primary);letter-spacing:-0.5px;}
.auth-logo p{color:var(--text-secondary);font-size:12px;margin-top:4px;}
.rh-welcome-title{font-family:'Sora',sans-serif;font-size:21px;font-weight:700;color:var(--text-primary);letter-spacing:-0.3px;}

.rh-social-auth{margin-bottom:22px;}
.rh-social-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.rh-google-btn,.rh-github-btn{width:100%;display:flex;align-items:center;justify-content:center;gap:8px;padding:12px 10px;
  background:#fff;border:1.5px solid var(--border);border-radius:var(--radius-sm);font-size:13.5px;font-weight:600;
  color:var(--text-primary);cursor:pointer;transition:border-color var(--transition),background var(--transition);}
.rh-google-btn:hover,.rh-github-btn:hover{border-color:var(--primary);background:var(--primary-soft);}
.rh-google-icon{width:18px;height:18px;flex-shrink:0;}
.rh-github-icon{width:17px;height:17px;flex-shrink:0;color:#181717;}
.rh-social-divider{display:flex;align-items:center;gap:12px;margin-top:18px;}
.rh-social-divider::before,.rh-social-divider::after{content:'';flex:1;height:1px;background:var(--border);}
.rh-social-divider span{font-size:11px;color:var(--text-secondary);white-space:nowrap;}

.rh-remembered-wrap{margin-top:10px;}
.rh-remembered-wrap.hidden{display:none;}
.rh-remembered-account{width:100%;display:flex;align-items:center;gap:10px;padding:10px 12px;
  background:var(--primary-soft);border:1.5px solid var(--border);border-radius:var(--radius-sm);
  cursor:pointer;text-align:left;font:inherit;transition:border-color var(--transition),background var(--transition);}
.rh-remembered-account:hover{border-color:var(--primary);}
.rh-remembered-account:disabled{opacity:0.6;cursor:default;}
.rh-remembered-avatar-box{width:34px;height:34px;border-radius:50%;overflow:hidden;flex-shrink:0;
  background:transparent;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;}
.rh-remembered-avatar-box img{width:100%;height:100%;object-fit:cover;display:block;}
.rh-remembered-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;}
.rh-remembered-label{font-size:12.5px;font-weight:600;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.rh-remembered-label b{font-weight:700;}
.rh-remembered-email{font-size:11px;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.rh-remembered-arrow{color:var(--text-secondary);font-size:20px;flex-shrink:0;}
.rh-remembered-dismiss{text-align:center;margin-top:6px;}
.rh-remembered-dismiss .rh-inline-link{font-size:11px;}
body.wt-dark .rh-remembered-account{background:var(--surface);border-color:#262626;}

.rh-input-icon-wrap{position:relative;display:flex;align-items:center;}
.rh-input-icon{position:absolute;left:14px;font-size:18px;color:var(--text-secondary);pointer-events:none;}
.rh-input-icon-pad{padding-left:42px !important;width:100%;}

.auth-tabs{display:flex;border-bottom:2px solid var(--border);margin-bottom:24px;}
.auth-tab{flex:1;padding:10px;text-align:center;font-weight:600;font-size:13px;color:var(--text-secondary);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-2px;transition:color var(--transition);}
.auth-tab.active{color:var(--primary);border-bottom-color:var(--primary);}
.auth-form{display:flex;flex-direction:column;gap:14px;}
.form-group{display:flex;flex-direction:column;gap:6px;}
.form-group label{font-size:12px;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:0.5px;}
.form-input{padding:12px 14px;border:1.5px solid var(--border);border-radius:var(--radius-sm);font-size:14px;transition:border-color var(--transition);background:#F8FAFC;-webkit-user-select:text;user-select:text;}
.form-input:focus{border-color:var(--primary);background:#fff;}
.btn-primary{padding:13px;background:linear-gradient(135deg,var(--primary-dark),var(--primary));color:#fff;border:none;border-radius:var(--radius-sm);font-size:14px;font-weight:600;transition:opacity var(--transition),transform var(--transition);margin-top:6px;box-shadow:0 6px 18px rgba(4,63,163,0.28);}
.btn-primary:hover{opacity:0.92;}
.btn-primary:active{transform:scale(0.98);}
.btn-primary:disabled{opacity:0.6;cursor:not-allowed;}
/* Tombol Daftar/Masuk memakai gradasi biru→ungu khusus, sesuai desain acuan. */
.auth-form .btn-primary{width:100%;display:block;background:linear-gradient(135deg,#4338CA,#7C3AED);box-shadow:0 8px 20px rgba(124,58,237,0.32);border-radius:12px;padding:14px;font-size:14.5px;}
.auth-error{color:var(--danger);font-size:12px;text-align:center;padding:8px;background:#FEF2F2;border-radius:var(--radius-xs);}
.auth-info-banner{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;background:#EFF6FF;border:1.5px solid #BFDBFE;border-radius:var(--radius-sm);}
.auth-success{display:flex;align-items:center;justify-content:flex-start;gap:8px;padding:12px 14px;background:#DCFCE7;border:1px solid #86EFAC;border-radius:var(--radius-sm);color:#166534;font-size:12.5px;font-weight:600;opacity:1;transition:opacity .35s ease;}
.auth-success.auth-success-fade{opacity:0;}
.auth-success .material-icons-round{font-size:18px;color:#16A34A;flex-shrink:0;}
.auth-success-text{flex:1;}
.auth-success-dot{width:8px;height:8px;border-radius:50%;background:#22C55E;flex-shrink:0;}

/* Checkbox "Remember Me" / "I agree to..." ala desain acuan */
.rh-checkbox-label{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--text-secondary);cursor:pointer;user-select:none;}
.rh-checkbox-label input[type="checkbox"]{width:16px;height:16px;accent-color:var(--primary);cursor:pointer;flex-shrink:0;}
.rh-checkbox-label a{color:var(--primary);font-weight:600;text-decoration:none;}
.rh-agree-terms{align-items:flex-start;line-height:1.5;}
.rh-agree-terms input[type="checkbox"]{margin-top:2px;}
.rh-auth-row-between{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:-4px;}
.rh-inline-link{color:var(--primary);font-weight:600;cursor:pointer;font-size:12.5px;}
.rh-auth-switch-line{text-align:center;font-size:12.5px;color:var(--text-secondary);margin-top:-2px;}

#pageContainer{position:fixed;top:0;left:0;right:0;height:var(--vn-vh,100%);z-index:5000;pointer-events:none;}
.sc-page{
  position:absolute;top:0;left:0;right:0;bottom:0;background:var(--bg);
  display:flex;flex-direction:column;
  pointer-events:none;overflow:hidden;visibility:hidden;opacity:0;}
.sc-page.open{visibility:visible;opacity:1;pointer-events:all;}

body.accent-blue{--primary:#0A57D6;--primary-dark:#043FA3;--primary-light:#E4EDFE;--primary-soft:#EAF2FF;--accent:#065AD8;}
body.accent-green{--primary:#10B981;--primary-dark:#047857;--primary-light:#D1FAE5;--primary-soft:#ECFDF5;--accent:#059669;}
body.accent-purple{--primary:#7C3AED;--primary-dark:#5B21B6;--primary-light:#EDE9FE;--primary-soft:#F5F3FF;--accent:#6D28D9;}
body.wt-dark.accent-green{--primary-soft:#062F23;--primary-light:#0B4A38;}
body.wt-dark.accent-purple{--primary-soft:#2A1B54;--primary-light:#3B2470;}
body.wt-dark.accent-blue{--primary-soft:#0F2A57;--primary-light:#123568;}

.vn-theme-popover{position:fixed;z-index:9600;background:var(--surface);border-radius:16px;box-shadow:0 12px 32px rgba(0,0,0,0.22);border:1px solid var(--border);width:240px;padding:10px;display:none;}
.vn-theme-popover.active{display:block;}
.vn-theme-popover-label{font-size:11px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;padding:6px 8px 4px;}
.vn-theme-mode-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:0 4px 8px;}
.vn-theme-mode-btn{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 4px;border-radius:10px;border:1.5px solid var(--border);background:var(--surface-2);color:var(--text-secondary);cursor:pointer;font-size:11px;font-weight:600;}
.vn-theme-mode-btn.active{border-color:var(--primary);background:var(--primary-soft);color:var(--primary);}
.vn-theme-mode-btn .material-icons-round{font-size:18px;}
.vn-theme-accent-row{display:flex;align-items:center;gap:10px;padding:9px 8px;border-radius:10px;cursor:pointer;}
.vn-theme-accent-row:active{background:var(--surface-2);}
.vn-theme-accent-row.active{background:var(--primary-soft);}
.vn-theme-accent-dot{width:18px;height:18px;border-radius:50%;flex-shrink:0;}
.vn-theme-accent-name{flex:1;font-size:13px;font-weight:600;color:var(--text-primary);}
.vn-theme-accent-row.active .material-icons-round{color:var(--primary);font-size:18px;}

.vn-cw-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:var(--overlay);z-index:9700;display:flex;align-items:center;justify-content:center;padding:20px;animation:vnFadeIn .18s;}
.vn-cw-sheet{background:var(--surface);border-radius:20px;padding:20px;width:100%;max-width:340px;box-shadow:var(--shadow-lg);}
.vn-cw-head{display:flex;align-items:center;justify-content:space-between;font-size:15px;font-weight:700;color:var(--text-primary);margin-bottom:14px;}
.vn-cw-close{background:none;border:none;cursor:pointer;color:var(--text-muted);display:flex;}
.vn-cw-body{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;}
.vn-cw-sv{position:relative;width:150px;height:150px;border-radius:12px;overflow:hidden;flex-shrink:0;cursor:crosshair;touch-action:none;box-shadow:inset 0 0 0 1px var(--border);}
.vn-cw-sv-white{position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(to right,#fff,rgba(255,255,255,0));pointer-events:none;}
.vn-cw-sv-black{position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(to top,#000,rgba(0,0,0,0));pointer-events:none;}
.vn-cw-sv-thumb{position:absolute;width:16px;height:16px;border-radius:50%;border:2.5px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,0.35),0 2px 6px rgba(0,0,0,0.3);transform:translate(-50%,-50%);pointer-events:none;}
.vn-cw-ring{position:relative;width:130px;height:130px;border-radius:50%;flex-shrink:0;cursor:pointer;touch-action:none;
  background:conic-gradient(from 0deg,#ff0000,#ffff00,#00ff00,#00ffff,#0000ff,#ff00ff,#ff0000);}
.vn-cw-ring-inner{position:absolute;inset:14px;border-radius:50%;background:var(--surface);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;pointer-events:none;}
.vn-cw-preview{width:26px;height:26px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,0.1);}
.vn-cw-hex{font-size:10px;font-weight:700;color:var(--text-secondary);margin-top:4px;}
.vn-cw-ring-thumb{position:absolute;width:16px;height:16px;border-radius:50%;border:2.5px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,0.35),0 2px 6px rgba(0,0,0,0.3);transform:translate(-50%,-50%);pointer-events:none;}
.vn-cw-hexrow{display:flex;align-items:center;gap:6px;margin-top:16px;padding:10px 12px;border:1.5px solid var(--border);border-radius:10px;background:var(--surface-2);}
.vn-cw-hexrow span{font-weight:700;color:var(--text-muted);font-size:14px;}
.vn-cw-hexrow input{flex:1;border:none;background:none;font-size:14px;font-weight:700;letter-spacing:1px;color:var(--text-primary);text-transform:uppercase;-webkit-user-select:text;user-select:text;}

.page-header{display:flex;align-items:center;gap:4px;padding:0 4px 0 0;background:#fff;border-bottom:1px solid var(--border);height:56px;min-height:56px;max-height:56px;overflow:hidden;flex-shrink:0;position:sticky;top:0;z-index:2;}
.page-header-back{width:44px;height:56px;display:flex;align-items:center;justify-content:center;color:var(--primary);flex-shrink:0;cursor:pointer;}
.page-header-back{margin-left:2px;}
.page-header-back span.material-icons-round{width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:background .15s;}
.page-header-back:active span.material-icons-round{background:#F1F5F9;}
.page-header-title{font-size:17px;font-weight:700;color:var(--text-primary);flex:1;padding-left:2px;}

.vn-top-header-brand{display:flex;align-items:center;gap:8px;padding-left:0;margin-left:-4px;cursor:pointer;min-width:0;}
.vn-top-header-brand{display:flex;align-items:center;height:56px;max-height:56px;overflow:hidden;flex-shrink:1;min-width:0;}
.vn-header-logo-img{height:24px;width:auto;max-width:60vw;object-fit:contain;display:block;flex-shrink:0;}
.vn-header-logo-dark{display:none;}
body.wt-dark .vn-header-logo-light{display:none;}
body.wt-dark .vn-header-logo-dark{display:block;}

/* Wordmark SwiftOTP: swiftotp-dark.png (teks navy) dipakai saat tema
   TERANG karena kontras jelas di atas background terang; swiftotp-light.png
   (teks putih) otomatis dipakai saat tema GELAP (body.wt-dark). */
.vn-swiftotp-wordmark-dark{display:inline-block;}
.vn-swiftotp-wordmark-light{display:none!important;}
body.wt-dark .vn-swiftotp-wordmark-dark{display:none!important;}
body.wt-dark .vn-swiftotp-wordmark-light{display:inline-block!important;}
.vn-top-header-actions{margin-left:auto;display:flex;align-items:center;gap:6px;padding-right:8px;flex-shrink:0;}
.vn-top-header-icon-btn{width:34px;height:34px;border-radius:10px;background:var(--primary-soft);border:none;display:flex;align-items:center;justify-content:center;color:var(--primary);cursor:pointer;flex-shrink:0;transition:background .15s;}
.vn-top-header-icon-btn:active{background:var(--primary-light);}
.vn-top-header-icon-btn .material-icons-round{font-size:19px;}
body.wt-dark .vn-top-header-icon-btn{background:var(--surface-2);color:#E2E8F0;}

.vn-success-sheet-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(10,14,28,0.4);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);z-index:9800;display:none;align-items:flex-end;justify-content:center;transition:background-color .28s ease;}
.vn-success-sheet-overlay.active{display:flex;}
.vn-success-sheet-box{width:100%;max-width:480px;background:var(--surface);border-radius:28px 28px 0 0;padding:14px 24px 28px;box-shadow:0 -14px 44px rgba(15,23,42,.2);text-align:center;transform:translateY(100%);transition:transform .42s var(--ios-ease,cubic-bezier(.32,.72,0,1));}
.vn-success-sheet-box::before{content:'';display:block;width:36px;height:5px;border-radius:3px;background:var(--border);margin:0 auto 14px;}
.vn-success-sheet-overlay.active .vn-success-sheet-box{transform:translateY(0);}
.page-body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;}
.page-section{background:var(--surface);border-radius:var(--ios-radius-lg);margin:12px 16px;overflow:hidden;box-shadow:var(--ios-shadow-card);}
.page-row{display:flex;align-items:center;gap:14px;padding:15px 16px;border-bottom:1px solid var(--ios-sep);cursor:pointer;transition:background 0.15s;min-height:56px;}
.page-row:last-child{border-bottom:none;}
.page-row:active{background:var(--surface-2);}
.page-row-icon{width:40px;height:40px;border-radius:13px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.page-row-text{flex:1;min-width:0;}
.page-row-label{font-size:14px;font-weight:700;color:var(--text-primary);}
.page-row-sub{font-size:12px;color:var(--text-muted);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:400;}

.page-input-wrap{margin:0 16px 12px;background:var(--surface);border-radius:var(--ios-radius-md);padding:4px 16px;box-shadow:var(--ios-shadow-card);}
.page-input-label{font-size:11px;font-weight:700;color:var(--primary);text-transform:uppercase;letter-spacing:0.5px;padding-top:12px;}
.page-input{width:100%;border:none;outline:none;font-size:15px;padding:8px 0 12px;background:transparent;color:var(--text-primary);font-family:inherit;-webkit-user-select:text;user-select:text;}
.page-input::placeholder{color:var(--text-muted);}

/* ══════════════════════════════════════════════════════════════════
   IOS PROFILE PAGE v2
   ══════════════════════════════════════════════════════════════════ */
.ios-profile-wrap{padding:14px 16px 28px;display:flex;flex-direction:column;gap:14px;}
/* ============================================================
   PROFILE HERO v2 — "Cover Sosial Super Modern"
   Mesh-gradient animated cover + floating glass avatar + glass
   stat strip. Menggantikan .ios-profile-hero versi lama, tapi
   tetap dipakai oleh markup lama (fallback) di bawah ini.
   ============================================================ */
.ios-profile-hero{background:var(--surface);border-radius:var(--ios-radius-xl);padding:26px 20px 22px;text-align:center;box-shadow:var(--ios-shadow-card);}
.ios-profile-avatar-wrap{position:relative;width:92px;height:92px;margin:0 auto 14px;}
.ios-profile-avatar{width:92px;height:92px;border-radius:50%;overflow:hidden;cursor:pointer;background:var(--surface-2);display:flex;align-items:center;justify-content:center;box-shadow:0 8px 20px -6px rgba(10,87,214,.3),0 0 0 4px var(--surface);}
.ios-profile-avatar-edit{position:absolute;bottom:0;right:2px;width:28px;height:28px;border-radius:50%;background:var(--primary);box-shadow:0 2px 8px rgba(10,87,214,.4);display:flex;align-items:center;justify-content:center;cursor:pointer;}
.ios-profile-avatar-remove{position:absolute;top:0;left:2px;width:24px;height:24px;border-radius:50%;background:var(--surface);box-shadow:0 1px 6px rgba(0,0,0,.18);display:flex;align-items:center;justify-content:center;cursor:pointer;}
.ios-profile-id-row{display:flex;align-items:center;justify-content:center;gap:6px;}
.ios-profile-id{font-size:15.5px;font-weight:800;color:var(--text-primary);letter-spacing:-0.01em;}
.ios-profile-sub{font-size:12.5px;color:var(--text-secondary);margin-top:4px;font-weight:500;}

.pv2-hero{
  position:relative;
  border-radius:var(--ios-radius-xl);
  overflow:visible;
  box-shadow:var(--ios-shadow-card);
  margin-bottom:14px;
  background:var(--surface);
}
.pv2-cover{
  position:relative;
  height:118px;
  border-radius:var(--ios-radius-xl) var(--ios-radius-xl) 0 0;
  background:
    radial-gradient(120% 140% at 15% -10%, #6EA8FF 0%, transparent 55%),
    radial-gradient(110% 130% at 90% 0%, #7C5CFC 0%, transparent 50%),
    linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  background-size:200% 200%;
  animation:pv2-mesh 10s ease-in-out infinite;
  overflow:hidden;
}
.pv2-cover::after{
  content:"";
  position:absolute; inset:0;
  background-image:
    radial-gradient(circle, rgba(255,255,255,0.55) 1px, transparent 1.4px);
  background-size:16px 16px;
  opacity:.14;
  mix-blend-mode:overlay;
}
@keyframes pv2-mesh{
  0%{background-position:0% 0%;}
  50%{background-position:100% 60%;}
  100%{background-position:0% 0%;}
}
.pv2-cover-actions{
  position:absolute; top:12px; right:12px;
  display:flex; gap:8px; z-index:2;
}
.pv2-glass-btn{
  width:32px; height:32px; border-radius:50%;
  background:rgba(255,255,255,0.22);
  backdrop-filter:blur(10px) saturate(160%);
  -webkit-backdrop-filter:blur(10px) saturate(160%);
  border:1px solid rgba(255,255,255,0.3);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
}
.pv2-glass-btn .material-icons-round{font-size:16px;color:#fff;}
.pv2-avatar-wrap{
  position:absolute;
  left:20px; top:82px;
  width:80px; height:80px;
  z-index:3;
}
.pv2-avatar-ring{
  width:100%; height:100%; border-radius:26px; padding:3px;
  background:linear-gradient(135deg, var(--primary), #7C5CFC, #6EA8FF);
  box-shadow:0 10px 26px -8px rgba(10,87,214,0.55);
}
.pv2-avatar{
  width:100%; height:100%; border-radius:22px; overflow:hidden;
  background:var(--surface-2); cursor:pointer;
  border:3px solid var(--surface);
  display:flex; align-items:center; justify-content:center;
}
.pv2-status-dot{
  position:absolute; bottom:0; right:0;
  width:18px; height:18px; border-radius:50%;
  background:var(--ios-tint-green); border:3px solid var(--surface);
  box-shadow:0 2px 6px rgba(8,25,58,.25);
}
.pv2-avatar-remove{
  position:absolute; top:-4px; left:-4px;
  width:22px; height:22px; border-radius:50%;
  background:var(--surface); border:2px solid var(--surface);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  box-shadow:0 1px 6px rgba(0,0,0,.18);
}
.pv2-body{ padding:44px 18px 16px; background:var(--surface); border-radius:0 0 var(--ios-radius-xl) var(--ios-radius-xl); }
.pv2-name-row{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px;}
.pv2-name{ font-size:18px; font-weight:800; letter-spacing:-0.01em; display:flex; align-items:center; gap:5px;}
.pv2-name .material-icons-round{ font-size:16px; color:var(--primary);}
.pv2-username{ font-size:12px; color:var(--text-muted); font-weight:600; margin-top:3px; display:flex; align-items:center; gap:5px;}
.pv2-username .pv2-copy{ cursor:pointer; font-size:13px; color:var(--text-muted);}
.pv2-tier-pill{
  flex-shrink:0;
  font-size:10.5px; font-weight:800; letter-spacing:.3px;
  padding:6px 12px; border-radius:999px; color:#fff;
  display:flex; align-items:center; gap:4px;
  background:linear-gradient(90deg,#F7B733,#FC4A1A);
  box-shadow:0 4px 12px -3px rgba(252,74,26,0.5);
}
.pv2-tier-pill.silver{ background:linear-gradient(90deg,#B8C1CC,#7C8894); box-shadow:0 4px 12px -3px rgba(124,136,148,0.5);}
.pv2-tier-pill.basic{ background:linear-gradient(90deg,#5B8DEF,var(--primary)); box-shadow:0 4px 12px -3px rgba(10,87,214,0.5);}
.pv2-strip{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:8px; margin-top:16px;
}
.pv2-strip-item{
  border-radius:16px; padding:11px 6px; text-align:center;
  background:var(--surface-2);
  border:1px solid var(--ios-sep, var(--border));
  min-width:0;
}
.pv2-strip-item b{
  display:block; font-size:13px; font-weight:800; letter-spacing:-0.01em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  line-height:1.25;
}
.pv2-strip-item span{ display:block; margin-top:2px; font-size:9px; color:var(--text-muted); font-weight:700; text-transform:uppercase; letter-spacing:.4px;}
.pv2-tabbar{
  display:flex; gap:6px; margin-top:16px;
  background:var(--surface-2); padding:5px; border-radius:14px;
}
.pv2-tab{
  flex:1; text-align:center; padding:9px 4px; border-radius:10px;
  font-size:12px; font-weight:700; color:var(--text-secondary);
  display:flex; align-items:center; justify-content:center; gap:5px;
  cursor:pointer; border:none; background:transparent;
}
.pv2-tab .material-icons-round{ font-size:15px;}
.pv2-tab.active{ background:var(--surface); color:var(--primary); box-shadow:0 3px 10px -3px rgba(10,87,214,0.25);}

.ios-tab-switch{background:var(--surface);border-radius:var(--ios-radius-lg);padding:6px;box-shadow:var(--ios-shadow-card);display:flex;flex-direction:column;gap:3px;}
.ios-tab-switch-btn{width:100%;text-align:left;display:flex;align-items:center;gap:11px;padding:12px 14px;border-radius:14px;border:none;cursor:pointer;font-size:13.5px;font-weight:700;transition:background .18s ease,color .18s ease;background:transparent;color:var(--text-secondary);}
.ios-tab-switch-btn.active{background:var(--primary);color:#fff;box-shadow:0 6px 16px -6px rgba(10,87,214,.5);}
.ios-tab-switch-btn .material-icons-round{font-size:18px;}

.ios-settings-card{background:var(--surface);border-radius:var(--ios-radius-lg);padding:19px;box-shadow:var(--ios-shadow-card);}
.ios-settings-head{display:flex;align-items:center;gap:11px;margin-bottom:15px;}

.ios-upload-zone{background:var(--surface-2);border-radius:var(--ios-radius-lg);padding:22px 16px;text-align:center;margin-bottom:17px;}
.ios-upload-avatar{width:78px;height:78px;border-radius:50%;overflow:hidden;background:var(--surface);border:3px solid var(--surface);box-shadow:0 2px 10px rgba(0,0,0,.1);position:relative;}
.ios-upload-avatar-wrap{position:relative;width:78px;height:78px;margin:0 auto 12px;}
.ios-upload-avatar-cam{position:absolute;bottom:-2px;right:-2px;width:24px;height:24px;border-radius:50%;background:var(--primary);box-shadow:0 1px 5px rgba(0,0,0,0.25);display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:2;}
.ios-upload-btn{background:var(--primary);color:#fff;border:none;border-radius:999px;padding:10px 24px;font-size:13px;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;gap:6px;box-shadow:0 8px 18px -6px rgba(10,87,214,.5);}
.ios-upload-hint{font-size:11px;color:var(--text-muted);margin-top:11px;font-weight:500;}

.ios-field-label{font-size:12px;font-weight:700;color:var(--text-secondary);margin-bottom:6px;}
.ios-field-input{width:100%;background:var(--surface-2);border:none;box-shadow:inset 0 0 0 1.5px var(--ios-sep);border-radius:var(--ios-radius-sm);padding:12px 14px;font-size:13.5px;color:var(--text-primary);outline:none;font-family:inherit;transition:box-shadow .16s ease;}
.ios-field-input:focus{box-shadow:inset 0 0 0 2px var(--primary);}
.ios-field-hint{font-size:10.5px;color:var(--text-muted);margin-top:6px;font-weight:500;}
.ios-field-save{width:100%;background:var(--primary);color:#fff;border:none;border-radius:999px;padding:13px;font-size:13.5px;font-weight:700;cursor:pointer;box-shadow:0 8px 18px -6px rgba(10,87,214,.5);}

.ios-admin-card{background:linear-gradient(160deg,#111827 0%,#1E293B 100%);border-radius:var(--ios-radius-xl);padding:19px 20px;box-shadow:0 12px 28px -10px rgba(0,0,0,.4);}
.page-btn-primary{width:calc(100% - 24px);margin:8px 12px;padding:15px;background:var(--primary);color:#fff;border:none;border-radius:12px;font-size:15px;font-weight:700;cursor:pointer;transition:opacity 0.15s;}
.page-btn-primary:active{opacity:0.85;}


.vn-app-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:16px;}
.vn-app-card{background:var(--surface);border:none;box-shadow:var(--ios-shadow-card);border-radius:var(--ios-radius-md);display:flex;flex-direction:column;align-items:center;gap:9px;padding:16px 6px;cursor:pointer;transition:all .15s;overflow:hidden;min-width:0;}
.vn-app-card:active{transform:scale(0.96);}
.vn-app-card:active,.vn-app-card.selected{box-shadow:inset 0 0 0 2px var(--primary);background:var(--ios-tint-blue-bg);}
.vn-app-card img{width:40px;height:40px;border-radius:12px;object-fit:contain;flex-shrink:0;}
.vn-app-card span{font-size:11px;font-weight:600;color:var(--text-primary);text-align:center;word-break:break-word;line-height:1.3;width:100%;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
.vn-country-list{display:flex;flex-direction:column;gap:8px;}
.vn-country-item{border-bottom:none;}
.vn-country-row{display:flex!important;align-items:center;gap:12px;padding:12px 16px;cursor:pointer;transition:background .15s;}
.vn-country-row:active{background:var(--surface-2);}
.vn-operator-row:active{background:var(--surface-2);}
.vn-country-flag{width:30px;height:20px;border-radius:4px;object-fit:cover;flex-shrink:0;background:#E2E8F0;}
.vn-flag-wrap{width:30px;height:20px;flex-shrink:0;display:flex;align-items:center;justify-content:center;}
.vn-country-info{flex:1;min-width:0;}
.vn-country-name{font-size:14px;font-weight:600;color:var(--text-primary);}
.vn-country-meta{font-size:12px;color:var(--text-secondary);margin-top:1px;}
.vn-badge{background:#EDE9FE;color:#7C3AED;font-size:11px;font-weight:700;padding:2px 8px;border-radius:20px;flex-shrink:0;white-space:nowrap;}
.vn-chevron-btn{background:none!important;border:none!important;padding:4px 6px;cursor:pointer;display:flex!important;align-items:center;justify-content:center;border-radius:50%;transition:background .15s,transform .2s;flex-shrink:0;}
.vn-chevron-btn:active{background:#F1F5F9!important;}
.vn-chevron-btn .material-icons-round{font-size:20px!important;color:#7C3AED!important;transition:transform .25s cubic-bezier(.4,0,.2,1);}
.vn-chevron-btn.open .material-icons-round{transform:rotate(180deg);}
.vn-price-panel{display:none;background:#F8FAFC;border-top:1px solid #EDE9FE;padding:8px 12px 12px;}
.vn-price-panel.open{display:block;}
.vn-inline-price-row{display:flex;align-items:center;gap:8px;padding:9px 10px;border:1px solid #E2E8F0;border-radius:10px;margin-bottom:6px;background:#fff;}
.vn-inline-price-row:last-child{margin-bottom:0;}
.vn-inline-price-info{flex:1;min-width:0;display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.vn-inline-order-btn{background:var(--primary);color:#fff;border:none;border-radius:8px;font-size:12px;font-weight:700;padding:6px 12px;cursor:pointer;white-space:nowrap;font-family:inherit;flex-shrink:0;}
.vn-active-card{background:linear-gradient(135deg,#043FA3,#0A57D6);border-radius:20px;margin:16px;padding:20px;color:#fff;box-shadow:0 8px 24px rgba(4,63,163,0.32);}
.vn-phone-number{font-size:24px;font-weight:800;letter-spacing:0.5px;margin:8px 0;}
.vn-countdown{font-size:13px;opacity:0.85;display:flex;align-items:center;gap:4px;}
.vn-otp-box{background:#fff;border-radius:20px;margin:0 16px 16px;padding:20px;box-shadow:0 2px 12px rgba(0,0,0,0.08);}
.vn-otp-code{font-size:36px;font-weight:800;letter-spacing:4px;color:var(--primary);text-align:center;padding:16px 0;}
.vn-action-row{display:flex;gap:8px;margin-top:12px;}
.vn-btn{flex:1;padding:12px 8px;border:none;border-radius:12px;font-size:13px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;transition:opacity .15s;}
.vn-btn:active{opacity:.8;}
.vn-btn-primary{background:var(--primary);color:#fff;}
.vn-btn-danger{background:#FEE2E2;color:#DC2626;}
.vn-btn-success{background:#F0FDF4;color:#16A34A;}
.vn-btn-secondary{background:#F1F5F9;color:var(--text-primary);}
.vn-amt-btn{background:#F1F5F9;color:var(--text-primary);transition:background .15s,color .15s;}
.vn-amt-btn.selected{background:var(--primary);color:#fff;}
.vn-history-row{display:flex;align-items:center;gap:12px;padding:15px 16px;margin:0 16px 10px;background:var(--surface);border-radius:var(--ios-radius-lg);box-shadow:var(--ios-shadow-card);border:none;}
body.wt-dark .vn-history-row{background:var(--surface);}
.vn-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 24px;text-align:center;color:var(--text-muted);gap:12px;}

/* ══════════════════════════════════════════════════════════════════
   SKELETON LOADING SYSTEM (shimmer + content placeholder)
   Dipakai lewat vnSkelHtml(...) di ui.js. Bentuknya mengikuti
   struktur konten asli (card, list row, banner, teks, avatar dst)
   supaya transisi loading -> konten terasa halus, bukan spinner.
   ══════════════════════════════════════════════════════════════════ */
@keyframes vnShimmer{
  0%{background-position:-450px 0;}
  100%{background-position:450px 0;}
}
.vn-skel-wrap{display:flex;flex-direction:column;gap:12px;}
.vn-skel-row{display:flex;align-items:center;gap:12px;}
.vn-skel-col{display:flex;flex-direction:column;gap:8px;}
.vn-skel{
  position:relative;
  display:block;
  border-radius:var(--radius-sm,10px);
  background:linear-gradient(90deg,var(--vn-skel-base,#E9EEF6) 25%,var(--vn-skel-hi,#F6F9FC) 37%,var(--vn-skel-base,#E9EEF6) 63%);
  background-size:900px 100%;
  animation:vnShimmer 1.4s ease-in-out infinite;
  overflow:hidden;
}
body.wt-dark{--vn-skel-base:#233047;--vn-skel-hi:#2E3D59;}
.vn-skel-circle{border-radius:50%;flex-shrink:0;}
.vn-skel-text{height:12px;border-radius:6px;}
.vn-skel-text.sm{height:9px;}
.vn-skel-text.lg{height:16px;}
.vn-skel-card{border-radius:var(--radius,16px);}
.vn-skel-fill{flex:1;}
.vn-skel-block{width:100%;}
/* skeleton untuk 1 baris list (icon kiri + 2 baris teks + nilai kanan) -- dipakai
   untuk daftar transaksi, riwayat, produk, referral, dsb */
.vn-skel-listitem{display:flex;align-items:center;gap:12px;padding:12px 14px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm,12px);}
/* skeleton untuk kartu grid (mis. grid layanan/aplikasi) */
.vn-skel-gridcard{display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 8px;}
.vn-search{margin:12px 16px;display:flex;align-items:center;gap:8px;background:var(--surface);border:none;box-shadow:var(--ios-shadow-card);border-radius:999px;padding:2px 16px;}
.vn-search input{padding:11px 0;}
.vn-search input{flex:1;border:none;background:transparent;padding:11px 0;font-size:14px;outline:none;color:var(--text-primary);font-weight:500;}
.vn-section-title{font-size:11px;font-weight:700;color:var(--primary);text-transform:uppercase;letter-spacing:.6px;padding:16px 16px 6px;}
.vn-deposit-card{background:#fff;border-radius:14px;margin:0 16px 10px;padding:16px;box-shadow:0 1px 6px rgba(0,0,0,0.07);cursor:pointer;border:2px solid #E2E8F0;transition:border-color .2s;}
.vn-deposit-card.selected{border-color:var(--primary);}
.vn-qr-box{margin:16px;background:#fff;border-radius:16px;padding:20px;box-shadow:0 2px 12px rgba(0,0,0,0.08);display:flex;flex-direction:column;align-items:center;}

.vn-bottom-nav{flex-shrink:0;height:64px;background:#fff;border-top:1px solid var(--border);display:flex;align-items:center;z-index:10;box-shadow:0 -2px 12px rgba(0,0,0,0.06);position:relative;padding:0 4px;}
.vn-bn-item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;cursor:pointer;-webkit-tap-highlight-color:transparent;padding:6px 4px;height:100%;border:none;background:none;font-family:inherit;border-top:2px solid transparent;}
.vn-bn-item .material-icons-round{font-size:23px;color:var(--text-muted);}
.vn-bn-item.active .material-icons-round{color:var(--primary);}
.vn-bn-label{font-size:9.5px;font-weight:600;color:var(--text-muted);line-height:1;}
.vn-bn-item.active .vn-bn-label{color:var(--primary);}
.vn-bn-item.active{border-top-color:var(--primary);}
.vn-bn-fab-wrap{flex:0 0 72px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;cursor:pointer;-webkit-tap-highlight-color:transparent;padding:0 4px;border:none;background:none;font-family:inherit;position:relative;top:-10px;}
.vn-bn-fab{width:52px;height:52px;border-radius:50%;background:var(--primary);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 16px rgba(29,78,216,0.45);transition:transform 0.15s;}
.vn-bn-fab-wrap:active .vn-bn-fab{transform:scale(0.92);}
.vn-bn-fab-wrap.active .vn-bn-fab{box-shadow:0 4px 18px rgba(29,78,216,0.65);transform:scale(1.05);}
.vn-bn-fab-wrap.active .vn-bn-fab-label{color:var(--primary);font-weight:800;}
.vn-bn-fab .material-icons-round{font-size:26px;color:#fff;}
.vn-bn-fab-label{font-size:9.5px;font-weight:600;color:var(--primary);line-height:1;margin-top:2px;}
/* ══════════════════════════════════════════════════════════════════
   IOS BELI PAGE v2
   ══════════════════════════════════════════════════════════════════ */
.ios-beli-wrap{padding:14px 0 24px;display:flex;flex-direction:column;gap:14px;}
.ios-beli-header{display:flex;align-items:center;justify-content:space-between;padding:4px 0 2px;}
.ios-beli-name{font-size:15px;font-weight:800;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-0.01em;}
.ios-beli-greet{font-size:12px;color:var(--text-secondary);font-weight:500;}
.ios-hbtn{position:relative;width:36px;height:36px;border-radius:12px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--ios-sep);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text-secondary);flex-shrink:0;}
.ios-hbtn:active{transform:scale(0.92);}
.ios-hbtn .material-icons-round{font-size:17px;}
.ios-hbtn-dot{display:none;position:absolute;top:5px;right:5px;width:8px;height:8px;border-radius:50%;background:var(--danger);border:2px solid var(--surface);}

.ios-saldo-row{display:flex;align-items:center;justify-content:space-between;background:var(--surface);
  border-radius:var(--ios-radius-lg);padding:14px 16px;box-shadow:var(--ios-shadow-card);}
.ios-saldo-topup{background:var(--ios-tint-green-bg);color:var(--ios-tint-green);border:none;border-radius:999px;
  padding:9px 16px;font-size:12px;font-weight:700;cursor:pointer;display:flex;align-items:center;gap:5px;}
.ios-saldo-topup:active{transform:scale(0.95);}

.ios-buy-banner{position:relative;border-radius:var(--ios-radius-lg);padding:18px;overflow:hidden;color:#fff;
  background:linear-gradient(135deg,var(--primary) 0%,var(--primary-dark) 100%);
  box-shadow:0 12px 28px -10px rgba(10,87,214,0.55);}
.ios-buy-banner::after{content:'';position:absolute;top:-40px;right:-30px;width:140px;height:140px;border-radius:50%;background:rgba(255,255,255,0.09);}
.ios-buy-banner-cta{position:relative;z-index:1;background:rgba(255,255,255,0.2);border:none;color:#fff;border-radius:999px;
  padding:9px 16px;font-size:12.5px;font-weight:700;cursor:pointer;display:flex;align-items:center;gap:4px;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);}

.ios-section-card{background:var(--surface);border-radius:var(--ios-radius-lg);padding:16px;box-shadow:var(--ios-shadow-card);}
.ios-section-head-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}
.ios-section-head-row .ios-title-sm{font-size:14.5px;}
.ios-icon-btn-ghost{width:32px;height:32px;border-radius:10px;background:var(--surface-2);border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text-secondary);}
.ios-icon-btn-ghost:active{transform:scale(0.9);}

.ios-pending-empty{text-align:center;padding:14px 8px 4px;animation:iosPendingFadeIn .28s ease both;}
.ios-pending-empty img{width:96px;height:96px;max-width:96px;max-height:96px;margin:0 auto 12px;display:block;object-fit:contain;opacity:0.92;}
.ios-pending-empty-title{font-size:13.5px;font-weight:800;color:var(--text-primary);margin-bottom:2px;}
.ios-pending-empty-sub{font-size:11.5px;color:var(--text-secondary);margin-bottom:16px;font-weight:400;}
@keyframes iosPendingFadeIn{from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:translateY(0);}}

.ios-warn-card{display:flex;flex-direction:column;gap:12px;background:var(--ios-tint-orange-bg);
  border-radius:var(--ios-radius-lg);padding:16px;}
.ios-warn-title{font-size:13.5px;font-weight:800;color:var(--text-primary);}
.ios-warn-btn{flex:1;min-width:130px;background:var(--surface);border:none;box-shadow:inset 0 0 0 1px var(--ios-sep);
  color:var(--text-primary);border-radius:999px;padding:10px 14px;font-size:12px;font-weight:700;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:5px;}
.ios-warn-btn:active{transform:scale(0.96);}
.ios-warn-btn .material-icons-round{font-size:13px;color:var(--ios-tint-orange);}

/* — Pending order card — */
.ios-pend-card{background:var(--surface-2);border-radius:var(--ios-radius-lg);padding:15px 16px;box-shadow:inset 0 0 0 1px var(--ios-sep);}
.ios-pend-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:11px;gap:8px;}
.ios-pend-phone{display:flex;align-items:center;gap:7px;min-width:0;}
.ios-pend-phone-txt{font-size:15px;font-weight:800;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-0.01em;}
.ios-pend-badge-ok{background:var(--ios-tint-green-bg);color:var(--ios-tint-green);font-size:11px;font-weight:700;padding:4px 11px;border-radius:20px;display:flex;align-items:center;gap:3px;flex-shrink:0;}
.ios-pend-badge-timer{background:var(--ios-tint-orange-bg);color:var(--ios-tint-orange);font-size:11px;font-weight:700;padding:4px 11px;border-radius:20px;flex-shrink:0;}
.ios-pend-meta{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}
.ios-pend-op{background:var(--ios-tint-blue-bg);color:var(--ios-tint-blue);font-size:11px;font-weight:700;padding:4px 11px;border-radius:20px;text-transform:uppercase;}
.ios-pend-price{font-size:13px;font-weight:800;color:var(--text-primary);}
.ios-pend-box{background:var(--surface);border-radius:var(--ios-radius-md);padding:11px 13px;}
.ios-pend-actions{display:flex;gap:8px;margin-top:12px;}
.ios-pend-btn{flex:1;padding:11px;border-radius:999px;border:none;font-size:12.5px;font-weight:700;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:5px;}
.ios-pend-btn:active{transform:scale(0.96);}
.ios-pend-btn-neutral{background:var(--surface);box-shadow:inset 0 0 0 1px var(--ios-sep);color:var(--text-primary);}
.ios-pend-btn-success{background:var(--ios-tint-green-bg);color:var(--ios-tint-green);}
.ios-pend-btn-danger{background:var(--ios-tint-red-bg);color:var(--ios-tint-red);}
.ios-pend-btn-disabled{background:var(--surface-2);color:var(--text-muted);cursor:not-allowed;}

/* ══════════════════════════════════════════════════════════════════
   IOS ACTIVITY PAGE v2
   ══════════════════════════════════════════════════════════════════ */
.ios-seg-bar{display:flex;gap:4px;background:var(--surface-2);border-radius:999px;padding:4px;margin:12px 16px 14px;}
.ios-seg-item{flex:1;padding:9px 4px;font-size:12.5px;font-weight:700;text-align:center;border-radius:999px;
  background:transparent;color:var(--text-muted);border:none;cursor:pointer;transition:background .18s ease,color .18s ease;}
.ios-seg-item.active{background:var(--surface);color:var(--text-primary);box-shadow:0 1px 4px rgba(15,23,42,.1);}

.ios-num-card{background:var(--surface);border-radius:var(--ios-radius-lg);margin:12px 16px;padding:17px;box-shadow:var(--ios-shadow-card);}
.ios-num-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}
.ios-num-app{display:flex;align-items:center;gap:9px;font-size:14.5px;font-weight:800;color:var(--text-primary);}
.ios-num-phone{font-size:13px;font-weight:700;color:var(--text-primary);}
.ios-num-infobox{background:var(--surface-2);border-radius:var(--ios-radius-sm);padding:11px 13px;font-size:12.5px;color:var(--text-secondary);margin-bottom:13px;font-weight:500;}
.ios-num-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px 16px;font-size:12.5px;}
.ios-num-grid-label{color:var(--text-muted);margin-bottom:2px;font-weight:600;font-size:11px;}
.ios-num-grid-val{font-weight:700;color:var(--text-primary);}

.ios-dep-card{cursor:pointer;background:var(--surface);border-radius:var(--ios-radius-lg);margin:12px 16px;padding:15px 16px;box-shadow:var(--ios-shadow-card);}
.ios-dep-card:active{transform:scale(0.98);}
.ios-dep-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:13px;}
.ios-dep-id{font-size:11.5px;color:var(--text-muted);font-weight:600;}
.ios-status-pill{font-size:11px;font-weight:700;padding:4px 12px;border-radius:20px;}

/* — Detail sheet (bottom modal) — */
.ios-detail-overlay{position:fixed;inset:0;background:rgba(15,23,42,.5);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);z-index:9999;display:flex;align-items:flex-end;justify-content:center;animation:vnFadeIn .2s;}
.ios-detail-sheet{background:var(--surface);border-radius:28px 28px 0 0;padding:10px 20px 32px;width:100%;max-width:480px;max-height:88vh;overflow-y:auto;}
.ios-detail-grabber{width:36px;height:5px;border-radius:3px;background:var(--ios-sep);margin:6px auto 16px;}
.ios-detail-title-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;}
.ios-detail-title{font-size:16.5px;font-weight:800;color:var(--text-primary);letter-spacing:-0.01em;}
.ios-detail-close{background:var(--surface-2);border:none;cursor:pointer;width:32px;height:32px;border-radius:10px;display:flex;align-items:center;justify-content:center;}
.ios-detail-idbox{background:var(--surface-2);border-radius:var(--ios-radius-md);padding:12px 14px;margin-bottom:14px;}
.ios-detail-idlabel{font-size:10.5px;color:var(--text-muted);font-weight:700;letter-spacing:0.03em;text-transform:uppercase;margin-bottom:3px;}
.ios-detail-idval{font-size:14.5px;font-weight:800;color:var(--text-primary);letter-spacing:.4px;}
.ios-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;background:var(--surface-2);border-radius:var(--ios-radius-md);padding:14px;margin-bottom:14px;}
.ios-detail-grid-label{font-size:10.5px;color:var(--text-muted);font-weight:700;margin-bottom:2px;text-transform:uppercase;letter-spacing:0.02em;}
.ios-detail-grid-val{font-size:13px;font-weight:700;color:var(--text-primary);}
.ios-detail-phone-box{background:var(--surface-2);border-radius:var(--ios-radius-md);padding:12px 14px;margin-bottom:14px;}
.ios-detail-otp{margin-top:14px;}
.ios-detail-otp-code{font-size:24px;font-weight:900;letter-spacing:7px;color:var(--primary);text-align:center;padding:14px;background:var(--ios-tint-blue-bg);border-radius:var(--ios-radius-md);}
.ios-detail-map{height:160px;border-radius:var(--ios-radius-lg);overflow:hidden;position:relative;margin:14px 0;background:var(--surface-2);}
.ios-detail-footer{text-align:center;font-size:11px;color:var(--text-muted);margin-top:6px;font-weight:500;}

/* ══════════════════════════════════════════════════════════════════
   IOS SHELL v2 -- Header + Bottom Tab Bar dirombak total
   ══════════════════════════════════════════════════════════════════ */
.page-header{
  height:auto;min-height:0;max-height:none;background:rgba(255,255,255,0.82);
  -webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
  border-bottom:none;box-shadow:inset 0 -1px 0 var(--ios-sep);
  padding:14px 16px 12px;
}
body.wt-dark .page-header{background:rgba(23,25,31,0.78);}
.vn-top-header-brand{height:auto;}
.vn-header-logo-img{height:22px;width:auto;}
.vn-top-header-icon-btn{
  width:36px;height:36px;border-radius:12px;background:var(--surface-2);
  box-shadow:inset 0 0 0 1px var(--ios-sep);color:var(--text-primary);
}
.vn-top-header-icon-btn:active{transform:scale(0.92);background:var(--border);}
.vn-top-header-icon-btn .material-icons-round{font-size:18px;}
.ios-balance-pill{
  display:flex;align-items:center;gap:6px;background:var(--ios-tint-blue-bg);
  color:var(--ios-tint-blue);font-size:12.5px;font-weight:700;padding:8px 14px 8px 10px;
  border-radius:999px;border:none;cursor:pointer;white-space:nowrap;
}
.ios-balance-pill .material-icons-round{font-size:16px;}
.ios-avatar-btn{
  width:34px;height:34px;border-radius:50%;overflow:hidden;cursor:pointer;flex-shrink:0;
  background:linear-gradient(135deg,var(--primary-dark),var(--primary));
  display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 2px var(--surface),0 0 0 3px var(--ios-sep);
}

.vn-bottom-nav{
  height:auto;background:rgba(255,255,255,0.86);
  -webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
  border-top:none;box-shadow:inset 0 1px 0 var(--ios-sep);
  padding:8px 6px calc(6px + env(safe-area-inset-bottom));
}
body.wt-dark .vn-bottom-nav{background:rgba(23,25,31,0.82);}
.vn-bn-item{border-top:none;border-radius:14px;gap:2px;padding:6px 4px;}
.vn-bn-item .material-icons-round{font-size:24px;color:var(--text-muted);transition:transform .18s var(--ios-ease,cubic-bezier(0.32,0.72,0,1));}
.vn-bn-item.active .material-icons-round{transform:translateY(-1px) scale(1.06);}
.vn-bn-label{font-size:10px;font-weight:600;letter-spacing:0.1px;}
.vn-bn-fab-wrap{top:-16px;}
.vn-bn-fab{
  width:56px;height:56px;background:linear-gradient(160deg,var(--primary) 0%,var(--primary-dark) 100%);
  box-shadow:0 8px 20px -4px rgba(10,87,214,0.55),0 0 0 5px var(--bg);
}
body.wt-dark .vn-bn-fab{box-shadow:0 8px 20px -4px rgba(10,87,214,0.6),0 0 0 5px var(--bg);}
.vn-bn-fab .material-icons-round{font-size:27px;}

/* ══════════════════════════════════════════════════════════════════
   IOS HOME v2 -- kartu, quick action, empty state
   ══════════════════════════════════════════════════════════════════ */
.ios-home-wrap{padding:14px 16px 28px;display:flex;flex-direction:column;gap:16px;}

.ios-banner{
  position:relative;border-radius:var(--ios-radius-lg);overflow:hidden;
  background:var(--surface-2);min-height:120px;box-shadow:var(--ios-shadow-card);
}
.ios-banner-dots{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);display:flex;gap:5px;}

.ios-card{
  background:var(--surface);border-radius:var(--ios-radius-lg);
  box-shadow:var(--ios-shadow-card);padding:18px;
}
.ios-card-flat{background:var(--surface);border-radius:var(--ios-radius-lg);overflow:hidden;box-shadow:var(--ios-shadow-card);}

.ios-eyebrow{font-size:11px;font-weight:700;letter-spacing:0.02em;color:var(--text-muted);text-transform:uppercase;}
.ios-title-sm{font-size:15px;font-weight:800;color:var(--text-primary);letter-spacing:-0.01em;}

.ios-icon-chip{width:38px;height:38px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.ios-icon-chip .material-icons-round{font-size:19px;}

.ios-balance-figure{font-size:30px;font-weight:800;color:var(--text-primary);letter-spacing:-0.02em;line-height:1.15;}
.ios-balance-label{font-size:12px;color:var(--text-muted);font-weight:600;margin-top:2px;}

.ios-action-row{display:flex;gap:10px;margin-top:16px;}
.ios-btn{
  flex:1;display:flex;align-items:center;justify-content:center;gap:6px;
  padding:12px;border-radius:999px;font-size:13px;font-weight:700;cursor:pointer;
  border:none;font-family:inherit;transition:transform .12s ease;
}
.ios-btn:active{transform:scale(0.96);}
.ios-btn .material-icons-round{font-size:17px;}
.ios-btn-tonal{background:var(--surface-2);color:var(--text-primary);box-shadow:inset 0 0 0 1px var(--ios-sep);}
.ios-btn-primary{background:var(--primary);color:#fff;box-shadow:0 6px 16px -4px rgba(10,87,214,0.5);}

.ios-feature-row{display:flex;align-items:center;gap:14px;padding:16px;}
.ios-feature-thumb{width:44px;height:44px;border-radius:14px;object-fit:contain;flex-shrink:0;background:var(--ios-tint-cyan-bg);padding:6px;}
.ios-feature-cta{
  flex-shrink:0;background:var(--primary);color:#fff;border:none;border-radius:999px;
  padding:10px 20px;font-size:13px;font-weight:700;cursor:pointer;letter-spacing:0.2px;
  box-shadow:0 6px 14px -3px rgba(10,87,214,0.5);
}
.ios-marquee-row{display:flex;align-items:center;gap:10px;padding:11px 16px;border-top:1px solid var(--ios-sep);}
.ios-marquee-row .material-icons-round{font-size:17px;color:var(--text-muted);flex-shrink:0;}
.ios-marquee-track{overflow:hidden;flex:1;}
.ios-marquee-track span{display:inline-block;animation:vnMarquee 12s linear infinite;font-size:11.5px;color:var(--text-secondary);white-space:nowrap;font-weight:500;}

.ios-maintenance-bar{display:none;align-items:center;gap:12px;background:var(--ios-tint-orange-bg);border-radius:var(--ios-radius-md);padding:14px 16px;}
.ios-maintenance-bar .material-icons-round{color:var(--ios-tint-orange);font-size:22px;flex-shrink:0;}

.ios-empty-card{background:var(--surface);border-radius:var(--ios-radius-lg);box-shadow:var(--ios-shadow-card);padding:28px 20px;text-align:center;}
.ios-empty-card img{width:88px;height:auto;margin:0 auto 14px;display:block;}
.ios-empty-title{font-size:14.5px;font-weight:800;color:var(--text-primary);margin-bottom:4px;}
.ios-empty-sub{font-size:12.5px;color:var(--text-secondary);line-height:1.6;margin-bottom:16px;font-weight:400;}

/* ══════════════════════════════════════════════════════════════════
   HOME v3 -- hero saldo gradasi + menu cepat + warning bar
   ══════════════════════════════════════════════════════════════════ */
.home2-hero{
  background:linear-gradient(135deg, var(--primary) 0%, #063C9E 60%, #041F4D 100%);
  border-radius:var(--ios-radius-xl); padding:20px; position:relative; overflow:hidden;
  box-shadow:0 14px 30px -10px rgba(10,87,214,.45);
}
.home2-hero::before{
  content:""; position:absolute; width:220px; height:220px; border-radius:50%; right:-70px; top:-90px;
  background:radial-gradient(circle, rgba(255,255,255,.14), transparent 70%); pointer-events:none;
}
.home2-hero-top{ display:flex; justify-content:space-between; align-items:flex-start; position:relative; z-index:1; }
.home2-hero-label{ color:rgba(255,255,255,.68); font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; }
.home2-hero-val{ color:#fff; font-size:28px; font-weight:800; margin-top:6px; letter-spacing:-0.03em; }
.home2-hero-refresh{
  width:34px; height:34px; border-radius:11px; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.2);
  display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0;
}
.home2-hero-refresh .material-icons-round{ font-size:17px; color:#fff; }
.home2-hero-refresh.spin .material-icons-round{ animation:sc-spin 0.8s linear infinite; }
.home2-hero-actions{ display:flex; gap:9px; margin-top:18px; position:relative; z-index:1; }
.home2-hero-btn{
  flex:1; display:flex; align-items:center; justify-content:center; gap:7px;
  padding:12px 8px; border-radius:14px; font-size:13px; font-weight:700; cursor:pointer;
  border:none; font-family:inherit; transition:transform .12s ease;
}
.home2-hero-btn:active{ transform:scale(.96); }
.home2-hero-btn .material-icons-round{ font-size:17px; }
.home2-hero-btn.solid{ background:#fff; color:var(--primary); }
.home2-hero-btn.tonal{ background:rgba(255,255,255,.14); color:#fff; border:1px solid rgba(255,255,255,.2); }

.home2-quick-grid{
  background:var(--surface); border-radius:var(--ios-radius-xl); box-shadow:var(--ios-shadow-card);
  padding:18px 8px; display:grid; grid-template-columns:repeat(4,1fr); gap:6px;
}
.home2-quick-item{ display:flex; flex-direction:column; align-items:center; gap:8px; cursor:pointer; border:none; background:none; font-family:inherit; padding:0; }
.home2-quick-icon{ width:46px; height:46px; border-radius:15px; display:flex; align-items:center; justify-content:center; }
.home2-quick-icon .material-icons-round{ font-size:20px; }
.home2-quick-item span{ font-size:10.5px; font-weight:700; color:var(--text-secondary); }

.home2-warn-bar{
  display:flex; align-items:center; gap:10px; background:var(--surface); border-radius:var(--ios-radius-md);
  padding:11px 14px; box-shadow:var(--ios-shadow-card);
}
.home2-warn-bar .material-icons-round{ font-size:17px; color:var(--ios-tint-orange); flex-shrink:0; }
.home2-warn-track{ overflow:hidden; flex:1; }
.home2-warn-track span{ display:inline-block; animation:vnMarquee 12s linear infinite; font-size:11px; color:var(--text-secondary); white-space:nowrap; font-weight:500; }

.home2-section-head{ display:flex; align-items:center; justify-content:space-between; padding:0 2px; }
.home2-section-head h3{ font-size:13.5px; font-weight:800; color:var(--text-primary); letter-spacing:-0.01em; }
.home2-section-head a{ font-size:11.5px; font-weight:700; color:var(--primary); text-decoration:none; cursor:pointer; }

.home2-feature-card{ background:var(--surface); border-radius:var(--ios-radius-xl); box-shadow:var(--ios-shadow-card); padding:14px; display:flex; align-items:center; gap:12px; }
.home2-feature-card img{ width:44px; height:44px; border-radius:14px; object-fit:contain; flex-shrink:0; background:var(--ios-tint-cyan-bg); padding:6px; }
.home2-feature-title{ font-size:14px; font-weight:800; color:var(--text-primary); line-height:1.2; letter-spacing:-0.01em; }
.home2-feature-sub{ font-size:11.5px; color:var(--text-secondary); margin-top:2px; font-weight:500; }
.home2-feature-cta{ flex-shrink:0; background:var(--primary); color:#fff; border:none; border-radius:999px; padding:9px 18px; font-size:12.5px; font-weight:700; cursor:pointer; box-shadow:0 6px 14px -3px rgba(10,87,214,.5); }

.home2-trend-card{ background:var(--surface); border-radius:var(--ios-radius-xl); box-shadow:var(--ios-shadow-card); padding:16px; }
.home2-trend-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
.home2-trend-head h3{ font-size:14.5px; font-weight:800; color:var(--text-primary); letter-spacing:-0.01em; }
.home2-live-badge{ display:flex; align-items:center; gap:5px; background:var(--ios-tint-green-bg); color:var(--ios-tint-green); font-size:10.5px; font-weight:800; padding:5px 10px; border-radius:999px; }
.home2-live-dot{ width:6px; height:6px; border-radius:50%; background:var(--ios-tint-green); animation:home2LivePulse 1.6s ease-in-out infinite; }
@keyframes home2LivePulse{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }
.home2-trend-row{ display:flex; align-items:center; gap:12px; padding:11px 0; border-bottom:1px solid var(--ios-sep); }
.home2-trend-row:last-child{ border-bottom:none; padding-bottom:2px; }
.home2-trend-flag{ width:26px; height:26px; border-radius:8px; background:rgba(244,63,94,0.12); display:flex; align-items:center; justify-content:center; font-size:18px; flex-shrink:0; overflow:hidden; padding:1.5px; box-sizing:border-box; }
.home2-trend-flag img{ width:100%; height:100%; object-fit:contain; display:block; border-radius:4px; }
.home2-trend-mid{ flex:1; min-width:0; }
.home2-trend-mid b{ font-size:13px; font-weight:700; color:var(--text-primary); display:block; }
.home2-trend-mid span{ font-size:10.5px; color:var(--text-muted); font-weight:500; }
.home2-trend-right{ text-align:right; flex-shrink:0; }
.home2-trend-right b{ font-size:13px; font-weight:800; color:var(--text-primary); display:block; }
.home2-trend-right span{ font-size:10px; color:var(--ios-tint-green); font-weight:700; }

/* ══════════════════════════════════════════════════════════════════
   SYSTEM UPTIME + SERVER STATUS
   ══════════════════════════════════════════════════════════════════ */
.home2-uptime-card{ background:var(--surface); border-radius:var(--ios-radius-xl); box-shadow:var(--ios-shadow-card); padding:18px; }
.home2-uptime-card h3{ font-size:14.5px; font-weight:800; color:var(--text-primary); letter-spacing:-0.01em; margin-bottom:14px; }
.home2-uptime-pct{ font-size:32px; font-weight:800; color:var(--text-primary); letter-spacing:-0.02em; line-height:1; }
.home2-uptime-sub{ font-size:12px; color:var(--text-muted); font-weight:600; margin-top:6px; }
.home2-uptime-bars{ display:flex; align-items:stretch; gap:4px; height:44px; margin-top:16px; }
.home2-uptime-bar{ flex:1; border-radius:4px; background:var(--ios-tint-green); min-width:3px; height:100%; }
.home2-uptime-bar.off{ background:#EF4444; opacity:.7; }
.home2-uptime-bar.pending{ background:var(--ios-sep); }
.home2-uptime-foot{ display:flex; justify-content:space-between; margin-top:10px; font-size:11px; color:var(--text-muted); font-weight:600; }

.home2-status-card{ background:var(--surface); border-radius:var(--ios-radius-xl); box-shadow:var(--ios-shadow-card); padding:18px; }
.home2-status-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.home2-status-head h3{ font-size:14.5px; font-weight:800; color:var(--text-primary); letter-spacing:-0.01em; }
.home2-status-badge{ display:flex; align-items:center; gap:6px; background:var(--ios-tint-green-bg); color:var(--ios-tint-green); font-size:11px; font-weight:800; padding:5px 11px; border-radius:999px; }
.home2-status-badge svg{ width:13px; height:13px; }
.home2-status-badge.warn{ background:var(--ios-tint-orange-bg); color:var(--ios-tint-orange); }
.home2-server-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.home2-server-card{ border:1px solid var(--ios-sep); border-radius:var(--ios-radius-md); padding:12px; background:var(--surface-2); }
.home2-server-top{ display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.home2-server-flag{ width:20px; height:14px; border-radius:3px; overflow:hidden; flex-shrink:0; background:rgba(244,63,94,0.12); display:flex; align-items:center; justify-content:center; padding:1px; box-sizing:border-box; }
.home2-server-flag img{ width:100%; height:100%; object-fit:contain; display:block; border-radius:1px; }
.home2-server-name{ flex:1; min-width:0; font-size:12.5px; font-weight:700; color:var(--text-primary); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.home2-server-dot{ width:8px; height:8px; border-radius:50%; background:var(--ios-tint-green); flex-shrink:0; }
.home2-server-dot.off{ background:#EF4444; }
.home2-server-bottom{ display:flex; align-items:center; justify-content:space-between; }
.home2-server-latency{ display:flex; align-items:center; gap:5px; background:var(--ios-tint-green-bg); color:var(--ios-tint-green); font-size:10.5px; font-weight:700; padding:3px 8px; border-radius:999px; transition:background-color .3s ease, color .3s ease; }
.home2-server-latency svg{ width:11px; height:11px; }
.home2-server-latency.lat-great{ background:rgba(16,185,129,0.14); color:#10B981; }
.home2-server-latency.lat-good{ background:var(--ios-tint-green-bg); color:var(--ios-tint-green); }
.home2-server-latency.lat-slow{ background:var(--ios-tint-orange-bg); color:var(--ios-tint-orange); }
.home2-server-latency.lat-bad{ background:rgba(239,68,68,0.14); color:#EF4444; }
.home2-server-latency.lat-verybad{ background:rgba(153,27,27,0.18); color:#991B1B; }

.home2-signal-bars{ display:flex; align-items:flex-end; height:13px; gap:1.5px; }
.home2-signal-bars .sbar{ width:3px; border-radius:1px; background:var(--ios-sep); opacity:.35; transform-origin:bottom; transition:background-color .3s ease, opacity .3s ease; }
.home2-signal-bars .sbar:nth-child(1){ height:30%; }
.home2-signal-bars .sbar:nth-child(2){ height:55%; }
.home2-signal-bars .sbar:nth-child(3){ height:78%; }
.home2-signal-bars .sbar:nth-child(4){ height:100%; }
.home2-signal-bars .sbar.on{ opacity:1; background:var(--vn-sig-color, var(--ios-tint-green)); animation:vnSignalPulse var(--vn-sig-dur, 1.2s) ease-in-out infinite; }
.home2-signal-bars .sbar.on:nth-child(1){ animation-delay:0s; }
.home2-signal-bars .sbar.on:nth-child(2){ animation-delay:.08s; }
.home2-signal-bars .sbar.on:nth-child(3){ animation-delay:.16s; }
.home2-signal-bars .sbar.on:nth-child(4){ animation-delay:.24s; }
@keyframes vnSignalPulse{
  0%, 100%{ transform:scaleY(1); opacity:1; }
  50%{ transform:scaleY(.55); opacity:.65; }
}
.vn-icon{ display:block; flex-shrink:0; }
.vn-icon.vn-wifi-anim{ animation:vnWifiBounce var(--vn-wifi-dur, 1.4s) ease-in-out infinite; }
@keyframes vnWifiBounce{
  0%, 100%{ transform:translateY(0); }
  50%{ transform:translateY(-2px); }
}

.ios-pill-link{
  display:inline-flex;align-items:center;gap:7px;background:var(--primary);color:#fff;
  border:none;border-radius:999px;padding:11px 22px;font-size:13px;font-weight:700;
  text-decoration:none;box-shadow:0 8px 18px -4px rgba(10,87,214,0.5);
}
.ios-pill-link .material-icons-round{font-size:16px;}

/* ── Toast / Notifikasi — iOS-native banner ──────────────────────────
   Kapsul (pill) mengambang, kaca buram (blur+saturate) senada token
   "iOS Design System v2" (--ios-tint-*, --ios-ease) yang dipakai
   komponen lain. Masuk/keluar dengan gerak spring (fade+scale+slide),
   bisa di-swipe ke atas buat nutup manual (lihat _bindToastSwipe di
   utils.js). Satu elemen dipakai ulang untuk semua jenis toast di
   seluruh halaman (success/error/warning/info/loading). */
.toast{
  position:fixed;top:calc(env(safe-area-inset-top,0px) + 60px);left:50%;
  transform:translateX(-50%);
  display:flex;align-items:center;gap:9px;
  width:max-content;max-width:min(376px, calc(100vw - 32px));
  padding:11px 14px 11px 11px;
  border-radius:24px;
  background:color-mix(in srgb, var(--surface) 80%, transparent);
  color:var(--text-primary);
  font-size:13.5px;font-weight:600;letter-spacing:-0.01em;line-height:1.32;
  border:0.5px solid color-mix(in srgb, var(--text-primary) 8%, transparent);
  box-shadow:0 1px 1px rgba(15,23,42,0.05),0 10px 22px -6px rgba(15,23,42,0.16),0 22px 46px -16px rgba(15,23,42,0.14);
  backdrop-filter:blur(26px) saturate(1.8);
  -webkit-backdrop-filter:blur(26px) saturate(1.8);
  z-index:99999;touch-action:none;cursor:grab;
  animation:toastSpringIn 0.46s var(--ios-ease,cubic-bezier(.32,.72,0,1)) both;
  will-change:transform,opacity;
}
.toast.toast-out{animation:toastSpringOut 0.26s cubic-bezier(.4,0,1,1) forwards;}
.toast.toast-dragging{animation:none!important;cursor:grabbing;}
.toast .toast-icon{display:none;}
.toast-icon-badge{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.toast-icon-badge svg{width:15px;height:15px;display:block;}
.toast.toast-success .toast-icon-badge{background:var(--ios-tint-green-bg,#E7F9EF);color:var(--ios-tint-green,#12B76A);}
.toast.toast-error .toast-icon-badge{background:var(--ios-tint-red-bg,#FEECEB);color:var(--ios-tint-red,#F04438);}
.toast.toast-warning .toast-icon-badge{background:var(--ios-tint-orange-bg,#FFF4E4);color:var(--ios-tint-orange,#F79009);}
.toast.toast-info .toast-icon-badge{background:var(--ios-tint-blue-bg,#EAF1FF);color:var(--ios-tint-blue,#0A57D6);}
.toast.toast-loading .toast-icon-badge{background:var(--ios-tint-blue-bg,#EAF1FF);color:var(--ios-tint-blue,#0A57D6);}
.toast.toast-loading .toast-icon-badge svg{animation:toastSpin .85s linear infinite;transform-origin:50% 50%;}
.toast-msg{flex:1;min-width:0;overflow-wrap:break-word;}
.toast-close-btn{width:18px;height:18px;border-radius:50%;border:none;flex-shrink:0;padding:0;display:flex;align-items:center;justify-content:center;cursor:pointer;background:color-mix(in srgb, var(--text-primary) 7%, transparent);color:var(--text-muted);transition:background .15s ease,color .15s ease,transform .12s ease;}
.toast-close-btn:hover{background:color-mix(in srgb, var(--text-primary) 13%, transparent);color:var(--text-primary);}
.toast-close-btn:active{transform:scale(.86);}
.toast-close-btn svg{width:9px;height:9px;}

/* ══════ Dokumentasi API — code block ala editor modern ══════ */
.vn-code-block{position:relative;background:#0B1120;border:1px solid #1E293B;border-radius:12px;overflow:hidden;box-shadow:0 1px 2px rgba(0,0,0,.06),0 4px 16px -4px rgba(0,0,0,.25);}
.vn-code-block-bar{display:flex;align-items:center;gap:8px;padding:8px 10px;background:#111827;border-bottom:1px solid #1E293B;}
.vn-code-block-dots{display:flex;gap:5px;flex-shrink:0;}
.vn-code-block-dots span{width:8px;height:8px;border-radius:50%;background:#334155;}
.vn-code-block-lang{flex:1;font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#64748B;}
.vn-code-block-copy{flex-shrink:0;width:24px;height:24px;border-radius:7px;border:none;background:rgba(255,255,255,.06);cursor:pointer;display:flex;align-items:center;justify-content:center;color:#94A3B8;transition:background .15s,color .15s;}
.vn-code-block-copy:hover{background:rgba(255,255,255,.14);color:#E2E8F0;}
.vn-code-block-pre{margin:0;padding:12px 14px;font-family:'SFMono-Regular',Consolas,'Roboto Mono',monospace;font-size:11.5px;color:#E2E8F0;white-space:pre-wrap;word-break:break-word;line-height:1.7;-webkit-overflow-scrolling:touch;overflow-x:auto;}
.vn-json-key{color:#7DD3FC;}
.vn-json-str{color:#86EFAC;}
.vn-json-num{color:#FDBA74;}
.vn-json-bool{color:#F0ABFC;}
.vn-json-null{color:#94A3B8;}

/* ══════ Dokumentasi API v2 — gaya "docs website" flat (rujukan: RumahOTP
   developer docs) — bg putih polos, tanpa shadow/card, garis pemisah tipis
   antar bagian, badge method kecil, tombol "Lihat X" buat collapsible. ══════ */
.vn-apidocs-header{background:var(--surface);box-shadow:inset 0 -1px 0 var(--ios-sep);flex-shrink:0;padding-top:env(safe-area-inset-top,0px);}
.vn-apidocs-header-row1{display:flex;align-items:center;gap:8px;padding:12px 14px 10px;}
.vn-apidocs-header-row2{display:flex;align-items:center;justify-content:flex-end;gap:14px;padding:0 16px 12px;border-top:1px solid var(--ios-sep);padding-top:10px;}
.vn-apidocs-back{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:none;border:none;cursor:pointer;color:var(--text-primary);flex-shrink:0;}
.vn-apidocs-back:active{opacity:.6;}
.vn-apidocs-header-icon{width:26px;height:26px;border-radius:8px;background:none;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:none;}
.vn-apidocs-header-icon .material-icons-round{color:var(--primary);font-size:22px;}
.vn-apidocs-header-title{flex:1;min-width:0;}
.vn-apidocs-header-title .t{font-size:16px;font-weight:800;color:var(--text-primary);letter-spacing:-0.01em;line-height:1.2;}
.vn-apidocs-header-title .s{font-size:10.5px;color:var(--text-muted);font-weight:700;letter-spacing:.1em;text-transform:uppercase;}
.vn-apidocs-hicon-btn{width:30px;height:30px;border-radius:8px;background:none;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text-secondary);flex-shrink:0;}
.vn-apidocs-hicon-btn:active{opacity:.6;}
.vn-apidocs-hicon-btn .material-icons-round{font-size:19px;}

/* — Sidebar drawer — */
.vn-apidocs-sidebar-overlay{position:fixed;inset:0;z-index:10200;background:rgba(15,23,42,0);transition:background .25s ease;pointer-events:none;}
.vn-apidocs-sidebar-overlay.open{background:rgba(15,23,42,.42);pointer-events:auto;}
.vn-apidocs-sidebar{position:absolute;top:0;left:0;bottom:0;width:82%;max-width:300px;background:var(--surface);transform:translateX(-100%);transition:transform .28s cubic-bezier(.32,.72,0,1);box-shadow:16px 0 40px rgba(0,0,0,.15);display:flex;flex-direction:column;padding:calc(env(safe-area-inset-top,0px) + 22px) 0 24px;overflow-y:auto;}
.vn-apidocs-sidebar-overlay.open .vn-apidocs-sidebar{transform:translateX(0);}
.vn-apidocs-sidebar-brand{display:flex;align-items:center;gap:9px;padding:0 20px 18px;}
.vn-apidocs-sidebar-brand-icon{width:22px;height:22px;flex-shrink:0;display:flex;align-items:center;justify-content:center;}
.vn-apidocs-sidebar-brand-icon img{width:100%;height:100%;object-fit:contain;display:block;}
.vn-apidocs-sidebar-brand-text{font-size:14.5px;font-weight:800;letter-spacing:.02em;color:var(--text-primary);text-transform:uppercase;}
.vn-apidocs-sidebar-group-label{font-size:10.5px;font-weight:800;color:var(--text-muted);text-transform:uppercase;letter-spacing:.08em;padding:16px 20px 8px;margin-top:6px;border-top:1px solid var(--ios-sep);}
.vn-apidocs-sidebar-group-label.vn-apidocs-sidebar-group-first{border-top:none;margin-top:0;padding-top:2px;}
.vn-apidocs-sidebar-item{display:flex;align-items:center;gap:13px;padding:10px 20px;cursor:pointer;font-size:14px;font-weight:600;color:var(--text-primary);transition:background .15s ease,color .15s ease;}
.vn-apidocs-sidebar-item:active{background:var(--surface-2);}
.vn-apidocs-sidebar-item.active{color:var(--ios-tint-blue);font-weight:800;}
.vn-apidocs-sidebar-item .material-icons-round{font-size:19px;color:var(--text-muted);flex-shrink:0;}
.vn-apidocs-sidebar-item.active .material-icons-round{color:var(--ios-tint-blue);}

/* — Search modal — */
.vn-apidocs-search-overlay{position:fixed;inset:0;z-index:10300;background:rgba(15,23,42,.5);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);display:flex;align-items:flex-start;justify-content:center;padding:64px 14px 14px;}
.vn-apidocs-search-box{width:100%;max-width:520px;background:var(--surface);border-radius:var(--ios-radius-lg);box-shadow:var(--ios-shadow-float);max-height:78vh;display:flex;flex-direction:column;overflow:hidden;}
.vn-apidocs-search-input-row{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--ios-sep);flex-shrink:0;}
.vn-apidocs-search-input-row .material-icons-round{color:var(--text-muted);font-size:19px;}
.vn-apidocs-search-input{flex:1;border:none;outline:none;background:transparent;font-size:14.5px;color:var(--text-primary);font-family:inherit;}
.vn-apidocs-search-close{width:26px;height:26px;border-radius:50%;background:var(--surface-2);border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text-secondary);flex-shrink:0;}
.vn-apidocs-search-results{overflow-y:auto;padding:8px 0 12px;}
.vn-apidocs-search-group-label{font-size:10.5px;font-weight:800;color:var(--text-muted);text-transform:uppercase;letter-spacing:.08em;padding:12px 18px 6px;}
.vn-apidocs-search-item{display:flex;align-items:center;gap:12px;padding:11px 18px;cursor:pointer;}
.vn-apidocs-search-item:active{background:var(--surface-2);}
.vn-apidocs-search-item .material-icons-round{font-size:18px;color:var(--text-muted);flex-shrink:0;}
.vn-apidocs-search-item-label{flex:1;font-size:13.5px;font-weight:600;color:var(--text-primary);}
.vn-apidocs-search-ver{font-size:10px;font-weight:700;padding:2px 8px;border-radius:20px;background:var(--ios-tint-blue-bg);color:var(--ios-tint-blue);flex-shrink:0;}
.vn-apidocs-search-empty{text-align:center;padding:32px 20px;font-size:13px;color:var(--text-muted);font-weight:500;}

/* — Blok endpoint: FLAT, tanpa card/shadow, dipisah garis tipis — */
.vn-apidocs-endpoint-card{background:none;border:none;border-bottom:1px solid var(--ios-sep);border-radius:0;overflow:visible;margin-bottom:22px;padding-bottom:22px;box-shadow:none;}
.vn-apidocs-endpoint-card:last-child{border-bottom:none;}
.vn-apidocs-endpoint-head{padding:0 0 8px;display:flex;flex-direction:column;align-items:flex-start;gap:8px;cursor:default;}
.vn-apidocs-endpoint-title-row{display:flex;align-items:center;gap:8px;}
.vn-apidocs-endpoint-title-row .vn-apidocs-endpoint-name{font-size:17px;font-weight:800;color:var(--text-primary);letter-spacing:-0.01em;}
.vn-apidocs-method-badge{flex-shrink:0;font-size:10px;font-weight:800;letter-spacing:.03em;color:#fff;padding:3px 9px;border-radius:6px;font-family:'SFMono-Regular',Consolas,monospace;display:inline-block;}
.vn-apidocs-endpoint-path{font-family:'SFMono-Regular',Consolas,monospace;font-size:12.5px;color:var(--text-secondary);}
.vn-apidocs-section-label{font-size:14px;font-weight:800;color:var(--text-primary);margin:16px 0 8px;display:flex;align-items:center;gap:6px;}
.vn-apidocs-section-label .material-icons-round{font-size:14px;color:var(--text-muted);}

/* Headers: daftar key/value polos, tanpa box, mirip tabel plain */
.vn-apidocs-headers-list{margin-bottom:2px;}
.vn-apidocs-headers-row{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:7px 0;border-bottom:1px solid var(--ios-sep);}
.vn-apidocs-headers-row:last-child{border-bottom:none;}
.vn-apidocs-headers-key{font-family:'SFMono-Regular',Consolas,monospace;font-size:12.5px;font-weight:700;color:var(--text-primary);}
.vn-apidocs-headers-val{font-family:'SFMono-Regular',Consolas,monospace;font-size:12px;color:var(--text-secondary);text-align:right;word-break:break-all;}

/* Tombol "+ Lihat parameter" / "<> Lihat code" / "{} Lihat response" --
   collapsible reveal, bordered pill, seperti di referensi. */
.vn-apidocs-reveal{margin-bottom:4px;}
.vn-apidocs-reveal-btn{display:inline-flex;align-items:center;gap:7px;padding:9px 14px;background:none;border:1.5px solid var(--ios-sep);border-radius:10px;font-size:12.5px;font-weight:700;color:var(--text-primary);cursor:pointer;width:100%;box-sizing:border-box;text-align:left;}
.vn-apidocs-reveal-btn:active{background:var(--surface-2);}
.vn-apidocs-reveal-btn .material-icons-round{font-size:15px;color:var(--text-muted);flex-shrink:0;}
.vn-apidocs-reveal-btn .vn-apidocs-reveal-chev{margin-left:auto;transition:transform .15s;}
.vn-apidocs-reveal.open .vn-apidocs-reveal-chev{transform:rotate(180deg);}
.vn-apidocs-reveal-body{display:none;padding-top:10px;}
.vn-apidocs-reveal.open .vn-apidocs-reveal-body{display:block;}

.vn-apidocs-param-card{background:var(--surface-2);border:none;box-shadow:inset 0 0 0 1px var(--ios-sep);border-radius:var(--ios-radius-sm);padding:13px 14px;margin-bottom:14px;}
.vn-apidocs-param-row{padding:8px 0;border-bottom:1px solid var(--ios-sep);}
.vn-apidocs-param-row:last-child{border-bottom:none;padding-bottom:0;}
.vn-apidocs-param-row:first-child{padding-top:0;}
.vn-apidocs-param-name{font-family:'SFMono-Regular',Consolas,monospace;font-size:12px;font-weight:700;color:var(--primary);}
.vn-apidocs-param-type{font-size:10px;color:var(--text-muted);font-weight:600;margin-left:6px;}
.vn-apidocs-param-req{font-size:9px;font-weight:800;color:var(--ios-tint-red);background:var(--ios-tint-red-bg);padding:2px 7px;border-radius:20px;margin-left:6px;letter-spacing:.02em;}
.vn-apidocs-param-opt{font-size:9px;font-weight:700;color:var(--text-muted);background:var(--surface);padding:2px 7px;border-radius:20px;margin-left:6px;}
.vn-apidocs-param-desc{font-size:11.5px;color:var(--text-secondary);line-height:1.5;margin-top:3px;}

.vn-apidocs-info-card{background:var(--surface);border:1px solid var(--ios-sep);border-radius:var(--ios-radius-lg);padding:17px;margin-bottom:12px;position:relative;overflow:hidden;box-shadow:none;}
.vn-apidocs-info-card::before{content:'';position:absolute;top:0;left:0;width:4px;height:100%;background:var(--primary);border-radius:0 4px 4px 0;}

/* Callout biru (rate limit / catatan info), sama seperti kotak biru di
   referensi (mis. "Batas kecepatan API..."). */
.vn-apidocs-callout-info{display:flex;gap:10px;align-items:flex-start;background:var(--ios-tint-blue-bg);border:1px solid rgba(10,87,214,.18);border-radius:var(--ios-radius-md);padding:13px 14px;margin-bottom:16px;}
.vn-apidocs-callout-info .material-icons-round{color:var(--ios-tint-blue);font-size:18px;flex-shrink:0;margin-top:1px;}
.vn-apidocs-callout-info-text{font-size:12px;color:var(--text-secondary);line-height:1.6;font-weight:500;}

.vn-apidocs-security-card{background:var(--ios-tint-orange-bg);border-radius:var(--ios-radius-lg);padding:18px;margin-bottom:14px;}
.vn-apidocs-security-title{display:flex;align-items:center;gap:9px;font-size:14.5px;font-weight:800;color:#92400E;margin-bottom:10px;}
.vn-apidocs-security-title .vn-apidocs-skull{display:inline-flex;align-items:center;width:17px;height:17px;flex-shrink:0;color:#92400E;}
body.wt-dark .vn-apidocs-security-title .vn-apidocs-skull{color:#FBBF24;}
body.wt-dark .vn-apidocs-security-title{color:#FBBF24;}
.vn-apidocs-security-card ul{margin:0;padding-left:20px;}
.vn-apidocs-security-card li{font-size:12px;color:#78350F;line-height:1.8;font-weight:500;}
body.wt-dark .vn-apidocs-security-card li{color:#FDE68A;}

/* — Footer copyright, muncul di bawah tiap halaman dokumentasi — */
.vn-apidocs-footer{text-align:center;padding:28px 10px 8px;font-size:11.5px;color:var(--text-muted);line-height:1.7;font-weight:500;}

/* — Tutorial Webhook — */
.vn-apidocs-wh-step{display:flex;gap:12px;padding:12px 2px;position:relative;}
.vn-apidocs-wh-step:not(:last-child)::before{content:'';position:absolute;left:15px;top:38px;bottom:-4px;width:1.5px;background:var(--ios-sep);}
.vn-apidocs-wh-step-num{flex-shrink:0;width:31px;height:31px;border-radius:50%;background:var(--primary);color:#fff;font-size:13px;font-weight:800;display:flex;align-items:center;justify-content:center;z-index:1;}
.vn-apidocs-wh-step-body{flex:1;min-width:0;padding-top:4px;}
.vn-apidocs-wh-step-title{font-size:13.5px;font-weight:800;color:var(--text-primary);letter-spacing:-0.01em;}
.vn-apidocs-wh-step-desc{font-size:12px;color:var(--text-secondary);line-height:1.6;margin-top:4px;font-weight:400;}
.vn-apidocs-wh-event-badge{display:inline-block;font-family:'SFMono-Regular',Consolas,monospace;font-size:12px;font-weight:700;padding:5px 11px;border-radius:8px;}
.vn-apidocs-wh-table{width:100%;border-collapse:collapse;margin:10px 0;}
.vn-apidocs-wh-table th{font-size:10px;font-weight:800;color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em;text-align:left;padding:0 8px 7px 0;border-bottom:1px solid var(--ios-sep);}
.vn-apidocs-wh-table td{font-size:11.5px;color:var(--text-secondary);padding:8px 8px 8px 0;border-bottom:1px solid var(--ios-sep);vertical-align:top;font-weight:400;line-height:1.5;}
.vn-apidocs-wh-table tr:last-child td{border-bottom:none;}
.vn-apidocs-wh-table td code{font-family:'SFMono-Regular',Consolas,monospace;font-size:11px;background:var(--surface-2);padding:2px 6px;border-radius:5px;color:var(--text-primary);}
.vn-apidocs-wh-callout{display:flex;gap:10px;border-radius:var(--ios-radius-md);padding:12px 13px;font-size:11.5px;line-height:1.6;font-weight:400;}
.vn-apidocs-wh-callout .material-icons-round{font-size:17px;flex-shrink:0;}
.vn-apidocs-wh-callout.warn{background:var(--ios-tint-orange-bg);color:#92400E;}
.vn-apidocs-wh-callout.warn .material-icons-round{color:var(--ios-tint-orange);}
body.wt-dark .vn-apidocs-wh-callout.warn{color:#FDE68A;}
.vn-apidocs-wh-callout code{font-family:'SFMono-Regular',Consolas,monospace;background:rgba(0,0,0,.08);padding:1px 5px;border-radius:4px;}
.vn-apidocs-wh-checklist{background:var(--surface);border-radius:var(--ios-radius-lg);box-shadow:var(--ios-shadow-card);padding:5px 15px;margin-bottom:14px;}
.vn-apidocs-wh-check-item{position:relative;padding:10px 0 10px 16px;font-size:12px;color:var(--text-secondary);line-height:1.6;font-weight:400;border-bottom:1px solid var(--ios-sep);}
.vn-apidocs-wh-check-item::before{content:'';position:absolute;left:0;top:16px;width:5px;height:5px;border-radius:50%;background:var(--ios-tint-green);}
.vn-apidocs-wh-check-item:last-child{border-bottom:none;}
.vn-apidocs-wh-check-item code{font-family:'SFMono-Regular',Consolas,monospace;font-size:11px;background:var(--surface-2);padding:1px 5px;border-radius:4px;color:var(--text-primary);}


.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:var(--overlay);z-index:8000;display:flex;align-items:center;justify-content:center;padding:16px;}
.modal-box{background:#fff;border-radius:var(--radius);width:100%;max-width:460px;max-height:90vh;overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--shadow-lg);}
.modal-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border);}
.modal-header h3{font-size:16px;font-weight:700;}
.modal-close{color:var(--text-muted);}
.modal-body{padding:20px;overflow-y:auto;flex:1;}

#lockOverlay{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:#0F172A;z-index:99999;align-items:center;justify-content:center;flex-direction:column;gap:16px;}
#lockOverlay.active{display:flex;}

.ref-card{background:linear-gradient(135deg,#7C3AED,#0A57D6);border-radius:16px;padding:18px;color:#fff;margin:0 16px 16px;box-shadow:0 6px 20px rgba(124,58,237,0.35);cursor:pointer;position:relative;overflow:hidden;}
.ref-panel{position:fixed;top:0;left:0;right:0;bottom:0;background:var(--bg);z-index:7000;display:flex;flex-direction:column;transform:translateY(100%);transition:transform 0.3s cubic-bezier(0.4,0,0.2,1);}
.ref-panel.open{transform:translateY(0);}

.sp-search-bar{display:flex;align-items:center;gap:9px;background:var(--surface);box-shadow:var(--ios-shadow-card);border-radius:999px;padding:2px 16px;margin:12px 16px;}
.sp-search-bar input{flex:1;border:none;background:transparent;padding:11px 0;font-size:14px;outline:none;color:var(--text-primary);-webkit-user-select:text;user-select:text;font-weight:500;}
.sp-search-bar .material-icons-round{color:var(--text-muted);font-size:18px;}
.sp-track-row{display:flex;align-items:center;gap:12px;padding:10px 16px;cursor:pointer;transition:background .15s;}
.sp-track-row:active{background:var(--surface-2);}
.sp-track-art{width:48px;height:48px;border-radius:8px;object-fit:cover;background:var(--surface-2);flex-shrink:0;}
.sp-track-info{flex:1;min-width:0;}
.sp-track-title{font-size:14px;font-weight:600;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sp-track-artist{font-size:12px;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px;}
.sp-player-bar{position:fixed;left:0;right:0;bottom:0;background:#fff;border-top:1px solid var(--border);padding:10px 14px;display:flex;align-items:center;gap:12px;box-shadow:0 -2px 12px rgba(0,0,0,0.06);z-index:7600;transform:translateY(0);transition:transform 0.3s cubic-bezier(0.4,0,0.2,1);}
.sp-player-bar.hidden{transform:translateY(110%);}
.sp-player-art{width:44px;height:44px;border-radius:8px;object-fit:cover;background:var(--surface-2);flex-shrink:0;}
.sp-player-info{flex:1;min-width:0;}
.sp-player-title{font-size:13px;font-weight:700;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sp-player-artist{font-size:11px;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sp-player-btn{width:38px;height:38px;border-radius:50%;background:#16A34A;display:flex;align-items:center;justify-content:center;flex-shrink:0;cursor:pointer;color:#fff;}
.sp-player-btn .material-icons-round{font-size:22px;}
#spYtHolder{position:fixed;width:1px;height:1px;overflow:hidden;left:-9999px;top:-9999px;opacity:0;pointer-events:none;}
.sp-lyrics-btn{width:38px;height:38px;border-radius:50%;background:#F1F5F9;display:flex;align-items:center;justify-content:center;flex-shrink:0;cursor:pointer;color:var(--text-secondary);}
.sp-lyrics-panel{position:fixed;top:0;left:0;right:0;bottom:0;background:#0F172A;z-index:7500;display:flex;flex-direction:column;transform:translateY(100%);transition:transform 0.3s cubic-bezier(0.4,0,0.2,1);}
.sp-lyrics-panel.open{transform:translateY(0);}
.sp-lyrics-body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:24px 24px 80px;color:#fff;scroll-behavior:smooth;}
.sp-lyrics-body p{font-size:16px;line-height:2;font-weight:600;text-align:center;white-space:pre-wrap;color:rgba(255,255,255,0.92);}

.sp-lyric-line{font-size:20px;font-weight:700;line-height:1.55;text-align:center;padding:6px 8px;border-radius:10px;color:rgba(255,255,255,0.28);transition:color 0.35s ease,transform 0.35s ease,font-size 0.35s ease;cursor:default;margin:2px 0;}
.sp-lyric-line.active{color:#fff;font-size:22px;transform:scale(1.04);}
.sp-lyric-line.past{color:rgba(255,255,255,0.45);}

.sp-lyric-progress-wrap{padding:12px 0 6px;display:flex;align-items:center;gap:10px;flex-shrink:0;}
.sp-lyric-progress-bar{flex:1;height:3px;background:rgba(255,255,255,0.15);border-radius:2px;overflow:hidden;}
.sp-lyric-progress-fill{height:100%;background:#1DB954;border-radius:2px;transition:width 1s linear;width:0%;}
.sp-lyric-time{font-size:11px;color:rgba(255,255,255,0.45);min-width:32px;text-align:center;}

.sp-lyric-mini-player{flex-shrink:0;padding:10px 16px 12px;display:flex;align-items:center;gap:12px;border-top:1px solid rgba(255,255,255,0.08);}
.sp-lyric-mini-art{width:40px;height:40px;border-radius:8px;object-fit:cover;background:rgba(255,255,255,0.1);flex-shrink:0;}
.sp-lyric-mini-info{flex:1;min-width:0;}
.sp-lyric-mini-title{font-size:13px;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sp-lyric-mini-artist{font-size:11px;color:rgba(255,255,255,0.5);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sp-lyric-mini-btn{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,0.12);display:flex;align-items:center;justify-content:center;flex-shrink:0;cursor:pointer;color:#fff;border:none;}
.sp-lyric-mini-btn .material-icons-round{font-size:20px;}
.sp-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 24px;text-align:center;color:var(--text-muted);gap:6px;}

.wt-form-wrap{padding:20px 16px;}
.wt-form-label{font-size:12px;font-weight:700;color:var(--text-secondary);margin-bottom:6px;display:block;}
.wt-form-input{width:100%;border:none;box-shadow:inset 0 0 0 1.5px var(--ios-sep);border-radius:var(--ios-radius-sm);padding:12px 14px;font-size:14px;margin-bottom:16px;background:var(--surface-2);font-family:inherit;color:var(--text-primary);box-sizing:border-box;-webkit-user-select:text;user-select:text;transition:box-shadow .16s ease;}
.wt-form-input:focus{outline:none;box-shadow:inset 0 0 0 2px var(--primary);background:var(--surface);}
.wt-submit-btn{width:100%;background:var(--primary);color:#fff;border:none;border-radius:999px;padding:13px;font-size:14px;font-weight:700;cursor:pointer;font-family:inherit;box-shadow:0 8px 18px -6px rgba(10,87,214,.5);}
.wt-submit-btn:disabled{opacity:.6;}
.wt-player-frame-wrap{position:relative;width:100%;padding-top:56.25%;background:#000;flex-shrink:0;overflow:hidden;}
.wt-player-frame-wrap iframe{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;border:none;display:block;}
.wt-ad-blocker{position:absolute;top:0;left:0;width:clamp(60px,12vw,100px);height:clamp(60px,12vw,100px);background:#000;z-index:5;pointer-events:auto;}
.wt-ep-nav-btn{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,0.12);border:none;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;}
.wt-ep-nav-btn .material-icons-round{font-size:20px;}

.wt-detail-panel{position:fixed;top:0;left:0;right:0;bottom:0;background:#0D0D0D;z-index:8000;display:flex;flex-direction:column;transform:translateY(100%);transition:transform 0.32s cubic-bezier(0.32,0.72,0,1);}
.wt-detail-panel.open{transform:translateY(0);}
.wt-detail-hero{position:relative;width:100%;height:300px;flex-shrink:0;overflow:hidden;background:#111;border-radius:0 0 28px 28px;}
.wt-detail-hero-img{width:100%;height:100%;object-fit:cover;display:block;filter:brightness(0.6);opacity:0;transform:scale(1.06);transition:opacity .5s ease,transform .5s cubic-bezier(.22,1,.36,1);}
.wt-detail-hero-img.wt-img-in{opacity:1;transform:scale(1);}
.wt-detail-hero-grad{position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(to bottom,rgba(0,0,0,0.25) 0%,rgba(13,13,13,0.2) 45%,rgba(13,13,13,1) 100%);}
.wt-detail-header{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;padding:calc(env(safe-area-inset-top,0px) + 10px) 12px 0;z-index:2;}
.wt-detail-header button{width:38px;height:38px;border-radius:12px;display:flex;align-items:center;justify-content:center;color:#fff;background:rgba(15,23,42,0.4);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:none;cursor:pointer;flex-shrink:0;}
.wt-detail-header button:active{transform:scale(.92);}
.wt-detail-header-title{flex:1;font-size:15px;font-weight:800;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-left:10px;opacity:0;transition:opacity .2s;}
.wt-detail-header-title.show{opacity:1;}

.wt-detail-body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding-bottom:32px;}
.wt-detail-title-row{padding:16px 16px 4px;}
.wt-detail-main-title{font-size:22px;font-weight:800;color:#fff;line-height:1.25;letter-spacing:-0.3px;}
.wt-detail-meta{display:flex;flex-wrap:wrap;gap:6px;padding:8px 16px 12px;align-items:center;}
.wt-detail-badge{background:rgba(255,255,255,0.1);color:#CBD5E1;font-size:11px;font-weight:600;padding:4px 10px;border-radius:20px;border:1px solid rgba(255,255,255,0.12);}
.wt-detail-score{background:rgba(250,204,21,0.18);color:#FDE047;font-size:11px;font-weight:700;padding:4px 10px;border-radius:20px;border:1px solid rgba(250,204,21,0.3);}
.wt-detail-play-btn{margin:4px 16px 0;width:calc(100% - 32px);background:linear-gradient(135deg,var(--primary) 0%,var(--primary-dark) 100%);color:#fff;border:none;border-radius:999px;padding:15px;font-size:15px;font-weight:800;cursor:pointer;font-family:inherit;display:flex;align-items:center;justify-content:center;gap:8px;letter-spacing:0.2px;box-shadow:0 10px 24px -6px rgba(10,87,214,0.5);}
.wt-detail-play-btn .material-icons-round{font-size:22px;}
.wt-detail-section-label{font-size:10.5px;font-weight:800;color:rgba(255,255,255,.4);text-transform:uppercase;letter-spacing:0.06em;padding:20px 16px 8px;}
.wt-detail-overview{font-size:13.5px;color:#CBD5E1;line-height:1.65;padding:0 16px;font-weight:400;}
.wt-detail-info-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin:0 16px;background:rgba(255,255,255,0.07);border-radius:var(--ios-radius-md);overflow:hidden;}
.wt-detail-info-cell{padding:12px 14px;background:rgba(255,255,255,0.05);}
.wt-detail-info-label{font-size:10px;font-weight:700;color:rgba(255,255,255,.4);text-transform:uppercase;letter-spacing:0.05em;margin-bottom:4px;}
.wt-detail-info-value{font-size:13px;font-weight:700;color:#E2E8F0;}
.wt-detail-genre-row{display:flex;flex-wrap:wrap;gap:8px;padding:4px 16px 0;}
.wt-detail-genre-chip{background:rgba(10,87,214,0.22);color:#7DAAFF;font-size:12px;font-weight:700;padding:6px 14px;border-radius:20px;border:1px solid rgba(10,87,214,0.35);}
/* Judul kartu horizontal (rekomendasi) di dalam detail panel selalu di
   atas background gelap sinematik, jadi teksnya dipaksa terang terlepas
   dari tema situs sedang terang/gelap. */
.wt-detail-body .wt-card-title{color:#fff;}
.wt-detail-body .wt-card-sub{color:rgba(255,255,255,.45);}
.wt-detail-body .wt-hrow{padding-left:16px;padding-right:16px;}
.wt-detail-season-btn{margin:0 16px;background:rgba(255,255,255,0.08);color:#fff;border:1px solid rgba(255,255,255,0.14);border-radius:999px;padding:13px 18px;font-size:13.5px;font-weight:700;cursor:pointer;font-family:inherit;display:flex;align-items:center;justify-content:center;gap:9px;width:calc(100% - 32px);}
.wt-detail-season-btn .material-icons-round{font-size:19px;color:#7DAAFF;}

.wt-detail-secondary-row{display:flex;gap:9px;margin:10px 16px 0;}
.wt-detail-secondary-row .wt-detail-season-btn{margin:0;width:auto;flex:1;}
.wt-detail-secondary-btn{flex:1;background:rgba(255,255,255,0.08);color:#E2E8F0;border:1px solid rgba(255,255,255,0.14);border-radius:999px;padding:13px 14px;font-size:13px;font-weight:700;cursor:pointer;font-family:inherit;display:flex;align-items:center;justify-content:center;gap:7px;transition:transform .12s,background .15s;}
.wt-detail-secondary-btn:active{transform:scale(0.96);}
.wt-detail-secondary-btn .material-icons-round{font-size:18px;}
.wt-detail-secondary-btn.active{background:rgba(251,191,36,0.16);border-color:rgba(251,191,36,0.35);color:#FBBF24;}
.wt-detail-secondary-btn-icononly{flex:0 0 48px;padding:13px 0;}

.wt-player-panel{position:fixed;top:0;left:0;right:0;bottom:0;background:#0D0D0D;z-index:8500;display:flex;flex-direction:column;transform:translateY(100%);transition:transform 0.3s cubic-bezier(0.4,0,0.2,1);}
.wt-player-panel.open{transform:translateY(0);}
/* Header SEKARANG bagian normal dari layout (bukan overlay melayang di
   atas video) -- selalu kelihatan di portrait, matching referensi
   tampilan "watch page" (judul nempel tepat di atas video, bukan
   full-video-cover style lagi). */
.wt-player-header{display:flex;align-items:center;min-height:50px;padding:0 4px 0 0;flex-shrink:0;background:#0D0D0D;z-index:3;}
.wt-player-header button{width:44px;height:50px;display:flex;align-items:center;justify-content:center;color:#fff;background:none;border:none;cursor:pointer;flex-shrink:0;}
.wt-player-header-title{flex:1;font-size:14.5px;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-left:2px;}
/* Video dikunci rasio 16:9 di bagian ATAS layar (bukan full-screen paksa)
   -- full-screen sungguhan cuma terjadi kalau user tap tombol fullscreen
   (device di-rotate ke landscape / requestFullscreen native). */
.wt-iframe-wrap{position:relative;width:100%;padding-top:56.25%;background:#000;flex-shrink:0;overflow:hidden;}
.wt-iframe-wrap iframe{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;border:none;display:block;}
/* Konten di BAWAH video: judul, info episode, dan komentar -- scroll
   normal seperti halaman biasa (bukan ke-lock di dalam video seperti
   sebelumnya). */
.wt-player-body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;background:#0D0D0D;}
.wt-player-info{padding:16px 16px 6px;}
.wt-player-info-title{font-size:18px;font-weight:800;color:#fff;line-height:1.3;letter-spacing:-0.2px;}
.wt-player-info-sub{font-size:13px;color:rgba(255,255,255,.55);margin-top:3px;font-weight:600;}

.wt-comments-section{padding:24px 16px 40px;border-top:8px solid rgba(255,255,255,0.04);margin-top:12px;}
.wt-comments-title{font-size:17px;font-weight:800;color:#fff;margin-bottom:16px;letter-spacing:-0.3px;}

/* Compose bar ala iOS Messages -- pill kaca buram + tombol kirim bulat. */
.wt-comment-input-row{display:flex;gap:10px;align-items:center;margin-bottom:22px;}
.wt-comment-input-row input{flex:1;background:rgba(255,255,255,0.09);border:1px solid rgba(255,255,255,0.08);border-radius:999px;padding:11px 16px;font-size:14px;color:#fff;font-family:inherit;min-width:0;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);}
.wt-comment-input-row input::placeholder{color:rgba(255,255,255,.38);}
.wt-comment-input-row input:focus{outline:none;border-color:rgba(10,132,255,0.5);box-shadow:0 0 0 3px rgba(10,132,255,0.18);}
.wt-comment-input-row-locked input{opacity:.5;cursor:not-allowed;}
.wt-comment-input-row-locked .wt-comment-send-btn{opacity:.5;cursor:not-allowed;}
.wt-comment-send-btn{width:38px;height:38px;border-radius:50%;background:#0A84FF;border:none;color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0;cursor:pointer;transition:transform .15s var(--ios-ease,ease),opacity .15s ease;}
.wt-comment-send-btn:active{transform:scale(0.92);}
.wt-comment-send-btn:disabled{opacity:.35;}

.wt-comment-reply-banner{display:flex;align-items:center;gap:10px;background:rgba(10,132,255,0.1);border-left:3px solid #0A84FF;border-radius:10px;padding:9px 12px;margin-bottom:14px;font-size:12.5px;color:rgba(255,255,255,.8);}
.wt-comment-reply-banner b{color:#fff;font-weight:700;}
.wt-comment-reply-banner .material-icons-round{font-size:16px;color:rgba(255,255,255,.5);cursor:pointer;margin-left:auto;flex-shrink:0;}

/* Satu kartu grup menyatu (ala iOS Settings/Messages) -- BUKAN kartu
   terpisah per komentar. Antar komentar dipisah garis tipis (hairline),
   bukan jarak/gap dan warna latar berbeda-beda. */
#wtCommentsList{background:#161616;border:1px solid rgba(255,255,255,0.07);border-radius:var(--ios-radius-md,16px);overflow:hidden;box-shadow:0 8px 24px -12px rgba(0,0,0,0.5);}
#wtCommentsList:empty{background:none;border:none;box-shadow:none;}

.wt-comment-swipe-wrap{position:relative;overflow:hidden;border-bottom:1px solid rgba(255,255,255,0.07);}
.wt-comment-swipe-wrap:last-child{border-bottom:none;}
.wt-comment-swipe-action{position:absolute;top:0;bottom:0;left:0;width:64px;display:flex;align-items:center;justify-content:center;pointer-events:none;}
.wt-comment-swipe-action .material-icons-round{width:30px;height:30px;border-radius:50%;background:#0A84FF;color:#fff;display:flex;align-items:center;justify-content:center;font-size:16px;}

.wt-comment-row{position:relative;display:flex;align-items:flex-start;gap:11px;padding:13px 14px;background:#161616;transition:transform .18s var(--ios-ease,ease),background-color .15s ease;touch-action:pan-y;z-index:1;}
.wt-comment-row:active{background:#1D1D1D;}
.wt-comment-row.wt-comment-reply-row{padding-left:0;margin-left:46px;position:relative;}
.wt-comment-row.wt-comment-reply-row::before{content:'';position:absolute;left:-24px;top:0;bottom:0;width:1px;background:rgba(255,255,255,0.09);}
.wt-comment-avatar-wrap{width:34px;height:34px;min-width:34px;min-height:34px;border-radius:50%;overflow:hidden;flex-shrink:0;box-shadow:0 0 0 1.5px rgba(255,255,255,0.08);}
.wt-comment-avatar{width:100%;height:100%;display:block;object-fit:cover;background:linear-gradient(135deg,#0A84FF,#409CFF);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:13px;line-height:1;}
.wt-comment-avatar img,img.wt-comment-avatar{object-fit:cover;width:100%;height:100%;}
.wt-comment-body{flex:1;min-width:0;padding-top:1px;}
.wt-comment-name-row{display:flex;align-items:baseline;gap:6px;}
.wt-comment-name{font-size:13px;font-weight:700;color:#fff;letter-spacing:-0.1px;}
.wt-comment-time{font-size:11.5px;color:rgba(235,235,245,.4);margin-left:auto;flex-shrink:0;}
.wt-comment-parent-tag{font-size:11.5px;color:#409CFF;font-weight:600;margin-top:2px;}
.wt-comment-text{font-size:14px;color:rgba(255,255,255,.92);line-height:1.48;margin-top:3px;word-break:break-word;white-space:pre-wrap;letter-spacing:-0.1px;}
.wt-comment-text.deleted{color:rgba(235,235,245,.35);font-style:italic;}
.wt-comment-actions{display:flex;align-items:center;gap:18px;margin-top:7px;}
.wt-comment-action-btn{background:none;border:none;color:rgba(235,235,245,.5);font-size:12px;font-weight:600;cursor:pointer;padding:0;display:flex;align-items:center;gap:4px;font-family:inherit;transition:opacity .12s ease;}
.wt-comment-action-btn:active{opacity:.5;}
.wt-comment-action-btn .material-icons-round{font-size:14px;}
.wt-comment-action-btn.danger{color:#FF453A;}
.wt-comment-empty{text-align:center;padding:36px 10px;color:rgba(235,235,245,.35);font-size:13px;}


.wt-header{display:flex;align-items:center;gap:6px;min-height:56px;padding:8px 12px 8px 8px;background:rgba(255,255,255,.85);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);box-shadow:inset 0 -1px 0 var(--ios-sep);flex-shrink:0;}
body.wt-dark .wt-header{background:rgba(23,25,31,.82);}
.wt-header-back{width:38px;height:38px;border-radius:12px;background:var(--surface-2);border:none;display:flex;align-items:center;justify-content:center;color:var(--text-primary);cursor:pointer;flex-shrink:0;}
.wt-header-back:active{transform:scale(.92);}
.wt-header-title{flex:1;font-size:15.5px;font-weight:800;color:var(--text-primary);letter-spacing:-0.01em;padding-left:4px;}
.wt-menu-btn{width:38px;height:38px;display:flex;align-items:center;justify-content:center;color:var(--text-primary);background:var(--surface-2);border:none;cursor:pointer;flex-shrink:0;border-radius:12px;transition:transform .15s;}
.wt-menu-btn:active{transform:scale(.92);}
.wt-empty-icon{width:64px;height:64px;border-radius:20px;background:var(--ios-tint-blue-bg);display:flex;align-items:center;justify-content:center;margin-bottom:4px;}
.wt-empty-icon .material-icons-round{font-size:30px;color:var(--ios-tint-blue);}

.wt-menu-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(4,6,12,0.6);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);z-index:9300;opacity:0;transition:opacity .25s ease;pointer-events:none;}
.wt-menu-overlay.open{opacity:1;pointer-events:all;}
.wt-menu-drawer{position:absolute;top:0;left:0;bottom:0;width:80%;max-width:310px;background:linear-gradient(180deg,#16181f,#0E0F14);display:flex;flex-direction:column;transform:translateX(-100%);transition:transform .3s cubic-bezier(0.22,1,0.36,1);overflow-y:auto;-webkit-overflow-scrolling:touch;padding-bottom:max(20px, env(safe-area-inset-bottom));box-shadow:12px 0 48px rgba(0,0,0,.35);}
.wt-menu-overlay.open .wt-menu-drawer{transform:translateX(0);}

.wt-menu-header{position:relative;display:flex;align-items:center;gap:14px;padding:26px 20px 22px;overflow:hidden;}
.wt-menu-header::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(120% 100% at 0% 0%,rgba(10,87,214,0.4),transparent 60%),radial-gradient(120% 100% at 100% 0%,rgba(10,87,214,0.16),transparent 55%);pointer-events:none;}
.wt-menu-logo{position:relative;width:50px;height:50px;border-radius:16px;background:linear-gradient(135deg,var(--primary),var(--primary-dark));display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0;box-shadow:0 6px 18px -4px rgba(10,87,214,0.55);overflow:hidden;}
.wt-menu-logo .material-icons-round{font-size:26px;}
.wt-menu-logo img{width:100%;height:100%;object-fit:cover;display:block;}
.wt-menu-header-text{position:relative;min-width:0;}
.wt-menu-app-name{color:#fff;font-size:15.5px;font-weight:800;letter-spacing:-0.01em;line-height:1.25;}
.wt-menu-app-sub{color:rgba(255,255,255,0.5);font-size:11px;font-weight:600;margin-top:1px;}

.wt-menu-section-label{color:#7DAAFF;font-size:10.5px;font-weight:800;letter-spacing:0.08em;text-transform:uppercase;padding:18px 20px 8px;}
.wt-menu-list{padding:2px 12px;}
.wt-menu-item{display:flex;align-items:center;gap:13px;padding:11px 8px;border-radius:13px;cursor:pointer;transition:background .15s;color:#fff;}
.wt-menu-item:active{background:rgba(255,255,255,0.07);}
.wt-menu-item-icon{width:36px;height:36px;border-radius:11px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.wt-menu-item-icon .material-icons-round{font-size:19px;}
.wt-menu-item span.wt-menu-item-label{font-size:13.5px;font-weight:700;color:#F1F5F9;letter-spacing:-0.01em;}
.wt-menu-item-chevron{margin-left:auto;font-size:16px !important;color:rgba(255,255,255,0.25) !important;flex-shrink:0;}
.wt-menu-badge{margin-left:auto;background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:#fff;font-size:10px;font-weight:800;padding:3px 8px;border-radius:8px;letter-spacing:.02em;}
.wt-menu-divider{height:1px;background:rgba(255,255,255,0.07);margin:14px 20px 0;}
.wt-menu-mascot-wrap{display:flex;flex-direction:column;align-items:center;gap:6px;padding:24px 20px 8px;margin-top:auto;}
.wt-menu-mascot-img{width:130px;height:130px;object-fit:contain;}
.wt-menu-mascot-label{font-family:'Anton',sans-serif;color:#fff;font-size:22px;font-weight:700;letter-spacing:0.5px;}




.ref-tab-bar{display:flex;border-bottom:2px solid #E2E8F0;background:#fff;}
.ref-tab{flex:1;padding:12px 8px;text-align:center;font-size:13px;font-weight:600;color:var(--text-muted);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-2px;transition:all .2s;}
.ref-tab.active{color:#7C3AED;border-bottom-color:#7C3AED;}
.ref-code-box{background:linear-gradient(135deg,#EDE9FE,#E4EDFE);border-radius:16px;padding:24px;display:flex;flex-direction:column;align-items:center;gap:12px;margin:16px;}
.ref-code-text{font-size:28px;font-weight:900;letter-spacing:6px;color:#7C3AED;text-align:center;}
.ref-copy-btn{background:#7C3AED;color:#fff;border:none;border-radius:10px;padding:10px 24px;font-size:14px;font-weight:700;cursor:pointer;display:flex;align-items:center;gap:6px;font-family:inherit;}
.ref-info-box{background:#fff;border-radius:14px;margin:0 16px 16px;padding:16px;box-shadow:0 1px 6px rgba(0,0,0,0.06);}
.ref-stat-row{display:flex;gap:10px;margin:0 16px 12px;}
.ref-stat-card{flex:1;background:#fff;border-radius:12px;padding:14px 12px;text-align:center;box-shadow:0 1px 6px rgba(0,0,0,0.06);}
.ref-input-wrap{margin:16px;background:#fff;border-radius:14px;padding:20px;box-shadow:0 1px 6px rgba(0,0,0,0.06);}
.ref-input{width:100%;border:2px solid #E2E8F0;outline:none;font-size:18px;padding:12px 14px;background:#F8FAFC;border-radius:10px;color:var(--text-primary);font-family:inherit;text-align:center;letter-spacing:4px;font-weight:700;text-transform:uppercase;transition:border-color .2s;-webkit-user-select:text;user-select:text;}
.ref-input:focus{border-color:#7C3AED;background:#fff;}
.ref-submit-btn{width:100%;padding:14px;background:linear-gradient(135deg,#7C3AED,#0A57D6);color:#fff;border:none;border-radius:12px;font-size:15px;font-weight:700;cursor:pointer;margin-top:14px;font-family:inherit;display:flex;align-items:center;justify-content:center;gap:8px;}
.ref-submit-btn:disabled{opacity:0.5;cursor:not-allowed;}
   WATCH (Movie & TV)
   ====================================================== */
.wt-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px 14px;padding:6px 16px 16px;}
.wt-card{position:relative;cursor:pointer;}
.wt-thumb-wrap{position:relative;width:100%;padding-top:150%;background:var(--surface-2);overflow:hidden;border-radius:var(--ios-radius-md);box-shadow:var(--ios-shadow-card);}
.wt-thumb-wrap img{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;object-fit:cover;display:block;opacity:0;transform:scale(1.04);transition:opacity .45s ease,transform .45s cubic-bezier(.22,1,.36,1);}
.wt-thumb-wrap img.wt-img-in{opacity:1;transform:scale(1);}
.wt-thumb-wrap.wt-thumb-broken{display:flex;align-items:center;justify-content:center;}
.wt-thumb-wrap.wt-thumb-broken::before{content:'\\f02d';font-family:'Material Icons Round';font-size:28px;color:var(--text-muted);}
.wt-thumb-wrap.wt-thumb-broken img{display:none;}
.wt-card:active .wt-thumb-wrap{transform:scale(0.965);}
.wt-thumb-wrap{transition:transform .18s cubic-bezier(.22,1,.36,1);}
.wt-play-overlay{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;background:rgba(15,23,42,0.14);opacity:0;transition:opacity .15s;z-index:2;}
.wt-card:active .wt-play-overlay{opacity:1;}
.wt-play-overlay .material-icons-round{font-size:30px;color:#fff;background:rgba(15,23,42,.5);border-radius:50%;padding:10px;backdrop-filter:blur(6px);}
.wt-bookmark-btn{position:absolute;top:9px;right:9px;width:29px;height:29px;border-radius:50%;background:rgba(15,23,42,0.4);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;z-index:3;cursor:pointer;border:none;transition:transform .15s cubic-bezier(.34,1.56,.64,1),background .15s;}
.wt-bookmark-btn:active{transform:scale(0.82);}
.wt-bookmark-btn.active{transform:scale(1.08);}
.wt-bookmark-btn .material-icons-round{font-size:15px;color:#fff;}
.wt-bookmark-btn.active .material-icons-round{color:#FBBF24;}
.wt-card-meta{padding:9px 2px 0;}
.wt-card-title{font-size:13px;font-weight:700;color:var(--text-primary);line-height:1.35;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;letter-spacing:-0.01em;}
.wt-card-sub{display:flex;align-items:center;gap:5px;margin-top:3px;font-size:11px;color:var(--text-muted);font-weight:600;}
.wt-card-type{color:var(--ios-tint-blue);}
.wt-card-dot{width:2.5px;height:2.5px;border-radius:50%;background:var(--text-muted);flex-shrink:0;}
.wt-card-rating{display:inline-flex;align-items:center;gap:2px;color:var(--text-muted);}
.wt-card-rating .material-icons-round{font-size:11px;color:#F59E0B;}
.wt-section-title{font-size:16.5px;font-weight:800;color:var(--text-primary);padding:18px 16px 10px;letter-spacing:-0.02em;}
.wt-genre-grid{display:flex;gap:8px;overflow-x:auto;padding:2px 16px 14px;-webkit-overflow-scrolling:touch;}
.wt-genre-chip{flex-shrink:0;background:var(--surface);border-radius:999px;padding:10px 18px;text-align:center;font-size:12.5px;font-weight:700;color:var(--text-primary);box-shadow:var(--ios-shadow-card);cursor:pointer;transition:transform .12s,box-shadow .15s;white-space:nowrap;}
.wt-genre-chip:active{transform:scale(0.95);box-shadow:inset 0 0 0 2px var(--primary);}
.wt-history-row{display:flex;align-items:center;gap:13px;padding:11px 16px;cursor:pointer;transition:background .15s;}
.wt-history-row:active{background:var(--surface-2);}
.wt-history-thumb{width:50px;height:70px;border-radius:var(--ios-radius-sm);object-fit:cover;background:var(--surface-2);flex-shrink:0;box-shadow:var(--ios-shadow-card);}
.wt-history-info{flex:1;min-width:0;}
.wt-history-title{font-size:13.5px;font-weight:700;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.wt-history-sub{font-size:11.5px;color:var(--text-muted);margin-top:2px;font-weight:500;}
.wt-history-del{width:30px;height:30px;border-radius:50%;background:var(--surface-2);display:flex;align-items:center;justify-content:center;flex-shrink:0;cursor:pointer;color:var(--text-muted);}
.wt-history-del:active{transform:scale(0.9);}
.wt-history-del .material-icons-round{font-size:15px;}
.wt-clear-all-btn{margin:14px 16px 4px;text-align:center;padding:12px;border-radius:999px;background:var(--ios-tint-red-bg);color:var(--ios-tint-red);font-size:13px;font-weight:700;cursor:pointer;}
.wt-clear-all-btn:active{transform:scale(0.97);}

/* — Skeleton grid poster khusus (mencegah layout shift, sama persis
     bentuknya dengan .wt-card asli: poster 2:3 + 2 baris teks) — */
.wt-skel-card{display:flex;flex-direction:column;gap:9px;}
.wt-skel-poster{width:100%;padding-top:150%;border-radius:var(--ios-radius-md);position:relative;overflow:hidden;background:linear-gradient(90deg,var(--vn-skel-base,#E9EEF6) 25%,var(--vn-skel-hi,#F6F9FC) 37%,var(--vn-skel-base,#E9EEF6) 63%);background-size:400% 100%;animation:vnShimmer 1.4s ease infinite;}
.wt-skel-line{height:9px;border-radius:5px;background:linear-gradient(90deg,var(--vn-skel-base,#E9EEF6) 25%,var(--vn-skel-hi,#F6F9FC) 37%,var(--vn-skel-base,#E9EEF6) 63%);background-size:400% 100%;animation:vnShimmer 1.4s ease infinite;}

/* — Horizontal poster row (Continue Watching / Rekomendasi) — */
.wt-hrow{display:flex;gap:12px;overflow-x:auto;padding:2px 16px 6px;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;}
.wt-hrow-item{flex-shrink:0;width:112px;cursor:pointer;scroll-snap-align:start;}
.wt-hrow-item .wt-thumb-wrap{padding-top:150%;}
.wt-hrow-item .wt-card-title{font-size:12px;}

/* — Cast row (foto bulat + nama) — */
.wt-cast-row{display:flex;gap:14px;overflow-x:auto;padding:2px 16px 4px;-webkit-overflow-scrolling:touch;}
.wt-cast-item{flex-shrink:0;width:66px;text-align:center;}
.wt-cast-photo{width:60px;height:60px;border-radius:50%;object-fit:cover;background:rgba(255,255,255,0.08);margin:0 auto 6px;display:block;}
.wt-cast-name{font-size:10.5px;font-weight:700;color:#E2E8F0;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.wt-cast-role{font-size:9.5px;color:rgba(255,255,255,.4);margin-top:1px;}

/* — Featured/Trending banner (hero landing halaman Movie & TV) — */
.wt-featured-wrap{position:relative;margin:2px 16px 4px;border-radius:var(--ios-radius-lg);overflow:hidden;box-shadow:var(--ios-shadow-card);background:var(--surface-2);}
.wt-featured-track{display:flex;transition:transform .45s cubic-bezier(.22,1,.36,1);}
.wt-featured-slide{flex-shrink:0;width:100%;position:relative;aspect-ratio:16/10;cursor:pointer;}
.wt-featured-slide img{width:100%;height:100%;object-fit:cover;display:block;opacity:0;transition:opacity .4s;}
.wt-featured-slide img.wt-img-in{opacity:1;}
.wt-featured-grad{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 35%,rgba(0,0,0,.82) 100%);}
.wt-featured-info{position:absolute;left:0;right:0;bottom:0;padding:16px;}
.wt-featured-badge{display:inline-flex;align-items:center;gap:4px;background:rgba(255,255,255,.18);backdrop-filter:blur(6px);color:#fff;font-size:10px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;padding:4px 10px;border-radius:20px;margin-bottom:8px;}
.wt-featured-title{font-size:18px;font-weight:800;color:#fff;line-height:1.25;letter-spacing:-0.02em;text-shadow:0 1px 6px rgba(0,0,0,.3);}
.wt-featured-dots{position:absolute;bottom:10px;right:14px;display:flex;gap:5px;z-index:2;}
.wt-featured-dot{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.45);transition:all .25s;}
.wt-featured-dot.active{width:14px;background:#fff;}
.wt-history-del{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#94A3B8;flex-shrink:0;}
.wt-clear-all-btn{margin:10px 16px;padding:10px;border-radius:10px;background:#FEF2F2;color:#EF4444;font-size:13px;font-weight:700;text-align:center;cursor:pointer;}

.wt-detail-panel{position:fixed;top:0;left:0;right:0;bottom:0;background:#0D0D0D;z-index:8000;display:flex;flex-direction:column;transform:translateY(100%);transition:transform 0.3s cubic-bezier(0.4,0,0.2,1);}
.wt-detail-panel.open{transform:translateY(0);}
.wt-detail-hero{position:relative;width:100%;height:260px;flex-shrink:0;overflow:hidden;background:#111;}
.wt-detail-hero-img{width:100%;height:100%;object-fit:cover;display:block;filter:brightness(0.55);}
.wt-detail-hero-grad{position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(to bottom,rgba(0,0,0,0.2) 0%,rgba(13,13,13,1) 100%);}
.wt-detail-header{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;padding:8px 4px 0 0;z-index:2;}
.wt-detail-header button{width:44px;height:48px;display:flex;align-items:center;justify-content:center;color:#fff;background:none;border:none;cursor:pointer;}
.wt-detail-header-title{flex:1;font-size:15px;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-left:2px;}
.wt-detail-body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding-bottom:32px;}
.wt-detail-title-row{padding:16px 16px 4px;}
.wt-detail-main-title{font-size:22px;font-weight:800;color:#fff;line-height:1.25;letter-spacing:-0.3px;}
.wt-detail-meta{display:flex;flex-wrap:wrap;gap:6px;padding:8px 16px 12px;align-items:center;}
.wt-detail-badge{background:rgba(255,255,255,0.1);color:#CBD5E1;font-size:11px;font-weight:600;padding:4px 10px;border-radius:20px;border:1px solid rgba(255,255,255,0.12);}
.wt-detail-score{background:rgba(250,204,21,0.18);color:#FDE047;font-size:11px;font-weight:700;padding:4px 10px;border-radius:20px;border:1px solid rgba(250,204,21,0.3);}
.wt-detail-play-btn{margin:4px 16px 0;width:calc(100% - 32px);background:linear-gradient(135deg,#7C3AED,#4F46E5);color:#fff;border:none;border-radius:14px;padding:15px;font-size:15px;font-weight:800;cursor:pointer;font-family:inherit;display:flex;align-items:center;justify-content:center;gap:8px;box-shadow:0 4px 20px rgba(124,58,237,0.4);}
.wt-detail-section-label{font-size:11px;font-weight:700;color:#6B7280;text-transform:uppercase;letter-spacing:0.6px;padding:20px 16px 8px;}
.wt-detail-overview{font-size:13.5px;color:#CBD5E1;line-height:1.65;padding:0 16px;}

#officialPopupOverlay{position:fixed;inset:0;background:rgba(10,14,28,0.42);backdrop-filter:blur(4px) saturate(1.1);-webkit-backdrop-filter:blur(4px) saturate(1.1);z-index:99990;display:none;align-items:center;justify-content:center;padding:20px;animation:iosOverlayIn 0.22s ease;}
#officialPopupOverlay.active{display:flex;}
#officialPopupBox{background:#fff;border-radius:28px;width:100%;max-width:360px;max-height:calc(100vh - 40px);overflow-x:hidden;overflow-y:auto;box-shadow:0 24px 70px -12px rgba(15,23,42,0.32);animation:officialPopupSlideUp 0.4s var(--ios-ease,cubic-bezier(.32,.72,0,1));}

.wt-info-sheet{position:fixed;top:0;left:0;right:0;bottom:0;background:#fff;z-index:9700;display:flex;flex-direction:column;transform:translateY(100%);transition:transform .3s cubic-bezier(0.4,0,0.2,1);}
.wt-info-sheet.open{transform:translateY(0);}
.wt-info-header{display:flex;align-items:center;gap:10px;padding:14px 14px;border-bottom:1px solid var(--border);flex-shrink:0;background:#fff;}
.wt-info-back{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text-primary);flex-shrink:0;}
.wt-info-back:active{background:var(--bg);}
.wt-info-title{font-size:16px;font-weight:700;color:var(--text-primary);}
.wt-info-body{flex:1;overflow-y:auto;padding:16px;}

.wt-faq-item{border-bottom:1px solid var(--border);padding:12px 2px;}
.wt-faq-q{display:flex;align-items:center;justify-content:space-between;gap:10px;cursor:pointer;}
.wt-faq-q .q-text{font-size:13.5px;font-weight:600;color:var(--text-primary);line-height:1.5;}
.wt-faq-q .material-icons-round{color:var(--text-muted);flex-shrink:0;transition:transform .2s ease;}
.wt-faq-item.open .wt-faq-q .material-icons-round{transform:rotate(180deg);}
.wt-faq-a{max-height:0;overflow:hidden;font-size:12.5px;color:var(--text-secondary);line-height:1.65;transition:max-height .25s ease,margin-top .25s ease;margin-top:0;}
.wt-faq-item.open .wt-faq-a{max-height:400px;margin-top:8px;}

.wt-update-card{background:var(--bg);border-radius:14px;padding:14px 16px;margin-bottom:12px;}
.wt-update-version{display:flex;align-items:center;gap:8px;margin-bottom:8px;}
.wt-update-badge{background:var(--primary);color:#fff;font-size:11px;font-weight:700;padding:3px 10px;border-radius:20px;letter-spacing:0.3px;}
.wt-update-date{font-size:11px;color:var(--text-muted);}
.wt-update-list{padding-left:18px;margin-top:6px;}
.wt-update-list li{font-size:12.5px;color:var(--text-secondary);line-height:1.85;}

.wt-settings-row{display:flex;align-items:center;justify-content:space-between;padding:14px 2px;border-bottom:1px solid var(--border);gap:14px;}
.wt-settings-label{font-size:13.5px;font-weight:600;color:var(--text-primary);}
.wt-settings-sub{font-size:11.5px;color:var(--text-muted);margin-top:2px;line-height:1.4;}
.wt-toggle{width:46px;height:26px;border-radius:20px;background:#CBD5E1;position:relative;cursor:pointer;transition:background .2s ease;flex-shrink:0;}
.wt-toggle.on{background:#3B5BDB;}
.wt-toggle-knob{width:20px;height:20px;border-radius:50%;background:#fff;position:absolute;top:3px;left:3px;transition:left .2s ease;box-shadow:0 1px 3px rgba(0,0,0,0.25);}
.wt-toggle.on .wt-toggle-knob{left:23px;}

.wt-lock-input{width:100%;text-align:center;font-size:26px;letter-spacing:10px;padding:14px 10px;border-radius:12px;border:2px solid var(--border);background:var(--bg);color:var(--text-primary);margin:18px 0;-webkit-user-select:text;user-select:text;}
.wt-lock-input:focus{border-color:#3B5BDB;}

body,#pageContainer,.page-header,.page-section,.page-row,.page-input-wrap,
.form-input,.wt-form-input,.page-input,.ref-input,.wt-lock-input,
.vn-app-card,.vn-inline-price-row,.vn-price-panel,.vn-otp-box,.vn-deposit-card,
.vn-qr-box,.vn-bottom-nav,.vn-search,.vn-btn-secondary,.vn-amt-btn,
.modal-box,.sp-player-bar,.sp-search-bar,.sp-lyrics-btn,.wt-card,.wt-genre-chip,
.ref-tab-bar,.ref-info-box,.ref-stat-card,.ref-input-wrap,.ref-panel,
.wt-info-sheet,.wt-info-header,.wt-update-card,.auth-card,.wt-toggle,
.toast,.wt-settings-row,.material-icons-round,svg,
.vn-success-sheet-box,#officialPopupBox{
  transition:background 0.2s ease,color 0.2s ease,border-color 0.2s ease,box-shadow 0.2s ease;
}

html.wt-dark, body.wt-dark{
  color-scheme: dark;
  --primary-light:#1E3A8A;
  --bg:#0C0E12; --border:#2A2E38;
  --surface:#17191F; --surface-2:#1D2027;
  --text-primary:#F1F5F9; --text-secondary:#A9B1C0; --text-muted:#7A828E;
  --overlay:rgba(0,0,0,0.78);
  --shadow:0 1px 3px rgba(0,0,0,0.4),0 4px 12px rgba(0,0,0,0.3);
  --shadow-lg:0 8px 32px rgba(0,0,0,0.55);
}
html.wt-dark, body.wt-dark{background:var(--bg);color:var(--text-primary);}
body.wt-dark .sc-page{background:var(--bg);}
body.wt-dark .page-header{background:var(--surface);}

body.wt-dark .page-header,
body.wt-dark .page-section,
body.wt-dark .page-input-wrap,
body.wt-dark .vn-app-card,
body.wt-dark .vn-inline-price-row,
body.wt-dark .vn-otp-box,
body.wt-dark .vn-deposit-card,
body.wt-dark .vn-qr-box,
body.wt-dark .vn-bottom-nav,
body.wt-dark .modal-box,
body.wt-dark .sp-player-bar,
body.wt-dark .wt-card,
body.wt-dark .wt-genre-chip,
body.wt-dark .ref-tab-bar,
body.wt-dark .ref-info-box,
body.wt-dark .ref-stat-card,
body.wt-dark .ref-input-wrap,
body.wt-dark .wt-info-sheet,
body.wt-dark .wt-info-header,
body.wt-dark .wt-update-card,
body.wt-dark .auth-card,
body.wt-dark .vn-success-sheet-box,
body.wt-dark #officialPopupBox{
  background:var(--surface);color:var(--text-primary);border-color:var(--border);
}

body.wt-dark .ref-panel{background:var(--bg);}

body.wt-dark .form-input,
body.wt-dark .wt-form-input,
body.wt-dark .page-input,
body.wt-dark .ref-input,
body.wt-dark .wt-lock-input,
body.wt-dark .vn-search,
body.wt-dark .sp-search-bar{
  background:var(--surface-2);color:#F1F5F9;border-color:#2E2E2E;
}
body.wt-dark ::placeholder{color:#6B7280;}

body.wt-dark .vn-app-card,
body.wt-dark .wt-genre-chip,
body.wt-dark .vn-inline-price-row,
body.wt-dark .vn-deposit-card,
body.wt-dark .page-row{border-color:#2A2A2A;}
body.wt-dark .page-row{border-bottom-color:var(--surface-2);}

body.wt-dark .vn-price-panel{background:var(--surface);border-top-color:#2A2A2A;}

body.wt-dark .vn-btn-secondary,
body.wt-dark .vn-amt-btn{background:var(--surface-2);color:var(--text-primary);}
body.wt-dark .vn-btn-danger{background:#3B1414;color:#F87171;}
body.wt-dark .vn-btn-success{background:#12301C;color:#4ADE80;}
body.wt-dark .vn-badge{background:#2E1F4D;color:#C4B5FD;}
body.wt-dark .wt-clear-all-btn{background:#3B1414;color:#F87171;}
body.wt-dark .auth-error{background:#3B1414;}

body.wt-dark .toast{background:color-mix(in srgb, var(--surface-2) 78%, transparent);color:#F1F5F9;border-color:rgba(255,255,255,0.08);}

body.wt-dark .wt-toggle{background:#3A3A3A;}
body.wt-dark .wt-toggle.on{background:#3B5BDB;}

body.wt-dark hr,
body.wt-dark .ref-tab-bar{border-color:var(--surface-2);}

/* ── Modal Login/Register (dipicu dari topbar/hero landing page) ──── */
/* Landing page & modal auth SENGAJA dikunci ke warna brand default
   (--primary dst dari :root) dan TIDAK mengikuti fitur ganti-warna
   aplikasi (accent-blue/green/purple/custom) -- deklarasi ulang di
   sini menimpa nilai yang diwarisi dari body (termasuk inline style
   custom color, yang normalnya paling menang), supaya landing/login/
   register selalu tampil dengan warna default apa pun tema warna yang
   dipilih user di halaman dalam aplikasi. */
.rh-auth-modal-overlay, .lp-wrap{
  --primary:#0A57D6; --primary-dark:#043FA3; --primary-light:#E4EDFE;
  --primary-soft:#EAF2FF; --accent:#065AD8;
}
.rh-auth-modal-overlay{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:var(--bg);z-index:10050;
  align-items:flex-start;justify-content:center;padding:28px 16px;overflow-y:auto;-webkit-overflow-scrolling:touch;}
.rh-auth-modal-overlay::-webkit-scrollbar{display:none;}
.rh-auth-modal-overlay.active{display:flex;}
.rh-auth-modal-overlay .auth-card{position:relative;margin:auto;}
.rh-auth-modal-close{position:absolute;top:14px;right:14px;width:32px;height:32px;border-radius:50%;
  background:var(--surface-2);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;
  color:var(--text-secondary);cursor:pointer;z-index:1;}
.rh-auth-modal-close:active{transform:scale(0.94);}

/* ══════════════════════════════════════════════════════════════════
   LANDING PAGE v2 — dibangun dari nol, 100% pakai variabel tema
   aplikasi (--bg/--surface/--text-*/--primary/--border/dst) supaya
   otomatis kompatibel mode terang & gelap tanpa palet terpisah.
   ══════════════════════════════════════════════════════════════ */

.lp-wrap{width:100%;min-height:100dvh;display:flex;flex-direction:column;
  align-items:stretch;background:var(--bg);color:var(--text-primary);
  --lp-ring:color-mix(in srgb, var(--primary) 55%, transparent);
  --lp-glass:color-mix(in srgb, var(--surface) 72%, transparent);}

.lp-wrap ::selection{background:var(--primary);color:#fff;}

@keyframes lpFadeUp{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:translateY(0);}}
@keyframes lpFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-9px);}}
@keyframes lpPulseRing{0%{box-shadow:0 0 0 0 var(--lp-ring);}70%{box-shadow:0 0 0 9px transparent;}100%{box-shadow:0 0 0 0 transparent;}}
@keyframes lpShimmer{0%{background-position:-200% 0;}100%{background-position:200% 0;}}
@keyframes lpDrift{0%{transform:translate(0,0) rotate(0deg);}50%{transform:translate(3%,4%) rotate(6deg);}100%{transform:translate(0,0) rotate(0deg);}}
@media (prefers-reduced-motion: reduce){
  .lp-wrap *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;}
}

/* ── Topbar : glass, blurred, elevates on scroll ─────────────────── */
.lp-topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;
  padding:13px 20px;background:var(--lp-glass);backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);border-bottom:1px solid var(--border);}
.lp-topbar-brand{display:flex;align-items:center;gap:4px;font-family:'Sora',sans-serif;font-weight:700;
  font-size:16.5px;color:var(--text-primary);letter-spacing:-0.2px;}
.lp-topbar-icon{width:36px;height:36px;object-fit:contain;border-radius:10px;flex-shrink:0;
  box-shadow:0 2px 8px rgba(10,87,214,0.18);}
.lp-topbar-wordmark{height:19px;width:auto;object-fit:contain;display:block;}
.lp-topbar-cta{position:relative;background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:#fff;
  font-size:12.5px;font-weight:700;padding:9px 20px;border-radius:999px;text-decoration:none;
  box-shadow:0 6px 16px color-mix(in srgb, var(--primary) 38%, transparent);
  transition:transform .16s cubic-bezier(.22,1,.36,1),box-shadow .16s ease;}
.lp-topbar-cta:active{transform:scale(.94);}
@media (hover:hover){.lp-topbar-cta:hover{transform:translateY(-1px);box-shadow:0 10px 22px color-mix(in srgb, var(--primary) 45%, transparent);}}

/* ── Hero : layered gradient mesh + grain of dots ────────────────── */
.lp-hero{position:relative;text-align:center;padding:56px 22px 30px;overflow:hidden;flex-shrink:0;}
.lp-hero::before{content:'';position:absolute;inset:-10%;z-index:0;pointer-events:none;
  background:
    radial-gradient(46% 40% at 14% -8%, color-mix(in srgb, var(--primary) 20%, transparent), transparent 62%),
    radial-gradient(40% 36% at 96% 4%, color-mix(in srgb, var(--primary) 16%, transparent), transparent 60%),
    radial-gradient(60% 50% at 50% 115%, color-mix(in srgb, var(--primary) 10%, transparent), transparent 65%);
  animation:lpDrift 16s ease-in-out infinite;}
.lp-hero::after{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:radial-gradient(color-mix(in srgb, var(--text-primary) 14%, transparent) 1px, transparent 1px);
  background-size:22px 22px;mask-image:radial-gradient(60% 55% at 50% 0%, #000 0%, transparent 75%);}
.lp-hero > *{position:relative;z-index:1;}
.lp-eyebrow{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;
  letter-spacing:0.05em;text-transform:uppercase;color:var(--primary);background:var(--primary-soft);
  border:1px solid var(--primary-light);padding:7px 14px;border-radius:999px;margin-bottom:18px;
  animation:lpFadeUp .5s cubic-bezier(.22,1,.36,1) both;}
.lp-eyebrow .material-icons-round{font-size:14px;}
.lp-hero-title{font-family:'Sora',sans-serif;font-size:33px;line-height:1.16;font-weight:800;
  letter-spacing:-0.9px;margin-bottom:14px;color:var(--text-primary);
  animation:lpFadeUp .55s cubic-bezier(.22,1,.36,1) .05s both;}
.lp-hero-title b{background:linear-gradient(100deg,var(--primary) 10%,var(--primary-dark) 55%,var(--primary) 100%);
  background-size:220% auto;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:lpShimmer 5s linear infinite;font-weight:800;}
.lp-hero-sub{font-size:14px;line-height:1.7;color:var(--text-secondary);max-width:400px;margin:0 auto 22px;
  animation:lpFadeUp .55s cubic-bezier(.22,1,.36,1) .1s both;}

/* signature element: live OTP ticker chip */
.lp-otp-chip{position:relative;display:inline-flex;align-items:center;gap:10px;margin:0 auto 24px;padding:12px 20px;
  border-radius:999px;background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow);
  animation:lpFadeUp .55s cubic-bezier(.22,1,.36,1) .16s both,lpPulseRing 2.6s ease-in-out infinite;}
.lp-otp-chip::before{content:'';position:absolute;left:14px;top:50%;translate:0 -50%;width:6px;height:6px;
  border-radius:50%;background:#22C55E;box-shadow:0 0 0 3px color-mix(in srgb,#22C55E 25%,transparent);}
.lp-otp-chip{padding-left:30px;}
.lp-otp-chip .material-icons-round{font-size:16px;color:var(--primary);}
.lp-otp-chip-digits{display:flex;gap:5px;font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:18px;font-weight:700;color:var(--text-primary);letter-spacing:0.05em;}
.lp-otp-chip-digits span{display:inline-block;min-width:12px;}
.lp-otp-chip-label{font-size:10.5px;color:var(--text-muted);border-left:1px solid var(--border);padding-left:10px;}

.lp-hero-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:28px;
  animation:lpFadeUp .55s cubic-bezier(.22,1,.36,1) .2s both;}
.lp-btn{position:relative;display:inline-flex;align-items:center;gap:6px;justify-content:center;padding:14px 26px;
  border-radius:13px;font-size:13.5px;font-weight:700;text-decoration:none;cursor:pointer;overflow:hidden;
  transition:transform .16s cubic-bezier(.22,1,.36,1),box-shadow .16s ease,background .16s ease;}
.lp-btn:active{transform:scale(0.95);}
.lp-btn-primary{background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:#fff;
  box-shadow:0 12px 28px color-mix(in srgb, var(--primary) 38%, transparent);}
@media (hover:hover){.lp-btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 32px color-mix(in srgb, var(--primary) 48%, transparent);}}
.lp-btn-ghost{background:var(--surface);color:var(--text-primary);border:1.5px solid var(--border);}
@media (hover:hover){.lp-btn-ghost:hover{border-color:var(--primary);background:var(--primary-soft);transform:translateY(-2px);}}
.lp-hero-stats{display:flex;justify-content:center;gap:0;flex-wrap:wrap;
  animation:lpFadeUp .55s cubic-bezier(.22,1,.36,1) .25s both;}
.lp-hero-stat{display:flex;flex-direction:column;align-items:center;gap:2px;padding:0 22px;position:relative;}
.lp-hero-stat+.lp-hero-stat::before{content:'';position:absolute;left:0;top:15%;bottom:15%;width:1px;background:var(--border);}
.lp-hero-stat b{font-family:'Sora',sans-serif;font-size:19px;font-weight:800;color:var(--text-primary);letter-spacing:-.3px;}
.lp-hero-stat span{font-size:10px;color:var(--text-muted);letter-spacing:0.06em;text-transform:uppercase;}

.lp-hero-mascot{position:relative;text-align:center;padding:4px 20px 0;}
.lp-hero-mascot img{max-width:100%;width:280px;height:auto;object-fit:contain;
  filter:drop-shadow(0 24px 36px rgba(4,32,84,0.18));animation:lpFloat 5s ease-in-out infinite;}
body.wt-dark .lp-hero-mascot img{filter:drop-shadow(0 24px 36px rgba(0,0,0,0.55));}

/* ── Sections ─────────────────────────────────────────────────── */
.lp-section{padding:56px 20px;position:relative;}
.lp-section-alt{background:var(--surface);border-top:1px solid var(--border);border-bottom:1px solid var(--border);}
.lp-section-head{text-align:center;max-width:440px;margin:0 auto 32px;}
.lp-section-head h2{font-family:'Sora',sans-serif;font-size:24px;font-weight:800;color:var(--text-primary);
  letter-spacing:-0.5px;margin-bottom:9px;}
.lp-section-head h2 b{color:var(--primary);font-weight:800;}
.lp-section-head p{font-size:13px;color:var(--text-secondary);line-height:1.6;}

.lp-about-text{max-width:640px;margin:0 auto;font-size:13.5px;line-height:1.85;color:var(--text-secondary);}
.lp-about-text p{margin-bottom:14px;}
.lp-about-text b{color:var(--text-primary);font-weight:700;}

/* scroll-reveal base (JS toggles .in-view) */
.rh-reveal{opacity:0;transform:translateY(18px);transition:opacity .55s cubic-bezier(.22,1,.36,1),transform .55s cubic-bezier(.22,1,.36,1);}
.rh-reveal.rh-in{opacity:1;transform:none;}
.lp-feature-grid .rh-reveal:nth-child(1){transition-delay:.02s;} .lp-feature-grid .rh-reveal:nth-child(2){transition-delay:.08s;}
.lp-feature-grid .rh-reveal:nth-child(3){transition-delay:.14s;} .lp-feature-grid .rh-reveal:nth-child(4){transition-delay:.2s;}
.lp-feature-grid .rh-reveal:nth-child(5){transition-delay:.26s;} .lp-feature-grid .rh-reveal:nth-child(6){transition-delay:.32s;}
.lp-faq-list .rh-reveal:nth-child(1){transition-delay:.02s;} .lp-faq-list .rh-reveal:nth-child(2){transition-delay:.06s;}
.lp-faq-list .rh-reveal:nth-child(3){transition-delay:.1s;} .lp-faq-list .rh-reveal:nth-child(4){transition-delay:.14s;}
.lp-faq-list .rh-reveal:nth-child(5){transition-delay:.18s;}

/* ── Kartu fitur : glass, gradient-ring on hover ─────────────────── */
.lp-feature-grid{display:grid;grid-template-columns:1fr;gap:14px;max-width:420px;margin:0 auto;}
.lp-feature-card{position:relative;text-align:left;background:var(--surface);border:1px solid var(--border);
  border-radius:20px;padding:22px;box-shadow:var(--shadow);isolation:isolate;overflow:hidden;
  transition:transform .22s cubic-bezier(.22,1,.36,1),border-color .22s ease,box-shadow .22s ease;}
.lp-feature-card::before{content:'';position:absolute;inset:0;z-index:-1;opacity:0;border-radius:inherit;
  background:radial-gradient(120px 90px at var(--mx,50%) var(--my,0%), color-mix(in srgb, var(--primary) 14%, transparent), transparent 70%);
  transition:opacity .25s ease;}
.lp-feature-card:active{transform:scale(0.98);}
@media (hover:hover){
  .lp-feature-card:hover{border-color:var(--primary-light);transform:translateY(-4px);box-shadow:0 18px 34px color-mix(in srgb, var(--primary) 14%, transparent);}
  .lp-feature-card:hover::before{opacity:1;}
  .lp-feature-card:hover .lp-feature-icon{transform:scale(1.08) rotate(-4deg);}
}
.lp-feature-icon{width:46px;height:46px;border-radius:13px;background:linear-gradient(135deg,var(--primary-soft),var(--primary-light));
  display:flex;align-items:center;justify-content:center;margin-bottom:14px;
  transition:transform .25s cubic-bezier(.22,1,.36,1);}
.lp-feature-icon .material-icons-round{font-size:22px;color:var(--primary);}
.lp-feature-card h3{font-size:14.5px;font-weight:700;color:var(--text-primary);margin-bottom:6px;line-height:1.3;}
.lp-feature-card p{font-size:12.5px;color:var(--text-secondary);line-height:1.65;}

/* ── Cara kerja ───────────────────────────────────────────────── */
.lp-step-list{position:relative;display:flex;flex-direction:column;gap:0;max-width:440px;margin:0 auto;}
.lp-step-list::before{content:'';position:absolute;left:16.5px;top:8px;bottom:8px;width:1px;
  background:linear-gradient(var(--border),var(--primary-light),var(--border));}
.lp-step{position:relative;display:flex;align-items:flex-start;gap:16px;padding:14px 0;}
.lp-step-num{position:relative;z-index:1;flex-shrink:0;width:34px;height:34px;border-radius:10px;
  background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:#fff;display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:14px;box-shadow:0 4px 12px color-mix(in srgb, var(--primary) 35%, transparent);}
.lp-step-text{padding-top:3px;}
.lp-step-text h4{font-size:14px;font-weight:700;color:var(--text-primary);margin-bottom:4px;}
.lp-step-text p{font-size:12.5px;color:var(--text-secondary);line-height:1.6;}

/* ── Keamanan / trust ─────────────────────────────────────────── */
.lp-trust-grid{display:grid;grid-template-columns:1fr;gap:10px;max-width:640px;margin:0 auto;}
.lp-trust-item{display:flex;gap:13px;background:var(--surface);border:1px solid var(--border);
  border-radius:16px;padding:16px;box-shadow:var(--shadow);transition:border-color .2s ease,transform .2s ease;}
@media (hover:hover){.lp-trust-item:hover{border-color:var(--primary-light);transform:translateX(2px);}}
.lp-trust-item .material-icons-round{color:var(--primary);font-size:19px;flex-shrink:0;margin-top:1px;}
.lp-trust-item p{font-size:12.5px;line-height:1.6;color:var(--text-secondary);}
.lp-trust-item b{color:var(--text-primary);}

/* ── FAQ ──────────────────────────────────────────────────────── */
.lp-faq-list{display:flex;flex-direction:column;gap:10px;max-width:480px;margin:0 auto;}
.lp-faq-item{background:var(--surface);border:1px solid var(--border);border-radius:16px;
  padding:16px 18px;box-shadow:var(--shadow);transition:border-color .2s ease,box-shadow .2s ease;}
.lp-faq-item[open]{border-color:var(--primary-light);box-shadow:0 10px 24px color-mix(in srgb, var(--primary) 10%, transparent);}
.lp-faq-item summary{list-style:none;cursor:pointer;font-size:13.5px;font-weight:700;color:var(--text-primary);
  display:flex;align-items:center;justify-content:space-between;gap:10px;}
.lp-faq-item summary::-webkit-details-marker{display:none;}
.lp-faq-item summary::after{content:'expand_more';font-family:'Material Icons Round';font-size:20px;
  color:var(--primary);flex-shrink:0;transition:transform .2s cubic-bezier(.22,1,.36,1);}
.lp-faq-item[open] summary::after{transform:rotate(180deg);}
.lp-faq-item p{font-size:12.5px;color:var(--text-secondary);line-height:1.65;margin-top:11px;}

/* ── Footer ───────────────────────────────────────────────────── */
.lp-footer{position:relative;text-align:left;padding:44px 24px 32px;background:var(--bg);
  color:var(--text-secondary);border-top:1px solid var(--border);overflow:hidden;}
.lp-footer::before{content:'';position:absolute;top:-60%;right:-20%;width:60%;padding-bottom:60%;border-radius:50%;
  background:radial-gradient(circle, color-mix(in srgb, var(--primary) 10%, transparent), transparent 70%);pointer-events:none;}
.lp-footer-brand{position:relative;display:flex;align-items:center;justify-content:flex-start;gap:6px;font-family:'Sora',sans-serif;
  font-weight:700;font-size:16px;color:var(--text-primary);margin-bottom:14px;}
.lp-footer-icon{width:32px;height:32px;object-fit:contain;border-radius:7px;flex-shrink:0;}
.lp-footer-wordmark{height:19px;width:auto;object-fit:contain;display:block;}
.lp-footer p{position:relative;font-size:13px;line-height:1.65;max-width:420px;margin:0 0 32px;color:var(--text-secondary);}

.lp-footer-cols{position:relative;display:flex;flex-direction:column;gap:28px;margin-bottom:32px;}
.lp-footer-col{display:flex;flex-direction:column;gap:14px;}
.lp-footer-col h4{margin:0;font-family:'Sora',sans-serif;font-size:12px;font-weight:800;letter-spacing:.06em;
  color:var(--text-primary);text-transform:uppercase;}
.lp-footer-col a{color:var(--text-secondary);text-decoration:none;font-size:13.5px;transition:color .15s ease,transform .15s ease;display:inline-block;}
@media (hover:hover){.lp-footer-col a:hover{color:var(--primary);transform:translateX(2px);}}

@media (min-width:560px){
  .lp-footer-cols{flex-direction:row;justify-content:space-between;gap:24px;}
  .lp-footer-col{flex:1;}
}

.lp-footer-copy{position:relative;font-size:11px;color:var(--text-muted);border-top:1px solid var(--border);
  padding-top:16px;margin-top:8px;text-align:center;}

@media (max-width:360px){
  .lp-hero-title{font-size:27px;}
}

body.wt-dark .vn-history-row{background:var(--surface);border-color:#2A2A2A;}
body.wt-dark .vn-active-card{box-shadow:0 8px 24px rgba(0,0,0,0.45);}

body.wt-dark .auth-tab{color:#A3AAB8;}
body.wt-dark .auth-logo h1,body.wt-dark .rh-welcome-title{color:#F1F5F9;}
body.wt-dark .rh-google-btn,body.wt-dark .rh-github-btn{background:var(--surface);border-color:#262626;color:#F1F5F9;}
body.wt-dark .rh-github-icon{color:#F1F5F9;}
body.wt-dark .auth-success{background:#062F23;border-color:#0B4A38;color:#86EFAC;}

body.wt-dark [style*="background:#fff"]{background:var(--surface) !important;}
body.wt-dark [style*="background:#F8FAFC"]{background:var(--surface) !important;}
body.wt-dark [style*="background:#F1F5F9"]{background:var(--surface-2) !important;}
body.wt-dark [style*="background:#EAF2FF"]{background:#0F2A57 !important;}
body.wt-dark [style*="background:#E4EDFE"]{background:#0F2A57 !important;}

body.wt-dark [style*="color:#0B1A33"]{color:#F1F5F9 !important;}
body.wt-dark [style*="color:#0F172A"]{color:#F1F5F9 !important;}
body.wt-dark [style*="color:#334155"]{color:#E2E8F0 !important;}
body.wt-dark [style*="color:#1E293B"]{color:#F1F5F9 !important;}
body.wt-dark [style*="color:#374151"]{color:#E2E8F0 !important;}
body.wt-dark [style*="color:#5B6B85"]{color:#9CA6B8 !important;}
body.wt-dark [style*="color:#64748B"]{color:#9CA6B8 !important;}
body.wt-dark [style*="color:#6B7280"]{color:#9CA6B8 !important;}
body.wt-dark [style*="color:#475569"]{color:#B0B8C4 !important;}

body.wt-dark [style*="border:1.5px solid #E2E8F0"]{border-color:#2A2A2A !important;}
body.wt-dark [style*="border: 1.5px solid #E2E8F0"]{border-color:#2A2A2A !important;}
body.wt-dark [style*="border:1px solid #E2E8F0"]{border-color:#2A2A2A !important;}
body.wt-dark [style*="border:1px solid #EEF2F8"]{border-color:#2A2A2A !important;}
body.wt-dark [style*="border-bottom:1px solid #F1F5F9"]{border-color:var(--surface-2) !important;}
body.wt-dark [style*="background:#EAF2FF"] .material-icons-round,
body.wt-dark [style*="background:#E4EDFE"] .material-icons-round{color:#8FC2FF !important;}

body.wt-dark ::-webkit-scrollbar-thumb{background:#333;}

body.wt-dark [style*="background:linear-gradient(135deg,#EEF2FF,#F5F3FF)"]{
  background:var(--surface) !important;border-color:#2A2A2A !important;box-shadow:none !important;
}
body.wt-dark [style*="background:#F8FAFC"]{background:var(--surface-2) !important;}
body.wt-dark [style*="background:#FEF3C7"]{background:#2A2110 !important;}
body.wt-dark [style*="background:#DCFCE7"]{background:#0F2E1C !important;color:#4ADE80 !important;}
body.wt-dark [style*="background:#FEE2E2"]{background:#3B1414 !important;color:#F87171 !important;}
body.wt-dark [style*="background:#EFF6FF"]{background:#0F2A57 !important;}
body.wt-dark [style*="background:#EDE9FE"]{background:#2E1F4D !important;}
body.wt-dark [style*="border:1px solid #F1F5F9"]{border-color:#232323 !important;}
body.wt-dark [style*="border-bottom:1px solid #F1F5F9"]{border-color:#232323 !important;}
body.wt-dark .vn-history-row{box-shadow:0 1px 4px rgba(0,0,0,0.3);}
body.wt-dark .vn-app-icon-box{box-shadow:0 1px 4px rgba(0,0,0,0.3) !important;}
body.wt-dark [id^="vnAvatarCircle"]{box-shadow:0 4px 12px rgba(0,0,0,0.35) !important;}

/* (Bubble notifikasi mengambang versi lama sudah dihapus, diganti ikon
   bell di header halaman Beli — lihat services.js _vnBeliHeaderInit()) */

/* ── Menu Cepat: grid kartu modern (Baca Manga / Movie & TV / Tutorial / API) ── */
.vn-qm-card{
  transition:transform .16s cubic-bezier(0.22,1,0.36,1), box-shadow .16s ease, border-color .16s ease, background .16s ease;
  box-shadow:0 1px 2px rgba(4,32,84,0.04);
}
.vn-qm-card:active{
  transform:scale(0.96);
  background:var(--surface-2);
  box-shadow:0 1px 2px rgba(4,32,84,0.04);
}
@media (hover:hover){
  .vn-qm-card:hover{
    transform:translateY(-2px);
    border-color:var(--primary-light);
    box-shadow:0 10px 24px rgba(4,32,84,0.10);
  }
  .vn-qm-card:hover .vn-qm-arrow{ opacity:1; transform:translate(1px,-1px); }
}
.vn-qm-arrow{ opacity:0.55; transition:opacity .16s ease, transform .16s ease; }

/* ── RumahOTP-style landing rebuild — modernized pass ────────────── */
.lp-hero-mascot img{max-width:520px;}

.lp-eyebrow-pill{position:relative;display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;
  color:var(--primary);background:var(--primary-soft);border:1px solid var(--primary-light);border-radius:999px;
  padding:6px 14px 6px 12px;margin-bottom:14px;letter-spacing:.02em;}
.lp-eyebrow-pill::before{content:'';width:6px;height:6px;border-radius:50%;
  background:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent);flex-shrink:0;}

.lp-feature-grid{grid-template-columns:1fr;gap:14px;max-width:460px;}
.lp-feature-card{border-radius:20px;padding:24px 20px;text-align:center;}
.lp-feature-icon{margin:0 auto 14px;width:50px;height:50px;border-radius:15px;}
.lp-feature-card h3{margin-bottom:8px;}

/* testimonial carousel — auto-sliding, scroll-snap, profile avatars */
.lp-review-carousel{position:relative;max-width:100%;margin:0 auto;}
.lp-review-track{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  padding:4px 20px 22px;-webkit-overflow-scrolling:touch;scrollbar-width:none;
  scroll-padding-left:20px;}
.lp-review-track::-webkit-scrollbar{display:none;}
.lp-review-card{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:18px;
  padding:22px;box-shadow:var(--shadow);overflow:hidden;transition:transform .2s cubic-bezier(.22,1,.36,1),border-color .2s ease;
  flex:0 0 auto;width:calc(100% - 56px);max-width:320px;scroll-snap-align:start;}
.lp-review-card::after{content:'\201D';position:absolute;top:6px;right:16px;font-family:Georgia,serif;
  font-size:64px;line-height:1;color:var(--primary-soft);z-index:0;pointer-events:none;}
.lp-review-card>*{position:relative;z-index:1;}
@media (hover:hover){.lp-review-card:hover{transform:translateY(-3px);border-color:var(--primary-light);}}
.lp-review-logo{height:20px;width:auto;object-fit:contain;margin-bottom:12px;display:block;filter:saturate(1.05);}
.lp-review-card p{font-size:13.5px;color:var(--text-primary);line-height:1.6;margin-bottom:16px;font-weight:500;
  min-height:44px;}
.lp-review-person{display:flex;align-items:center;gap:10px;}
.lp-review-avatar{width:38px;height:38px;border-radius:50%;flex-shrink:0;box-shadow:0 3px 8px rgba(0,0,0,0.15);
  display:flex;align-items:center;justify-content:center;padding:2px;overflow:hidden;}
.lp-review-avatar img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block;background:#fff;}
.lp-review-person b{display:block;font-size:13px;color:var(--text-primary);font-weight:700;}
.lp-review-person span{display:block;font-size:11.5px;color:var(--text-muted);}

@media (min-width:420px){
  .lp-review-track{padding-left:calc(50% - 160px);padding-right:calc(50% - 160px);scroll-padding-left:calc(50% - 160px);}
  .lp-review-card{scroll-snap-align:center;}
}

/* progress bar replaces a long dot row -- clearer with 15 cards */
.lp-review-progress{position:relative;max-width:200px;height:4px;margin:0 auto;border-radius:999px;
  background:var(--border);overflow:hidden;}
.lp-review-progress-bar{position:absolute;inset:0 auto 0 0;width:0%;border-radius:999px;
  background:linear-gradient(90deg,var(--primary),var(--primary-dark));transition:width .35s cubic-bezier(.22,1,.36,1);}
.lp-review-counter{text-align:center;font-size:11px;color:var(--text-muted);margin-top:9px;
  font-family:'JetBrains Mono',ui-monospace,monospace;letter-spacing:.02em;}

/* step visuals — connecting gradient rail with glowing numbers */
.lp-step-visual{position:relative;display:flex;flex-direction:column;gap:40px;max-width:460px;margin:0 auto;padding-left:2px;}
.lp-step-visual::before{content:'';position:absolute;left:20px;top:20px;bottom:20px;width:2px;
  background:linear-gradient(var(--primary-light),var(--primary) 40%,var(--primary) 60%,var(--primary-light));
  opacity:.6;}
.lp-step-visual-item{position:relative;text-align:center;}
.lp-step-visual-num{position:relative;width:40px;height:40px;border-radius:50%;
  background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:#fff;
  font-weight:800;font-size:15px;display:flex;align-items:center;justify-content:center;margin:0 auto 14px;
  box-shadow:0 0 0 5px var(--bg),0 6px 16px color-mix(in srgb, var(--primary) 40%, transparent);}
.lp-step-visual-item h4{font-size:16px;font-weight:800;color:var(--text-primary);margin-bottom:6px;letter-spacing:-.2px;}
.lp-step-visual-item p{font-size:12.5px;color:var(--text-secondary);line-height:1.6;margin-bottom:16px;max-width:320px;margin-left:auto;margin-right:auto;}
.lp-step-visual-item img{max-width:100%;width:100%;max-width:340px;height:auto;object-fit:contain;border-radius:16px;
  box-shadow:0 14px 30px rgba(4,32,84,0.12);transition:transform .25s cubic-bezier(.22,1,.36,1);}
@media (hover:hover){.lp-step-visual-item img:hover{transform:translateY(-4px) scale(1.01);}}
body.wt-dark .lp-step-visual-item img{box-shadow:0 14px 30px rgba(0,0,0,0.4);}

.lp-faq-mascot{display:block;max-width:220px;width:60%;height:auto;margin:0 auto 26px;object-fit:contain;
  filter:drop-shadow(0 16px 26px rgba(4,32,84,0.14));animation:lpFloat 6s ease-in-out infinite;}
body.wt-dark .lp-faq-mascot{filter:drop-shadow(0 16px 26px rgba(0,0,0,0.5));}

/* CTA — gradient signature block */
.lp-cta-section{padding-top:8px;padding-bottom:8px;}
.lp-cta-box{position:relative;max-width:460px;margin:0 auto;overflow:hidden;
  background:linear-gradient(135deg,var(--primary-dark),var(--primary) 60%,color-mix(in srgb,var(--primary) 70%,#7C3AED 30%));
  border:none;border-radius:24px;padding:32px 26px;text-align:left;
  box-shadow:0 20px 44px color-mix(in srgb, var(--primary) 34%, transparent);}
.lp-cta-box::before{content:'';position:absolute;inset:0;opacity:.5;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.18) 1px, transparent 1px);background-size:16px 16px;
  mask-image:radial-gradient(70% 100% at 100% 0%, #000, transparent 70%);}
.lp-cta-box h2{position:relative;font-family:'Sora',sans-serif;font-size:22px;font-weight:800;color:#fff;margin-bottom:8px;letter-spacing:-.3px;}
.lp-cta-box p{position:relative;font-size:13px;color:rgba(255,255,255,0.86);line-height:1.6;margin-bottom:20px;max-width:340px;}
.lp-cta-box .lp-btn-primary{position:relative;background:#fff;color:var(--primary-dark);box-shadow:0 10px 24px rgba(0,0,0,0.2);}
@media (hover:hover){.lp-cta-box .lp-btn-primary:hover{background:#fff;transform:translateY(-2px);box-shadow:0 14px 28px rgba(0,0,0,0.25);}}

.lp-contact-banner{max-width:460px;margin:0 auto 20px;border-radius:22px;overflow:hidden;
  box-shadow:0 18px 36px rgba(4,32,84,0.14);}
body.wt-dark .lp-contact-banner{box-shadow:0 18px 36px rgba(0,0,0,0.45);}
.lp-contact-banner img{width:100%;height:auto;display:block;object-fit:cover;}

.lp-contact-info{display:flex;flex-direction:column;gap:12px;max-width:460px;margin:0 auto 22px;}
.lp-contact-info-item{display:flex;align-items:center;gap:12px;background:var(--surface);
  border:1px solid var(--border);border-radius:15px;padding:14px 16px;transition:border-color .2s ease,transform .2s ease;}
@media (hover:hover){.lp-contact-info-item:hover{border-color:var(--primary-light);transform:translateX(2px);}}
.lp-contact-info-item .material-icons-round{color:var(--primary);font-size:20px;flex-shrink:0;
  width:38px;height:38px;display:flex;align-items:center;justify-content:center;border-radius:11px;
  background:var(--primary-soft);}
.lp-contact-info-item span{display:block;font-size:11px;color:var(--text-muted);}
.lp-contact-info-item b{display:block;font-size:13.5px;color:var(--text-primary);font-weight:700;}

.lp-contact-form{max-width:460px;margin:0 auto;background:var(--surface);border:1px solid var(--border);
  border-radius:20px;padding:24px;display:flex;flex-direction:column;gap:6px;box-shadow:var(--shadow);}
.lp-contact-form h3{font-family:'Sora',sans-serif;font-size:17px;font-weight:800;color:var(--text-primary);margin-bottom:12px;letter-spacing:-.2px;}
.lp-contact-form label{font-size:12.5px;font-weight:600;color:var(--text-secondary);margin-top:10px;margin-bottom:6px;}
.lp-contact-form input,.lp-contact-form textarea{width:100%;border:1.5px solid var(--border);border-radius:13px;
  background:var(--surface-2);color:var(--text-primary);font-size:13.5px;font-family:inherit;padding:12px 14px;
  outline:none;resize:vertical;transition:border-color .18s ease,box-shadow .18s ease,background .18s ease;}
.lp-contact-form input:focus,.lp-contact-form textarea:focus{border-color:var(--primary);background:var(--surface);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--primary) 14%, transparent);}
.lp-contact-form button{margin-top:16px;}

/* ══════════════════════════════════════════════════════════════════
   Deposit v2 — didesain ulang supaya terasa seperti satu lembar
   ringkasan finansial yang rapi (bukan tumpukan kartu terpisah-pisah
   seperti sebelumnya), dengan hirarki yang jelas: nominal → metode →
   ringkasan & aksi. Semua warna pakai CSS var yang sudah ada supaya
   otomatis ikut dark mode & accent theme (blue/green/purple) tanpa
   perlu override tambahan.
   ══════════════════════════════════════════════════════════════════ */

.dep-wrap{padding:14px 16px 28px;}

/* Balance strip -> flat tinted card (bukan gradient tebal lagi) */
.dep-hero{position:relative;overflow:hidden;border-radius:var(--ios-radius-xl);padding:20px 18px;margin-bottom:14px;
  background:linear-gradient(135deg,var(--primary-dark) 0%,var(--primary) 100%);
  box-shadow:0 14px 34px -12px color-mix(in srgb, var(--primary) 55%, transparent);}
.dep-hero-blob{position:absolute;border-radius:50%;filter:blur(30px);pointer-events:none;}
.dep-hero-blob-1{width:150px;height:150px;top:-60px;right:-40px;background:rgba(255,255,255,.16);}
.dep-hero-blob-2{width:110px;height:110px;bottom:-50px;left:-30px;background:rgba(255,255,255,.10);}
.dep-hero-top{position:relative;display:flex;align-items:flex-start;justify-content:space-between;gap:10px;}
.dep-hero-label{display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;color:rgba(255,255,255,.82);}
.dep-hero-label .material-icons-round{font-size:15px;}
.dep-hero-value{font-family:'Sora',sans-serif;font-size:24px;font-weight:800;color:#fff;letter-spacing:-.02em;margin-top:4px;}
.dep-hero-icon{width:40px;height:40px;border-radius:13px;flex-shrink:0;background:rgba(255,255,255,.16);
  display:flex;align-items:center;justify-content:center;}
.dep-hero-icon .material-icons-round{color:#fff;font-size:19px;}
.dep-trust-row{position:relative;display:flex;flex-wrap:wrap;gap:6px;margin-top:16px;}
.dep-trust-pill{display:flex;align-items:center;gap:4px;padding:5px 10px;border-radius:999px;
  background:rgba(255,255,255,.14);color:#fff;font-size:10.5px;font-weight:700;}
.dep-trust-pill .material-icons-round{font-size:12px;}
.dep-chip-last{width:100%;margin-top:10px;padding:10px 12px;border-radius:var(--ios-radius-sm);border:1.5px dashed var(--border);
  background:transparent;color:var(--text-secondary);font-size:12px;font-weight:600;display:flex;align-items:center;
  justify-content:center;gap:6px;cursor:pointer;}
.dep-chip-last:active{transform:scale(.98);background:var(--surface-2);}
.dep-chip-last .material-icons-round{font-size:15px;color:var(--primary);}

.dep-summary-estimate{margin-top:2px;}
.dep-summary-estimate-row{display:flex;justify-content:space-between;align-items:center;font-size:11.5px;
  color:var(--text-muted);padding:3px 0;font-weight:500;}
.dep-summary-estimate-row span:last-child{font-weight:700;color:var(--text-secondary);}

.dep-history-card{padding-bottom:10px;}
.dep-history-list{display:flex;flex-direction:column;gap:8px;}
.dep-history-row{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--ios-radius-sm);background:var(--surface-2);}
.dep-history-row-icon{width:34px;height:34px;border-radius:10px;flex-shrink:0;background:#fff;box-shadow:inset 0 0 0 1px var(--ios-sep);
  display:flex;align-items:center;justify-content:center;}
.dep-history-row-icon .material-icons-round{font-size:15px;color:var(--ios-tint-green);}
.dep-history-row-body{flex:1;min-width:0;display:flex;align-items:center;justify-content:space-between;gap:8px;}
.dep-history-row-amt{font-size:13px;font-weight:700;color:var(--text-primary);}
.dep-history-row-time{font-size:11px;color:var(--text-muted);font-weight:500;white-space:nowrap;}

.dep-faq-card{padding-bottom:6px;}
.dep-faq{display:flex;flex-direction:column;gap:2px;}
.dep-faq-item{border-bottom:1px solid var(--ios-sep);}
.dep-faq-item:last-child{border-bottom:none;}
.dep-faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:13px 2px;background:none;border:none;cursor:pointer;text-align:left;
  font-size:12.5px;font-weight:700;color:var(--text-primary);font-family:inherit;}
.dep-faq-chevron{font-size:19px;color:var(--text-muted);transition:transform .25s var(--ios-ease,ease);flex-shrink:0;}
.dep-faq-item.open .dep-faq-chevron{transform:rotate(180deg);color:var(--primary);}
.dep-faq-a{max-height:0;overflow:hidden;font-size:12px;color:var(--text-secondary);line-height:1.6;font-weight:400;
  transition:max-height .3s var(--ios-ease,ease),padding .3s var(--ios-ease,ease),opacity .25s ease;opacity:0;padding:0 2px;}
.dep-faq-item.open .dep-faq-a{max-height:160px;padding:0 2px 14px;opacity:1;}

/* Sheet -> jadi kumpulan card terpisah (bukan satu kotak panjang bergaris) */
.dep-sheet{display:flex;flex-direction:column;gap:14px;}
.dep-section{background:var(--surface);border-radius:var(--ios-radius-lg);box-shadow:var(--ios-shadow-card);padding:18px;}
.dep-section + .dep-section{border-top:none;}
.dep-section-title{font-family:'Sora',sans-serif;font-size:14.5px;font-weight:800;color:var(--text-primary);letter-spacing:-.01em;}
.dep-section-sub{font-size:12px;color:var(--text-muted);margin-top:2px;line-height:1.5;font-weight:400;}
.dep-section-head{margin-bottom:14px;}

.dep-amt-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;}
.dep-amt-chip{position:relative;border-radius:var(--ios-radius-sm);padding:14px 6px 12px;text-align:center;cursor:pointer;
  background:var(--surface-2);border:none;box-shadow:inset 0 0 0 1.5px var(--ios-sep);
  transition:box-shadow .16s var(--ios-ease),background .16s var(--ios-ease),transform .12s var(--ios-ease);}
.dep-amt-chip:active{transform:scale(.96);}
.dep-amt-chip-val{font-family:'Sora',sans-serif;font-size:14.5px;font-weight:700;color:var(--text-primary);}
.dep-amt-chip.selected{background:var(--ios-tint-blue-bg);box-shadow:inset 0 0 0 2px var(--primary);}
.dep-amt-chip.selected .dep-amt-chip-val{color:var(--primary-dark);}
body.wt-dark .dep-amt-chip.selected .dep-amt-chip-val{color:var(--primary);}
.dep-amt-chip-check{position:absolute;top:6px;right:6px;width:15px;height:15px;border-radius:50%;
  background:var(--primary);display:none;align-items:center;justify-content:center;}
.dep-amt-chip.selected .dep-amt-chip-check{display:flex;}
.dep-amt-chip-check .material-icons-round{font-size:10px;color:#fff;}

.dep-custom-row{margin-top:10px;display:flex;align-items:center;gap:10px;
  border-radius:var(--ios-radius-sm);padding:13px 14px;background:var(--surface-2);border:none;
  box-shadow:inset 0 0 0 1.5px var(--ios-sep);transition:box-shadow .16s ease;}
.dep-custom-row.focused{box-shadow:inset 0 0 0 2px var(--primary);}
.dep-custom-row .material-icons-round{color:var(--text-muted);font-size:17px;flex-shrink:0;}
.dep-custom-row-prefix{font-size:14px;font-weight:600;color:var(--text-secondary);flex-shrink:0;}
.dep-custom-input{border:none;background:transparent;outline:none;flex:1;min-width:0;
  font-size:14px;font-weight:600;color:var(--text-primary);font-family:inherit;}
.dep-custom-hint{font-size:10.5px;color:var(--text-muted);white-space:nowrap;flex-shrink:0;}

.dep-method{display:flex;align-items:center;gap:12px;border-radius:var(--ios-radius-md);padding:13px 14px;cursor:pointer;
  background:var(--surface-2);border:none;box-shadow:inset 0 0 0 1.5px var(--ios-sep);
  transition:box-shadow .16s ease,background .16s ease;}
.dep-method + .dep-method{margin-top:9px;}
.dep-method.selected{box-shadow:inset 0 0 0 2px var(--primary);background:var(--ios-tint-blue-bg);}
.dep-method-icon{width:38px;height:38px;border-radius:12px;flex-shrink:0;
  background:var(--ios-tint-blue-bg);display:flex;align-items:center;justify-content:center;}
.dep-method.selected .dep-method-icon{background:var(--surface);}
.dep-method-icon .material-icons-round{color:var(--ios-tint-blue);font-size:19px;}
.dep-method-body{flex:1;min-width:0;}
.dep-method-name{font-size:13.5px;font-weight:700;color:var(--text-primary);}
.dep-method-meta{display:flex;align-items:center;gap:6px;margin-top:3px;}
.dep-method-fee{font-size:11px;color:var(--text-secondary);}
.dep-method-dot{width:3px;height:3px;border-radius:50%;background:var(--text-muted);flex-shrink:0;}
.dep-method-radio{width:20px;height:20px;border-radius:50%;border:2px solid var(--border);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;transition:border-color .16s ease;}
.dep-method.selected .dep-method-radio{border-color:var(--primary);}
.dep-method-radio-dot{width:10px;height:10px;border-radius:50%;background:var(--primary);display:none;}
.dep-method.selected .dep-method-radio-dot{display:block;}

.dep-summary{padding:18px;background:var(--surface);border-radius:var(--ios-radius-lg);box-shadow:var(--ios-shadow-card);}
.dep-summary-row{display:flex;align-items:center;justify-content:space-between;}
.dep-summary-label{font-size:12px;color:var(--text-secondary);font-weight:600;}
.dep-summary-value{font-family:'Sora',sans-serif;font-size:20px;font-weight:800;color:var(--text-primary);letter-spacing:-.02em;}
.dep-cta{width:100%;margin-top:14px;padding:15px;border-radius:999px;border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:8px;
  font-size:14px;font-weight:700;color:#fff;font-family:inherit;
  background:var(--primary);
  box-shadow:0 10px 22px -8px color-mix(in srgb, var(--primary) 60%, transparent);
  transition:opacity .15s ease,transform .12s var(--ios-ease);}
.dep-cta:active{transform:scale(.97);opacity:.92;}
.dep-cta[disabled]{opacity:.4;box-shadow:none;cursor:default;pointer-events:none;}
.dep-cta .material-icons-round{font-size:17px;}

/* — Halaman QR / status pembayaran — */
.dep-qr-wrap{padding:14px 16px 28px;display:flex;flex-direction:column;align-items:center;gap:14px;}

.dep-status-bar{width:100%;display:flex;align-items:center;gap:12px;padding:15px 16px;
  border-radius:var(--ios-radius-lg);
  background:var(--ios-tint-orange-bg);box-shadow:var(--ios-shadow-card);}
.dep-status-bar-icon{width:36px;height:36px;border-radius:50%;flex-shrink:0;background:var(--surface);
  display:flex;align-items:center;justify-content:center;box-shadow:0 1px 3px rgba(0,0,0,.08);}
.dep-status-bar-icon .material-icons-round{color:var(--ios-tint-orange);font-size:18px;}
.dep-status-bar-title{font-size:13px;font-weight:800;color:var(--text-primary);}
.dep-status-bar-sub{font-size:11px;color:var(--text-secondary);margin-top:1px;line-height:1.4;font-weight:500;}

.dep-ring-wrap{display:flex;flex-direction:column;align-items:center;}
.dep-ring{position:relative;width:112px;height:112px;margin-bottom:10px;}
.dep-ring-label{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;}
.dep-ring-time{font-family:'Sora',sans-serif;font-size:21px;font-weight:800;color:var(--primary);line-height:1;}
.dep-ring-unit{font-size:9px;color:var(--text-muted);font-weight:700;letter-spacing:.06em;margin-top:2px;}
.dep-ring-caption{font-size:12px;color:var(--text-secondary);text-align:center;max-width:250px;line-height:1.55;font-weight:400;}

.dep-qr-card{width:100%;background:var(--surface);border:none;border-radius:var(--ios-radius-xl);
  box-shadow:var(--ios-shadow-card);padding:24px;display:flex;flex-direction:column;align-items:center;}
.dep-qr-title{font-family:'Sora',sans-serif;font-size:15.5px;font-weight:800;color:var(--text-primary);}
.dep-qr-id{font-size:11.5px;color:var(--text-muted);margin-top:2px;margin-bottom:18px;font-weight:500;}
.dep-qr-img-frame{padding:14px;background:#fff;border-radius:var(--ios-radius-lg);box-shadow:0 1px 3px rgba(4,32,84,.08),inset 0 0 0 1px var(--ios-sep);margin-bottom:14px;}
.dep-qr-download{background:var(--surface-2);border:none;box-shadow:inset 0 0 0 1px var(--ios-sep);border-radius:999px;padding:10px 20px;
  font-size:12px;font-weight:700;cursor:pointer;display:flex;align-items:center;gap:6px;color:var(--text-primary);
  margin-bottom:6px;transition:transform .12s ease;}
.dep-qr-download:active{transform:scale(.96);}
.dep-qr-download .material-icons-round{font-size:15px;color:var(--primary);}
.dep-qr-string{width:100%;background:var(--surface-2);border:none;box-shadow:inset 0 0 0 1px var(--ios-sep);border-radius:var(--ios-radius-sm);
  padding:11px 14px;font-size:11px;font-family:'SFMono-Regular',Consolas,monospace;color:var(--text-secondary);
  word-break:break-all;margin-top:8px;}

.dep-breakdown{width:100%;border-radius:var(--ios-radius-lg);overflow:hidden;box-shadow:var(--ios-shadow-card);}
.dep-breakdown-row{display:flex;justify-content:space-between;align-items:center;font-size:13px;padding:13px 16px;background:var(--surface);}
.dep-breakdown-row:not(:last-child){border-bottom:1px solid var(--ios-sep);}
.dep-breakdown-row.total{background:var(--surface-2);}
.dep-breakdown-row.total .dep-breakdown-val{font-family:'Sora',sans-serif;font-size:15px;font-weight:800;color:var(--text-primary);}
.dep-breakdown-label{color:var(--text-secondary);font-weight:600;}
.dep-breakdown-val{font-weight:700;color:var(--text-primary);}

.dep-steps{width:100%;background:var(--surface);border:none;box-shadow:var(--ios-shadow-card);border-radius:var(--ios-radius-lg);
  padding:16px;}
.dep-steps-title{font-size:12.5px;font-weight:800;color:var(--text-primary);margin-bottom:10px;}
.dep-step{display:flex;align-items:flex-start;gap:10px;font-size:12px;color:var(--text-secondary);line-height:1.6;font-weight:400;}
.dep-step + .dep-step{margin-top:8px;}
.dep-step-num{flex-shrink:0;width:18px;height:18px;border-radius:50%;background:var(--ios-tint-blue-bg);color:var(--ios-tint-blue);
  font-size:9.5px;font-weight:800;display:flex;align-items:center;justify-content:center;margin-top:1px;}

.dep-result{width:100%;display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;padding:22px 4px 4px;}
.dep-result-badge{width:80px;height:80px;border-radius:50%;display:flex;align-items:center;justify-content:center;}
.dep-result-title{font-family:'Sora',sans-serif;font-size:18px;font-weight:800;letter-spacing:-.02em;}
.dep-result-desc{font-size:13px;color:var(--text-secondary);max-width:270px;line-height:1.6;font-weight:400;}
.dep-result-amount{font-family:'Sora',sans-serif;font-size:23px;font-weight:800;}
.dep-result-panel{width:100%;border-radius:var(--ios-radius-md);padding:14px 16px;text-align:left;}

body.wt-dark .dep-qr-img-frame{background:#fff;}
/* tombol sekunder ala iOS di halaman deposit (batal / kembali / salin) */
.dep-qr-wrap .vn-btn-secondary,.dep-qr-wrap .vn-btn-danger{
  border-radius:999px!important;border:none!important;font-weight:700!important;
  box-shadow:inset 0 0 0 1.5px var(--ios-sep)!important;background:var(--surface)!important;
}
.dep-qr-wrap .vn-btn-danger{color:var(--danger)!important;box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--danger) 35%, transparent)!important;background:var(--ios-tint-red-bg)!important;}
.dep-qr-wrap .vn-btn-secondary:active,.dep-qr-wrap .vn-btn-danger:active{transform:scale(.97);}

/* ══════════════════════════════════════════════════════════════════
   MODE DESKTOP — begitu browser dipakai di layar/viewport lebar (baik
   desktop asli maupun toggle "Desktop site" di Chrome mobile), SELURUH
   kerangka tampilan berubah dari gaya "app HP" (bottom tab bar,
   full-bleed edge-to-edge) jadi gaya aplikasi desktop yang wajar:
   sidebar navigasi di kiri (bukan tab bar di bawah), konten dipusatkan
   dengan lebar maksimum yang enak dibaca (bukan melebar penuh layar),
   dan area kosong di kanan-kiri diberi latar berbeda supaya kerasa
   sengaja, bukan cuma "app HP yang direntangkan".
   Berlaku otomatis untuk SEMUA halaman (Home/Beli/Deposit/Activity/
   Profil/dst) karena semuanya berbagi struktur #vnPageHeader +
   #vnPageBody + .vn-bottom-nav yang sama persis.
   ══════════════════════════════════════════════════════════════════ */
@media (min-width:900px){
  body{background:var(--surface-2);}

  #pageContainer{max-width:none;}
  .sc-page{
    max-width:1180px;margin:0 auto;
    box-shadow:0 0 0 1px var(--ios-sep);
    background:var(--bg);
  }

  /* — Sidebar (dulunya bottom tab bar) — */
  .vn-bottom-nav{
    position:absolute;top:0;left:0;bottom:0;height:auto;width:230px;
    flex-direction:column;align-items:stretch;justify-content:flex-start;
    padding:20px 14px;gap:4px;border-top:none;border-right:1px solid var(--ios-sep);
    box-shadow:none;
  }
  .vn-bn-item{
    flex:none;flex-direction:row;justify-content:flex-start;gap:14px;
    padding:11px 14px;border-radius:12px;border-top:none;height:auto;
  }
  .vn-bn-item:hover{background:var(--surface-2);}
  .vn-bn-item.active{background:var(--ios-tint-blue-bg);border-top:none;}
  .vn-bn-item .material-icons-round{font-size:21px;}
  .vn-bn-label{font-size:13.5px;font-weight:700;}
  .vn-bn-fab-wrap{
    flex:none;flex-direction:row;justify-content:flex-start;gap:14px;
    padding:11px 14px;top:0;margin:6px 0;border-radius:12px;
  }
  .vn-bn-fab-wrap:hover{background:var(--surface-2);}
  .vn-bn-fab{width:38px;height:38px;box-shadow:none;}
  .vn-bn-fab .material-icons-round{font-size:19px;}
  .vn-bn-fab-label{font-size:13.5px;order:2;}

  /* — Header & konten: diberi ruang di kiri seukuran sidebar, lalu
     dipusatkan dengan lebar maksimum yang nyaman dibaca (bukan
     direntang penuh layar desktop yang lebar). — */
  .page-header{padding-left:246px;padding-right:16px;}
  .vn-top-header-brand, .vn-top-header-actions, .page-header-title{max-width:700px;}
  .page-body{margin-left:230px;max-width:700px;}
  .page-body > *{margin-left:auto;margin-right:auto;}

  /* — Konten per-halaman: mobile-nya semua tersusun 1 kolom lurus ke
     bawah. Di desktop, ruang lebar dipakai buat susunan multi-kolom
     ala dashboard, bukan cuma 1 kolom yang dipersempit di tengah. —
     Home: kartu-kartunya dialirkan ke 2 kolom otomatis (CSS columns,
     bukan grid manual) supaya tidak perlu tahu urutan pastinya di
     JS -- tiap kartu dijamin utuh (tidak kepotong tengah) berkat
     break-inside:avoid. Lebar wrapper dilebarkan sendiri (lepas dari
     batas 700px di atas) khusus buat Home & Beli karena butuh ruang
     ekstra untuk 2-3 kolom. */
  .page-body:has(.ios-home-wrap), .page-body:has(#vnBuySheetBody){max-width:980px;}
  .ios-home-wrap{column-count:2;column-gap:16px;}
  .ios-home-wrap > *{break-inside:avoid;margin-bottom:16px;}
  .ios-home-wrap .home2-hero, .ios-home-wrap .home2-quick-grid, .ios-home-wrap .home2-warn-bar{column-span:all;}

  /* Beli: grid layanan dari 3 kolom (mobile) jadi 5 kolom biar makin
     banyak kelihatan sekaligus tanpa scroll panjang. */
  .vn-app-grid{grid-template-columns:repeat(5,1fr);}

  /* Aktifitas: daftar transaksi dialirkan 2 kolom juga (masonry ala
     Home) supaya tidak jadi satu kolom sempit memanjang ke bawah. */
  .page-body:has(#vnActList){max-width:980px;}
  #vnActList{column-count:2;column-gap:14px;}
  #vnActList > *{break-inside:avoid;}

  /* Deposit: SEMUA konten (nominal, metode, ringkasan, riwayat, FAQ)
     sebenarnya satu blok besar .dep-sheet -- makanya sebelumnya kolom
     kanan kosong total (cuma .dep-sheet doang yang jadi 1 kolom penuh).
     Diperbaiki: yang dialirkan ke 2 kolom adalah isi .dep-sheet itu
     sendiri, bukan .dep-wrap yang cuma 1 anak. */
  .page-body:has(.dep-wrap){max-width:980px;}
  .dep-sheet{column-count:2;column-gap:18px;}
  .dep-sheet > *{break-inside:avoid;margin-bottom:16px;}

  /* Profil: kartu-kartu pengaturan (Account Settings, Keamanan,
     Developer, dst) dialirkan 2 kolom -- hero foto profil & info akun
     tetap selebar penuh di atas karena elemennya visual/lebar. */
  .page-body:has(.ios-profile-wrap){max-width:980px;}
  .ios-profile-wrap{column-count:2;column-gap:16px;}
  .ios-profile-wrap > *{break-inside:avoid;margin-bottom:16px;}
  .ios-profile-wrap .pv2-hero, .ios-profile-wrap .pv2-strip, .ios-profile-wrap .pv2-tabbar{column-span:all;}

  /* — Polesan modern buat mode desktop secara umum: kartu diberi hover
     lift halus + shadow sedikit lebih tegas (di mobile sentuh langsung
     tanpa hover jadi ini murni bonus khusus desktop dengan mouse). — */
  .home2-hero, .home2-uptime-card, .home2-status-card, .home2-trend-card,
  .dep-section, .ios-section-card, .pv2-hero, .vn-app-card{
    transition:transform .15s ease, box-shadow .15s ease;
  }
  .vn-app-card:hover, .ios-section-card:hover{
    transform:translateY(-2px);
    box-shadow:0 8px 20px rgba(15,23,42,.08);
  }
}
@media (min-width:1220px){
  .sc-page{box-shadow:0 0 60px rgba(15,23,42,.12), 0 0 0 1px var(--ios-sep);}
}

/* ══════════════════════════════════════════════════════════════════
   MODE LANSKAP (HP diputar ke samping) — beda kebutuhan dari mode
   desktop di atas: di sini ruang HORIZONTAL yang berlimpah, tapi ruang
   VERTIKAL yang justru sempit (tinggi layar cuma ~350-430px). Target
   `orientation:landscape` + `max-height:500px` sengaja dipakai supaya
   BEDA dari breakpoint desktop (min-width:900px) di atas -- breakpoint
   ini khusus buat HP yang diputar miring, bukan monitor/laptop lebar
   (yang tingginya jarang di bawah 500px walau jendelanya di-resize).
   Fokus: kecilkan semua elemen yang makan tinggi layar (header, bottom
   nav, jarak antar kartu) supaya konten tetap muat & tidak perlu
   scroll berlebihan, TANPA mengubah lebar/kolom konten (beda dari mode
   desktop yang mengubah lebar). Berlaku ke semua halaman otomatis
   karena menyasar elemen kerangka bersama (header, bottom nav, wrap).
   ══════════════════════════════════════════════════════════════════ */
@media (orientation:landscape) and (max-height:500px){
  /* Header dipadatkan + ruang buat notch/poni di sisi kiri-kanan
     (iPhone dkk. notch-nya pindah ke samping kalau lanskap). */
  .page-header{
    padding:8px calc(14px + env(safe-area-inset-right)) 8px calc(14px + env(safe-area-inset-left));
  }
  .vn-header-logo-img{height:18px;}
  .vn-top-header-icon-btn{width:30px;height:30px;border-radius:10px;}
  .vn-top-header-icon-btn .material-icons-round{font-size:16px;}
  .ios-balance-pill{padding:6px 12px 6px 8px;font-size:11.5px;}
  .ios-avatar-btn{width:28px;height:28px;}

  /* Bottom nav dipadatkan drastis -- FAB "Beli" tidak lagi diangkat ke
     atas (supaya tidak makan tinggi ekstra), semua ikon dikecilkan,
     label font dikecilkan tapi TETAP ada (bukan disembunyikan) supaya
     navigasi tetap jelas. */
  .vn-bottom-nav{
    padding:4px calc(6px + env(safe-area-inset-right)) calc(4px + env(safe-area-inset-bottom)) calc(6px + env(safe-area-inset-left));
  }
  .vn-bn-item{padding:3px 4px;gap:1px;}
  .vn-bn-item .material-icons-round{font-size:19px;}
  .vn-bn-label{font-size:8.5px;}
  .vn-bn-fab-wrap{top:0;padding:3px 4px;}
  .vn-bn-fab{width:38px;height:38px;box-shadow:0 4px 10px -2px rgba(10,87,214,0.5),0 0 0 3px var(--bg);}
  .vn-bn-fab .material-icons-round{font-size:19px;}
  .vn-bn-fab-label{font-size:8.5px;}

  /* Jarak vertikal antar kartu/section dipadatkan di semua halaman
     (Home/Beli/Deposit/dst berbagi pola gap+padding yang sama). */
  .ios-beli-wrap,.ios-home-wrap,.ios-profile-wrap{padding-top:8px;padding-bottom:12px;gap:10px;}
  .ios-section-card,.ios-card-flat,.ios-warn-card,.wt-update-card{padding:12px;}

  /* Sheet/modal full-screen (detail aktifitas, ketentuan, dsb) --
     sudah pakai max-height berbasis vh jadi otomatis menyesuaikan,
     tapi grabber+padding atasnya dipadatkan supaya tidak buang-buang
     tinggi layar yang sekarang jauh lebih sempit. */
  .ios-sheet-box,.ios-detail-sheet,.vn-success-sheet-box{padding-top:6px;}
  .ios-detail-grabber{margin-bottom:4px;}
}



/* ══════════════════════════════════════════════════════════════════
   BACKGROUND WARNA (mesh gradient) -- versi permanen, bukan tema
   opsional lagi. Beberapa "bola" warna lembut yang blur besar &
   melayang pelan di belakang seluruh UI, mengisi celah di sekitar
   kartu (margin antar .page-section, dst) supaya tampilan tidak flat
   putih/gelap polos. Kartu/panel/tombol TIDAK dibikin transparan --
   semuanya tetap solid seperti semula, cuma backdrop di belakangnya
   yang berwarna. */
#vnGlassMeshBg{
  position:fixed; inset:0; z-index:-3; overflow:hidden; pointer-events:none;
  background:#EEF3FC;
}
html.wt-dark #vnGlassMeshBg{ background:#0A0C14; }
.vn-glass-blob{
  position:absolute; border-radius:50%; filter:blur(70px); opacity:.55;
  will-change:transform;
}
.vn-glass-blob-1{ width:60vmax; height:60vmax; top:-22vmax; left:-18vmax; background:radial-gradient(circle,#7C9CFF,transparent 70%); animation:vnGlassFloatA 26s ease-in-out infinite; }
.vn-glass-blob-2{ width:52vmax; height:52vmax; top:10vmax; right:-20vmax; background:radial-gradient(circle,#FF9AD5,transparent 70%); animation:vnGlassFloatB 30s ease-in-out infinite; }
.vn-glass-blob-3{ width:48vmax; height:48vmax; bottom:-20vmax; left:8vmax; background:radial-gradient(circle,#7CF0D2,transparent 70%); animation:vnGlassFloatC 24s ease-in-out infinite; }
.vn-glass-blob-4{ width:40vmax; height:40vmax; bottom:-12vmax; right:6vmax; background:radial-gradient(circle,#FFD37C,transparent 70%); animation:vnGlassFloatA 34s ease-in-out infinite reverse; }
html.wt-dark .vn-glass-blob{ opacity:.32; }
@keyframes vnGlassFloatA{ 0%,100%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(4vmax,3vmax) scale(1.12); } }
@keyframes vnGlassFloatB{ 0%,100%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(-3vmax,4vmax) scale(1.08); } }
@keyframes vnGlassFloatC{ 0%,100%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(3vmax,-3vmax) scale(1.1); } }
@media (prefers-reduced-motion: reduce){
  .vn-glass-blob{ animation:none!important; }
}

/* ══════════════════════════════════════════════════════════════════
   DEPOSIT STATE CARD -- loading & error saat membuat tagihan
   (vnProcessDeposit / _vnDepositStateHtml di deposit.js). Menggantikan
   tampilan lama yang cuma ikon+teks polos di layar kosong.
   ══════════════════════════════════════════════════════════════════ */
.dep-state-wrap{ min-height:70vh; display:flex; align-items:center; justify-content:center; padding:24px 18px; }
.dep-state-card{
  background:var(--surface); border-radius:var(--ios-radius-xl); box-shadow:var(--ios-shadow-card);
  padding:36px 26px 28px; text-align:center; max-width:340px; width:100%;
}
.dep-state-rings{ position:relative; width:88px; height:88px; margin:0 auto 22px; display:flex; align-items:center; justify-content:center; }
.dep-state-ring{ position:absolute; border-radius:50%; }
.dep-state-ring.r1{ width:100%; height:100%; }
.dep-state-ring.r2{ width:74%; height:74%; }
.dep-state-rings.loading .dep-state-ring{ background:var(--ios-tint-blue-bg); animation:depStatePulse 2s ease-in-out infinite; }
.dep-state-rings.loading .dep-state-ring.r2{ animation-delay:.3s; }
.dep-state-rings.error .dep-state-ring{ background:#FEECEC; animation:depStatePulse 2.4s ease-in-out infinite; }
.dep-state-rings.error .dep-state-ring.r2{ animation-delay:.3s; }
@keyframes depStatePulse{ 0%,100%{ opacity:.55; transform:scale(1); } 50%{ opacity:.9; transform:scale(1.06); } }
.dep-state-icon{ position:relative; z-index:1; width:54px; height:54px; border-radius:50%; display:flex; align-items:center; justify-content:center; box-shadow:0 6px 16px -4px rgba(8,25,58,.18); }
.dep-state-icon.loading{ background:linear-gradient(135deg,var(--primary),var(--primary-dark)); }
.dep-state-icon.loading .material-icons-round{ color:#fff; font-size:26px; }
.dep-state-icon.error{ background:linear-gradient(135deg,#FF6B6B,#E03131); }
.dep-state-icon.error .material-icons-round{ color:#fff; font-size:26px; }
.dep-state-title{ font-size:16px; font-weight:800; color:var(--text-primary); letter-spacing:-0.01em; margin-bottom:8px; }
.dep-state-sub{ font-size:12.5px; color:var(--text-secondary); line-height:1.55; font-weight:500; }
.dep-state-actions{ display:flex; flex-direction:column; gap:9px; margin-top:22px; }
.dep-state-btn{
  display:flex; align-items:center; justify-content:center; gap:7px; width:100%;
  padding:13px; border-radius:14px; font-size:13.5px; font-weight:700; cursor:pointer;
  border:none; font-family:inherit; transition:transform .12s ease;
}
.dep-state-btn:active{ transform:scale(.97); }
.dep-state-btn .material-icons-round{ font-size:17px; }
.dep-state-btn.primary{ background:var(--primary); color:#fff; box-shadow:0 8px 18px -6px rgba(10,87,214,.5); }
.dep-state-btn.ghost{ background:var(--surface-2); color:var(--text-primary); }
.dep-state-help{
  display:flex; align-items:center; justify-content:center; gap:6px; margin-top:20px; padding-top:16px;
  border-top:1px solid var(--ios-sep); font-size:11.5px; color:var(--text-muted); font-weight:500;
}
.dep-state-help .material-icons-round{ font-size:15px; }
.dep-state-help a{ color:var(--primary); font-weight:700; text-decoration:none; }

/* ══════════════════════════════════════════════════════════════════
   IMAGE CROPPER MODAL -- lihat public/js/imageCropper.js. Dipakai
   sebelum upload avatar (shape circle, aspect 1:1) & foto sampul
   (shape rect, aspect lebar).
   ══════════════════════════════════════════════════════════════════ */
.vn-crop-overlay{
  position:fixed; inset:0; z-index:9999; background:rgba(4,10,24,.72);
  display:flex; align-items:center; justify-content:center; padding:20px;
  animation:vnCropFadeIn .18s ease;
}
@keyframes vnCropFadeIn{ from{opacity:0;} to{opacity:1;} }
.vn-crop-modal{
  background:var(--surface); border-radius:var(--ios-radius-xl); padding:20px 18px 18px;
  width:100%; max-width:380px; box-shadow:0 30px 70px rgba(0,0,0,.4);
}
.vn-crop-head{ font-size:15px; font-weight:800; color:var(--text-primary); margin-bottom:16px; text-align:center; }
.vn-crop-stage-wrap{ display:flex; align-items:center; justify-content:center; }
.vn-crop-stage{
  position:relative; overflow:hidden; background:#111; touch-action:none; cursor:grab;
  box-shadow:0 4px 20px rgba(0,0,0,.25);
}
.vn-crop-stage:active{ cursor:grabbing; }
.vn-crop-stage.is-circle{ border-radius:50%; }
.vn-crop-stage.is-rect{ border-radius:var(--ios-radius-md); }
.vn-crop-mask{ position:absolute; inset:0; pointer-events:none; box-shadow:inset 0 0 0 2px rgba(255,255,255,.5); border-radius:inherit; }
.vn-crop-zoom-row{ display:flex; align-items:center; gap:10px; margin-top:18px; padding:0 4px; }
.vn-crop-zoom-row .material-icons-round{ font-size:18px; color:var(--text-muted); flex-shrink:0; }
.vn-crop-zoom-row input[type="range"]{ flex:1; accent-color:var(--primary); height:4px; }
.vn-crop-hint{ text-align:center; font-size:11px; color:var(--text-muted); font-weight:500; margin-top:10px; }
.vn-crop-actions{ display:flex; gap:10px; margin-top:18px; }
.vn-crop-btn{ flex:1; padding:12px; border-radius:14px; font-size:13.5px; font-weight:700; cursor:pointer; border:none; font-family:inherit; }
.vn-crop-btn.ghost{ background:var(--surface-2); color:var(--text-primary); }
.vn-crop-btn.primary{ background:var(--primary); color:#fff; box-shadow:0 8px 18px -6px rgba(10,87,214,.5); }


/* ============================================================
   PERANGKAT TERHUBUNG (Connected Devices)
   Kartu "Perangkat" di strip profil + halaman daftar perangkat.
   Semua warna lewat CSS variable -> otomatis ikut mode gelap.
   ============================================================ */
.pv2-strip-link{position:relative;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .15s ease,background .15s ease,border-color .15s ease;}
.pv2-strip-link:active{transform:scale(.96);background:var(--ios-tint-blue-bg);}
.pv2-strip-link:focus-visible{outline:2px solid var(--primary);outline-offset:2px;}

.dv-refresh{width:40px;height:40px;margin-right:6px;border:none;background:transparent;border-radius:50%;color:var(--primary);display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;}
.dv-refresh:active{background:var(--ios-tint-blue-bg);}
.dv-refresh .material-icons-round,.dv-refresh svg{font-size:22px;}
.dv-refresh.spin .material-icons-round{animation:sc-spin .7s linear infinite;}

.dv-body{padding:14px 16px 36px;display:flex;flex-direction:column;gap:12px;}
.dv-body>*{flex-shrink:0;}
.dv-first .dv-card,.dv-first .dv-hero,.dv-first .dv-empty{animation:dvIn .42s var(--ios-ease,cubic-bezier(.32,.72,0,1)) both;animation-delay:calc(var(--dv-i,0) * 60ms);}
@keyframes dvIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}

.dv-hero{position:relative;overflow:hidden;display:flex;align-items:center;gap:16px;padding:20px 20px;border-radius:var(--ios-radius-xl);color:#fff;
  background:radial-gradient(120% 140% at 12% -10%,#6EA8FF 0%,transparent 55%),radial-gradient(110% 130% at 95% 0%,#7C5CFC 0%,transparent 52%),linear-gradient(135deg,var(--primary) 0%,var(--primary-dark) 100%);
  box-shadow:0 14px 30px -12px rgba(10,87,214,.55);}
.dv-hero::after{content:"";position:absolute;inset:0;background-image:radial-gradient(circle,rgba(255,255,255,.55) 1px,transparent 1.4px);background-size:16px 16px;opacity:.12;mix-blend-mode:overlay;pointer-events:none;}
.dv-hero-num{font-size:46px;font-weight:800;line-height:1;letter-spacing:-.03em;min-width:34px;}
.dv-hero-txt{display:flex;flex-direction:column;gap:3px;min-width:0;position:relative;z-index:1;}
.dv-hero-txt b{font-size:15px;font-weight:800;letter-spacing:-.01em;}
.dv-hero-txt span{font-size:12px;font-weight:500;opacity:.85;line-height:1.4;}
.dv-hero-ico{position:absolute;right:-6px;bottom:-14px;opacity:.16;pointer-events:none;}
.dv-hero-ico .material-icons-round{font-size:96px;color:#fff;}

.dv-sec{display:flex;align-items:center;justify-content:space-between;padding:6px 4px 0;font-size:11px;font-weight:800;letter-spacing:.7px;text-transform:uppercase;color:var(--text-muted);}
.dv-sec em{font-style:normal;min-width:20px;text-align:center;padding:2px 7px;border-radius:999px;background:var(--surface-2);color:var(--text-secondary);font-size:11px;letter-spacing:0;}

.dv-card{background:var(--surface);border-radius:var(--ios-radius-lg);padding:16px;box-shadow:var(--ios-shadow-card);transition:opacity .25s ease,transform .25s ease;}
.dv-card.current{box-shadow:var(--ios-shadow-card),inset 0 0 0 1.5px color-mix(in srgb,var(--primary) 38%,transparent);}
.dv-card.removing{opacity:0;transform:scale(.96);}
.dv-card-top{display:flex;align-items:center;gap:12px;}
.dv-ico{width:46px;height:46px;border-radius:15px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.dv-ico .material-icons-round{font-size:24px;}
.dv-ico.mobile{background:var(--ios-tint-blue-bg);color:var(--ios-tint-blue);}
.dv-ico.tablet{background:var(--ios-tint-purple-bg);color:var(--ios-tint-purple);}
.dv-ico.desktop{background:var(--ios-tint-cyan-bg);color:var(--ios-tint-cyan);}
.dv-main{flex:1;min-width:0;}
.dv-name{font-size:14.5px;font-weight:800;letter-spacing:-.01em;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.dv-sub{font-size:12px;font-weight:500;color:var(--text-secondary);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.dv-pill{flex-shrink:0;display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border-radius:999px;font-size:10.5px;font-weight:800;letter-spacing:.2px;}
.dv-pill.me{background:var(--ios-tint-blue-bg);color:var(--ios-tint-blue);}
.dv-pill.on{background:var(--ios-tint-green-bg);color:var(--ios-tint-green);}
.dv-pill i{width:6px;height:6px;border-radius:50%;background:currentColor;display:block;}

.dv-meta{margin-top:14px;padding:12px 14px;border-radius:16px;background:var(--surface-2);display:grid;grid-template-columns:1fr 1fr;gap:12px 14px;}
.dv-meta>div{min-width:0;}
.dv-meta span{display:block;font-size:10.5px;font-weight:600;color:var(--text-muted);margin-bottom:3px;}
.dv-meta b{display:block;font-size:12.5px;font-weight:700;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.dv-mono{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:12px!important;letter-spacing:-.2px;white-space:normal!important;word-break:break-all;line-height:1.35;}

.dv-btn-out{width:100%;margin-top:12px;padding:11px;border:none;border-radius:999px;background:var(--ios-tint-red-bg);color:var(--ios-tint-red);font-size:13px;font-weight:700;font-family:inherit;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:7px;transition:transform .12s ease,opacity .12s ease;}
.dv-btn-out .material-icons-round{font-size:17px;}
.dv-btn-out:active{transform:scale(.98);}
.dv-btn-out:disabled{opacity:.6;cursor:default;}

.dv-btn-all{width:100%;margin-top:4px;padding:14px;border:none;border-radius:999px;background:var(--ios-tint-red);color:#fff;font-size:13.5px;font-weight:700;font-family:inherit;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;box-shadow:0 10px 20px -8px rgba(240,68,56,.55);transition:transform .12s ease,opacity .12s ease;}
.dv-btn-all .material-icons-round{font-size:18px;}
.dv-btn-all:active{transform:scale(.98);}
.dv-btn-all:disabled{opacity:.6;cursor:default;}

.dv-empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;padding:26px 20px;border-radius:var(--ios-radius-lg);border:1.5px dashed var(--border);background:transparent;}
.dv-empty-ico{width:48px;height:48px;border-radius:50%;background:var(--ios-tint-green-bg);color:var(--ios-tint-green);display:flex;align-items:center;justify-content:center;margin-bottom:6px;}
.dv-empty-ico .material-icons-round{font-size:24px;}
.dv-empty b{font-size:14px;font-weight:800;color:var(--text-primary);}
.dv-empty span{font-size:12px;color:var(--text-secondary);font-weight:500;}

.dv-note{display:flex;gap:10px;align-items:flex-start;padding:13px 14px;border-radius:16px;background:var(--ios-tint-blue-bg);color:var(--text-secondary);font-size:12px;line-height:1.55;font-weight:500;}
.dv-note .material-icons-round{font-size:18px;color:var(--ios-tint-blue);flex-shrink:0;margin-top:1px;}
.dv-note b{color:var(--text-primary);font-weight:700;}

.dv-pills{display:flex;flex-direction:column;align-items:flex-end;gap:5px;flex-shrink:0;}
.dv-lock{display:flex;gap:9px;align-items:flex-start;margin-top:12px;padding:11px 13px;border-radius:14px;background:var(--ios-tint-orange-bg);color:var(--text-secondary);font-size:12px;line-height:1.5;font-weight:500;}
.dv-lock .material-icons-round{font-size:16px;color:var(--ios-tint-orange);flex-shrink:0;margin-top:1px;}
.dv-lock-top{margin-top:0;}
.dv-lock b{color:var(--text-primary);font-weight:700;}