/* =========================================================
   JAKSKY UI FINAL V7
   Auth + Profile + Age popup visual cleanup
========================================================= */

:root{
  --jv7-bg:#061426;
  --jv7-bg2:#0a2342;
  --jv7-surface:#0b284b;
  --jv7-surface2:#0e3158;
  --jv7-line:rgba(118,190,255,.24);
  --jv7-line-strong:rgba(133,203,255,.42);
  --jv7-text:#f3f8ff;
  --jv7-muted:#9fb2c7;
  --jv7-blue:#159dff;
  --jv7-blue2:#4d6fff;
  --jv7-danger:#ff6b82;
}

/* ---------- MODAL LAYER ---------- */
#userModal{
  padding:18px !important;
  background:rgba(2,8,20,.76) !important;
  backdrop-filter:blur(15px) !important;
  -webkit-backdrop-filter:blur(15px) !important;
}

#userModal .authBox{
  width:min(430px,calc(100vw - 32px)) !important;
  max-width:430px !important;
  max-height:calc(100dvh - 34px) !important;
  overflow:auto !important;
  overscroll-behavior:contain !important;
  box-sizing:border-box !important;
  padding:22px 20px 20px !important;
  border-radius:28px !important;
  background:
    radial-gradient(circle at 50% -10%,rgba(36,141,255,.18),transparent 31%),
    linear-gradient(160deg,#0b2a50 0%,#071d37 58%,#061528 100%) !important;
  border:1px solid var(--jv7-line) !important;
  box-shadow:
    0 30px 90px rgba(0,0,0,.58),
    inset 0 1px 0 rgba(255,255,255,.055) !important;
  color:var(--jv7-text) !important;
  scrollbar-width:thin;
  scrollbar-color:rgba(95,177,255,.5) transparent;
}

#userModal .authBox::-webkit-scrollbar{width:5px}
#userModal .authBox::-webkit-scrollbar-thumb{
  background:rgba(95,177,255,.45);
  border-radius:99px;
}

/* ---------- CLOSE ---------- */
#userModal .authClose,
#userModal .ownProfileClose{
  width:48px !important;
  height:48px !important;
  border-radius:50% !important;
  display:grid !important;
  place-items:center !important;
  background:#0d315a !important;
  border:1px solid rgba(109,197,255,.30) !important;
  color:#69c5ff !important;
  box-shadow:none !important;
  font-size:26px !important;
  line-height:1 !important;
}

/* ---------- LOGIN CAT / TITLE ---------- */
#userModal #catLogin{
  width:148px !important;
  height:148px !important;
  object-fit:contain !important;
  margin:2px auto 6px !important;
  display:block !important;
  filter:drop-shadow(0 12px 22px rgba(0,0,0,.28));
}

#userModal .authBox h2{
  color:var(--jv7-text) !important;
  font-size:31px !important;
  line-height:1.12 !important;
  letter-spacing:-.02em !important;
  margin:6px 0 7px !important;
  text-align:center !important;
}

#userModal .authSub{
  color:var(--jv7-muted) !important;
  text-align:center !important;
  font-size:13px !important;
  line-height:1.5 !important;
  margin:0 0 16px !important;
}

/* ---------- LOGIN / REGISTER TABS ---------- */
#userModal .authModeTabs{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:6px !important;
  padding:5px !important;
  margin:10px 0 16px !important;
  border-radius:19px !important;
  background:rgba(5,18,35,.82) !important;
  border:1px solid rgba(112,185,255,.19) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035) !important;
}

#userModal .authModeTab{
  min-height:50px !important;
  border-radius:15px !important;
  background:transparent !important;
  color:#9eb1c5 !important;
  border:0 !important;
  box-shadow:none !important;
  font-weight:800 !important;
  font-size:15px !important;
}

#userModal .authModeTab.active{
  color:#fff !important;
  background:linear-gradient(135deg,var(--jv7-blue),var(--jv7-blue2)) !important;
  box-shadow:0 10px 24px rgba(31,113,255,.26) !important;
}

