/* =========================================================
   JakSky Master Polish V3
   Additive visual layer only — no application behavior changes.
========================================================= */
:root{
  --jk-pink:#ff3f9d;
  --jk-pink-soft:#ff78bd;
  --jk-purple:#a04feb;
  --jk-text:#322630;
  --jk-muted:#8b7882;
  --jk-line:rgba(255,67,157,.15);
  --jk-shadow:0 14px 34px rgba(132,38,88,.11);
  --jk-shadow-lg:0 26px 72px rgba(48,18,38,.24);
  --jk-ease:cubic-bezier(.2,.72,.3,1);
}

html{
  scroll-behavior:smooth;
  scroll-padding-top:16px;
}
body{
  -webkit-tap-highlight-color:transparent;
  touch-action:pan-y pinch-zoom;
  overscroll-behavior-y:auto;
  padding-bottom:calc(104px + env(safe-area-inset-bottom));
}
*{box-sizing:border-box;}
button,input,textarea,select{font:inherit;}
button,a,[role="button"]{-webkit-tap-highlight-color:transparent;}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:2px solid rgba(255,63,157,.48);
  outline-offset:2px;
}

/* ---------- Home / brand / search ---------- */
.brandHero{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.72)!important;
  border-radius:24px!important;
  box-shadow:0 18px 42px rgba(194,54,125,.13)!important;
}
.brandHero::after{
  content:"";
  position:absolute;
  inset:auto -15% -55% 25%;
  height:90px;
  pointer-events:none;
  background:radial-gradient(circle,rgba(255,255,255,.42),transparent 67%);
}
.brandHero h1,.brandHero h2{letter-spacing:-.03em;}
.brandSub,.brandMini{line-height:1.45;}

#search{
  min-height:50px!important;
  padding-inline:16px!important;
  border:1px solid rgba(255,67,157,.20)!important;
  border-radius:18px!important;
  background:rgba(255,255,255,.96)!important;
  color:var(--jk-text)!important;
  box-shadow:0 8px 22px rgba(176,49,111,.075)!important;
  transition:border-color .18s var(--jk-ease),box-shadow .18s var(--jk-ease),transform .18s var(--jk-ease);
}
#search:focus{
  outline:none!important;
  border-color:rgba(255,63,157,.60)!important;
  box-shadow:0 0 0 4px rgba(255,63,157,.09),0 10px 24px rgba(176,49,111,.09)!important;
}
#filterTabs{gap:8px!important;scrollbar-width:none;}
#filterTabs::-webkit-scrollbar{display:none;}
#filterTabs button{
  min-height:40px;
  padding-inline:13px!important;
  border:1px solid rgba(255,70,158,.12)!important;
  border-radius:999px!important;
  box-shadow:0 6px 16px rgba(184,50,115,.055);
  transition:transform .15s var(--jk-ease),box-shadow .18s var(--jk-ease),filter .18s var(--jk-ease);
}
#filterTabs button:active{transform:scale(.965);}
#filterTabs button.active{box-shadow:0 8px 20px rgba(255,63,157,.19)!important;}

