/* AVEROTP · account drawer v3: biru komik cerah, bukan krem / gradient gelap.
   Aturan sengaja spesifik untuk menetralkan .pop-menu serta aturan tema global. */
html.pop-menu-open { overflow:hidden!important; }
html[data-design] body .pop-menu.account-drawer[open] {
  position:fixed!important; inset:0 0 0 auto!important; margin:0!important;
  padding:0!important; width:min(92vw,450px)!important; max-width:none!important;
  height:100dvh!important; max-height:100dvh!important;
  overflow-y:auto!important; overscroll-behavior:contain!important;
  scrollbar-width:thin; scrollbar-color:#497be1 #dbe9ff;
  border:none!important; border-radius:29px 0 0 29px!important;
  color:#17223b!important;
  background-color:#e7f1ff!important;
  background-image:radial-gradient(#8db6f670 1.5px,transparent 1.5px)!important;
  background-size:24px 24px!important;
  box-shadow:-12px 0 35px #0c1a4560!important;
  z-index:5000!important;
  animation:accountDrawerEnter .35s cubic-bezier(.16,.88,.24,1) both;
}
html[data-design] body .pop-menu.account-drawer:not([open]) { display:none!important; }
html[data-design] body .pop-menu.account-drawer::backdrop {
  background:#081634a8!important;
  backdrop-filter:blur(5px)!important;
  -webkit-backdrop-filter:blur(5px)!important;
  animation:accountBackdrop .3s ease both;
}
html[data-design] body .account-drawer-inner {padding:0 15px max(30px, env(safe-area-inset-bottom))!important; min-height:100%;}
html[data-design] body .account-drawer-profile {
  display:flex; align-items:center; gap:12px; min-width:0;
  margin:0 -15px 19px!important; padding:28px 17px 20px!important;
  background:linear-gradient(135deg,#1653cc 0%,#3179f1 70%,#2f6de1 100%)!important;
  border-bottom:3px solid #102653!important;
  box-shadow:0 6px 0 #14367d25!important;
  border-radius:26px 0 18px 18px;
}
html[data-design] body .account-drawer-avatar {
  display:grid; place-items:center; flex-shrink:0; width:55px; height:55px;
  overflow:hidden; background:#ffdc4f!important; border:2px solid #132653!important;
  border-radius:17px!important; color:#142243!important;
  font:1000 29px 'Nunito',sans-serif; box-shadow:3px 3px 0 #0c2354aa!important;
}
html[data-design] body .account-drawer-avatar img {width:100%;height:100%;object-fit:cover;}
html[data-design] body .account-drawer-who {flex:1;min-width:0;color:#fff!important;}
html[data-design] body .account-drawer-who h2 {
  font:1000 clamp(16px,4.5vw,21px)/1.2 'Nunito',sans-serif!important;
  color:#fff!important; margin:0 0 5px!important;
  white-space:nowrap; text-overflow:ellipsis; overflow:hidden;
}
html[data-design] body .account-drawer-who p {
  font:700 12px/1.4 'Nunito',sans-serif!important;
  color:#eaf3ff!important; opacity:1!important; margin:0!important;
  white-space:nowrap; text-overflow:ellipsis; overflow:hidden;
}
html[data-design] body .account-drawer-close {
  display:grid; place-items:center; flex-shrink:0; width:39px; height:39px;
  border:2px solid #14254c!important; border-radius:12px!important;
  background:#fff!important; color:#16274b!important;
  box-shadow:2px 3px 0 #14254caa!important; cursor:pointer; font-size:20px;
  transition:transform .2s ease;
}
html[data-design] body .account-drawer-close:hover {transform:rotate(90deg)}
html[data-design] body .account-drawer-wallet {
  position:relative; isolation:isolate; display:flex; flex-direction:column; align-items:flex-start;
  min-height:142px; margin:0 0 17px!important; padding:18px 15px 63px!important;
  border:2px solid #152649!important; border-radius:22px!important;
  color:#17223b!important;
  background:linear-gradient(123deg,#ffe56c 0%,#ffd144 100%)!important;
  box-shadow:4px 5px 0 #192b5b!important;
  overflow:hidden;
}
html[data-design] body .account-drawer-wallet::after {
  content:''; position:absolute; z-index:-1; width:145px; height:145px;
  border-radius:50%; right:-35px; top:-55px; background:#fff6b667;
  box-shadow:-68px 70px 0 #fff7c131;
}
html[data-design] body .account-drawer-wallet>span {font-size:12px!important; font-weight:900!important; opacity:1!important; color:#253254!important;}
html[data-design] body .account-drawer-wallet>strong {
  font:1000 clamp(23px,6vw,31px)/1.6 'Nunito',sans-serif!important;
  letter-spacing:-.6px; color:#111e38!important; font-variant-numeric:tabular-nums;
}
html[data-design] body .account-drawer-wallet>a {
  position:absolute; right:13px; bottom:15px; display:flex; align-items:center; gap:5px;
  padding:10px 12px!important; border-radius:12px!important; border:2px solid #142649!important;
  background:#183d94!important; color:#fff!important;
  box-shadow:2px 3px 0 #162a4a!important; font:900 12px 'Nunito',sans-serif!important;
  white-space:nowrap; text-decoration:none!important;
  transition:transform .2s ease;
}
html[data-design] body .account-drawer-wallet>a:hover{transform:translateY(-2px)}
html[data-design] body .account-drawer-label {
  margin:26px 0 11px 4px!important; padding:0!important;
  font:1000 14px 'Nunito',sans-serif!important; color:#13254a!important;
}
html[data-design] body .account-drawer-feature {
  position:relative; display:flex; align-items:center; gap:11px; min-height:92px;
  padding:13px 12px!important;
  border:2px solid #143d65!important; border-radius:19px!important;
  background:#d2ffea!important; color:#142b3d!important;
  box-shadow:4px 5px 0 #1b5261!important; text-decoration:none!important;
  transition:transform .2s ease;
}
html[data-design] body .account-drawer-feature:hover {transform:translateY(-3px)}
html[data-design] body .account-feature-icon {
  display:grid; place-items:center; width:55px; height:55px; flex-shrink:0;
  border:2px solid #193752!important; border-radius:17px!important;
  background:#ffb64c!important; color:#172443!important;
  font-size:25px; animation:accountGiftBop 2.8s ease-in-out infinite;
}
html[data-design] body .account-feature-content {display:flex; flex:1; min-width:0; flex-direction:column; gap:3px;}
html[data-design] body .account-feature-content b {font-size:15px!important;font-weight:1000!important;color:#15304a!important;}
html[data-design] body .account-feature-content small {font-size:12px!important;line-height:1.4!important;color:#365969!important;font-weight:750;}
html[data-design] body .account-feature-go {
  display:grid; place-items:center; flex-shrink:0; width:32px; height:34px;
  border:2px solid #112851!important; border-radius:10px!important;
  background:#266ef0!important; color:#fff!important;
}
html[data-design] body .account-drawer-links {display:flex; flex-direction:column; gap:10px; padding-bottom:20px;}
html[data-design] body .account-drawer-links a {
  display:flex; align-items:center; gap:11px; min-height:57px;
  padding:11px 12px!important; border:2px solid #b4c8ee!important;
  border-left:5px solid #3177ef!important; border-radius:15px!important;
  background:#fff!important; color:#182640!important;
  box-shadow:2px 3px 0 #91aee18c!important; text-decoration:none!important;
  font:900 clamp(12px,3.6vw,15px)/1.35 'Nunito',sans-serif!important;
  transition:transform .18s ease, background .18s ease;
}
html[data-design] body .account-drawer-links a:hover {transform:translateX(3px);background:#f5faff!important;}
html[data-design] body .account-drawer-links a:nth-child(3n+2) {border-left-color:#23b17a!important;}
html[data-design] body .account-drawer-links a:nth-child(3n) {border-left-color:#f1ac24!important;}
html[data-design] body .account-drawer-links a>i:first-child {
  display:grid; place-items:center; flex-shrink:0; width:34px; height:34px;
  border-radius:10px!important; background:#e7efff!important;
  color:#2565c4!important; font-size:16px!important;
}
html[data-design] body .account-drawer-links a:nth-child(3n+2)>i:first-child {background:#ddffef!important;color:#128158!important;}
html[data-design] body .account-drawer-links a:nth-child(3n)>i:first-child {background:#fff1c8!important;color:#a96a0b!important;}
html[data-design] body .account-drawer-links a>span {flex:1;min-width:0;overflow-wrap:anywhere;}
html[data-design] body .account-drawer-links a>i:last-child {font-size:12px!important;color:#5472a4!important;}
html[data-design] body .account-drawer-links a.account-drawer-logout {
  border-color:#ffb4bb!important;border-left:5px solid #df4452!important;
  background:#fff0f1!important;color:#bb263d!important;margin-top:7px;
}
html[data-design] body .account-drawer-links a.account-drawer-logout>i {color:#bb263d!important;background:#ffdfe4!important;}
@media(max-width:370px) {
  html[data-design] body .pop-menu.account-drawer[open] {width:94vw!important; border-radius:24px 0 0 24px!important;}
  html[data-design] body .account-drawer-wallet>strong {font-size:22px!important;}
  html[data-design] body .account-drawer-wallet>a {right:9px;bottom:13px;padding:8px!important;font-size:11px!important;}
  html[data-design] body .account-drawer-feature {gap:7px;}
  html[data-design] body .account-drawer-links a {gap:8px;padding:10px!important;font-size:12px!important;}
}
@keyframes accountDrawerEnter {from{transform:translateX(105%);opacity:.5}to{transform:translateX(0);opacity:1}}
@keyframes accountBackdrop {from{opacity:0}to{opacity:1}}
@keyframes accountGiftBop {0%,100%{transform:rotate(-4deg)}50%{transform:translateY(-3px) rotate(5deg)}}
@media(prefers-reduced-motion:reduce){html[data-design] body .pop-menu.account-drawer[open],html[data-design] body .account-feature-icon{animation:none!important;}html[data-design] body .account-drawer-links a,html[data-design] body .account-drawer-close{transition:none!important;}}

/* Modal (Edit Profil, Foto Profil, dll): tampil DI TENGAH layar, di atas bottom nav (z-index 1000) dan
   tombol chat, dan isinya bisa di-scroll sampai tombol Simpan terlihat di HP. */
html body .mc-modal-overlay{
  z-index:5000!important;
  align-items:center!important;
  justify-content:center!important;
  padding:12px!important;
  overscroll-behavior:contain;
}
html body .mc-modal{
  margin:auto!important;
  width:100%!important;
  max-width:440px!important;
  border-radius:22px!important;
  max-height:calc(100vh - 24px)!important;
  max-height:calc(100dvh - 24px)!important;
  overflow-y:auto!important;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  padding-bottom:24px!important;
  animation:mcModalPop .2s ease!important;
}
@keyframes mcModalPop{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}
@media(prefers-reduced-motion:reduce){html body .mc-modal{animation:none!important}}