#userModal{
  position:fixed;
  inset:0;
  background:#0008;
  z-index:3000;
  display:flex;
  align-items:center;
  justify-content:center;
}

#userModal.hidden{
  display:none;
}

.authBox{
  width:90%;
  max-width:380px;
  background:white;
  border-radius:30px;
  padding:25px;
  text-align:center;
  box-shadow:0 15px 40px #0004;
}

.authBox img{
  width:140px;
  height:140px;
  object-fit:contain;
}

.authBox input{
  width:100%;
  height:45px;
  margin:8px 0;
  border-radius:15px;
  border:1px solid #ddd;
  padding:0 15px;
  font-size:16px;
}

.authBtn{
  width:45%;
  height:42px;
  border:0;
  border-radius:20px;
  background:#ff3fa4;
  color:white;
  font-weight:bold;
}

#userModal:not(.hidden){
  display:flex !important;
}

.authBox{
  position:relative;
}

.authClose{
  position:absolute;
  top:14px;
  right:16px;
  width:38px;
  height:38px;
  border:none;
  border-radius:50%;
  background:#fff0f6;
  color:#d72e82;
  font-size:18px;
  font-weight:bold;
}

.authSub{
  margin:-5px 0 14px;
  font-size:13px;
  color:#777;
}

.authActions{
  display:flex;
  gap:10px;
  margin-top:8px;
}

.authActions .authBtn{
  flex:1;
  width:auto;
}

.authSecondary{
  background:#7d4bc4;
}

#catLogin{
  transition:transform .2s ease, filter .2s ease;
}

#catLogin.catPassword{
  transform:scale(.94);
  filter:brightness(.75);
}

.authClose{
  display:flex;
  align-items:center;
  justify-content:center;
  line-height:1;
  padding:0;
  text-align:center;
}

.staffBadge{
  display:inline-flex;
  align-items:center;
  margin-left:5px;
  padding:3px 7px;
  border-radius:10px;
  font-size:10px;
  font-weight:800;
  vertical-align:middle;
  white-space:nowrap;
}
.ownerBadge{background:#fff4c7;color:#946800;}
.adminBadge{background:#e7f3ff;color:#147bd1;}
.modBadge{background:#e8f7ff;color:#008acb;}

.customTitleBadge{
  display:inline-flex;
  align-items:center;
  margin-left:5px;
  padding:3px 7px;
  border-radius:10px;
  font-size:10px;
  font-weight:800;
  background:#f2e9ff;
  color:#7439b7;
  white-space:nowrap;
}

.vipBuyBtn{
  width:100%;
  height:44px;
  border:0;
  border-radius:18px;
  background:#ff3fa4;
  color:white;
  font-weight:800;
  font-size:14px;
}

/* ===== JAKSKY BOTTOM NAV V2 ===== */
.bottomNav{
  position:fixed;
  bottom:0;
  left:0;
  right:0;
  height:76px;
  background:linear-gradient(90deg,#ffb6dc,#ffd4eb);
  display:flex;
  justify-content:space-around;
  align-items:center;
  z-index:999;
  border-top:1px solid #f59ac7;
  box-shadow:0 -6px 20px rgba(180,50,120,.12);
  padding:6px 4px 8px;
}

.bottomNav button{
  position:relative;
  flex:1;
  height:58px;
  border:0;
  background:transparent;
  color:#8e416f;
  font-size:17px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:3px;
  border-radius:18px;
  transition:
    transform .22s ease,
    background .22s ease,
    color .22s ease;
}

.bottomNav button span{
  font-size:12px;
  font-weight:700;
}

.bottomNav button.activeNav{
  color:#d72e82;
  background:rgba(255,255,255,.72);
  transform:translateY(-4px);
  box-shadow:0 6px 18px rgba(215,46,130,.18);
}

.bottomNav button.activeNav::after{
  content:"";
  position:absolute;
  bottom:4px;
  width:22px;
  height:4px;
  border-radius:10px;
  background:#ff3fa4;
}

/* ===== NOTIFICATION BELL CLEAN ===== */
#notifBell{
  position:fixed !important;
  top:158px !important;
  right:20px !important;

  width:42px !important;
  height:42px !important;

  padding:0 !important;
  border-radius:14px !important;

  border:1.5px solid #ff8fc6 !important;
  background:rgba(255,255,255,.94) !important;

  color:#e93691 !important;
  font-size:18px !important;

  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  box-shadow:
    0 5px 14px rgba(218,55,137,.15) !important;

  z-index:1200 !important;

  transition:
    transform .18s ease,
    box-shadow .18s ease,
    background .18s ease !important;
}

#notifBell:active{
  transform:scale(.92) !important;
  background:#fff0f7 !important;
}

#notifBadge{
  position:absolute !important;
  top:-5px !important;
  right:-5px !important;

  min-width:18px !important;
  height:18px !important;

  padding:0 4px !important;

  border-radius:10px !important;
  border:2px solid white !important;

  background:#ff2f78 !important;
  color:white !important;

  font-size:10px !important;
  font-weight:800 !important;

  align-items:center !important;
  justify-content:center !important;
}

#notifBell{
  top:172px !important;
  right:32px !important;
}

.commentUserName{
  cursor:pointer;
}

.commentUserName:active{
  opacity:.65;
}

#publicProfileModal{
  position:fixed;
  inset:0;
  background:#0008;
  z-index:6000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
}

#publicProfileModal.hidden{
  display:none !important;
}

.publicProfileBox{
  position:relative;
  width:100%;
  max-width:350px;
  background:white;
  border-radius:28px;
  padding:28px 22px;
  text-align:center;
  box-shadow:0 20px 55px #0004;
}

.publicProfileClose{
  position:absolute;
  top:14px;
  right:14px;
  width:38px;
  height:38px;
  border:0;
  border-radius:50%;
  background:#fff0f7;
  color:#e93691;
}

.publicProfileAvatar{
  width:105px;
  height:105px;
  border-radius:50%;
  object-fit:cover;
  border:3px solid #ffb4d8;
}

.publicProfileBadges{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:7px;
  margin-top:10px;
}

.publicProfileBadges span{
  padding:5px 9px;
  border-radius:12px;
  background:#fff0f7;
  font-size:11px;
  font-weight:800;
}

/* ===== PUBLIC PROFILE ABOVE VIDEO MODAL ===== */
#publicProfileModal{
  position:fixed !important;
  inset:0 !important;
  z-index:99999 !important;
  background:rgba(0,0,0,.55) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:18px !important;
}

#publicProfileModal.hidden{
  display:none !important;
}

.publicProfileBox{
  position:relative !important;
  z-index:100000 !important;
  width:100% !important;
  max-width:350px !important;
  background:#fff !important;
  border-radius:28px !important;
  padding:28px 22px !important;
  box-shadow:0 20px 60px rgba(0,0,0,.35) !important;
}

.privateStaffProfile{
  margin-top:14px;
  padding:10px 12px;
  border-radius:14px;
  background:rgba(0,0,0,.045);
  font-size:12px;
  font-weight:800;
}

.privateStaffProfile small{
  display:block;
  margin-top:4px;
  font-size:10px;
  font-weight:500;
  opacity:.65;
}

/* ===== VERIFIED BADGE STYLE ===== */
.verifiedIcon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:16px;
  height:16px;
  margin-left:4px;
  border-radius:50%;
  background:#20a7ff;
  color:#fff;
  font-size:11px;
  font-weight:900;
  line-height:1;
  vertical-align:middle;
  box-shadow:0 1px 3px rgba(0,0,0,.15);
}

.verifiedIcon.large{
  width:20px;
  height:20px;
  font-size:13px;
}

/* ===== ACCOUNT IDENTITY SYSTEM ===== */

.verifiedIcon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:16px;
  height:16px;
  margin-left:4px;
  border-radius:50%;
  background:#20a7ff;
  color:#fff;
  font-size:11px;
  font-weight:900;
  vertical-align:middle;
  box-shadow:0 1px 4px rgba(0,0,0,.14);
}

.verifiedIcon.large{
  width:20px;
  height:20px;
  font-size:13px;
}