/* ---------- Video grid / cards ---------- */
#list{
  width:min(1120px,100%);
  margin-inline:auto;
  padding-bottom:8px!important;
}
.card{
  border:1px solid rgba(255,86,166,.11)!important;
  border-radius:21px!important;
  overflow:hidden!important;
  background:rgba(255,255,255,.975)!important;
  box-shadow:0 12px 28px rgba(175,49,108,.095)!important;
  transform:translateZ(0);
  transition:transform .16s var(--jk-ease),box-shadow .18s var(--jk-ease),border-color .18s var(--jk-ease);
}
.card:active{transform:scale(.987);}
.card .body{padding:11px 12px 12px!important;}
.card .body>b,.card .body>strong{color:#302630;line-height:1.3;letter-spacing:-.012em;}
.meta{gap:6px!important;align-items:center;}
.meta span{
  border:1px solid rgba(255,79,158,.075);
  border-radius:999px!important;
  background:rgba(255,251,253,.96)!important;
  box-shadow:0 3px 9px rgba(178,47,107,.04);
}
.btnFav{transition:transform .15s var(--jk-ease),filter .15s var(--jk-ease),box-shadow .15s var(--jk-ease);}
.btnFav:active{transform:scale(.92);}
.badge,.staffBadge,.vipCommentBadge,.customTitleBadge,.achievementBadge{box-shadow:0 4px 12px rgba(61,28,46,.065);}
.staffBadge{border:1px solid rgba(0,0,0,.05);border-radius:999px!important;}
.ownerBadge{background:linear-gradient(135deg,#fff2c7,#ffe19a)!important;color:#7a5700!important;}
.adminBadge{background:linear-gradient(135deg,#e9f4ff,#d9e9ff)!important;color:#2264ac!important;}
.modBadge{background:linear-gradient(135deg,#e4fbff,#d5f4ff)!important;color:#087996!important;}

/* ---------- Main video modal / content ---------- */
#modal,.ageOverlay,#notifModal,#userModal,#publicProfileModal,#editProfileModal,
.securityOverlay,#vipShopModal,#vipCheckoutModal,#vipOrderDetailModal,.jakConfirmOverlay{
  -webkit-backdrop-filter:blur(12px)!important;
  backdrop-filter:blur(12px)!important;
}
.modalBox{
  border:1px solid rgba(255,75,159,.14)!important;
  border-radius:24px!important;
  box-shadow:var(--jk-shadow-lg)!important;
}
.modalBox .btns button,.sendBtn{
  min-height:42px;
  border-radius:13px!important;
  transition:transform .15s var(--jk-ease),filter .15s var(--jk-ease),box-shadow .15s var(--jk-ease);
}
.modalBox .btns button:active,.sendBtn:active{transform:scale(.975);}
.commentInput{
  border-radius:15px!important;
  transition:border-color .18s var(--jk-ease),box-shadow .18s var(--jk-ease);
}
.commentInput:focus{box-shadow:0 0 0 3px rgba(255,63,157,.08)!important;}

/* ---------- Comments / replies ---------- */
.comment,.replyComment{
  border-radius:17px!important;
  box-shadow:0 8px 20px rgba(151,45,96,.055);
}
.comment button,.replyComment button{
  min-height:34px;
  border-radius:11px!important;
  transition:transform .14s var(--jk-ease),filter .14s var(--jk-ease);
}
.comment button:active,.replyComment button:active{transform:scale(.97);}
.replyContext{border-radius:12px!important;}
.commentUserName{font-weight:800;}

/* ---------- Free quota / gate ---------- */
.jakFreeQuotaBar,.jakFreeGateBox,.resumePlaybackBox{
  border:1px solid rgba(255,68,157,.13)!important;
  box-shadow:0 12px 28px rgba(156,43,97,.08)!important;
}
.jakFreeGateBox{border-radius:24px!important;overflow:hidden;}
.jakFreeGateCta,.resumePlaybackActions button{min-height:43px;border-radius:14px!important;}

/* ---------- Bottom navigation ---------- */
.bottomNav{
  left:9px!important;
  right:9px!important;
  bottom:9px!important;
  height:78px!important;
  padding:7px 7px calc(7px + env(safe-area-inset-bottom))!important;
  border:1px solid rgba(255,129,193,.17)!important;
  border-radius:25px!important;
  overflow:hidden;
  box-shadow:0 18px 38px rgba(48,17,54,.25)!important;
  transform:translateZ(0);
  backface-visibility:hidden;
}
.bottomNav button{
  border-radius:18px!important;
  transition:transform .15s var(--jk-ease),background-color .18s var(--jk-ease),color .18s var(--jk-ease),box-shadow .18s var(--jk-ease);
}
.bottomNav button:active{transform:scale(.945);}
.bottomNav button.jakNavActive,.bottomNav button.activeNav{
  box-shadow:inset 0 0 0 1px rgba(255,117,188,.12),0 7px 18px rgba(255,55,154,.12)!important;
}
#notifBell{transition:transform .15s var(--jk-ease);}
#notifBell:active{transform:scale(.92);}

/* ---------- Authentication / own profile ---------- */
.authBox,.publicProfileBox,.securityCard{
  border:1px solid rgba(255,75,159,.14)!important;
  box-shadow:0 28px 74px rgba(53,20,42,.28)!important;
}
.authBox{border-radius:26px!important;}
.authBox input,.securityCard input{
  min-height:48px!important;
  border-radius:15px!important;
  transition:border-color .18s var(--jk-ease),box-shadow .18s var(--jk-ease),background-color .18s var(--jk-ease);
}
.authBox input:focus,.securityCard input:focus{
  outline:none!important;
  box-shadow:0 0 0 4px rgba(255,61,151,.09)!important;
}
.authActions{gap:9px!important;}
.authBtn,.securityPrimary{
  min-height:46px!important;
  border-radius:15px!important;
  box-shadow:0 10px 24px rgba(255,61,151,.15);
  transition:transform .15s var(--jk-ease),filter .15s var(--jk-ease),box-shadow .15s var(--jk-ease);
}
.authBtn:active,.securityPrimary:active{transform:scale(.977);}
.publicTrustPanel,.authTrustPanel{border-radius:18px!important;}

/* ---------- Public profile ---------- */
.publicProfileBox{border-radius:28px!important;}
.publicProfileHero{overflow:hidden;border-radius:22px!important;}
.publicProfileBadges{gap:6px!important;}
.publicProfileBio{border-radius:16px!important;line-height:1.55!important;}
.publicProfileStats>div{border-radius:16px!important;}

/* ---------- Edit profile: keep its existing dark theme, make it coherent ---------- */
#editProfileModal.editProfileOverlay{scrollbar-width:none;}
#editProfileModal.editProfileOverlay::-webkit-scrollbar{display:none;}
#editProfileModal .editProfileBox{
  width:min(94vw,430px)!important;
  max-height:min(91dvh,860px)!important;
  padding:24px 20px 22px!important;
  border-color:rgba(255,73,162,.22)!important;
  border-radius:28px!important;
  background:linear-gradient(160deg,#171317 0%,#110e12 62%,#17111a 100%)!important;
  box-shadow:0 30px 90px rgba(0,0,0,.62)!important;
  scrollbar-width:thin;
  scrollbar-color:rgba(255,76,162,.32) transparent;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  scroll-behavior:smooth;
}
#editProfileModal .editProfileBox::-webkit-scrollbar{width:4px;}
#editProfileModal .editProfileBox::-webkit-scrollbar-thumb{border-radius:999px;background:rgba(255,76,162,.30);}
#editProfileModal .editProfileClose{
  transition:transform .14s var(--jk-ease),background-color .16s var(--jk-ease);
}
#editProfileModal .editProfileClose:active{transform:scale(.93);}
#editProfileModal .avatarFrameSection,
#editProfileModal .profileBannerSection,
#editProfileModal .achievementPickerSection{
  padding:15px!important;
  border-color:rgba(255,255,255,.075)!important;
  border-radius:19px!important;
  background:rgba(255,255,255,.028)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.018);
}
#editProfileModal .avatarFrameChoice,
#editProfileModal .profileBannerChoice,
#editProfileModal .achievementChoice{
  border-color:rgba(255,255,255,.075)!important;
  background:rgba(255,255,255,.03)!important;
  transition:transform .15s var(--jk-ease),border-color .18s var(--jk-ease),background-color .18s var(--jk-ease),box-shadow .18s var(--jk-ease);
}
#editProfileModal .avatarFrameChoice:active,
#editProfileModal .profileBannerChoice:active,
#editProfileModal .achievementChoice:active{transform:scale(.975);}
#editProfileModal .avatarFrameChoice.selected,
#editProfileModal .profileBannerChoice.selected,
#editProfileModal .achievementChoice.selected{
  border-color:rgba(255,72,162,.53)!important;
  background:rgba(255,55,153,.075)!important;
  box-shadow:inset 0 0 0 1px rgba(255,67,157,.075),0 7px 17px rgba(0,0,0,.10)!important;
}
#editProfileModal #editProfileUsername,
#editProfileModal #editProfileBio{
  min-height:50px!important;
  border-color:rgba(255,105,173,.29)!important;
  border-radius:16px!important;
  background:#2a2529!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.015);
}
#editProfileModal #editProfileBio{min-height:118px!important;line-height:1.55!important;}
#editProfileModal .editProfileSave{
  min-height:52px!important;
  border-radius:17px!important;
  box-shadow:0 13px 28px rgba(255,56,157,.17)!important;
  transition:transform .15s var(--jk-ease),filter .15s var(--jk-ease);
}
#editProfileModal .editProfileSave:active{transform:scale(.98);}