/* ---------- INPUTS ---------- */
#userModal .authBox input{
  width:100% !important;
  min-height:58px !important;
  box-sizing:border-box !important;
  margin:0 0 12px !important;
  padding:0 18px !important;
  border-radius:16px !important;
  border:1px solid rgba(139,199,255,.38) !important;
  background:#092746 !important;
  color:#f3f8ff !important;
  caret-color:#8ed3ff !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025),
    0 0 0 1px rgba(0,0,0,.06) !important;
  outline:none !important;
  font-size:16px !important;
  -webkit-appearance:none !important;
}

#userModal .authBox input::placeholder{
  color:#7890a9 !important;
  opacity:1 !important;
}

#userModal .authBox input:focus{
  border-color:#61bdff !important;
  box-shadow:
    0 0 0 3px rgba(52,158,255,.13),
    inset 0 1px 0 rgba(255,255,255,.03) !important;
}

/* Chrome/Android autofill — ALWAYS dark, not white. */
#userModal input:-webkit-autofill,
#userModal input:-webkit-autofill:hover,
#userModal input:-webkit-autofill:focus,
#userModal input:autofill{
  -webkit-text-fill-color:#f3f8ff !important;
  caret-color:#f3f8ff !important;
  -webkit-box-shadow:0 0 0 1000px #092746 inset !important;
  box-shadow:0 0 0 1000px #092746 inset !important;
  border:1px solid rgba(139,199,255,.38) !important;
  transition:background-color 999999s ease-out 0s !important;
}

/* Password eye */
#userModal .authPassWrap{
  position:relative !important;
  margin-bottom:12px !important;
}

#userModal .authPassWrap input{
  margin-bottom:0 !important;
  padding-right:64px !important;
}

#userModal .authEyeBtn{
  right:8px !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  width:45px !important;
  height:45px !important;
  border-radius:50% !important;
  background:#0c3159 !important;
  border:1px solid rgba(107,192,255,.22) !important;
  color:#48bdff !important;
  box-shadow:none !important;
}

/* ---------- MAIN ACTIONS ---------- */
#userModal .authActions,
#userModal .authActionsV4{
  margin-top:4px !important;
}

#userModal .authBtn{
  min-height:58px !important;
  border:0 !important;
  border-radius:16px !important;
  background:linear-gradient(135deg,var(--jv7-blue),var(--jv7-blue2)) !important;
  color:#fff !important;
  box-shadow:0 12px 26px rgba(29,110,255,.25) !important;
  font-size:16px !important;
  font-weight:800 !important;
  letter-spacing:0 !important;
}

#userModal .authBtn:active{
  transform:translateY(1px) scale(.995) !important;
}

#userModal .authBtn.authSecondary{
  background:#0d3157 !important;
  color:#e9f5ff !important;
  border:1px solid rgba(111,191,255,.25) !important;
  box-shadow:none !important;
}

/* ---------- UTILITY / STATUS ---------- */
#userModal .authV4Utility{
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  gap:13px !important;
  margin:15px 0 3px !important;
  color:#64809d !important;
}

#userModal .authV4Link{
  color:#91bde1 !important;
  font-size:12px !important;
  font-weight:650 !important;
  background:none !important;
  border:0 !important;
  box-shadow:none !important;
}

#userModal #authStatus{
  min-height:18px !important;
  text-align:center !important;
  margin:10px 0 0 !important;
  color:var(--jv7-danger) !important;
  font-size:12px !important;
  line-height:1.45 !important;
}

#userModal .registrationLimitNote{
  color:#849cb3 !important;
  font-size:11px !important;
  line-height:1.45 !important;
  margin:10px 2px 0 !important;
}

/* Old trust blocks stay available but never clutter auth. */
#userModal .authV4LegacyTrust{
  display:none !important;
}

/* ---------- PROFILE ---------- */
#userModal .profileBannerOwn{
  height:128px !important;
  margin:-4px 0 0 !important;
  border-radius:20px !important;
  overflow:hidden !important;
  border:1px solid rgba(255,255,255,.08) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08) !important;
}