/* STAFF */
.ownerBadge{
  background:linear-gradient(135deg,#fff2b3,#ffe4f1) !important;
  color:#8d6500 !important;
  border:1px solid #e6bd4f;
}

.adminBadge{
  background:#eaf0ff !important;
  color:#315dcc !important;
  border:1px solid #82a1ff;
}

.modBadge{
  background:#e6faff !important;
  color:#0587b9 !important;
  border:1px solid #58ccee;
}

/* VIP */
.vipBasicBadge{
  background:#e9f8ff !important;
  color:#0486be !important;
  border:1px solid #78d4fa;
}

.vipProBadge{
  background:linear-gradient(135deg,#fff4c9,#ffe5a3) !important;
  color:#946300 !important;
  border:1px solid #deb347;
}

/* USER NORMAL */
.profileUser{
  border:2px solid #ffc7df !important;
  background:linear-gradient(180deg,#fff,#fff6fa) !important;
}

/* VIP BASIC */
.profileVipBasic{
  border:2px solid #71cef3 !important;
  background:linear-gradient(180deg,#fff,#edfaff) !important;
}

/* VIP PRO */
.profileVipPro{
  border:2px solid #dfb849 !important;
  background:linear-gradient(180deg,#fffef7,#fff4cc) !important;
}

/* MODERATOR */
.profileModerator{
  border:2px solid #45c5ee !important;
  background:linear-gradient(180deg,#fff,#eafaff) !important;
}

/* ADMIN */
.profileAdmin{
  border:2px solid #6f91ec !important;
  background:linear-gradient(180deg,#fff,#eef2ff) !important;
}

/* OWNER */
.profileOwner{
  border:2px solid #dfb44a !important;
  background:linear-gradient(180deg,#fffdf4,#fff0f8) !important;
}

.accountTypeLabel{
  margin-top:-6px;
  margin-bottom:10px;
  font-size:11px;
  font-weight:700;
  opacity:.62;
  letter-spacing:.2px;
}

/* ===== VIP SHOP PREMIUM V3 ===== */

#vipShopModal > div{
  background:linear-gradient(180deg,#ffffff 0%,#fff7fb 100%) !important;
  border:1px solid rgba(255,100,170,.18) !important;
  border-radius:30px !important;
  padding:26px 20px !important;
}

#vipShopModal h2{
  margin:4px 0 3px !important;
  font-size:25px !important;
  color:#c82e7d !important;
}

.vipPackageCard{
  position:relative;
  overflow:hidden;
  padding:20px 16px !important;
  margin:16px 0 !important;
  border-radius:24px !important;
  text-align:left;
  transition:transform .2s ease, box-shadow .2s ease;
}

.vipPackageCard:active{
  transform:scale(.98);
}

.vipPackageCard h3{
  margin:0 0 10px !important;
  font-size:19px !important;
}

.vipPackageCard p{
  margin:8px 0 15px !important;
  font-size:13px;
  font-weight:600;
}

/* BASIC */
.vipBasicCard{
  background:linear-gradient(145deg,#f3fbff,#e4f6ff) !important;
  border:1.5px solid #74caf1 !important;
  box-shadow:0 10px 25px rgba(66,175,225,.14) !important;
}

.vipBasicCard h3{
  color:#087faa !important;
}

.vipBasicCard > b{
  color:#076f99 !important;
}

.vipBasicCard::before{
  content:"BASIC";
  position:absolute;
  top:13px;
  right:13px;
  padding:4px 8px;
  border-radius:10px;
  background:#d4f2ff;
  color:#0781ad;
  font-size:9px;
  font-weight:900;
  letter-spacing:.6px;
}

.vipBasicCard .vipBuyBtn{
  background:linear-gradient(90deg,#41bce8,#1599d0) !important;
  box-shadow:0 7px 16px rgba(22,151,204,.20);
}

/* PRO */
.vipProCard{
  background:linear-gradient(145deg,#fffdf5,#fff0c9) !important;
  border:1.5px solid #dfb648 !important;
  box-shadow:0 12px 28px rgba(190,145,30,.18) !important;
}

.vipProCard h3{
  color:#8e6200 !important;
}

.vipProCard > b{
  color:#825900 !important;
}

.vipProCard::before{
  content:"RECOMMENDED";
  position:absolute;
  top:13px;
  right:13px;
  padding:4px 8px;
  border-radius:10px;
  background:#f5cf69;
  color:#684600;
  font-size:9px;
  font-weight:900;
  letter-spacing:.5px;
}

.vipProCard .vipBuyBtn{
  background:linear-gradient(90deg,#e6b841,#c99112) !important;
  box-shadow:0 7px 16px rgba(185,132,10,.22);
}

/* BUTTON */
.vipBuyBtn{
  min-height:46px !important;
  border-radius:16px !important;
  border:0 !important;
  color:white !important;
  font-size:14px !important;
  font-weight:900 !important;
  letter-spacing:.2px;
}

/* DANA BOX */
#danaNumber{
  color:#cf2c7d !important;
  letter-spacing:.8px;
}

/* ===== JAKSKY CUSTOM DIALOG ===== */

.jakDialogOverlay{
  position:fixed;
  inset:0;
  z-index:200000;
  background:rgba(25,10,20,.58);
  backdrop-filter:blur(5px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:22px;
}

.jakDialogOverlay.hidden{
  display:none !important;
}

.jakDialogBox{
  width:100%;
  max-width:345px;
  background:linear-gradient(180deg,#fff,#fff7fb);
  border:1px solid #ffc4e1;
  border-radius:28px;
  padding:25px 22px 20px;
  text-align:center;
  box-shadow:
    0 25px 70px rgba(0,0,0,.28),
    0 0 30px rgba(255,60,155,.10);

  animation:jakDialogIn .18s ease-out;
}

@keyframes jakDialogIn{
  from{
    opacity:0;
    transform:scale(.92) translateY(8px);
  }

  to{
    opacity:1;
    transform:scale(1) translateY(0);
  }
}

.jakDialogIcon{
  display:flex;
  align-items:center;
  justify-content:center;

  width:54px;
  height:54px;

  margin:0 auto 12px;

  border-radius:18px;

  background:linear-gradient(135deg,#ffe0ef,#fff4fa);

  font-size:26px;

  box-shadow:0 7px 18px rgba(220,55,130,.12);
}

.jakDialogBox h3{
  margin:4px 0 8px;
  font-size:21px;
  color:#292029;
}

#jakDialogMessage{
  margin:0 0 17px;
  color:#6e626a;
  font-size:14px;
  line-height:1.5;
  white-space:pre-line;
}

.jakDialogInput{
  box-sizing:border-box;
  width:100%;
  min-height:82px;

  margin:0 0 16px;
  padding:13px;

  resize:none;

  border:1.5px solid #f2b4d2;
  border-radius:16px;

  outline:none;
  background:#fff;

  font-size:14px;
}

.jakDialogInput:focus{
  border-color:#ff46a0;
  box-shadow:0 0 0 3px rgba(255,70,160,.10);
}

.jakDialogActions{
  display:flex;
  gap:10px;
}

.jakDialogActions button{
  flex:1;
  min-height:46px;

  border:0;
  border-radius:16px;

  font-size:14px;
  font-weight:800;
}

.jakDialogCancel{
  background:#f4eef1;
  color:#665a61;
}

.jakDialogOk{
  background:linear-gradient(90deg,#ff3398,#ff64b2);
  color:white;
  box-shadow:0 7px 17px rgba(255,50,150,.23);
}

.jakDialogActions button:active{
  transform:scale(.97);
}

.verifiedIcon.verifiedRed{
  background:#ff304f !important;
  color:white !important;
  box-shadow:0 2px 7px rgba(255,48,79,.25) !important;
}

/* VERIFIED RED */
.verifiedIcon.verifiedRed{
  background:#ff304f !important;
  color:#fff !important;
  box-shadow:0 2px 8px rgba(255,48,79,.28) !important;
}

.verifiedIcon.verifiedRed.large{
  width:20px;
  height:20px;
  font-size:13px;
}

/* ===== COMMENT REPLY THREAD ===== */
.replyComment{
  margin-top:10px !important;
  margin-left:22px !important;
  padding:12px 14px !important;
  border-left:3px solid #ff8fc6 !important;
  border-radius:14px !important;
  background:#fff8fc !important;
}

.replyComment p{
  margin:7px 0 !important;
}

/* ===== NOTIFICATION COMMENT TARGET ===== */

.commentNotifHighlight{
  animation:commentNotifFlash .7s ease 3;
  box-shadow:
    0 0 0 3px rgba(255,55,150,.25),
    0 8px 25px rgba(255,55,150,.18) !important;
}

@keyframes commentNotifFlash{
  0%,100%{
    background:#fff7fb;
  }

  50%{
    background:#ffd9eb;
  }
}

/* =========================
   JAKSKY CAT AUTH ANIMATION
========================= */

.catAuthStage{
  position:relative;
  width:150px;
  height:150px;
  margin:0 auto 4px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:visible;
}

.catAuthStage #catLogin{
  width:140px !important;
  height:140px !important;
  object-fit:contain;
  transition:
    transform .35s cubic-bezier(.2,.8,.2,1),
    filter .3s ease;
  animation:catIdle 3s ease-in-out infinite;
}

@keyframes catIdle{
  0%,100%{
    transform:translateY(0) rotate(0deg);
  }
  50%{
    transform:translateY(-4px) rotate(1deg);
  }
}

/* mata overlay */
.catEye{
  position:absolute;
  top:61px;
  width:15px;
  height:10px;
  border-radius:50%;
  pointer-events:none;
  overflow:hidden;
  z-index:4;
  transition:.2s ease;
}

.catEye.left{
  left:48px;
}

.catEye.right{
  right:48px;
}

.catPupil{
  position:absolute;
  width:5px;
  height:5px;
  border-radius:50%;
  background:#27222a;
  left:5px;
  top:2px;
  transition:transform .18s ease;
}

/* kedip */
.catAuthStage.catBlink .catEye{
  transform:scaleY(.08);
}

/* dua tangan */
.catPaw{
  position:absolute;
  width:39px;
  height:42px;
  top:101px;
  border-radius:45% 45% 50% 50%;
  background:#f8f2f7;
  border:2px solid rgba(110,90,115,.14);
  z-index:8;
  opacity:0;
  transition:
    transform .35s cubic-bezier(.2,.9,.3,1.25),
    opacity .2s ease,
    top .35s ease;
  pointer-events:none;
  box-shadow:0 4px 8px rgba(0,0,0,.08);
}

.catPaw.left{
  left:30px;
  transform:rotate(-18deg) translateY(30px);
}

.catPaw.right{
  right:30px;
  transform:rotate(18deg) translateY(30px);
}

/* password disembunyikan -> tutup mata */
.catAuthStage.passwordSecret .catPaw{
  opacity:1;
  top:49px;
}

.catAuthStage.passwordSecret .catPaw.left{
  transform:rotate(16deg) translateY(0);
}

.catAuthStage.passwordSecret .catPaw.right{
  transform:rotate(-16deg) translateY(0);
}

.catAuthStage.passwordSecret .catEye{
  opacity:.15;
}

/* password terlihat -> ngintip */
.catAuthStage.passwordVisible #catLogin{
  transform:translateY(-2px) scale(1.03);
}

.catAuthStage.passwordVisible .catPaw{
  opacity:.85;
  top:74px;
}

.catAuthStage.passwordVisible .catPaw.left{
  transform:rotate(-27deg);
}

.catAuthStage.passwordVisible .catPaw.right{
  transform:rotate(27deg);
}

/* input aktif */
.catAuthStage.catWatching #catLogin{
  filter:brightness(1.04);
}

/* wrapper password */
.catPasswordWrap{
  position:relative;
  width:100%;
}

.catPasswordWrap #userPass{
  padding-right:48px !important;
}

.catPassToggle{
  position:absolute;
  right:10px;
  top:50%;
  transform:translateY(-50%);
  width:36px;
  height:36px;
  border:0;
  border-radius:50%;
  background:#fff0f7;
  cursor:pointer;
  font-size:17px;
  display:flex;
  justify-content:center;
  align-items:center;
  z-index:5;
}

.catPassToggle:active{
  transform:translateY(-50%) scale(.92);
}


/* ======================================
   JAKSKY CAT V3
====================================== */

#catLogin{
  width:165px !important;
  height:165px !important;
  object-fit:contain;
  display:block;
  margin:0 auto 6px;
  position:relative;
  z-index:2;

  transform-origin:50% 75%;
  animation:jakCatIdle 3.6s ease-in-out infinite;

  transition:
    transform .35s cubic-bezier(.2,.8,.2,1),
    filter .3s ease;
}

@keyframes jakCatIdle{
  0%,100%{
    transform:translateY(0) rotate(0deg);
  }

  50%{
    transform:translateY(-4px) rotate(.6deg);
  }
}


/* stage tempat karakter */
.jakCatStage{
  width:175px;
  height:170px;
  margin:0 auto 6px;
  position:relative;
}


/* saat user mengetik username/email */
.jakCatStage.catWatching #catLogin{
  transform:
    translateY(-2px)
    rotate(-2deg)
    scale(1.02);
}


/* ============================
   LENGAN HOODIE
============================ */

.jakCatArm{
  position:absolute;
  z-index:7;

  width:46px;
  height:95px;

  bottom:-4px;

  background:
    linear-gradient(
      145deg,
      #ffffff 0%,
      #f3f2f7 55%,
      #dcdce7 100%
    );

  border-radius:
    48% 48%
    40% 40%;

  box-shadow:
    inset 0 -5px 8px rgba(100,100,130,.10),
    0 5px 10px rgba(0,0,0,.10);

  transform-origin:50% 100%;

  transition:
    transform .48s cubic-bezier(.2,.9,.25,1.18),
    bottom .48s cubic-bezier(.2,.9,.25,1.18),
    opacity .25s ease;
}


/* tangan kiri */
.jakCatArm.left{
  left:29px;

  transform:
    rotate(16deg)
    translateY(45px);

  opacity:.2;
}


/* tangan kanan */
.jakCatArm.right{
  right:29px;

  transform:
    rotate(-16deg)
    translateY(45px);

  opacity:.2;
}


/* ujung tangan */
.jakCatArm::before{
  content:"";

  position:absolute;

  width:48px;
  height:38px;

  left:-1px;
  top:-4px;

  background:
    linear-gradient(
      145deg,
      #fff,
      #ececf3
    );

  border-radius:
    50% 50% 44% 44%;

  box-shadow:
    inset 0 -3px 6px rgba(80,80,110,.10);
}


/* ======================================
   PASSWORD TERSEMBUNYI
====================================== */

.jakCatStage.passwordSecret .jakCatArm{
  opacity:1;
}


.jakCatStage.passwordSecret .jakCatArm.left{
  transform:
    translate(37px,-65px)
    rotate(-63deg);
}


.jakCatStage.passwordSecret .jakCatArm.right{
  transform:
    translate(-37px,-65px)
    rotate(63deg);
}


.jakCatStage.passwordSecret #catLogin{
  transform:
    translateY(2px)
    scale(.98);
}


/* ======================================
   PASSWORD DITAMPILKAN / NGINTIP
====================================== */

.jakCatStage.passwordVisible .jakCatArm{
  opacity:1;
}


.jakCatStage.passwordVisible .jakCatArm.left{
  transform:
    translate(28px,-49px)
    rotate(-52deg);
}


.jakCatStage.passwordVisible .jakCatArm.right{
  transform:
    translate(-5px,-13px)
    rotate(-8deg);
}


.jakCatStage.passwordVisible #catLogin{
  transform:
    translateY(-3px)
    rotate(2deg)
    scale(1.02);
}


/* ============================
   PASSWORD WRAPPER
============================ */

.catPasswordWrap{
  position:relative;
  width:100%;
}


.catPasswordWrap #userPass{
  padding-right:52px !important;
}


.catPassToggle{
  position:absolute;

  width:38px;
  height:38px;

  right:10px;
  top:50%;

  transform:translateY(-50%);

  border:0;
  border-radius:50%;

  background:#fff0f7;

  display:flex;
  align-items:center;
  justify-content:center;

  font-size:17px;

  cursor:pointer;

  transition:
    transform .15s ease,
    background .2s ease;
}


.catPassToggle:active{
  transform:
    translateY(-50%)
    scale(.9);
}


/* sedikit ekspresi saat login sukses */
.jakCatStage.loginSuccess #catLogin{
  animation:jakCatSuccess .55s ease;
}


@keyframes jakCatSuccess{
  0%{
    transform:translateY(0) scale(1);
  }

  45%{
    transform:translateY(-12px) scale(1.05);
  }

  100%{
    transform:translateY(0) scale(1);
  }
}


/* ===== CAT V3 CLEAN - NO ARMS ===== */

.jakCatArm{
  display:none !important;
}

.jakCatStage.passwordSecret #catLogin{
  transform:
    translateY(-2px)
    rotate(-1.5deg)
    scale(1.01) !important;
  filter:brightness(.96);
}

.jakCatStage.passwordVisible #catLogin{
  transform:
    translateY(-4px)
    rotate(2deg)
    scale(1.03) !important;
  filter:brightness(1.04);
}

.jakCatStage.catWatching #catLogin{
  transform:
    translateY(-3px)
    rotate(-2deg)
    scale(1.02) !important;
}