/* Title V4: dark card inside Edit Profile, not a white block */
#editProfileModal .jakTitleVisibilityV4{
  margin:16px 0 18px!important;
  padding:15px!important;
  border:1px solid rgba(255,75,162,.17)!important;
  border-radius:19px!important;
  background:rgba(255,255,255,.03)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.02),0 8px 20px rgba(0,0,0,.08)!important;
  color:#eee!important;
}
#editProfileModal .jakTitleV4Head{margin-bottom:12px!important;}
#editProfileModal .jakTitleV4Head b{color:#f4edf1!important;font-size:13px!important;}
#editProfileModal .jakTitleV4Head span{color:#978b92!important;font-size:10px!important;line-height:1.55!important;}
#editProfileModal .jakTitleV4Body{gap:9px!important;}
#editProfileModal .jakTitleV4Loading,
#editProfileModal .jakTitleV4Empty{
  padding:13px!important;
  border:1px solid rgba(255,255,255,.065)!important;
  border-radius:14px!important;
  background:rgba(255,255,255,.035)!important;
  color:#aaa0a6!important;
  font-size:10px!important;
}
#editProfileModal .jakTitleV4Row{
  padding:11px!important;
  border:1px solid rgba(255,255,255,.07)!important;
  border-radius:15px!important;
  background:rgba(255,255,255,.035)!important;
  box-shadow:none!important;
}
#editProfileModal .jakTitleV4State.isOn{color:#78e4ae!important;}
#editProfileModal .jakTitleV4State.isOff{color:#9b9096!important;}
#editProfileModal .jakTitleV4Toggle{
  min-height:38px!important;
  min-width:82px!important;
  border:1px solid rgba(255,79,164,.23)!important;
  border-radius:12px!important;
  background:rgba(255,59,154,.10)!important;
  color:#ff80bd!important;
}
#editProfileModal .jakTitleV4Toggle.isEnabled{
  border-color:rgba(255,255,255,.08)!important;
  background:rgba(255,255,255,.045)!important;
  color:#b5abb1!important;
}

