/* =========================================================
   JAKSKY DARK OWN PROFILE FIX V33
   Screenshot user was #userModal .authBox, NOT publicProfileModal.
   This fixes own profile/login/register card in Dark Mode only.
   ========================================================= */

html[data-jak-theme="dark"] #userModal{
  background:rgba(6,4,6,.68)!important;
  backdrop-filter:blur(14px) saturate(.94)!important;
  -webkit-backdrop-filter:blur(14px) saturate(.94)!important;
}

/* Actual white box shown in the screenshot */
html[data-jak-theme="dark"] #userModal .authBox{
  position:relative!important;
  overflow:hidden!important;

  background:
    radial-gradient(circle at 50% -8%,rgba(255,72,162,.11),transparent 34%),
    radial-gradient(circle at 94% 12%,rgba(141,83,232,.08),transparent 28%),
    linear-gradient(160deg,#241720 0%,#1a1118 58%,#140e13 100%)!important;

  color:#fff6fa!important;

  border:1px solid rgba(255,218,237,.105)!important;

  box-shadow:
    0 30px 78px rgba(0,0,0,.48),
    inset 0 1px 0 rgba(255,255,255,.035)!important;
}

/* soft dark edge treatment */
html[data-jak-theme="dark"] #userModal .authBox::before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  z-index:0!important;
  pointer-events:none!important;

  border-radius:inherit!important;

  background:
    linear-gradient(
      130deg,
      rgba(255,83,167,.045),
      transparent 32%,
      transparent 69%,
      rgba(129,86,228,.04)
    )!important;
}

/* Keep actual content above overlay */
html[data-jak-theme="dark"] #userModal .authBox > *{
  position:relative!important;
  z-index:1!important;
}

/* close */
html[data-jak-theme="dark"] #userModal .authClose,
html[data-jak-theme="dark"] #userModal .ownProfileClose{
  color:#ff72b8!important;
  background:rgba(255,102,179,.095)!important;
  border:1px solid rgba(255,185,219,.105)!important;
  box-shadow:0 8px 20px rgba(0,0,0,.17)!important;
}

/* staff cat image gets a subtle dark halo */
html[data-jak-theme="dark"] #userModal #catLogin{
  filter:
    drop-shadow(0 12px 24px rgba(0,0,0,.18))
    drop-shadow(0 0 18px rgba(255,93,171,.07))!important;
}

/* Fix white-on-white text from global dark h2/b */
html[data-jak-theme="dark"] #userModal .authBox h2{
  color:#fff8fb!important;
  -webkit-text-fill-color:#fff8fb!important;
  text-shadow:0 2px 12px rgba(0,0,0,.18)!important;
}

html[data-jak-theme="dark"] #userModal .authBox,
html[data-jak-theme="dark"] #userModal .authBox div,
html[data-jak-theme="dark"] #userModal .authBox p,
html[data-jak-theme="dark"] #userModal .authBox span,
html[data-jak-theme="dark"] #userModal .authBox small,
html[data-jak-theme="dark"] #userModal .authBox label{
  color:#dfcbd5!important;
}

/* Strong text / role */
html[data-jak-theme="dark"] #userModal .authBox b,
html[data-jak-theme="dark"] #userModal .authBox strong{
  color:#fff6fa!important;
}

/* The inline Verified Blue already has inline color, keep it vivid */
html[data-jak-theme="dark"] #userModal .authBox div[style*="#1688d4"]{
  color:#45b9ff!important;
  -webkit-text-fill-color:#45b9ff!important;
  text-shadow:0 0 12px rgba(69,185,255,.17)!important;
}

/* Role line underneath */
html[data-jak-theme="dark"] #userModal .authBox div[style*="line-height"]{
  color:#d9c3cf!important;
}

/* buttons */
html[data-jak-theme="dark"] #userModal .authBtn{
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;

  background:
    linear-gradient(110deg,#ff3f98,#b34fe6)!important;

  border:1px solid rgba(255,255,255,.045)!important;

  box-shadow:
    0 10px 24px rgba(222,56,147,.17),
    inset 0 1px 0 rgba(255,255,255,.10)!important;
}

/* Login/register input support too, because same authBox is reused */
html[data-jak-theme="dark"] #userModal .authBox input{
  color:#fff6fa!important;
  -webkit-text-fill-color:#fff6fa!important;

  background:#2a1b25!important;
  border-color:rgba(255,220,239,.10)!important;

  box-shadow:none!important;
}

html[data-jak-theme="dark"] #userModal .authBox input::placeholder{
  color:#8f7784!important;
  -webkit-text-fill-color:#8f7784!important;
}

html[data-jak-theme="dark"] #userModal .authBox input:focus{
  background:#30202a!important;
  border-color:rgba(255,83,166,.44)!important;
  box-shadow:0 0 0 4px rgba(255,63,152,.08)!important;
}

/* normal-user profile subcards / bio / badges if present */
html[data-jak-theme="dark"] #userModal .profileBioMain,
html[data-jak-theme="dark"] #userModal .mainProfileTitleRow,
html[data-jak-theme="dark"] #userModal .mainProfileAchievementRow,
html[data-jak-theme="dark"] #userModal .profileBannerOwn{
  color:#eadbe2!important;
  background:#291b25!important;
  border-color:rgba(255,220,239,.075)!important;
  box-shadow:none!important;
}

/* fallback for simple inline staff block shown in screenshot */
html[data-jak-theme="dark"] #userModal .authBox > div[style*="margin:14px"]{
  padding:12px 13px!important;
  margin:15px 0 17px!important;

  border-radius:15px!important;

  background:
    linear-gradient(145deg,rgba(255,72,162,.055),rgba(136,83,229,.035)),
    #281a23!important;

  border:1px solid rgba(255,221,239,.075)!important;
}

/* owner/admin/mod role emphasis based on visible text remains readable */
html[data-jak-theme="dark"] #userModal .authBox > div[style*="margin:14px"] > div:first-child{
  color:#f6e9ef!important;
}

/* small-screen fit */
@media(max-width:390px){
  html[data-jak-theme="dark"] #userModal{
    padding:14px!important;
  }

  html[data-jak-theme="dark"] #userModal .authBox{
    padding:24px 17px 20px!important;
    border-radius:25px!important;
  }
}