/* EDIT PROFILE ALWAYS ABOVE USER PROFILE */
.editProfileOverlay{
  position:fixed !important;
  inset:0 !important;
  z-index:999999 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}


/* =====================================================
   JAKSKY IDENTITY UI V3 — AUTH/PUBLIC PROFILE OVERRIDES
===================================================== */

.vipCommentBadge{
  display:inline-flex !important;
  align-items:center !important;
  gap:5px !important;
  min-height:22px !important;
  padding:3px 8px 3px 5px !important;
  border-radius:999px !important;
  font-size:9px !important;
  font-weight:950 !important;
  letter-spacing:.055em !important;
  line-height:1 !important;
  vertical-align:middle !important;
}

.vipBasicBadge{
  color:#dff8ff !important;
  border:1px solid rgba(65,193,255,.62) !important;
  background:linear-gradient(135deg,#133451,#10243c) !important;
}

.vipProBadge{
  color:#fff3bf !important;
  border:1px solid rgba(255,197,72,.68) !important;
  background:linear-gradient(135deg,#5a3b09,#2b1c08 64%,#4c2f07) !important;
}

.customTitleBadge{
  display:inline-flex !important;
  align-items:center !important;
  gap:4px !important;
  min-height:21px !important;
  margin:2px 3px !important;
  padding:3px 8px !important;
  font-size:9.5px !important;
  font-weight:850 !important;
  line-height:1 !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 2px 7px rgba(0,0,0,.06) !important;
}

/* Main profile avatar gets a visual stage instead of a plain circle. */
.profileAvatarStage{
  position:relative;
  width:148px;
  height:132px;
  margin:2px auto 8px;
  display:grid;
  place-items:center;
  isolation:isolate;
}

.profileAvatarStage::before,
.profileAvatarBackdrop{
  content:"";
  position:absolute;
  pointer-events:none;
}

.profileAvatarStage::before{
  width:138px;
  height:86px;
  border-radius:48% 52% 48% 52%;
  z-index:-2;
  opacity:.55;
  filter:blur(1px);
  transform:rotate(-7deg);
}

.profileAvatarBackdrop{
  width:118px;
  height:118px;
  border-radius:50%;
  z-index:-1;
  filter:blur(19px);
  opacity:.24;
}

.profileAvatarStage.identityUser::before{
  background:linear-gradient(135deg,rgba(255,58,155,.20),rgba(141,73,255,.15));
}
.profileAvatarStage.identityUser .profileAvatarBackdrop{background:#ff3fa4;}

.profileAvatarStage.identityBasic::before{
  background:linear-gradient(135deg,rgba(48,190,245,.40),rgba(58,111,255,.26));
}
.profileAvatarStage.identityBasic .profileAvatarBackdrop{background:#3bbcf2;}

.profileAvatarStage.identityPro::before,
.profileAvatarStage.identityOwner::before{
  background:linear-gradient(135deg,rgba(255,202,77,.48),rgba(255,72,151,.26));
}
.profileAvatarStage.identityPro .profileAvatarBackdrop,
.profileAvatarStage.identityOwner .profileAvatarBackdrop{background:#ffbd3f;}

.profileAvatarStage.identityAdmin::before{
  background:linear-gradient(135deg,rgba(109,111,255,.40),rgba(178,85,255,.25));
}
.profileAvatarStage.identityAdmin .profileAvatarBackdrop{background:#8f8cff;}

.profileAvatarStage.identityMod::before{
  background:linear-gradient(135deg,rgba(49,217,220,.38),rgba(58,145,255,.22));
}
.profileAvatarStage.identityMod .profileAvatarBackdrop{background:#36d5dc;}

.profileAvatarStage #profileAvatarMain.profileAvatarMain{
  margin:0 !important;
  position:relative;
  z-index:2;
}

.profileAvatarStage.identityBasic #profileAvatarMain{
  border-color:#42bff2 !important;
  box-shadow:0 0 0 5px rgba(66,191,242,.10),0 12px 30px rgba(0,0,0,.28) !important;
}

.profileAvatarStage.identityPro #profileAvatarMain,
.profileAvatarStage.identityOwner #profileAvatarMain{
  border-color:#ffc54b !important;
  box-shadow:0 0 0 5px rgba(255,197,75,.12),0 0 22px rgba(255,182,50,.15),0 12px 30px rgba(0,0,0,.28) !important;
}

.profileAvatarStage.identityAdmin #profileAvatarMain{border-color:#8f8cff !important;}
.profileAvatarStage.identityMod #profileAvatarMain{border-color:#39d6dd !important;}

/* Public profile hero/background around the avatar. */
.publicProfileHero{
  position:relative;
  height:142px;
  margin:-6px -8px 8px;
  display:grid;
  place-items:center;
  overflow:hidden;
  isolation:isolate;
  border-radius:22px;
  background:linear-gradient(145deg,#fff4f9,#f5efff);
  border:1px solid rgba(239,70,154,.10);
}

.publicProfileHeroGlow,
.publicProfileHeroGrid{
  position:absolute;
  inset:0;
  pointer-events:none;
}

.publicProfileHeroGlow{
  inset:auto;
  width:150px;
  height:100px;
  border-radius:50%;
  filter:blur(25px);
  opacity:.28;
  background:#ff4da4;
}

.publicProfileHeroGrid{
  opacity:.28;
  background-image:
    radial-gradient(circle at 20% 30%,rgba(255,255,255,.8) 0 1px,transparent 1.5px),
    radial-gradient(circle at 78% 68%,rgba(255,255,255,.72) 0 1px,transparent 1.5px);
  background-size:28px 28px,34px 34px;
}

.publicProfileHero .publicProfileAvatar{
  position:relative;
  z-index:3;
  margin:0;
  border-width:3px;
  box-shadow:0 8px 25px rgba(0,0,0,.18);
}

.publicProfileHero.identityBasic{
  background:linear-gradient(145deg,#e8f9ff,#edf2ff);
}
.publicProfileHero.identityBasic .publicProfileHeroGlow{background:#3bbcf2;}
.publicProfileHero.identityBasic .publicProfileAvatar{border-color:#45bff1;}

.publicProfileHero.identityPro,
.publicProfileHero.identityOwner{
  background:linear-gradient(145deg,#fff7d9,#fff0df 52%,#ffeaf5);
}
.publicProfileHero.identityPro .publicProfileHeroGlow,
.publicProfileHero.identityOwner .publicProfileHeroGlow{background:#ffbd3f;}
.publicProfileHero.identityPro .publicProfileAvatar,
.publicProfileHero.identityOwner .publicProfileAvatar{border-color:#ffc44a;}

.publicProfileHero.identityAdmin{
  background:linear-gradient(145deg,#eeeeff,#f6edff);
}
.publicProfileHero.identityAdmin .publicProfileHeroGlow{background:#8f8cff;}
.publicProfileHero.identityAdmin .publicProfileAvatar{border-color:#8f8cff;}

.publicProfileHero.identityMod{
  background:linear-gradient(145deg,#e9ffff,#edf7ff);
}
.publicProfileHero.identityMod .publicProfileHeroGlow{background:#39d6dd;}
.publicProfileHero.identityMod .publicProfileAvatar{border-color:#39d6dd;}

@media (max-width:380px){
  .profileAvatarStage{width:138px;}
  .publicProfileHero{height:134px;}
}


/* =====================================================
   JAKSKY AVATAR FRAME SYSTEM V1
===================================================== */

.avatarFrameSection{
  margin:18px 0 20px;
}

.avatarFrameSectionHead{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  margin-bottom:11px;
}

.avatarFrameSectionHead > div{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:2px;
}

.avatarFrameSectionHead b{
  font-size:13px;
}

.avatarFrameSectionHead span{
  font-size:10px;
  opacity:.62;
}

.avatarFrameSelectedLabel{
  flex:0 0 auto;
  max-width:120px;
  padding:5px 8px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  border-radius:999px;
  background:rgba(255,54,154,.09);
  border:1px solid rgba(255,54,154,.18);
  color:#ff5cad;
  font-size:9px !important;
  font-weight:850;
}

.avatarFramePicker{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
}

.avatarFrameChoice{
  min-width:0;
  min-height:92px;
  padding:9px 5px 7px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:15px;
  background:rgba(255,255,255,.025);
  color:inherit;
  font:inherit;
  cursor:pointer;
  transition:.18s ease;
}

.avatarFrameChoice.selected{
  border-color:rgba(255,72,162,.65);
  background:rgba(255,62,154,.08);
  box-shadow:inset 0 0 0 1px rgba(255,72,162,.13);
}

.avatarFrameChoice:active{
  transform:scale(.975);
}

.avatarFrameChoiceText{
  min-width:0;
  display:flex;
  align-items:center;
  gap:4px;
  font-size:9px;
}

.avatarFrameChoiceText b{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:9px;
}

.avatarFrameChoiceText small{
  opacity:.62;
  font-size:9px;
}

.avatarFrameMini,
.editAvatarFramePreview,
.publicAvatarFrameShell{
  position:relative;
  display:grid;
  place-items:center;
  border-radius:50%;
  isolation:isolate;
}

.avatarFrameMini{
  width:48px;
  height:48px;
  padding:4px;
}

.avatarFrameMini img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:50%;
  position:relative;
  z-index:3;
}

.editAvatarFramePreview{
  width:112px;
  height:112px;
  margin:0 auto 10px;
  padding:6px;
}

.editAvatarFramePreview .editProfileAvatar{
  width:100% !important;
  height:100% !important;
  margin:0 !important;
  border:0 !important;
  border-radius:50% !important;
  object-fit:cover;
  position:relative;
  z-index:3;
}

.publicAvatarFrameShell{
  width:116px;
  height:116px;
  padding:6px;
  z-index:4;
}

.publicAvatarFrameShell .publicProfileAvatar{
  width:100% !important;
  height:100% !important;
  margin:0 !important;
  border:0 !important;
  border-radius:50% !important;
  object-fit:cover;
  position:relative;
  z-index:3;
}

.avatarFrameDecor{
  position:absolute;
  pointer-events:none;
  z-index:4;
}

.avatarFrameDecorA{
  top:-4px;
  left:50%;
  width:9px;
  height:9px;
  margin-left:-4.5px;
  border-radius:3px;
  transform:rotate(45deg);
}

.avatarFrameDecorB{
  right:-3px;
  bottom:17%;
  width:7px;
  height:7px;
  border-radius:50%;
}

/* Default */
.avatarFrame-default{
  background:linear-gradient(135deg,#ff8dc5,#ffd1e8);
  box-shadow:0 0 0 1px rgba(255,255,255,.3),0 8px 22px rgba(0,0,0,.14);
}
.avatarFrame-default .avatarFrameDecor{display:none;}

/* Neon Pink */
.avatarFrame-neon-pink{
  background:conic-gradient(from 20deg,#ff2f93,#ff8bc9,#8d4aff,#ff2f93);
  box-shadow:0 0 0 2px rgba(255,50,151,.13),0 0 21px rgba(255,48,148,.34);
}
.avatarFrame-neon-pink .avatarFrameDecorA,
.avatarFrame-neon-pink .avatarFrameDecorB{
  background:#ff50a9;
  box-shadow:0 0 11px #ff50a9;
}

/* Violet Orbit */
.avatarFrame-violet-orbit{
  background:conic-gradient(#5f46ff,#bd5cff,#ff64ba,#5f46ff);
  box-shadow:0 0 0 3px rgba(139,82,255,.11),0 0 20px rgba(132,74,255,.27);
}
.avatarFrame-violet-orbit::after{
  content:"";
  position:absolute;
  inset:-5px;
  border-radius:50%;
  border:1px dashed rgba(173,117,255,.54);
  animation:jakAvatarOrbit 10s linear infinite;
}
.avatarFrame-violet-orbit .avatarFrameDecorA{background:#c978ff;box-shadow:0 0 10px #a85cff;}
.avatarFrame-violet-orbit .avatarFrameDecorB{background:#795cff;box-shadow:0 0 9px #795cff;}

/* Cyber Blue */
.avatarFrame-cyber-blue{
  background:conic-gradient(from 45deg,#32e4ff,#2c8fff,#35e8d8,#32e4ff);
  box-shadow:0 0 0 2px rgba(43,202,255,.13),0 0 19px rgba(44,169,255,.28);
}
.avatarFrame-cyber-blue::before{
  content:"";
  position:absolute;
  inset:-3px;
  border:2px solid transparent;
  border-top-color:#57eaff;
  border-bottom-color:#2a8cff;
  border-radius:42% 58% 44% 56%;
  transform:rotate(-12deg);
}
.avatarFrame-cyber-blue .avatarFrameDecorA{background:#58efff;box-shadow:0 0 10px #33dfff;}
.avatarFrame-cyber-blue .avatarFrameDecorB{background:#2c92ff;box-shadow:0 0 9px #2c92ff;}

/* Royal Gold */
.avatarFrame-royal-gold{
  background:conic-gradient(from 5deg,#7a4300,#ffd85c,#fff1a3,#d59418,#fff0a0,#7a4300);
  box-shadow:0 0 0 2px rgba(255,198,65,.14),0 0 22px rgba(255,184,43,.32);
}
.avatarFrame-royal-gold::before{
  content:"♛";
  position:absolute;
  z-index:5;
  top:-18px;
  left:50%;
  transform:translateX(-50%);
  color:#ffd966;
  font-size:20px;
  line-height:1;
  text-shadow:0 2px 7px rgba(126,69,0,.55),0 0 10px rgba(255,201,67,.45);
}
.avatarFrame-royal-gold .avatarFrameDecorA{display:none;}
.avatarFrame-royal-gold .avatarFrameDecorB{background:#ffe17d;box-shadow:0 0 11px #ffc43c;}

/* Diamond Prism */
.avatarFrame-diamond-prism{
  background:conic-gradient(from 10deg,#c8f7ff,#6ecbff,#d9b4ff,#ffbce3,#fff,#8de6ff,#c8f7ff);
  box-shadow:0 0 0 2px rgba(208,240,255,.24),0 0 25px rgba(130,196,255,.32);
}
.avatarFrame-diamond-prism::before,
.avatarFrame-diamond-prism::after{
  content:"◆";
  position:absolute;
  z-index:5;
  color:#dcf8ff;
  font-size:13px;
  line-height:1;
  text-shadow:0 0 9px rgba(136,221,255,.88);
}
.avatarFrame-diamond-prism::before{top:-8px;left:8%;}
.avatarFrame-diamond-prism::after{right:-7px;bottom:16%;font-size:10px;}
.avatarFrame-diamond-prism .avatarFrameDecorA,
.avatarFrame-diamond-prism .avatarFrameDecorB{display:none;}

/* Apply the selected frame to the existing own-profile stage. */
.profileAvatarStage.avatarFrame-default #profileAvatarMain{border-color:#ff9acb !important;}
.profileAvatarStage.avatarFrame-neon-pink #profileAvatarMain{border-color:#ff46a4 !important;box-shadow:0 0 0 4px rgba(255,56,158,.13),0 0 22px rgba(255,56,158,.25) !important;}
.profileAvatarStage.avatarFrame-violet-orbit #profileAvatarMain{border-color:#9d68ff !important;box-shadow:0 0 0 4px rgba(139,83,255,.13),0 0 22px rgba(131,73,255,.25) !important;}
.profileAvatarStage.avatarFrame-cyber-blue #profileAvatarMain{border-color:#43dfff !important;box-shadow:0 0 0 4px rgba(48,202,255,.12),0 0 22px rgba(48,177,255,.23) !important;}
.profileAvatarStage.avatarFrame-royal-gold #profileAvatarMain{border-color:#ffd15a !important;box-shadow:0 0 0 4px rgba(255,196,58,.14),0 0 24px rgba(255,181,39,.25) !important;}
.profileAvatarStage.avatarFrame-diamond-prism #profileAvatarMain{border-color:#bceeff !important;box-shadow:0 0 0 4px rgba(176,225,255,.14),0 0 25px rgba(147,197,255,.28) !important;}

/* The public profile close control must sit above the hero. */
#publicProfileModal .publicProfileClose,
.publicProfileClose{
  z-index:40 !important;
  top:12px !important;
  right:12px !important;
  width:40px !important;
  height:40px !important;
  display:grid !important;
  place-items:center !important;
  padding:0 !important;
  border:1px solid rgba(255,255,255,.12) !important;
  border-radius:50% !important;
  background:rgba(16,12,15,.82) !important;
  color:#fff !important;
  box-shadow:0 8px 24px rgba(0,0,0,.24),0 0 0 1px rgba(255,64,157,.08) !important;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  cursor:pointer;
}

.publicProfileClose svg{
  width:18px;
  height:18px;
  fill:none;
  stroke:currentColor;
  stroke-width:2.2;
  stroke-linecap:round;
}

.publicProfileClose:active{
  transform:scale(.92);
}

@keyframes jakAvatarOrbit{
  to{transform:rotate(360deg);}
}

@media (max-width:390px){
  .avatarFramePicker{grid-template-columns:repeat(2,minmax(0,1fr));}
}

@media (prefers-reduced-motion:reduce){
  .avatarFrame-violet-orbit::after{animation:none !important;}
}


/* =====================================================
   JAKSKY OWN PROFILE FRAME CONSISTENCY FIX V1
===================================================== */

.profileAvatarFrameShell{
  position:relative;
  width:116px;
  height:116px;
  padding:6px;
  box-sizing:border-box;
  display:grid;
  place-items:center;
  border-radius:50%;
  isolation:isolate;
  z-index:3;
}

.profileAvatarFrameShell #profileAvatarMain.profileAvatarMain{
  width:100% !important;
  height:100% !important;
  margin:0 !important;
  border:0 !important;
  border-radius:50% !important;
  object-fit:cover !important;
  position:relative;
  z-index:3;
}

.profileAvatarStage.identityBasic .profileAvatarFrameShell #profileAvatarMain,
.profileAvatarStage.identityPro .profileAvatarFrameShell #profileAvatarMain,
.profileAvatarStage.identityOwner .profileAvatarFrameShell #profileAvatarMain,
.profileAvatarStage.identityAdmin .profileAvatarFrameShell #profileAvatarMain,
.profileAvatarStage.identityMod .profileAvatarFrameShell #profileAvatarMain{
  border:0 !important;
  box-shadow:none !important;
}

.profileAvatarStage{
  background:transparent !important;
  box-shadow:none !important;
  border-radius:0 !important;
}

.profileAvatarStage.avatarFrame-default,
.profileAvatarStage.avatarFrame-neon-pink,
.profileAvatarStage.avatarFrame-violet-orbit,
.profileAvatarStage.avatarFrame-cyber-blue,
.profileAvatarStage.avatarFrame-royal-gold,
.profileAvatarStage.avatarFrame-diamond-prism{
  background:transparent !important;
  box-shadow:none !important;
}

.profileAvatarFrameShell.avatarFrame-royal-gold::before{
  z-index:6;
}

.profileAvatarFrameShell .avatarFrameDecor{
  z-index:6;
}

@media (max-width:380px){
  .profileAvatarFrameShell{
    width:108px;
    height:108px;
  }
}


/* =====================================================
   JAKSKY TITLE CONSISTENCY FIX V1
   Public profile title 1-3 uses the same badge system as comments.
===================================================== */
.publicProfileTitleList{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:4px;
  margin:8px auto 2px;
  max-width:100%;
}

.publicProfileTitleList .customTitleBadge{
  margin:2px !important;
}

.publicProfileTitleList .customTitleBadge .customTitleIcon,
.publicProfileTitleList .customTitleBadge .customTitleText{
  padding:0 !important;
  background:transparent;
}


/* =====================================================
   JAKSKY ANIMATED AVATAR BACKGROUND V1
   Hanya avatar besar: edit profile, own profile, public profile.
   Avatar komentar sengaja tidak dianimasikan agar ringan di HP.
===================================================== */

.profileAvatarBackdrop,
.publicProfileHeroGlow{
  will-change:transform,opacity;
  animation:
    jakAvatarAuraBreath 3.8s ease-in-out infinite,
    jakAvatarAuraDrift 7s ease-in-out infinite alternate;
}

.profileAvatarStage::before{
  will-change:transform,opacity;
  animation:jakAvatarStageMorph 7.5s ease-in-out infinite alternate;
}

.publicProfileHeroGrid{
  will-change:background-position,opacity;
  animation:jakAvatarStarsDrift 12s linear infinite;
}

.editAvatarFramePreview,
.profileAvatarFrameShell,
.publicAvatarFrameShell{
  will-change:filter,transform;
}

/* Default */
.editAvatarFramePreview.avatarFrame-default,
.profileAvatarFrameShell.avatarFrame-default,
.publicAvatarFrameShell.avatarFrame-default{
  animation:jakAvatarDefaultFloat 4.8s ease-in-out infinite;
}

/* Neon Pink */
.editAvatarFramePreview.avatarFrame-neon-pink,
.profileAvatarFrameShell.avatarFrame-neon-pink,
.publicAvatarFrameShell.avatarFrame-neon-pink{
  animation:jakAvatarNeonBreath 2.7s ease-in-out infinite;
}
.profileAvatarStage:has(.avatarFrame-neon-pink) .profileAvatarBackdrop{
  background:#ff3b9d !important;
  opacity:.36;
}
.publicProfileHero:has(.avatarFrame-neon-pink){
  background:
    radial-gradient(circle at 25% 15%,rgba(255,80,177,.20),transparent 34%),
    linear-gradient(145deg,#fff0f8,#f7edff) !important;
}
.publicProfileHero:has(.avatarFrame-neon-pink) .publicProfileHeroGlow{
  background:#ff3b9d !important;
}

/* Violet Orbit */
.editAvatarFramePreview.avatarFrame-violet-orbit,
.profileAvatarFrameShell.avatarFrame-violet-orbit,
.publicAvatarFrameShell.avatarFrame-violet-orbit{
  animation:jakAvatarVioletPulse 3.2s ease-in-out infinite;
}
.profileAvatarStage:has(.avatarFrame-violet-orbit) .profileAvatarBackdrop{
  background:#8d5bff !important;
  opacity:.36;
}
.publicProfileHero:has(.avatarFrame-violet-orbit){
  background:
    radial-gradient(circle at 72% 20%,rgba(145,83,255,.22),transparent 34%),
    linear-gradient(145deg,#f5efff,#eeeaff 52%,#fff0fa) !important;
}
.publicProfileHero:has(.avatarFrame-violet-orbit) .publicProfileHeroGlow{
  background:#8d5bff !important;
}
.editAvatarFramePreview.avatarFrame-violet-orbit::after,
.profileAvatarFrameShell.avatarFrame-violet-orbit::after,
.publicAvatarFrameShell.avatarFrame-violet-orbit::after{
  animation:jakAvatarOrbit 7s linear infinite !important;
}

/* Cyber Blue */
.editAvatarFramePreview.avatarFrame-cyber-blue,
.profileAvatarFrameShell.avatarFrame-cyber-blue,
.publicAvatarFrameShell.avatarFrame-cyber-blue{
  animation:jakAvatarCyberCharge 2.45s ease-in-out infinite;
}
.profileAvatarStage:has(.avatarFrame-cyber-blue) .profileAvatarBackdrop{
  background:#25d9ff !important;
  opacity:.34;
}
.publicProfileHero:has(.avatarFrame-cyber-blue){
  background:
    radial-gradient(circle at 20% 78%,rgba(47,217,255,.20),transparent 34%),
    linear-gradient(145deg,#eafcff,#eef3ff) !important;
}
.publicProfileHero:has(.avatarFrame-cyber-blue) .publicProfileHeroGlow{
  background:#28d8ff !important;
}
.editAvatarFramePreview.avatarFrame-cyber-blue::before,
.profileAvatarFrameShell.avatarFrame-cyber-blue::before,
.publicAvatarFrameShell.avatarFrame-cyber-blue::before{
  animation:jakAvatarCyberRing 5.5s linear infinite;
}

/* Royal Gold */
.editAvatarFramePreview.avatarFrame-royal-gold,
.profileAvatarFrameShell.avatarFrame-royal-gold,
.publicAvatarFrameShell.avatarFrame-royal-gold{
  animation:jakAvatarGoldGlow 3.1s ease-in-out infinite;
}
.profileAvatarStage:has(.avatarFrame-royal-gold) .profileAvatarBackdrop{
  background:#ffc33f !important;
  opacity:.42;
}
.profileAvatarStage:has(.avatarFrame-royal-gold)::before{
  background:
    linear-gradient(
      115deg,
      rgba(255,193,47,.36),
      rgba(255,238,161,.18) 42%,
      rgba(255,89,156,.18)
    ) !important;
}
.publicProfileHero:has(.avatarFrame-royal-gold){
  background:
    radial-gradient(circle at 22% 20%,rgba(255,221,104,.28),transparent 30%),
    radial-gradient(circle at 82% 75%,rgba(255,99,166,.14),transparent 34%),
    linear-gradient(145deg,#fff8dc,#fff0df 53%,#ffedf5) !important;
  background-size:140% 140%;
  animation:jakAvatarGoldHero 6.5s ease-in-out infinite alternate;
}
.publicProfileHero:has(.avatarFrame-royal-gold) .publicProfileHeroGlow{
  background:#ffc13d !important;
}
.editAvatarFramePreview.avatarFrame-royal-gold::before,
.profileAvatarFrameShell.avatarFrame-royal-gold::before,
.publicAvatarFrameShell.avatarFrame-royal-gold::before{
  animation:jakAvatarCrownFloat 2.6s ease-in-out infinite;
}
.avatarFrame-royal-gold .avatarFrameDecorB{
  animation:jakAvatarGoldSpark 1.9s ease-in-out infinite;
}

/* Diamond Prism */
.editAvatarFramePreview.avatarFrame-diamond-prism,
.profileAvatarFrameShell.avatarFrame-diamond-prism,
.publicAvatarFrameShell.avatarFrame-diamond-prism{
  animation:jakAvatarPrismGlow 3.4s ease-in-out infinite;
}
.profileAvatarStage:has(.avatarFrame-diamond-prism) .profileAvatarBackdrop{
  background:#a5ddff !important;
  opacity:.36;
}
.publicProfileHero:has(.avatarFrame-diamond-prism){
  background:
    radial-gradient(circle at 15% 25%,rgba(116,220,255,.20),transparent 28%),
    radial-gradient(circle at 78% 22%,rgba(220,157,255,.18),transparent 28%),
    radial-gradient(circle at 68% 85%,rgba(255,172,220,.15),transparent 30%),
    linear-gradient(145deg,#effcff,#f6efff 50%,#fff1f8) !important;
  background-size:130% 130%;
  animation:jakAvatarPrismHero 8s ease-in-out infinite alternate;
}
.publicProfileHero:has(.avatarFrame-diamond-prism) .publicProfileHeroGlow{
  background:#a6dfff !important;
}
.editAvatarFramePreview.avatarFrame-diamond-prism::before,
.profileAvatarFrameShell.avatarFrame-diamond-prism::before,
.publicAvatarFrameShell.avatarFrame-diamond-prism::before{
  animation:jakAvatarDiamondBlinkA 2.2s ease-in-out infinite;
}
.editAvatarFramePreview.avatarFrame-diamond-prism::after,
.profileAvatarFrameShell.avatarFrame-diamond-prism::after,
.publicAvatarFrameShell.avatarFrame-diamond-prism::after{
  animation:jakAvatarDiamondBlinkB 2.2s ease-in-out .7s infinite;
}

/* Edit profile ambient backdrop */
.editAvatarWrap{
  position:relative;
  isolation:isolate;
}
.editAvatarWrap::before{
  content:"";
  position:absolute;
  width:150px;
  height:92px;
  left:50%;
  top:10px;
  transform:translateX(-50%) rotate(-5deg);
  border-radius:45% 55% 48% 52%;
  background:
    linear-gradient(
      135deg,
      rgba(255,64,158,.18),
      rgba(139,74,255,.14)
    );
  filter:blur(10px);
  opacity:.75;
  z-index:-1;
  animation:jakEditAvatarBackdrop 6.5s ease-in-out infinite alternate;
}

/* Keyframes */
@keyframes jakAvatarAuraBreath{
  0%,100%{opacity:.23;filter:blur(19px);}
  50%{opacity:.43;filter:blur(24px);}
}
@keyframes jakAvatarAuraDrift{
  from{transform:translate3d(-4px,2px,0) scale(.94);}
  to{transform:translate3d(5px,-3px,0) scale(1.08);}
}
@keyframes jakAvatarStageMorph{
  0%{transform:rotate(-7deg) scale(.96);border-radius:48% 52% 48% 52%;opacity:.44;}
  50%{transform:rotate(3deg) scale(1.05);border-radius:55% 45% 53% 47%;opacity:.68;}
  100%{transform:rotate(-2deg) scale(.99);border-radius:44% 56% 46% 54%;opacity:.52;}
}
@keyframes jakAvatarStarsDrift{
  0%{background-position:0 0,0 0;opacity:.22;}
  50%{opacity:.38;}
  100%{background-position:56px 28px,-68px 34px;opacity:.24;}
}
@keyframes jakAvatarDefaultFloat{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-2px);}
}
@keyframes jakAvatarNeonBreath{
  0%,100%{
    filter:drop-shadow(0 0 3px rgba(255,53,156,.22)) saturate(1);
    transform:scale(1);
  }
  50%{
    filter:drop-shadow(0 0 11px rgba(255,53,156,.62)) saturate(1.16);
    transform:scale(1.015);
  }
}
@keyframes jakAvatarVioletPulse{
  0%,100%{filter:drop-shadow(0 0 4px rgba(139,82,255,.24));}
  50%{filter:drop-shadow(0 0 13px rgba(139,82,255,.58));}
}
@keyframes jakAvatarCyberCharge{
  0%,100%{filter:drop-shadow(0 0 3px rgba(45,210,255,.30)) brightness(1);}
  45%{filter:drop-shadow(0 0 12px rgba(45,210,255,.66)) brightness(1.08);}
  55%{filter:drop-shadow(0 0 7px rgba(72,244,223,.55)) brightness(1.04);}
}
@keyframes jakAvatarCyberRing{
  to{transform:rotate(348deg);}
}
@keyframes jakAvatarGoldGlow{
  0%,100%{
    filter:drop-shadow(0 0 4px rgba(255,190,42,.28)) brightness(1);
    transform:translateY(0);
  }
  50%{
    filter:drop-shadow(0 0 14px rgba(255,190,42,.62)) brightness(1.05);
    transform:translateY(-1px);
  }
}
@keyframes jakAvatarGoldHero{
  from{background-position:0% 40%;}
  to{background-position:100% 65%;}
}
@keyframes jakAvatarCrownFloat{
  0%,100%{transform:translateX(-50%) translateY(0) rotate(-2deg);}
  50%{transform:translateX(-50%) translateY(-3px) rotate(2deg);}
}
@keyframes jakAvatarGoldSpark{
  0%,100%{transform:scale(.7);opacity:.42;}
  50%{transform:scale(1.35);opacity:1;}
}
@keyframes jakAvatarPrismGlow{
  0%,100%{filter:drop-shadow(0 0 4px rgba(149,211,255,.28)) hue-rotate(0deg);}
  50%{filter:drop-shadow(0 0 13px rgba(187,163,255,.52)) hue-rotate(12deg);}
}
@keyframes jakAvatarPrismHero{
  from{background-position:0% 30%;}
  to{background-position:100% 70%;}
}
@keyframes jakAvatarDiamondBlinkA{
  0%,100%{opacity:.45;transform:scale(.78) rotate(0deg);}
  50%{opacity:1;transform:scale(1.25) rotate(18deg);}
}
@keyframes jakAvatarDiamondBlinkB{
  0%,100%{opacity:.35;transform:scale(.72) rotate(0deg);}
  50%{opacity:1;transform:scale(1.18) rotate(-16deg);}
}
@keyframes jakEditAvatarBackdrop{
  from{transform:translateX(-50%) rotate(-6deg) scale(.92);opacity:.48;}
  to{transform:translateX(-50%) rotate(5deg) scale(1.07);opacity:.82;}
}

@media (prefers-reduced-motion:reduce){
  .profileAvatarBackdrop,
  .profileAvatarStage::before,
  .publicProfileHeroGlow,
  .publicProfileHeroGrid,
  .editAvatarWrap::before,
  .editAvatarFramePreview,
  .profileAvatarFrameShell,
  .publicAvatarFrameShell,
  .editAvatarFramePreview::before,
  .editAvatarFramePreview::after,
  .profileAvatarFrameShell::before,
  .profileAvatarFrameShell::after,
  .publicAvatarFrameShell::before,
  .publicAvatarFrameShell::after,
  .avatarFrameDecor{
    animation:none !important;
    transition:none !important;
  }
}



/* =====================================================
   JAKSKY PROFILE BANNER V1
===================================================== */
.profileBannerOwn{
  position:relative;
  height:112px;
  margin:-6px -8px -62px;
  overflow:hidden;
  border-radius:23px 23px 18px 18px;
  isolation:isolate;
  background:#f9edf4;
}
.profileBannerOwn::after,
.publicProfileHero[class*="profileBanner-"]::after,
.profileBannerMini::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.28) 48%,transparent 66%);
  transform:translateX(-120%);
  animation:jakProfileBannerShimmer 8s ease-in-out infinite;
}
.profileBannerGlow{
  position:absolute;
  width:150px;
  height:150px;
  border-radius:50%;
  right:-35px;
  top:-68px;
  filter:blur(35px);
  opacity:.48;
  background:#ff51a9;
  animation:jakProfileBannerGlow 5.5s ease-in-out infinite alternate;
}
.profileBannerPattern{
  position:absolute;
  inset:0;
  opacity:.18;
  background-image:radial-gradient(circle,rgba(255,255,255,.9) 1px,transparent 1.6px);
  background-size:23px 23px;
}

.profileBanner-default{background:linear-gradient(145deg,#fff4f8,#f3ecff) !important;}
.profileBanner-aurora-pink{background:linear-gradient(125deg,#ff4da6,#e55bc5 48%,#8f60ff) !important;}
.profileBanner-violet-space{background:radial-gradient(circle at 25% 20%,#b86cff 0 8%,transparent 30%),linear-gradient(135deg,#2c174d,#59388e 55%,#e976cb) !important;}
.profileBanner-cyber-night{background:linear-gradient(135deg,#071828,#0d4059 50%,#1dc9d5) !important;}
.profileBanner-royal-gold{background:linear-gradient(125deg,#7e4d09,#e1a82e 44%,#ffe795 62%,#b46a10) !important;}
.profileBanner-diamond-prism{background:linear-gradient(125deg,#9de8ff,#d6b9ff 38%,#ffb9df 68%,#fff3b0) !important;}

.publicProfileHero.profileBanner-default{background:linear-gradient(145deg,#fff4f8,#f3ecff) !important;}
.publicProfileHero.profileBanner-aurora-pink{background:linear-gradient(125deg,#ff72b7,#df8ce2 52%,#a798ff) !important;}
.publicProfileHero.profileBanner-violet-space{background:radial-gradient(circle at 22% 25%,rgba(228,158,255,.42),transparent 24%),linear-gradient(135deg,#2c174d,#6a4699 54%,#b45fab) !important;}
.publicProfileHero.profileBanner-cyber-night{background:linear-gradient(135deg,#071828,#174760 52%,#43d9df) !important;}
.publicProfileHero.profileBanner-royal-gold{background:linear-gradient(125deg,#9a6411,#e5ad33 42%,#ffe8a1 64%,#c47a18) !important;}
.publicProfileHero.profileBanner-diamond-prism{background:linear-gradient(125deg,#a9ecff,#d9c1ff 38%,#ffc1df 68%,#fff3bf) !important;}

.profileBannerSection{
  margin:16px 0;
  padding:14px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:18px;
  background:rgba(255,255,255,.025);
}
.profileBannerSectionHead{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:flex-start;
  margin-bottom:12px;
}
.profileBannerSectionHead b{display:block;font-size:13px;}
.profileBannerSectionHead span{display:block;margin-top:3px;font-size:10px;opacity:.62;}
.profileBannerSelectedLabel{
  padding:5px 8px;
  border-radius:999px;
  background:rgba(255,69,160,.12);
  color:#ff6bb4;
  font-size:9px !important;
  font-weight:850;
  white-space:nowrap;
}
.profileBannerPicker{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:9px;
}
.profileBannerChoice{
  min-width:0;
  padding:8px;
  display:flex;
  align-items:center;
  gap:9px;
  text-align:left;
  border:1px solid rgba(255,255,255,.07);
  border-radius:13px;
  color:inherit;
  background:rgba(255,255,255,.025);
  cursor:pointer;
}
.profileBannerChoice.selected{
  border-color:rgba(255,74,164,.62);
  box-shadow:0 0 0 2px rgba(255,74,164,.09);
}
.profileBannerChoice > span:last-child{min-width:0;}
.profileBannerChoice b,
.profileBannerChoice small{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.profileBannerChoice b{font-size:10px;}
.profileBannerChoice small{margin-top:2px;font-size:8px;opacity:.58;}
.profileBannerMini{
  position:relative;
  width:52px;
  height:34px;
  flex:0 0 52px;
  overflow:hidden;
  border-radius:10px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
}
.profileBannerMini i{
  position:absolute;
  width:25px;
  height:25px;
  right:-4px;
  top:-7px;
  border-radius:50%;
  background:rgba(255,255,255,.28);
  filter:blur(7px);
}

@keyframes jakProfileBannerShimmer{
  0%,60%{transform:translateX(-120%);}
  100%{transform:translateX(125%);}
}
@keyframes jakProfileBannerGlow{
  from{transform:translate3d(-8px,3px,0) scale(.9);}
  to{transform:translate3d(12px,9px,0) scale(1.12);}
}
@media (prefers-reduced-motion:reduce){
  .profileBannerOwn::after,
  .publicProfileHero[class*="profileBanner-"]::after,
  .profileBannerMini::after,
  .profileBannerGlow{animation:none !important;}
}


/* =====================================================
   JAKSKY COSMETIC ACHIEVEMENT SYSTEM V1
===================================================== */
.mainProfileAchievementRow{
  margin-top:8px;
}
.mainProfileAchievementRow > b{
  display:block;
  margin-bottom:6px;
}
.profileAchievementList,
.publicProfileAchievementList{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:7px;
  margin:9px 0 12px;
}
.mainProfileAchievementRow .profileAchievementList{
  justify-content:flex-start;
  margin:5px 0 4px;
}
.achievementBadge{
  display:inline-flex;
  align-items:center;
  gap:5px;
  min-height:25px;
  padding:4px 9px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.05);
  color:#ddd;
  font-size:10px;
  font-weight:850;
  line-height:1;
  white-space:nowrap;
}
.achievementBadge.achievementFeatured{
  box-shadow:0 0 0 1px rgba(255,255,255,.11),0 6px 18px rgba(0,0,0,.16);
}
.achievementBadge.achievementFeatured::after{
  content:"★";
  font-size:7px;
  opacity:.8;
}
.achievementTone-emerald{color:#91f2c2;border-color:rgba(70,220,151,.30);background:rgba(31,151,102,.12)}
.achievementTone-pink{color:#ff9bcf;border-color:rgba(255,71,163,.31);background:rgba(216,46,135,.12)}
.achievementTone-gold{color:#ffd86f;border-color:rgba(255,195,55,.34);background:rgba(210,151,24,.12)}
.achievementTone-cyan{color:#8be9ff;border-color:rgba(65,210,242,.31);background:rgba(39,162,191,.12)}
.achievementTone-violet{color:#cbb0ff;border-color:rgba(151,104,255,.31);background:rgba(113,66,211,.12)}
.achievementTone-orange{color:#ffbc7d;border-color:rgba(255,145,55,.31);background:rgba(210,103,28,.12)}

.achievementPickerSection{
  margin:16px 0 18px;
  padding:14px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.07);
  background:rgba(255,255,255,.025);
}
.achievementPickerHead b,
.achievementPickerHead span{
  display:block;
}
.achievementPickerHead span{
  margin-top:3px;
  color:#8e858c;
  font-size:10px;
}
.achievementPicker{
  display:grid;
  grid-template-columns:1fr;
  gap:7px;
  margin-top:11px;
}
.achievementChoice{
  width:100%;
  min-height:48px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 10px;
  text-align:left;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.07);
  background:rgba(255,255,255,.025);
  color:#e8e0e5;
}
.achievementChoice.selected{
  border-color:rgba(255,70,161,.50);
  background:rgba(255,53,151,.08);
  box-shadow:inset 0 0 0 1px rgba(255,53,151,.10);
}
.achievementChoice > span:last-child{
  min-width:0;
}
.achievementChoice b,
.achievementChoice small{
  display:block;
}
.achievementChoice small{
  margin-top:3px;
  color:#8d858b;
  font-size:9px;
  line-height:1.3;
}
.achievementChoiceIcon{
  flex:0 0 34px;
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#211b20;
  border:1px solid rgba(255,255,255,.08);
  font-size:17px;
}
.achievementEmpty{
  margin-top:9px;
  color:#777;
  font-size:10px;
  line-height:1.45;
}


/* =====================================================
   JAKSKY OWN PROFILE NAV EDIT FIX V1
===================================================== */

#userModal{
  overflow-y:auto !important;
  overscroll-behavior:contain;
  padding:
    max(14px, env(safe-area-inset-top))
    12px
    max(92px, env(safe-area-inset-bottom))
    !important;
  box-sizing:border-box;
}

#userModal .authBox{
  position:relative !important;
  width:min(92%,380px) !important;
  max-height:calc(100dvh - 32px) !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
}

#userModal .authClose,
#userModal .ownProfileClose{
  position:absolute !important;
  top:14px !important;
  right:14px !important;
  z-index:100 !important;
  pointer-events:auto !important;
  touch-action:manipulation;
  box-shadow:
    0 5px 18px rgba(0,0,0,.16),
    0 0 0 1px rgba(255,255,255,.7) !important;
}

.profileBannerOwn,
.profileBannerOwn::before,
.profileBannerOwn::after,
.profileBannerOwn .profileBannerGlow,
.profileBannerOwn .profileBannerPattern{
  pointer-events:none !important;
}

.profileAvatarBackdrop,
.profileAvatarStage::before,
.avatarFrameDecor{
  pointer-events:none !important;
}

#userModal .authBtn{
  position:relative;
  z-index:20;
  pointer-events:auto !important;
  touch-action:manipulation;
}

#userModal .profileBannerOwn{
  z-index:1;
}

#userModal .profileAvatarStage,
#userModal h2,
#userModal .authSub,
#userModal .profileBioMain,
#userModal .mainProfileTitleRow,
#userModal .mainProfileAchievementRow{
  position:relative;
  z-index:5;
}

@media (max-height:700px){
  #userModal{
    align-items:flex-start !important;
  }

  #userModal .authBox{
    margin-top:0 !important;
    max-height:calc(100dvh - 28px) !important;
  }
}

@supports not (height:100dvh){
  #userModal .authBox{
    max-height:calc(100vh - 32px) !important;
  }
}


/* =====================================================
   JAKSKY ACHIEVEMENT CONTRAST V2
   Stronger contrast on light + dark profile surfaces.
===================================================== */

.achievementBadge{
  position:relative;
  overflow:hidden;
  border-width:1px !important;
  border-style:solid !important;
  font-weight:900 !important;
  letter-spacing:.01em;
  text-shadow:none !important;
  box-shadow:
    0 3px 9px rgba(0,0,0,.08),
    inset 0 1px 0 rgba(255,255,255,.72);
}

.achievementBadge .achievementIcon{
  display:inline-grid;
  place-items:center;
  min-width:14px;
  filter:none !important;
}

.achievementBadge.achievementTone-emerald{
  color:#126842 !important;
  border-color:#58cf99 !important;
  background:linear-gradient(135deg,#effff7,#bff2d9) !important;
}

.achievementBadge.achievementTone-pink{
  color:#8d245a !important;
  border-color:#f579b5 !important;
  background:linear-gradient(135deg,#fff1f8,#ffcce4) !important;
}

.achievementBadge.achievementTone-gold{
  color:#6c4700 !important;
  border-color:#e3ad22 !important;
  background:linear-gradient(135deg,#fff8cd,#ffd75f) !important;
  box-shadow:
    0 3px 10px rgba(183,125,0,.18),
    inset 0 1px 0 rgba(255,255,255,.82);
}

.achievementBadge.achievementTone-cyan{
  color:#086278 !important;
  border-color:#55cbe6 !important;
  background:linear-gradient(135deg,#edfcff,#bcefff) !important;
}

.achievementBadge.achievementTone-violet{
  color:#58339b !important;
  border-color:#ad8be9 !important;
  background:linear-gradient(135deg,#f7f2ff,#d9c8ff) !important;
}

.achievementBadge.achievementTone-orange{
  color:#864400 !important;
  border-color:#ef9c49 !important;
  background:linear-gradient(135deg,#fff5e9,#ffc98f) !important;
}

.achievementBadge.achievementFeatured{
  transform:translateZ(0);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.76),
    0 5px 14px rgba(0,0,0,.12) !important;
}

.achievementBadge.achievementFeatured::after{
  content:"★";
  margin-left:1px;
  color:currentColor;
  font-size:8px !important;
  opacity:1 !important;
}

.achievementBadge.achievementTone-gold.achievementFeatured::before{
  content:"";
  position:absolute;
  top:-25%;
  bottom:-25%;
  width:22%;
  left:-34%;
  pointer-events:none;
  background:linear-gradient(
    100deg,
    transparent,
    rgba(255,255,255,.75),
    transparent
  );
  transform:skewX(-18deg);
  animation:jakAchievementGoldSweep 4.2s ease-in-out infinite;
}

.achievementChoiceIcon.achievementTone-emerald{
  color:#126842 !important;
  border-color:#58cf99 !important;
  background:#d9f9e9 !important;
}
.achievementChoiceIcon.achievementTone-pink{
  color:#8d245a !important;
  border-color:#f579b5 !important;
  background:#ffe0ef !important;
}
.achievementChoiceIcon.achievementTone-gold{
  color:#6c4700 !important;
  border-color:#e3ad22 !important;
  background:#ffe792 !important;
}
.achievementChoiceIcon.achievementTone-cyan{
  color:#086278 !important;
  border-color:#55cbe6 !important;
  background:#d7f7ff !important;
}
.achievementChoiceIcon.achievementTone-violet{
  color:#58339b !important;
  border-color:#ad8be9 !important;
  background:#e9ddff !important;
}
.achievementChoiceIcon.achievementTone-orange{
  color:#864400 !important;
  border-color:#ef9c49 !important;
  background:#ffe0bd !important;
}

@keyframes jakAchievementGoldSweep{
  0%,66%{left:-34%;opacity:0;}
  72%{opacity:.8;}
  100%{left:125%;opacity:0;}
}

@media (prefers-reduced-motion:reduce){
  .achievementBadge.achievementTone-gold.achievementFeatured::before{
    animation:none !important;
  }
}


/* =====================================================
   JAKSKY ACCOUNT SECURITY CENTER V1
===================================================== */

.authTrustBox{
  margin:12px 0 2px;
  padding:10px 11px;
  border:1px solid rgba(41,181,115,.16);
  border-radius:14px;
  background:linear-gradient(135deg,rgba(233,255,245,.9),rgba(247,244,255,.9));
  color:#42524a;
  font-size:10px;
  line-height:1.5;
}
.authTrustBox b{color:#176c48;}
.authTrustBox button{display:block;margin-top:7px;padding:0;border:0;background:none;color:#c82d7c;font:inherit;font-weight:900;cursor:pointer;}
.securityOverlay{position:fixed;inset:0;z-index:2147483644;display:flex;align-items:center;justify-content:center;padding:18px;box-sizing:border-box;background:rgba(8,6,8,.72);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);overflow:auto;}
.securityCard{position:relative;width:min(420px,100%);max-height:calc(100dvh - 36px);overflow:auto;box-sizing:border-box;padding:24px 20px 20px;border:1px solid rgba(255,63,151,.18);border-radius:27px;background:linear-gradient(155deg,#171216,#0f0d10 62%,#15101a);color:#fff;box-shadow:0 30px 90px rgba(0,0,0,.48);}
.securityClose{position:absolute;top:14px;right:14px;width:42px;height:42px;border:0;border-radius:50%;color:#ff4ba1;background:rgba(255,76,164,.09);font-size:20px;cursor:pointer;}
.securityIcon{width:55px;height:55px;margin:1px auto 10px;display:grid;place-items:center;border-radius:18px;background:linear-gradient(135deg,#ff3497,#8f52ff);font-size:25px;box-shadow:0 10px 30px rgba(255,52,151,.18);}
.securityCard h2{text-align:center;margin:0 0 7px;}
.securityLead{text-align:center;color:#a99ea5;font-size:12px;line-height:1.55;margin:0 8px 17px;}
.securityFacts{display:grid;gap:8px;margin-bottom:13px;}
.securityFacts>div{display:flex;gap:9px;padding:9px 10px;border:1px solid rgba(255,255,255,.055);border-radius:13px;background:rgba(255,255,255,.025);}
.securityFacts>div>span{color:#55dc9c;font-weight:950;}
.securityFacts p{margin:0;display:grid;gap:2px;font-size:11px;}
.securityFacts small{color:#8f858b;line-height:1.42;font-size:9px;}
.securityStatus{display:grid;gap:2px;margin:12px 0;padding:10px 11px;border:1px solid rgba(255,179,65,.14);border-radius:13px;background:rgba(255,174,51,.055);color:#f0c982;font-size:10px;}
.securityStatus span{color:#94878e;font-size:9px;}
.securityStatusOk{border-color:rgba(71,216,145,.16);background:rgba(71,216,145,.06);color:#76e2ae;}
.securityPrimary{width:100%;min-height:47px;margin-top:8px;border:0;border-radius:15px;color:#fff;background:linear-gradient(110deg,#ff3296,#994eff);font:inherit;font-weight:900;cursor:pointer;}
.securityCodeReveal{margin-top:13px;padding:12px;border:1px solid rgba(255,208,83,.18);border-radius:14px;background:rgba(255,204,62,.06);text-align:center;}
.securityCodeReveal strong{display:block;margin:8px 0;color:#ffd56b;font-size:14px;letter-spacing:.04em;overflow-wrap:anywhere;user-select:all;}
.securityCodeReveal p,.securityCodeReveal small{color:#9c9096;font-size:9px;line-height:1.45;}
.securityField{display:grid;gap:6px;margin:11px 0;color:#c9bec4;font-size:10px;font-weight:800;}
.securityField input{width:100%;box-sizing:border-box;min-height:46px;padding:0 13px;border:1px solid rgba(255,82,161,.18);border-radius:13px;background:#211b20;color:#fff;font:inherit;font-size:16px;outline:none;}
.securityField input:focus{border-color:#ff459e;box-shadow:0 0 0 3px rgba(255,69,158,.08);}
.securityMiniStatus{margin-top:10px;min-height:18px;text-align:center;color:#ff9ac8;font-size:10px;}
.securityMiniStatusOk{color:#6be2aa;}

/* JAKSKY REGISTRATION DEVICE LIMIT V1 */
.registrationLimitNote{
  margin:8px 2px 2px;
  padding:8px 10px;
  border:1px solid rgba(255,61,151,.12);
  border-radius:11px;
  background:rgba(255,61,151,.045);
  color:#8c6c7d;
  font-size:10px;
  line-height:1.45;
  text-align:center;
}


/* =====================================================
   JAKSKY TRUST CENTER V1
===================================================== */

.authTrustPanel{
  margin-top:12px;
  padding:11px;
  border:1px solid rgba(255,57,150,.14);
  border-radius:15px;
  background:
    linear-gradient(
      145deg,
      rgba(255,58,151,.055),
      rgba(139,75,255,.045)
    );
}

.authTrustPanelHead{
  display:flex;
  align-items:center;
  gap:9px;
}

.authTrustPanelHead>span{
  width:35px;
  height:35px;
  display:grid;
  place-items:center;
  flex:0 0 35px;
  border-radius:12px;
  background:
    linear-gradient(135deg,#ff3899,#8f51ff);
  color:#fff;
  font-size:17px;
  box-shadow:
    0 6px 17px rgba(255,56,153,.16);
}

.authTrustPanelHead>div{
  min-width:0;
  display:grid;
  gap:2px;
}

.authTrustPanelHead b{
  font-size:11px;
  color:#342b30;
}

.authTrustPanelHead small{
  color:#8e7b85;
  font-size:9px;
  line-height:1.35;
}

.authTrustMiniFacts{
  display:flex;
  flex-wrap:wrap;
  gap:5px;
  margin-top:9px;
}

.authTrustMiniFacts span{
  padding:4px 7px;
  border-radius:999px;
  background:rgba(27,174,100,.075);
  color:#287a50;
  font-size:8px;
  font-weight:850;
}

.authTrustActions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:7px;
  margin-top:9px;
}

.authTrustActions button{
  min-height:35px;
  padding:7px 8px;
  border:1px solid rgba(255,66,155,.14);
  border-radius:11px;
  background:#fff;
  color:#bd2f75;
  font:inherit;
  font-size:9px;
  font-weight:850;
  cursor:pointer;
}

.trustCenterCard{
  width:min(440px,100%);
}

.trustCenterFacts{
  display:grid;
  gap:8px;
  margin:14px 0;
}

.trustCenterFact{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:10px;
  border:1px solid rgba(255,255,255,.055);
  border-radius:14px;
  background:rgba(255,255,255,.026);
}

.trustFactIcon{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  flex:0 0 34px;
  border-radius:11px;
  background:rgba(255,78,162,.08);
  font-size:16px;
}

.trustCenterFact>div{
  min-width:0;
  display:grid;
  gap:3px;
}

.trustCenterFact b{
  color:#f7eef3;
  font-size:10px;
}

.trustCenterFact small{
  color:#9d9198;
  font-size:9px;
  line-height:1.5;
}

.trustCenterFactInfo{
  border-color:rgba(97,175,255,.10);
  background:rgba(97,175,255,.035);
}

.trustCenterAdvice{
  display:grid;
  gap:4px;
  padding:10px 11px;
  margin-top:11px;
  border:1px solid rgba(255,194,74,.13);
  border-radius:13px;
  background:rgba(255,194,74,.045);
}

.trustCenterAdvice b{
  color:#f3cf82;
  font-size:10px;
}

.trustCenterAdvice span{
  color:#a3979e;
  font-size:9px;
  line-height:1.5;
}

.trustCenterHonesty{
  margin:11px 2px 3px;
  color:#82777e;
  font-size:8.5px;
  line-height:1.5;
  text-align:center;
}

@media(max-width:390px){
  .authTrustActions{
    grid-template-columns:1fr;
  }
}


/* =====================================================
   JAKSKY PUBLIC TRUST PANEL V1
===================================================== */

.authTrustBox{
  display:none !important;
}

.publicTrustPanel{
  margin:12px 0 4px;
  padding:12px;
  border:1px solid rgba(31,171,108,.20);
  border-radius:16px;
  background:
    linear-gradient(
      145deg,
      rgba(239,255,248,.96),
      rgba(250,247,255,.96)
    );
  text-align:left;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),
    0 5px 18px rgba(33,92,67,.045);
}

.publicTrustHead{
  display:flex;
  align-items:flex-start;
  gap:9px;
}

.publicTrustShield{
  flex:0 0 auto;
  width:32px;
  height:32px;
  display:grid;
  place-items:center;
  border-radius:11px;
  background:#dff8ec;
  box-shadow:
    inset 0 0 0 1px rgba(32,168,107,.12);
  font-size:15px;
}

.publicTrustHead div{
  min-width:0;
  display:grid;
  gap:2px;
}

.publicTrustHead b{
  color:#245a43;
  font-size:11px;
  line-height:1.3;
}

.publicTrustHead small{
  color:#718078;
  font-size:9px;
  line-height:1.38;
}

.publicTrustQuickFacts{
  display:grid;
  gap:4px;
  margin-top:10px;
  color:#416b58;
  font-size:9px;
  font-weight:750;
  line-height:1.35;
}

.publicTrustActions{
  display:flex;
  gap:7px;
  margin-top:10px;
}

.publicTrustActions button{
  flex:1;
  min-height:34px;
  padding:6px 8px;
  border:1px solid rgba(34,156,101,.15);
  border-radius:11px;
  background:#fff;
  color:#317157;
  font:inherit;
  font-size:9px;
  font-weight:900;
  cursor:pointer;
  touch-action:manipulation;
}

.publicTrustActions button:first-child{
  color:#fff;
  border-color:transparent;
  background:
    linear-gradient(110deg,#24ad75,#3888c9);
}

.publicTrustCard{
  width:min(440px,100%) !important;
}

.publicTrustVerified{
  width:max-content;
  max-width:100%;
  margin:0 auto 8px;
  padding:5px 9px;
  border:1px solid rgba(85,220,156,.16);
  border-radius:999px;
  background:rgba(85,220,156,.07);
  color:#70dca9;
  font-size:8px;
  font-weight:950;
  letter-spacing:.10em;
}

.publicTrustDetailList{
  display:grid;
  gap:8px;
  margin:15px 0 12px;
}

.publicTrustDetailList article{
  display:flex;
  gap:10px;
  padding:10px;
  border:1px solid rgba(255,255,255,.055);
  border-radius:14px;
  background:rgba(255,255,255,.025);
}

.publicTrustDetailList article>span{
  flex:0 0 auto;
  width:31px;
  height:31px;
  display:grid;
  place-items:center;
  border-radius:10px;
  background:rgba(85,220,156,.07);
  font-size:15px;
}

.publicTrustDetailList article>div{
  min-width:0;
}

.publicTrustDetailList b{
  display:block;
  margin-bottom:3px;
  color:#f2edf0;
  font-size:10px;
}

.publicTrustDetailList p{
  margin:0;
  color:#968b91;
  font-size:9px;
  line-height:1.48;
}

.publicTrustHonestNote{
  margin:12px 0 5px;
  padding:10px 11px;
  border:1px solid rgba(255,196,83,.13);
  border-radius:13px;
  background:rgba(255,190,65,.045);
}

.publicTrustHonestNote b{
  color:#e3bd70;
  font-size:9px;
}

.publicTrustHonestNote p{
  margin:4px 0 0;
  color:#91868c;
  font-size:8.5px;
  line-height:1.5;
}

@media (max-width:360px){
  .publicTrustActions{
    flex-direction:column;
  }
}


/* =====================================================
   JAKSKY CUSTOM CONFIRM MODAL V1
===================================================== */

.jakConfirmOverlay{
  position:fixed;
  inset:0;
  z-index:2147483647;
  display:grid;
  place-items:center;
  padding:18px;
  box-sizing:border-box;
  background:rgba(10,7,10,.72);
  backdrop-filter:blur(13px);
  -webkit-backdrop-filter:blur(13px);
  animation:jakConfirmFade .16s ease both;
}

.jakConfirmCard{
  width:min(390px,100%);
  box-sizing:border-box;
  padding:23px 20px 19px;
  border:1px solid rgba(255,76,164,.18);
  border-radius:26px;
  background:
    linear-gradient(
      155deg,
      #191317,
      #0f0d10 64%,
      #18101c
    );
  color:#fff;
  text-align:center;
  box-shadow:
    0 28px 80px rgba(0,0,0,.52),
    inset 0 1px 0 rgba(255,255,255,.045);
  animation:jakConfirmPop .18s ease both;
}

.jakConfirmIcon{
  width:52px;
  height:52px;
  margin:0 auto 13px;
  display:grid;
  place-items:center;
  border-radius:17px;
  background:
    linear-gradient(
      135deg,
      rgba(255,47,151,.20),
      rgba(145,72,255,.18)
    );
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.055),
    0 10px 30px rgba(255,47,151,.08);
  font-size:23px;
}

.jakConfirmCard h3{
  margin:0;
  color:#fff;
  font-size:17px;
  line-height:1.25;
}

.jakConfirmCard p{
  margin:9px 0 18px;
  color:#aaa0a6;
  font-size:11px;
  line-height:1.55;
}

.jakConfirmActions{
  display:grid;
  grid-template-columns:1fr 1.25fr;
  gap:9px;
}

.jakConfirmActions button{
  min-height:45px;
  padding:9px 12px;
  border-radius:14px;
  font:inherit;
  font-size:10px;
  font-weight:900;
  cursor:pointer;
  touch-action:manipulation;
}

.jakConfirmCancel{
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.045);
  color:#c7bdc2;
}

.jakConfirmOk{
  border:0;
  color:#fff;
  background:
    linear-gradient(
      110deg,
      #ff3296,
      #a04cff
    );
  box-shadow:
    0 10px 28px rgba(255,50,150,.19);
}

.jakConfirmTone-security .jakConfirmIcon{
  background:
    linear-gradient(
      135deg,
      rgba(53,210,143,.18),
      rgba(68,131,255,.18)
    );
}

.jakConfirmTone-security .jakConfirmOk{
  background:
    linear-gradient(
      110deg,
      #28ad78,
      #477ee9
    );
  box-shadow:
    0 10px 28px rgba(40,173,120,.17);
}

.jakConfirmActions button:active{
  transform:scale(.975);
}

@keyframes jakConfirmFade{
  from{opacity:0}
  to{opacity:1}
}

@keyframes jakConfirmPop{
  from{
    opacity:0;
    transform:translateY(8px) scale(.975);
  }
  to{
    opacity:1;
    transform:none;
  }
}

@media(max-width:360px){
  .jakConfirmActions{
    grid-template-columns:1fr;
  }

  .jakConfirmOk{
    order:-1;
  }
}