/* ---------- Security / recovery ---------- */
.securityCard{
  border-radius:28px!important;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  scrollbar-color:rgba(255,63,157,.30) transparent;
}
.securityField{margin-bottom:11px!important;}
.securityMiniStatus,.securityStatus{border-radius:13px!important;}
.securityCodeReveal{border-radius:15px!important;}
#jakRecoveryV2Button{border-radius:16px!important;}

/* ---------- VIP shop / checkout / proof ---------- */
#vipShopModal>div{
  border:1px solid rgba(255,73,159,.15)!important;
  border-radius:28px!important;
  box-shadow:0 30px 86px rgba(48,15,39,.30)!important;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  scrollbar-color:rgba(255,63,157,.28) transparent;
}
.vipDanaPaymentCard,.myVipOrdersSection{border-radius:21px!important;}
.vipDanaPaymentCard{box-shadow:0 13px 29px rgba(33,11,27,.16);}
.vipPackageCard{
  border-radius:22px!important;
  box-shadow:0 12px 28px rgba(154,50,103,.075);
  transition:transform .16s var(--jk-ease),box-shadow .18s var(--jk-ease),border-color .18s var(--jk-ease);
}
.vipPackageCard:active{transform:scale(.989);}
.vipBuyBtn,.myVipRefreshBtn,.vipRetryPaymentBtn,.vipOrderDetailBtn{
  min-height:44px!important;
  border-radius:14px!important;
  transition:transform .15s var(--jk-ease),filter .15s var(--jk-ease),box-shadow .15s var(--jk-ease);
}
.vipBuyBtn:active,.myVipRefreshBtn:active,.vipRetryPaymentBtn:active,.vipOrderDetailBtn:active{transform:scale(.975);}
.myVipOrderItem{border-radius:17px!important;}
.vipOrderStatusBadge{padding:6px 9px!important;border-radius:999px!important;}
.vipCheckoutBox{
  width:min(92vw,520px)!important;
  max-height:calc(100dvh - 30px)!important;
  border-radius:29px!important;
  box-shadow:0 30px 94px rgba(0,0,0,.62)!important;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  scrollbar-color:rgba(255,74,162,.28) transparent;
}
.vipCheckoutButtons{gap:10px!important;}
.vipCheckoutButtons button,.vipCheckoutDone{min-height:50px!important;border-radius:16px!important;}
.vipCheckoutDone{box-shadow:0 12px 26px rgba(255,58,158,.17);}
#vipCheckoutProofPanel,.vipCheckoutProofPanel{
  border-radius:19px!important;
  box-shadow:0 10px 24px rgba(0,0,0,.10)!important;
}
#vipCheckoutProofInput{
  min-height:46px!important;
  border-radius:13px!important;
}
#vipCheckoutProofButton{
  min-height:46px!important;
  border-radius:14px!important;
}
.vipOrderDetailBox{border-radius:26px!important;box-shadow:0 28px 80px rgba(0,0,0,.52)!important;}