#userModal .profileAvatarStage{
  margin:-56px auto 4px !important;
  position:relative !important;
  z-index:4 !important;
}

#userModal .profileAvatarFrameShell{
  width:112px !important;
  height:112px !important;
}

#userModal #profileAvatarMain.profileAvatarMain{
  width:102px !important;
  height:102px !important;
  object-fit:cover !important;
}

#userModal .profileBioMain{
  margin:9px 0 12px !important;
  padding:12px 14px !important;
  border-radius:14px !important;
  background:rgba(10,35,64,.78) !important;
  border:1px solid rgba(112,185,255,.16) !important;
  color:#c7d5e4 !important;
  text-align:left !important;
  line-height:1.45 !important;
  font-size:12px !important;
}

#userModal .profileBioMain.empty{
  color:#728aa2 !important;
}

/* Existing inline profile info block */
#userModal .authBox > div[style*="line-height:1.9"]{
  margin:12px 0 !important;
  padding:16px !important;
  border-radius:18px !important;
  background:rgba(8,31,58,.76) !important;
  border:1px solid rgba(107,186,255,.19) !important;
  color:#d5e1ed !important;
  line-height:1.75 !important;
  font-size:13px !important;
}

#userModal .authBox > div[style*="line-height:1.9"] > b{
  color:#f3f8ff !important;
}

#userModal .mainProfileTitleRow,
#userModal .mainProfileAchievementRow{
  margin:12px 0 !important;
  display:grid !important;
  grid-template-columns:88px minmax(0,1fr) !important;
  gap:8px !important;
  align-items:start !important;
}

#userModal .mainProfileTitleList,
#userModal .profileAchievementList{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:7px !important;
  min-width:0 !important;
}

/* Make title/achievement labels readable instead of washed-out glow. */
#userModal .customTitleBadge,
#userModal .achievementBadge{
  min-height:28px !important;
  padding:5px 10px !important;
  border-radius:999px !important;
  background:#102f50 !important;
  color:#eef7ff !important;
  border:1px solid rgba(124,196,255,.24) !important;
  box-shadow:none !important;
  text-shadow:none !important;
  filter:none !important;
  font-size:10px !important;
  font-weight:800 !important;
  line-height:1.2 !important;
}

#userModal .customTitleBadge::before{
  opacity:.12 !important;
}

#userModal .customTitleBadge.titleColor-pink{border-color:rgba(255,114,183,.58)!important}
#userModal .customTitleBadge.titleColor-purple{border-color:rgba(177,127,255,.58)!important}
#userModal .customTitleBadge.titleColor-blue{border-color:rgba(76,151,255,.58)!important}
#userModal .customTitleBadge.titleColor-cyan{border-color:rgba(78,220,230,.58)!important}
#userModal .customTitleBadge.titleColor-gold{border-color:rgba(255,205,87,.64)!important}
#userModal .customTitleBadge.titleColor-red{border-color:rgba(255,103,119,.60)!important}
#userModal .customTitleBadge.titleColor-green{border-color:rgba(93,220,151,.58)!important}

#userModal .achievementFeatured{
  border-color:rgba(255,211,94,.78) !important;
  background:#3a3217 !important;
  color:#fff0ae !important;
}

#userModal .verifiedIcon{
  box-shadow:none !important;
}

/* Profile action buttons */
#userModal .authBox > .authBtn{
  margin-top:8px !important;
}

#userModal .authBox > .authBtn.authSecondary{
  background:#0d3157 !important;
}

#userModal .authBox > .authBtn:last-of-type{
  background:linear-gradient(135deg,#236ba8,#3559b8) !important;
}

/* ---------- AGE POPUP: KEEP LOGIC, CLEAN VISUAL ---------- */
#agePopup.ageOverlay{
  background:rgba(2,8,20,.86) !important;
  backdrop-filter:blur(15px) !important;
  -webkit-backdrop-filter:blur(15px) !important;
}

