
*{box-sizing:border-box}body{margin:0;font-family:Inter,Arial,sans-serif;background:#03070d;color:#f7fbff;min-height:100vh}.bg-glow{position:fixed;inset:0;pointer-events:none;background:radial-gradient(circle at 20% 10%,rgba(36,128,255,.18),transparent 32%),radial-gradient(circle at 80% 80%,rgba(106,0,173,.14),transparent 34%)}.account-top{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:14px;padding:15px max(16px,calc((100% - 900px)/2));background:rgba(5,13,25,.88);backdrop-filter:blur(14px);border-bottom:1px solid rgba(255,255,255,.08)}.account-top>div{flex:1}.account-top b,.account-top span{display:block}.account-top span{font-size:11px;color:#8ea2b8;margin-top:3px}.back,.home{width:40px;height:40px;display:grid;place-items:center;border-radius:12px;color:#fff;background:rgba(255,255,255,.06);text-decoration:none}.account-wrap{position:relative;width:min(900px,calc(100% - 24px));margin:25px auto 70px;display:grid;gap:16px}.card{background:linear-gradient(180deg,rgba(13,30,50,.94),rgba(7,17,31,.94));border:1px solid rgba(100,170,255,.14);border-radius:20px;padding:20px;box-shadow:0 18px 50px rgba(0,0,0,.28)}.account-logo{text-align:center}.account-logo img{width:68px;height:68px;border-radius:20px;object-fit:cover}.tabs{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:18px 0}.tabs button,.ghost-text{border:0;background:transparent;color:#91a7bf;padding:12px;border-radius:10px;font-weight:800;cursor:pointer}.tabs button.active{background:rgba(58,142,255,.16);color:#fff}.card form{display:grid;gap:13px}.card label{display:grid;gap:7px;font-size:13px;font-weight:700}.card label small{font-weight:400;color:#8296ad}.card input{width:100%;padding:13px 14px;border-radius:11px;border:1px solid rgba(255,255,255,.1);background:#07111f;color:#fff;outline:none}.card input:focus{border-color:#3d91ff}.primary{border:0;border-radius:11px;padding:13px 16px;background:linear-gradient(135deg,#168cff,#6a0dad);color:#fff;font-weight:900;cursor:pointer}.error{color:#ff9a9a;font-size:13px;min-height:18px;margin:0}.profile-card{display:flex;align-items:center;gap:14px}.avatar{width:58px;height:58px;border-radius:18px;display:grid;place-items:center;background:rgba(61,145,255,.15);font-size:22px}.profile-main{flex:1}.profile-main h1{font-size:22px;margin:5px 0}.profile-main p{margin:0;color:#91a7bf;font-size:13px}.badge{display:inline-flex;padding:5px 9px;border-radius:999px;background:rgba(255,193,7,.12);color:#ffc107;font-size:10px;font-weight:900}.ghost{border:0;width:42px;height:42px;border-radius:12px;background:rgba(255,255,255,.06);color:#fff;cursor:pointer}.section-head{display:flex;align-items:center;justify-content:space-between;gap:10px}.eyebrow{font-size:10px;font-weight:900;letter-spacing:.14em;color:#62a9ff}.section-head h2{font-size:20px;margin:5px 0 16px}.reseller-box,.upgrade-box{padding:15px;border-radius:14px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.07)}.reseller-box strong{font-size:18px}.upgrade-box{margin-top:12px}.upgrade-box h3{margin:0 0 7px}.upgrade-box p{color:#9db0c5;font-size:13px;line-height:1.6}.upgrade-box #upgradePay{margin-top:15px}.qr{display:block;width:min(280px,100%);margin:12px auto;border-radius:14px;background:#fff;padding:8px}.pay-info{text-align:center;color:#a7b9cb;font-size:12px}.list{display:grid;gap:9px}.notif{padding:13px;border-radius:12px;border:1px solid rgba(255,255,255,.07);background:rgba(255,255,255,.025)}.notif.unread{border-color:rgba(61,145,255,.35);background:rgba(61,145,255,.07)}.notif b{display:block}.notif span{display:block;color:#9bb0c5;font-size:12px;margin-top:4px}.notif time{display:block;color:#6f849a;font-size:10px;margin-top:7px}.chat-list{display:grid;gap:9px;max-height:360px;overflow:auto;margin-bottom:12px}.bubble{max-width:82%;padding:10px 12px;border-radius:14px;background:rgba(255,255,255,.06);font-size:13px;line-height:1.5}.bubble.user{justify-self:end;background:rgba(61,145,255,.18)}.bubble small{display:block;color:#8095ab;font-size:10px;margin-top:4px}.chat-form{display:grid!important;grid-template-columns:1fr auto;align-items:center!important}.chat-form button{width:48px;height:46px;padding:0}.empty{color:#8195aa;text-align:center;padding:20px;font-size:13px}@media(max-width:520px){.profile-card{align-items:flex-start}.profile-main h1{font-size:19px}}
@media (max-width:700px){#walletCard>div:nth-child(2){grid-template-columns:1fr!important}}
.menu-btn{width:40px;height:40px;border:0;border-radius:12px;background:rgba(255,255,255,.06);color:#fff;font-size:25px;font-weight:900;line-height:1;cursor:pointer;display:grid;place-items:center}.menu-btn:hover{background:rgba(61,145,255,.16)}.account-menu{position:fixed;top:70px;right:max(16px,calc((100% - 900px)/2));z-index:20;width:min(280px,calc(100% - 32px));padding:8px;border:1px solid rgba(100,170,255,.16);border-radius:16px;background:rgba(5,13,25,.97);box-shadow:0 20px 60px rgba(0,0,0,.45);backdrop-filter:blur(16px)}.account-menu a{display:flex;align-items:center;gap:12px;padding:12px 13px;border-radius:11px;color:#eaf3ff;text-decoration:none;font-size:13px;font-weight:800}.account-menu a i{width:20px;text-align:center;color:#62a9ff}.account-menu a:hover{background:rgba(61,145,255,.1)}.settings-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:12px}.settings-grid>div{padding:12px;border:1px solid rgba(255,255,255,.07);border-radius:12px;background:rgba(255,255,255,.025)}.settings-grid span,.settings-grid strong{display:block}.settings-grid span{color:#8195aa;font-size:10px;margin-bottom:5px}.settings-grid strong{font-size:13px;overflow-wrap:anywhere}.setting-link{display:flex;align-items:center;gap:8px;padding:12px;border-radius:11px;background:rgba(61,145,255,.08);color:#b9d7ff;text-decoration:none;font-size:13px;font-weight:800}@media(max-width:520px){.settings-grid{grid-template-columns:1fr}}
/* ================================
   FIX AKUN LAYOUT
================================ */

/* Pastikan elemen hidden benar-benar tidak tampil */
[hidden] {
    display: none !important;
}

/* Jarak antar card setelah user login */
#profileView {
    display: grid;
    gap: 16px;
}

/* Jangan ubah gap card internal */
#profileView > .card {
    margin: 0;
}

/* Mobile */
@media (max-width: 520px) {
    #profileView {
        gap: 16px;
    }
}
/* Account page navigation */
.account-page {
  display: none;
}

.account-page.active {
  display: block;
}

/* Navigasi section akun: hanya satu halaman tampil dalam satu waktu */
.account-section-nav{position:sticky;top:71px;z-index:4;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;padding:7px;border:1px solid rgba(100,170,255,.14);border-radius:16px;background:rgba(5,13,25,.9);backdrop-filter:blur(14px);box-shadow:0 14px 40px rgba(0,0,0,.22)}
.account-section-nav button{border:0;background:transparent;color:#8195aa;padding:10px 6px;border-radius:11px;font-weight:800;font-size:11px;cursor:pointer;display:grid;gap:5px;place-items:center}
.account-section-nav button i{font-size:15px;color:#62a9ff}
.account-section-nav button.active{background:rgba(61,145,255,.16);color:#fff}
.account-section-nav button.active i{color:#fff}
.account-page{display:none;min-width:0}
.account-page.active{display:grid;gap:16px}
@media(max-width:560px){.account-section-nav{top:69px}.account-section-nav button{font-size:9px;padding:9px 3px}.account-section-nav button i{font-size:14px}}