/* ---------- Notifications / dialogs ---------- */
#notifModal>div,#notifList{scrollbar-width:thin;scrollbar-color:rgba(255,63,157,.28) transparent;}
.jakDialogBox,.jakConfirmCard,.ownerConfirmCard{
  border-radius:25px!important;
  box-shadow:0 26px 74px rgba(55,19,44,.25)!important;
}
.toast,.kickToast,#jakProfileToast{
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  box-shadow:0 14px 34px rgba(53,19,42,.20)!important;
}

/* ---------- Native smooth-scroll containers ---------- */
#vipShopModal>div,.authBox,.publicProfileBox,.securityCard,.vipCheckoutBox,.vipOrderDetailBox,
#editProfileModal .editProfileBox,.modalBox{
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  scroll-behavior:smooth;
}

@media (hover:hover) and (pointer:fine){
  .card:hover,.vipPackageCard:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(175,49,108,.13)!important;}
  .authBtn:hover,.vipBuyBtn:hover,.editProfileSave:hover{filter:brightness(1.025);}
}

@media(max-width:560px){
  body{padding-bottom:calc(98px + env(safe-area-inset-bottom));}
  #list{padding-left:10px!important;padding-right:10px!important;gap:12px!important;}
  .bottomNav{left:8px!important;right:8px!important;bottom:8px!important;}
  #vipShopModal{padding:10px!important;}
  #vipShopModal>div{width:100%!important;max-width:100%!important;padding:18px!important;}
  #editProfileModal.editProfileOverlay{padding:10px!important;align-items:flex-start!important;}
  #editProfileModal .editProfileBox{width:100%!important;max-height:calc(100dvh - 20px)!important;margin:0 auto!important;}
  #editProfileModal .avatarFramePicker{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  #editProfileModal .profileBannerPicker{gap:8px!important;}
  #editProfileModal .jakTitleV4Row{grid-template-columns:minmax(0,1fr) auto!important;}
  input,textarea,select{font-size:16px!important;}
}

@media(max-width:360px){
  #editProfileModal .jakTitleV4Row{grid-template-columns:1fr!important;}
  #editProfileModal .jakTitleV4Toggle{width:100%!important;}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto!important;}
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
}

/* =========================================================
   JakSky UX Complete V4 — finishing layer
   Safe visual/UX improvements. No API or permission changes.
========================================================= */
:root{
  --jkux-ok:#238b61;
  --jkux-warn:#a66a12;
  --jkux-error:#b63b5d;
  --jkux-info:#7157c9;
  --jkux-state-bg:rgba(255,255,255,.72);
}

/* Keep long pages stable on mobile and stop accidental sideways movement. */
html,body{max-width:100%;overflow-x:hidden;}
body{overflow-anchor:auto;}
#list,.authBox,.publicProfileBox,.securityCard,.vipCheckoutBox,.vipOrderDetailBox,
#editProfileModal .editProfileBox,#vipShopModal>div,.modalBox{
  scrollbar-gutter:stable;
}

/* Consistent minimum touch targets. */
button,.authBtn,.securityPrimary,.vipBuyBtn,.myVipRefreshBtn,.vipRetryPaymentBtn,
.vipOrderDetailBtn,.vipCheckoutDone,.editProfileSave,.jakTitleV4Toggle{
  touch-action:manipulation;
}
button:not(.tiny):not(.mini):not(.iconBtn),[role="button"]{
  min-height:42px;
}
button:disabled,[aria-disabled="true"]{
  cursor:not-allowed!important;
  opacity:.58!important;
  filter:saturate(.72)!important;
  transform:none!important;
  box-shadow:none!important;
}