#agePopup .ageBox{
  background:
    radial-gradient(circle at 50% 0%,rgba(35,134,255,.18),transparent 38%),
    linear-gradient(160deg,#0d2a50,#071b35 60%,#061427) !important;
  border:1px solid rgba(98,181,255,.32) !important;
  color:#f5f9ff !important;
  box-shadow:0 28px 90px rgba(0,0,0,.60) !important;
}

#agePopup .ageEnter{
  background:linear-gradient(135deg,var(--jv7-blue),var(--jv7-blue2)) !important;
  color:#fff !important;
  border:0 !important;
}

#agePopup .ageExit{
  background:#102a46 !important;
  color:#c8d6e5 !important;
  border:1px solid rgba(117,188,255,.20) !important;
}

/* ---------- MOBILE ---------- */
@media (max-width:480px){
  #userModal{
    align-items:center !important;
    padding:14px !important;
  }

  #userModal .authBox{
    width:100% !important;
    max-height:calc(100dvh - 28px) !important;
    padding:20px 16px 18px !important;
    border-radius:25px !important;
  }

  #userModal #catLogin{
    width:132px !important;
    height:132px !important;
  }

  #userModal .authBox h2{
    font-size:28px !important;
  }

  #userModal .mainProfileTitleRow,
  #userModal .mainProfileAchievementRow{
    grid-template-columns:1fr !important;
    gap:5px !important;
  }
}

@media (prefers-reduced-motion:reduce){
  #userModal *,
  #agePopup *{
    animation:none !important;
    transition:none !important;
  }
}

/* === JAKSKY PROFILE FX PACK V1 START === */
:root{
  --jkfx-blue:#49b9ff;
  --jkfx-blue-2:#5d7dff;
  --jkfx-cyan:#49e2ff;
  --jkfx-pink:#ff4ea3;
  --jkfx-violet:#b25bff;
  --jkfx-gold:#f6cb58;
  --jkfx-panel:#081b34;
  --jkfx-panel-2:#0c2546;
  --jkfx-line:rgba(120,196,255,.20);
  --jkfx-soft-line:rgba(255,255,255,.08);
  --jkfx-shadow:0 28px 70px rgba(3,15,33,.48);
  --jkfx-shadow-soft:0 18px 40px rgba(10,24,48,.28);
}

#userModal,
#editProfileModal{
  background:
    radial-gradient(circle at 18% 12%, rgba(73,185,255,.10), transparent 24%),
    radial-gradient(circle at 84% 10%, rgba(255,78,163,.11), transparent 22%),
    radial-gradient(circle at 50% 100%, rgba(93,125,255,.10), transparent 34%),
    rgba(3,8,18,.62) !important;
}

#userModal .authBox,
#editProfileModal .editProfileBox{
  position:relative;
  overflow:hidden;
  isolation:isolate;
}

#userModal .authBox::before,
#editProfileModal .editProfileBox::before{
  content:"";
  position:absolute;
  inset:-22% auto auto -12%;
  width:220px;
  height:220px;
  border-radius:999px;
  pointer-events:none;
  background:radial-gradient(circle, rgba(73,185,255,.17), transparent 68%);
  filter:blur(3px);
  opacity:.95;
  z-index:0;
}

#userModal .authBox::after,
#editProfileModal .editProfileBox::after{
  content:"";
  position:absolute;
  inset:auto -10% -16% auto;
  width:210px;
  height:210px;
  border-radius:999px;
  pointer-events:none;
  background:radial-gradient(circle, rgba(255,78,163,.18), transparent 68%);
  filter:blur(3px);
  opacity:.92;
  z-index:0;
}

#userModal .authBox > *,
#editProfileModal .editProfileBox > *{
  position:relative;
  z-index:1;
}

#userModal .authBox{
  animation:jkfxModalPop .34s cubic-bezier(.18,.84,.27,1) both;
}
#editProfileModal .editProfileBox{
  animation:jkfxModalPop .36s cubic-bezier(.18,.84,.27,1) both;
}