/* Visual state language: loading / empty / error / success / pending. */
.jkuxState{
  position:relative;
  border:1px solid rgba(255,76,160,.10)!important;
  border-radius:14px!important;
  line-height:1.45!important;
}
.jkuxState::before{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:18px;
  height:18px;
  margin-right:7px;
  vertical-align:-3px;
  border-radius:999px;
  font-size:11px;
  font-weight:900;
}
.jkuxStateLoading::before{content:"";border:2px solid rgba(255,63,157,.18);border-top-color:#ff3f9d;animation:jkuxSpin .72s linear infinite;}
.jkuxStateEmpty::before{content:"—";background:rgba(120,105,114,.10);color:#81747b;}
.jkuxStateError::before{content:"!";background:rgba(182,59,93,.11);color:var(--jkux-error);}
.jkuxStateSuccess::before{content:"✓";background:rgba(35,139,97,.11);color:var(--jkux-ok);}
.jkuxStatePending::before{content:"…";background:rgba(166,106,18,.11);color:var(--jkux-warn);}
@keyframes jkuxSpin{to{transform:rotate(360deg)}}

/* Existing status blocks get a coherent treatment without changing their text. */
.jakTitleV4Loading.jkuxState,.jakTitleV4Empty.jkuxState,
.securityStatus.jkuxState,.securityMiniStatus.jkuxState,.uploadStatus.jkuxState,
#vipCheckoutProofStatus.jkuxState,.vipCheckoutProofStatus.jkuxState{
  padding:11px 12px!important;
}
.jkuxStateError{border-color:rgba(182,59,93,.17)!important;background:rgba(255,241,245,.72)!important;color:#9d3150!important;}
.jkuxStateSuccess{border-color:rgba(35,139,97,.16)!important;background:rgba(239,252,247,.76)!important;color:#247556!important;}
.jkuxStatePending{border-color:rgba(166,106,18,.16)!important;background:rgba(255,248,235,.76)!important;color:#8c5d18!important;}
.jkuxStateEmpty{background:rgba(255,255,255,.55)!important;color:#83747d!important;}

/* Dark Edit Profile overrides for state cards. */
#editProfileModal .jkuxStateError{background:rgba(182,59,93,.10)!important;color:#ff9ab7!important;border-color:rgba(255,104,153,.18)!important;}
#editProfileModal .jkuxStateSuccess{background:rgba(35,139,97,.10)!important;color:#8fe0b8!important;border-color:rgba(108,222,166,.16)!important;}
#editProfileModal .jkuxStatePending{background:rgba(184,124,25,.10)!important;color:#e6bf77!important;border-color:rgba(230,190,112,.15)!important;}
#editProfileModal .jkuxStateEmpty,#editProfileModal .jkuxStateLoading{background:rgba(255,255,255,.035)!important;color:#aaa0a6!important;border-color:rgba(255,255,255,.065)!important;}

/* Edit Profile hierarchy: clearer sections, less visually crowded. */
#editProfileModal .editProfileBox>h2,
#editProfileModal .editProfileBox>h3{
  scroll-margin-top:14px;
}
#editProfileModal .avatarFrameSection,
#editProfileModal .profileBannerSection,
#editProfileModal .achievementPickerSection,
#editProfileModal .jakTitleVisibilityV4{
  margin-block:13px!important;
}
#editProfileModal .avatarFrameSection>h3,
#editProfileModal .profileBannerSection>h3,
#editProfileModal .achievementPickerSection>h3,
#editProfileModal .jakTitleV4Head b{
  letter-spacing:-.015em;
}
#editProfileModal label{
  display:block;
  margin-top:12px;
  margin-bottom:7px;
  color:#f0e9ed;
  font-weight:750;
}
#editProfileModal .jakTitleV4Row{
  align-items:center!important;
}
#editProfileModal .jakTitleV4BadgeWrap{
  min-width:0;
  overflow:hidden;
}
#editProfileModal .customTitleBadge{
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* Better forms and keyboard behavior. */
input,textarea,select{
  caret-color:#ff3f9d;
}
textarea{resize:vertical;}
input::placeholder,textarea::placeholder{opacity:.68;}
input[type="file"]{max-width:100%;}
input[type="file"]::file-selector-button{
  min-height:36px;
  margin-right:9px;
  border:0;
  border-radius:10px;
  padding:7px 11px;
  font:inherit;
  font-weight:700;
  cursor:pointer;
}