@keyframes jkfxModalPop{
  from{opacity:0;transform:translateY(18px) scale(.972)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
@keyframes jkfxFloatGlow{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-4px)}
}
@keyframes jkfxShimmerX{
  from{transform:translateX(-135%) rotate(12deg)}
  to{transform:translateX(135%) rotate(12deg)}
}
@keyframes jkfxPulseRing{
  0%,100%{box-shadow:0 0 0 0 rgba(73,185,255,.18),0 0 28px rgba(73,185,255,.12)}
  50%{box-shadow:0 0 0 7px rgba(73,185,255,0),0 0 36px rgba(255,78,163,.16)}
}

#userModal .ownProfileClose,
#editProfileModal .editProfileClose{
  border:1px solid rgba(117,194,255,.20) !important;
  background:linear-gradient(180deg, rgba(16,53,96,.92), rgba(8,35,65,.92)) !important;
  color:#8bd6ff !important;
  box-shadow:0 10px 24px rgba(3,15,33,.32), inset 0 1px 0 rgba(255,255,255,.08) !important;
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease !important;
}
#userModal .ownProfileClose:hover,
#editProfileModal .editProfileClose:hover{
  filter:brightness(1.06);
  box-shadow:0 14px 30px rgba(3,15,33,.38), 0 0 0 1px rgba(119,208,255,.10) inset !important;
}

#userModal .profileBannerOwn{
  min-height:118px !important;
  border:1px solid rgba(255,255,255,.12) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 18px 38px rgba(7,17,36,.26) !important;
}
#userModal .profileBannerOwn::before,
#userModal .profileBannerOwn::after,
#userModal .profileBannerOwn .profileBannerGlow,
#userModal .profileBannerOwn .profileBannerPattern{
  opacity:.98 !important;
}
#userModal .profileBannerOwn::after{
  background:linear-gradient(110deg, transparent 18%, rgba(255,255,255,.18) 42%, transparent 70%) !important;
  animation:jkfxShimmerX 7.8s linear infinite;
}

#userModal .profileAvatarStage,
#editProfileModal .editAvatarWrap{
  animation:jkfxFloatGlow 5.8s ease-in-out infinite;
}

#userModal .profileAvatarFrameShell,
#editProfileModal .editAvatarFramePreview{
  box-shadow:0 16px 34px rgba(6,17,35,.34), 0 0 0 1px rgba(255,255,255,.06) inset !important;
}
#userModal .profileAvatarFrameShell::before,
#editProfileModal .editAvatarFramePreview::before{
  animation:jkfxShimmerX 9s linear infinite;
}
#userModal .profileAvatarMain,
#editProfileModal .editProfileAvatar{
  box-shadow:0 12px 28px rgba(4,14,31,.32) !important;
}

#userModal .authBox h2,
#editProfileModal .editProfileBox h2{
  letter-spacing:-.03em !important;
  text-shadow:0 2px 12px rgba(73,185,255,.10);
}

#userModal .profileBioMain{
  border:1px solid rgba(118,198,255,.16) !important;
  background:linear-gradient(180deg, rgba(8,30,56,.80), rgba(8,23,43,.70)) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), var(--jkfx-shadow-soft) !important;
}

#userModal .authBox > div[style*="line-height:1.9"]{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(117,194,255,.18) !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(255,78,163,.08), transparent 24%),
    radial-gradient(circle at 0% 100%, rgba(73,185,255,.08), transparent 26%),
    linear-gradient(180deg, rgba(10,36,68,.92), rgba(6,25,49,.95)) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), var(--jkfx-shadow) !important;
}
#userModal .authBox > div[style*="line-height:1.9"]::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:4px;
  border-radius:999px;
  background:linear-gradient(180deg, var(--jkfx-cyan), var(--jkfx-pink));
  opacity:.95;
}
#userModal .authBox > div[style*="line-height:1.9"] > b{
  color:#f7fbff !important;
}