/* VIP: status/history readability and proof upload hierarchy. */
.myVipOrdersSection{overflow:hidden;}
.myVipOrderItem{
  position:relative;
  padding:13px!important;
  border:1px solid rgba(255,75,159,.10)!important;
  background:rgba(255,255,255,.75)!important;
}
.myVipOrderItem+.myVipOrderItem{margin-top:9px!important;}
.vipOrderStatusBadge{font-weight:800!important;letter-spacing:-.01em;}
#vipCheckoutProofPanel,.vipCheckoutProofPanel{
  overflow:hidden;
  border:1px solid rgba(255,73,158,.12)!important;
}
#vipCheckoutProofInput{width:100%!important;}
#vipCheckoutProofButton{width:100%;}
.vipCheckoutButtons{position:relative;}

/* Messages/toasts shouldn't hide under bottom nav or device safe area. */
.toast,.kickToast,#jakProfileToast{
  max-width:min(92vw,420px)!important;
  bottom:calc(96px + env(safe-area-inset-bottom))!important;
}

/* Cards: reduce repaint cost while keeping the same look. */
.card,.vipPackageCard,.myVipOrderItem,.comment,.replyComment{
  contain:layout paint;
}
.card img,.card video{
  backface-visibility:hidden;
  transform:translateZ(0);
}

/* Keep media placeholders stable while content loads. */
.card img{
  background:linear-gradient(110deg,rgba(255,230,242,.66) 8%,rgba(255,247,251,.95) 18%,rgba(255,230,242,.66) 33%);
  background-size:200% 100%;
}
.card img:not([src]),.card img[src=""]{animation:jkuxShimmer 1.15s linear infinite;}
@keyframes jkuxShimmer{to{background-position-x:-200%;}}

/* Modal scroll and mobile keyboard safety. */
#editProfileModal,#vipShopModal,#vipCheckoutModal,#vipOrderDetailModal,#publicProfileModal,
#userModal,#notifModal,.securityOverlay{
  overscroll-behavior:contain;
}
#editProfileModal .editProfileBox,.vipCheckoutBox,.securityCard,.authBox,.publicProfileBox{
  max-height:calc(100dvh - 20px)!important;
}

/* Keep bottom-nav content reachable and give focused fields room above keyboard. */
:where(input,textarea,select):focus{scroll-margin-block:90px 150px;}

/* Make long labels wrap instead of breaking layouts. */
button,.badge,.staffBadge,.vipCommentBadge,.customTitleBadge,.achievementBadge,
.vipOrderStatusBadge{overflow-wrap:anywhere;}

@media(max-width:560px){
  body{padding-inline:0!important;}
  .card{border-radius:19px!important;}
  #editProfileModal .editProfileBox,#vipShopModal>div,.vipCheckoutBox,.securityCard,.authBox,.publicProfileBox{
    max-height:calc(100dvh - 12px)!important;
  }
  #editProfileModal.editProfileOverlay,#vipShopModal,#vipCheckoutModal,#vipOrderDetailModal,.securityOverlay{
    padding:6px!important;
  }
  .bottomNav{
    height:76px!important;
    padding-bottom:calc(7px + env(safe-area-inset-bottom))!important;
  }
  .bottomNav button{min-width:0!important;}
  .bottomNav button span,.bottomNav button small{white-space:nowrap;}
  .toast,.kickToast,#jakProfileToast{bottom:calc(92px + env(safe-area-inset-bottom))!important;}
}

/* On phones, blur can be expensive. Keep the glass look but lower GPU cost. */
@media(max-width:560px){
  #modal,.ageOverlay,#notifModal,#userModal,#publicProfileModal,#editProfileModal,
  .securityOverlay,#vipShopModal,#vipCheckoutModal,#vipOrderDetailModal,.jakConfirmOverlay{
    -webkit-backdrop-filter:blur(7px)!important;
    backdrop-filter:blur(7px)!important;
  }
}

@media(prefers-reduced-motion:reduce){
  .jkuxStateLoading::before,.card img:not([src]),.card img[src=""]{animation:none!important;}
}