#userModal .mainProfileTitleRow,
#userModal .mainProfileAchievementRow{
  padding-top:8px;
  border-top:1px solid rgba(255,255,255,.06);
}
#userModal .mainProfileTitleList,
#userModal .profileAchievementList{
  gap:9px !important;
}
#userModal .customTitleBadge,
#userModal .achievementBadge{
  position:relative;
  overflow:hidden;
  min-height:31px !important;
  padding:6px 12px !important;
  background:linear-gradient(180deg, rgba(16,47,80,.94), rgba(12,39,67,.94)) !important;
  border:1px solid rgba(137,208,255,.22) !important;
  box-shadow:0 8px 18px rgba(5,16,33,.26), inset 0 1px 0 rgba(255,255,255,.07) !important;
}
#userModal .customTitleBadge::after,
#userModal .achievementBadge::after{
  content:"";
  position:absolute;
  top:-65%;
  left:-42%;
  width:34%;
  height:220%;
  transform:rotate(20deg);
  background:linear-gradient(180deg, transparent, rgba(255,255,255,.20), transparent);
  opacity:.78;
  animation:jkfxShimmerX 7.2s linear infinite;
  pointer-events:none;
}
#userModal .achievementFeatured{
  border-color:rgba(246,203,88,.72) !important;
  background:linear-gradient(180deg, rgba(69,55,16,.96), rgba(46,37,11,.98)) !important;
  box-shadow:0 10px 22px rgba(55,41,7,.30), inset 0 1px 0 rgba(255,245,202,.12) !important;
}

#userModal .authBox > .authBtn,
#editProfileModal .editProfileSave,
#editProfileModal .editAvatarButton{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(134,207,255,.16) !important;
  box-shadow:0 14px 28px rgba(7,18,37,.25), inset 0 1px 0 rgba(255,255,255,.10) !important;
}
#userModal .authBox > .authBtn::after,
#editProfileModal .editProfileSave::after,
#editProfileModal .editAvatarButton::after{
  content:"";
  position:absolute;
  top:-40%;
  left:-30%;
  width:28%;
  height:180%;
  transform:rotate(16deg);
  background:linear-gradient(180deg, transparent, rgba(255,255,255,.28), transparent);
  animation:jkfxShimmerX 6.4s linear infinite;
  opacity:.78;
  pointer-events:none;
}
#userModal .authBox > .authBtn.authSecondary{
  background:linear-gradient(135deg, #0d3157, #124274) !important;
}
#userModal .authBox > .authBtn:last-of-type,
#editProfileModal .editProfileSave{
  background:linear-gradient(135deg, #2a9cff, #516bff) !important;
}
#userModal .authBox > .authBtn:hover,
#editProfileModal .editProfileSave:hover,
#editProfileModal .editAvatarButton:hover{
  transform:translateY(-1px);
  filter:brightness(1.05);
}
#userModal .authBox > .authBtn:active,
#editProfileModal .editProfileSave:active,
#editProfileModal .editAvatarButton:active{
  transform:translateY(0) scale(.984);
}

#editProfileModal .avatarFrameSection,
#editProfileModal .profileBannerSection,
#editProfileModal .achievementPickerSection,
#editProfileModal .jakTitleVisibilityV4{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.07) !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(255,78,163,.06), transparent 22%),
    radial-gradient(circle at 0% 100%, rgba(73,185,255,.06), transparent 26%),
    rgba(255,255,255,.03) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 14px 28px rgba(0,0,0,.14) !important;
}
#editProfileModal .avatarFrameSection::after,
#editProfileModal .profileBannerSection::after,
#editProfileModal .achievementPickerSection::after,
#editProfileModal .jakTitleVisibilityV4::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.04), transparent 26%);
}
#editProfileModal .avatarFrameChoice,
#editProfileModal .profileBannerChoice,
#editProfileModal .achievementChoice,
#editProfileModal .jakTitleV4Row{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.08) !important;
  box-shadow:0 10px 20px rgba(0,0,0,.10), inset 0 1px 0 rgba(255,255,255,.04) !important;
}
#editProfileModal .avatarFrameChoice:hover,
#editProfileModal .profileBannerChoice:hover,
#editProfileModal .achievementChoice:hover,
#editProfileModal .jakTitleV4Row:hover{
  transform:translateY(-1px);
  border-color:rgba(111,194,255,.16) !important;
}
#editProfileModal .avatarFrameChoice.selected,
#editProfileModal .profileBannerChoice.selected,
#editProfileModal .achievementChoice.selected,
#editProfileModal .jakTitleV4Row:has(.jakTitleV4State.isOn){
  background:linear-gradient(180deg, rgba(255,78,163,.08), rgba(73,185,255,.06)) !important;
  border-color:rgba(112,200,255,.24) !important;
  box-shadow:0 14px 28px rgba(0,0,0,.18), 0 0 0 1px rgba(92,170,255,.09) inset, 0 0 22px rgba(54,152,255,.10) !important;
}

#editProfileModal .avatarFrameMini,
#editProfileModal .profileBannerMini,
#editProfileModal .achievementChoiceIcon{
  box-shadow:0 10px 24px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.12) !important;
}
#editProfileModal .achievementChoiceIcon{
  animation:jkfxPulseRing 4.6s ease-in-out infinite;
}
#editProfileModal .profileBannerMini{position:relative;overflow:hidden;}
#editProfileModal .profileBannerMini::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(120deg, transparent 26%, rgba(255,255,255,.24) 45%, transparent 68%);
  animation:jkfxShimmerX 7s linear infinite;
}

#editProfileModal #editProfileUsername,
#editProfileModal #editProfileBio{
  border:1px solid rgba(126,203,255,.16) !important;
  background:linear-gradient(180deg, rgba(17,22,35,.88), rgba(26,31,44,.88)) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 8px 18px rgba(0,0,0,.12) !important;
}
#editProfileModal #editProfileUsername:focus,
#editProfileModal #editProfileBio:focus{
  border-color:rgba(108,196,255,.38) !important;
  box-shadow:0 0 0 4px rgba(73,185,255,.10), 0 14px 26px rgba(0,0,0,.14) !important;
}
#editProfileModal .editProfileCount{
  color:#91b4d8 !important;
}
#editProfileModal .avatarFrameSectionHead b,
#editProfileModal .profileBannerSectionHead b,
#editProfileModal .achievementPickerHead b,
#editProfileModal .jakTitleV4Head b{
  color:#f3f7fb !important;
}
#editProfileModal .avatarFrameSectionHead span,
#editProfileModal .profileBannerSectionHead span,
#editProfileModal .achievementPickerHead span,
#editProfileModal .jakTitleV4Head span{
  color:#91a8bf !important;
}
#editProfileModal .avatarFrameSelectedLabel,
#editProfileModal .profileBannerSelectedLabel{
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(123,198,255,.18);
  background:rgba(10,31,57,.75);
  color:#a6d9ff !important;
  box-shadow:0 8px 18px rgba(0,0,0,.12);
}

@media (max-width:480px){
  #userModal .authBox::before,
  #userModal .authBox::after,
  #editProfileModal .editProfileBox::before,
  #editProfileModal .editProfileBox::after{
    width:168px;
    height:168px;
  }
  #userModal .profileBannerOwn{min-height:102px !important;}
  #userModal .authBox > div[style*="line-height:1.9"]{padding:14px 14px 14px 16px !important;}
  #editProfileModal .avatarFrameChoice,
  #editProfileModal .profileBannerChoice,
  #editProfileModal .achievementChoice{border-radius:16px !important;}
}

@media (prefers-reduced-motion:reduce){
  #userModal .authBox,
  #editProfileModal .editProfileBox,
  #userModal .profileAvatarStage,
  #editProfileModal .editAvatarWrap,
  #userModal .profileBannerOwn::after,
  #userModal .customTitleBadge::after,
  #userModal .achievementBadge::after,
  #editProfileModal .editProfileSave::after,
  #editProfileModal .editAvatarButton::after,
  #userModal .authBox > .authBtn::after,
  #editProfileModal .profileBannerMini::after,
  #editProfileModal .achievementChoiceIcon{
    animation:none !important;
  }
}
/* === JAKSKY PROFILE FX PACK V1 END === */