/* ===== RESET BIAR GAK TABRAKAN ===== */
*{
  box-sizing:border-box;
}

body{
  margin:0;
}

/* ===== UPLOAD AREA ===== */
#uploadBox{
  margin-bottom:20px;
  padding:20px;
}

#uploadBox button{
  width:100%;
  margin-top:15px;
  margin-bottom:20px;
  position:relative;
}

/* ===== HISTORY ===== */
#historyBox{
  margin-top:10px;
  padding:15px;
}

/* CARD */
#history .item{
  display:flex;
  gap:12px;
  padding:12px;
  margin-bottom:15px;
  background:#fff;
  border-radius:18px;
  box-shadow:0 6px 18px rgba(0,0,0,0.08);
}

/* THUMBNAIL */
#history img{
  width:90px;
  height:120px;
  object-fit:cover;
  border-radius:12px;
}

/* TEXT AREA */
#history .content{
  flex:1;
  overflow:hidden;
}

/* TITLE */
#history h3{
  margin:0;
  font-size:16px;
}

/* ICON BAR */
#history .stats{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  font-size:12px;
  margin:6px 0;
}

/* KOMENTAR BOX */
.commentBox{
  background:#f8f8f8;
  padding:10px;
  border-radius:12px;
  margin-top:8px;
}

/* USER COMMENT */
.commentUser{
  font-size:13px;
  margin-bottom:6px;
}

/* ADMIN REPLY */
.adminReply{
  background:#ffe0eb;
  padding:8px;
  border-radius:10px;
  font-size:12px;
  margin-top:5px;
}

/* INPUT ADMIN */
.adminReplyBox{
  display:flex;
  gap:6px;
  margin-top:8px;
}

.adminReplyBox input{
  flex:1;
  padding:8px;
  border-radius:10px;
  border:1px solid #ddd;
}

.adminReplyBox button{
  padding:8px 12px;
  border:none;
  border-radius:10px;
  background:#ff3f9d;
  color:white;
}

/* BUTTON DELETE */
.deleteBtn{
  margin-top:6px;
  padding:6px 10px;
  border:none;
  border-radius:10px;
  background:#ff3f9d;
  color:white;
}

/* HAPUS DOUBLE ADMIN */
.verifyBadge + .verifyBadge{
  display:none;
}


/* ===== FINAL CLEAN UI FIX ===== */
body{
  margin:0!important;
  font-family:Arial,sans-serif!important;
  background:linear-gradient(135deg,#ffe0ef,#ffc9df)!important;
  color:#222!important;
}

/* ===== ADMIN PANEL ===== */
.topbar{
  padding:10px 14px!important;
  background:#fff!important;
  border-bottom:2px solid #ff7ab8!important;
}

.wrap{
  max-width:760px!important;
  margin:28px auto!important;
  padding:0 14px 90px!important;
}

#uploadBox,
#historyBox{
  background:#fff!important;
  border-radius:24px!important;
  padding:26px!important;
  margin:24px 0!important;
  box-shadow:0 18px 45px rgba(255,63,157,.20)!important;
}

#uploadBox input,
#uploadBox textarea,
#uploadBox select{
  width:100%!important;
  padding:13px!important;
  margin:9px 0 15px!important;
  border:1px solid #ffc3dc!important;
  border-radius:14px!important;
  outline:none!important;
}

#uploadBox button{
  width:100%!important;
  margin-top:18px!important;
  padding:13px!important;
  border:0!important;
  border-radius:16px!important;
  background:#ff3f9d!important;
  color:white!important;
  font-weight:900!important;
}

#history{
  display:flex!important;
  flex-direction:column!important;
  gap:18px!important;
}

#history .item{
  display:flex !important;
  align-items:center !important;
  gap:14px !important;
  background:#fff8fc !important;
  border:1px solid #ffd3e7 !important;
  border-radius:22px !important;
  padding:12px !important;
}

#history .item img{
  width:90px !important;
  height:90px !important;
  object-fit:cover !important;
  border-radius:14px !important;
  flex-shrink:0;
}
  #history .item > div{
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:6px;
  }

#history .item button{
  padding:8px 14px !important;
  font-size:13px !important;
  border-radius:12px !important;
}

#history h3{
  margin:0 0 6px!important;
  font-size:18px!important;
}

#history .meta{
  display:flex!important;
  gap:7px!important;
  flex-wrap:wrap!important;
  margin:8px 0 12px!important;
  font-size:13px!important;
}

.comment,
.adminCommentBox{
  background:#fff!important;
  border-left:4px solid #ff3f9d!important;
  border-radius:14px!important;
  padding:10px!important;
  margin:8px 0!important;
}

.adminReplyShow{
  background:#ffe3f1!important;
  border-left:4px solid #ff3f9d!important;
  border-radius:14px!important;
  padding:10px!important;
  margin:8px 0!important;
}

.adminReplyBox{
  display:flex!important;
  gap:8px!important;
  margin-top:10px!important;
}

.adminReplyBox input{
  flex:1!important;
  padding:11px!important;
  border-radius:13px!important;
  border:1px solid #ffc3dc!important;
}

.adminReplyBox button,
#history button{
  border:0!important;
  border-radius:999px!important;
  background:#ff3f9d!important;
  color:white!important;
  padding:9px 13px!important;
  font-weight:900!important;
}

/* ===== USER MODAL ===== */
#modal{
  position:fixed!important;
  inset:0!important;
  background:rgba(0,0,0,.62)!important;
  z-index:9999!important;
  overflow:auto!important;
  padding:18px!important;
}

.modalBox{
  max-width:640px!important;
  margin:22px auto!important;
  background:#fff!important;
  border-radius:24px!important;
  padding:20px!important;
  box-shadow:0 20px 50px rgba(0,0,0,.35)!important;
  font-family:Arial,sans-serif!important;
}

.modalBox > button:first-child{
  width:38px!important;
  height:38px!important;
  border:0!important;
  border-radius:14px!important;
  background:#ff3f9d!important;
  color:white!important;
  font-size:18px!important;
}

.lockBox{
  background:#fff0f7!important;
  border-radius:18px!important;
  padding:14px!important;
  margin:10px 0 16px!important;
}

.lockBox input,
.commentInput{
  width:100%!important;
  padding:13px!important;
  margin:8px 0!important;
  border:1px solid #ffc3dc!important;
  border-radius:14px!important;
  outline:none!important;
}

.btns{
  display:flex!important;
  gap:10px!important;
  flex-wrap:wrap!important;
  margin:14px 0!important;
}

.btns button,
.rate button,
button[onclick="sendComment()"],
#downloadBtn{
  border:0!important;
  border-radius:999px!important;
  padding:11px 16px!important;
  font-weight:900!important;
  background:#ff3f9d!important;
  color:white!important;
  box-shadow:0 8px 20px rgba(255,63,157,.25)!important;
}

.likeActive{background:#ef4444!important;color:#fff!important}
.unlikeActive{background:#6b7280!important;color:#fff!important}
.likeNormal,.unlikeNormal{background:#e5e7eb!important;color:#333!important}
#downloadBtn{background:#38bdf8!important;color:#fff!important}

.rate{
  display:flex!important;
  gap:8px!important;
  flex-wrap:wrap!important;
  align-items:center!important;
  margin:12px 0!important;
}

.rate button{
  width:44px!important;
  height:44px!important;
  padding:0!important;
}

.verifyBadge{
  display:inline-flex!important;
  padding:3px 7px!important;
  border-radius:999px!important;
  background:#1d9bf0!important;
  color:white!important;
  font-size:10px!important;
  font-weight:900!important;
  margin-left:5px!important;
}

.verifyBadge + .verifyBadge{
  display:none!important;
}

@media(max-width:600px){
  #history .item{
    grid-template-columns:1fr!important;
  }

  #history .item img{
    width:100%!important;
    height:210px!important;
  }

  .adminReplyBox{
    flex-direction:column!important;
  }
}

/* ===== FIX TOTAL UI FINAL ===== */

/* GRID USER */
.grid{
  display:grid!important;
  grid-template-columns:repeat(2,1fr)!important;
  gap:14px!important;
}

/* CARD */
.card{
  background:white!important;
  border-radius:18px!important;
  overflow:hidden!important;
  box-shadow:0 10px 25px rgba(255,0,120,.15)!important;
}

.card img{
  width:100%!important;
  height:160px!important;
  object-fit:cover!important;
}

/* MODAL FIX */
.modal{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
}

.modalBox{
  width:95%!important;
  max-width:600px!important;
  max-height:90vh!important;
  overflow:auto!important;
  border-radius:20px!important;
  padding:16px!important;
  background:white!important;
}

/* BUTTON */
button{
  border:none!important;
  border-radius:999px!important;
  padding:8px 14px!important;
  font-weight:bold!important;
}

/* LIKE BUTTON */
.likeActive{
  background:#ff2e8a!important;
  color:white!important;
}

.unlikeActive{
  background:#ffb020!important;
  color:white!important;
}

/* DOWNLOAD */
.downloadBtn{
  background:#2ea8ff!important;
  color:white!important;
}

/* COMMENT BOX */
.comment{
  background:#fff5fb!important;
  padding:10px!important;
  border-radius:12px!important;
  margin-bottom:10px!important;
}

/* ADMIN REPLY */
.adminReplyShow{
  background:#ffe3f3!important;
  border-left:none!important;;
  padding:8px!important;
  border-radius:10px!important;
  margin-left:0!important;
  margin-top:6px!important;
}

/* ADMIN BADGE */
.verifyBadge{
  background:#2ea8ff!important;
  color:white!important;
  font-size:10px!important;
  padding:3px 6px!important;
  border-radius:999px!important;
  margin-left:5px!important;
}

/* HAPUS BUTTON */
.deleteMineBtn{
  background:#ff4d4d!important;
  color:white!important;
  font-size:11px!important;
}

/* ADMIN PANEL FIX */
.adminCard{
  display:flex!important;
  gap:10px!important;
  align-items:flex-start!important;
}

.adminCard img{
  width:80px!important;
  height:80px!important;
  object-fit:cover!important;
  border-radius:12px!important;
}


/* ===== OWNER PANEL RAPI FINAL ===== */
.ownerWrap,
.owner-container,
#ownerBox,
.ownerBox{
  max-width:760px !important;
  margin:28px auto !important;
  padding:0 14px !important;
}

body:has(input[placeholder="Owner key 1"]) h2,
body:has(input[placeholder="Owner key 1"]) h3{
  margin:0 0 16px !important;
  font-size:24px !important;
}

body:has(input[placeholder="Owner key 1"]) section,
body:has(input[placeholder="Owner key 1"]) .card,
body:has(input[placeholder="Owner key 1"]) form,
body:has(input[placeholder="Owner key 1"]) div:not(.topbar){
  box-sizing:border-box !important;
}

body:has(input[placeholder="Owner key 1"]) input,
body:has(input[placeholder="Owner key 1"]) select{
  width:100% !important;
  padding:13px !important;
  margin:8px 0 12px !important;
  border:1px solid #ffc3dc !important;
  border-radius:14px !important;
  outline:none !important;
}

body:has(input[placeholder="Owner key 1"]) button{
  width:100% !important;
  margin-top:8px !important;
  padding:13px !important;
  border:0 !important;
  border-radius:16px !important;
  background:#ff3f9d !important;
  color:white !important;
  font-weight:900 !important;
  box-shadow:0 10px 24px rgba(255,63,157,.25) !important;
}

body:has(input[placeholder="Owner key 1"]) h2,
body:has(input[placeholder="Owner key 1"]) h3,
body:has(input[placeholder="Owner key 1"]) input,
body:has(input[placeholder="Owner key 1"]) select,
body:has(input[placeholder="Owner key 1"]) button{
  display:block !important;
}

body:has(input[placeholder="Owner key 1"]) h2:first-of-type{
  background:white !important;
  border-radius:24px 24px 0 0 !important;
  padding:24px 24px 0 !important;
  max-width:760px !important;
  margin:28px auto 0 !important;
}

body:has(input[placeholder="Owner key 1"]) h2:first-of-type ~ input,
body:has(input[placeholder="Owner key 1"]) h2:first-of-type ~ button{
  max-width:760px !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

body:has(input[placeholder="Nama akun"]) h2:nth-of-type(2),
body:has(input[placeholder="Nama akun"]) h3{
  background:white !important;
  border-radius:24px 24px 0 0 !important;
  padding:24px 24px 0 !important;
  max-width:760px !important;
  margin:28px auto 0 !important;
}

body:has(input[placeholder="Nama akun"]) input,
body:has(input[placeholder="Nama akun"]) select,
body:has(input[placeholder="Nama akun"]) button{
  max-width:760px !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

body:has(input[placeholder="Owner key 1"])::before{
  content:"";
  display:block;
  height:0;
}

@media(min-width:700px){
  body:has(input[placeholder="Owner key 1"]) input,
  body:has(input[placeholder="Owner key 1"]) select,
  body:has(input[placeholder="Owner key 1"]) button{
    max-width:620px !important;
  }
}

.likeNormal,.unlikeNormal{
  background:#e5e7eb!important;
  color:#333!important;
}
.likeActive{
  background:#ef4444!important;
  color:white!important;
}
.unlikeActive{
  background:#6b7280!important;
  color:white!important;
}

/* ===== FIX THUMBNAIL RAPI ===== */
.card img,
.thumbnail,
.video-thumb {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: 14px;
  display: block;
}

/* biar card gak aneh */
.card {
  overflow: hidden;
}

/* GRID 2 KOLOM RAPI */
.grid,
.container,
.video-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

/* RESPONSIVE */
@media(max-width:600px){
  .card img{
    height: 150px;
  }
}

/* OPTIONAL BIAR LEBIH PRO */
.card img{
  aspect-ratio: 16/9;
  height: auto;
}


/* ===== FIX GAMBAR BIAR PAS KOTAK THUMBNAIL ===== */
.card{
  display:flex !important;
  flex-direction:column !important;
  min-height:260px !important;
}

.card .thumb{
  height:170px !important;
  min-height:170px !important;
  max-height:170px !important;
  overflow:hidden !important;
  background:#ffd6e8 !important;
}

.card .thumb img,
.card img{
  width:100% !important;
  height:100% !important;
  min-height:170px !important;
  object-fit:cover !important;
  object-position:center !important;
  display:block !important;
  border-radius:0 !important;
}

.card .body{
  flex:1 !important;
  background:#fff !important;
  padding:10px !important;
}

@media(max-width:600px){
  .card .thumb{
    height:155px !important;
    min-height:155px !important;
    max-height:155px !important;
  }

  .card .thumb img,
  .card img{
    min-height:155px !important;
  }
}

/* ===== THUMBNAIL FINAL: CARD KAYAK FOTO 2, GAMBAR TETAP PAS ===== */
.card .thumb{
  height:150px !important;
  min-height:150px !important;
  max-height:150px !important;
  background:#ffe1ef !important;
  overflow:hidden !important;
}

.card .thumb img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center 35% !important;
}

/* kalau gambar landscape seperti pantai biar lebih enak */
.card:first-child .thumb img{
  object-position:center center !important;
}

/* body card tetap rapi */
.card .body{
  min-height:72px !important;
  padding:10px !important;
}

/* ===== FIX CARD + THUMBNAIL FINAL ===== */
#list{
  display:grid!important;
  grid-template-columns:repeat(2,1fr)!important;
  gap:14px!important;
  padding:10px!important;
  align-items:start!important;
}

.card{
  height:auto!important;
  min-height:0!important;
  background:white!important;
  border-radius:16px!important;
  overflow:hidden!important;
}

.card .thumb{
  width:100%!important;
  height:145px!important;
  background:#ffe1ef!important;
  overflow:hidden!important;
  border-radius:16px 16px 0 0!important;
}

.card .thumb img{
  width:100%!important;
  height:145px!important;
  object-fit:cover!important;
  object-position:center!important;
  display:block!important;
  border-radius:0!important;
}

.card .body{
  background:white!important;
  min-height:75px!important;
  padding:10px!important;
}

.card .meta{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:6px!important;
  margin-top:8px!important;
}

.card .meta span{
  font-size:11px!important;
  padding:5px 7px!important;
}

@media(max-width:600px){
  .card .thumb,
  .card .thumb img{
    height:135px!important;
  }
}

/* ===== THUMBNAIL FINAL FORCE ===== */
#list .card{
  height:auto!important;
  min-height:0!important;
}

#list .card .thumb{
  width:100%!important;
  height:145px!important;
  overflow:hidden!important;
  background:#ffe1ef!important;
}

#list .card .thumb img{
  width:100%!important;
  height:145px!important;
  object-fit:cover!important;
  object-position:center!important;
  display:block!important;
}

#list .card .body{
  background:#fff!important;
  padding:10px!important;
  min-height:68px!important;
}

/* ===== GRID FINAL: 2 ATAS 2 BAWAH, KE-5 SCROLL ===== */
html,body{
  min-height:100%!important;
  height:auto!important;
  overflow-y:auto!important;
}

#list{
  display:grid!important;
  grid-template-columns:repeat(2, minmax(0,1fr))!important;
  gap:14px!important;
  padding:10px!important;
  align-items:stretch!important;
}

#list .card{
  width:100%!important;
  height:235px!important;
  min-height:235px!important;
  max-height:235px!important;
  display:flex!important;
  flex-direction:column!important;
  overflow:hidden!important;
  border-radius:16px!important;
  background:white!important;
}

#list .card .thumb{
  width:100%!important;
  height:145px!important;
  min-height:145px!important;
  max-height:145px!important;
  overflow:hidden!important;
  background:#ffe1ef!important;
}

#list .card .thumb img{
  width:100%!important;
  height:145px!important;
  object-fit:cover!important;
  object-position:center!important;
  display:block!important;
}

#list .card .body{
  flex:1!important;
  min-height:90px!important;
  max-height:90px!important;
  padding:9px!important;
  background:white!important;
  overflow:hidden!important;
}

#list .card .meta{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:5px!important;
  margin-top:7px!important;
}

#list .card .meta span{
  font-size:10px!important;
  padding:4px 6px!important;
}

/* HP kecil tetap 2 kolom */
@media(max-width:600px){
  #list{
    grid-template-columns:repeat(2, minmax(0,1fr))!important;
    gap:10px!important;
    padding:8px!important;
  }

  #list .card{
    height:220px!important;
    min-height:220px!important;
    max-height:220px!important;
  }

  #list .card .thumb,
  #list .card .thumb img{
    height:135px!important;
    min-height:135px!important;
    max-height:135px!important;
  }

  #list .card .body{
    min-height:85px!important;
    max-height:85px!important;
  }
}

/* ===== CARD BESAR FINAL KAYAK SCREENSHOT ===== */
#list{
  display:grid!important;
  grid-template-columns:repeat(2, 1fr)!important;
  gap:14px!important;
  padding:14px!important;
  align-items:start!important;
}

#list .card{
  width:100%!important;
  height:315px!important;
  min-height:315px!important;
  max-height:315px!important;
  border-radius:18px!important;
  overflow:hidden!important;
  background:white!important;
  box-shadow:0 10px 28px rgba(255,63,157,.18)!important;
}

#list .card .thumb{
  height:230px!important;
  min-height:230px!important;
  max-height:230px!important;
  overflow:hidden!important;
  background:#ffe1ef!important;
}

#list .card .thumb img{
  width:100%!important;
  height:230px!important;
  object-fit:cover!important;
  object-position:center!important;
  display:block!important;
}

#list .card .body{
  height:85px!important;
  min-height:85px!important;
  max-height:85px!important;
  padding:10px!important;
  background:white!important;
  overflow:hidden!important;
}

#list .card .meta{
  display:flex!important;
  gap:6px!important;
  flex-wrap:wrap!important;
  margin-top:8px!important;
}

#list .card .meta span{
  font-size:11px!important;
  padding:4px 7px!important;
}

/* HP kecil tetap 2 kolom tapi card tinggi */
@media(max-width:600px){
  #list{
    gap:12px!important;
    padding:12px!important;
  }

  #list .card{
    height:295px!important;
    min-height:295px!important;
    max-height:295px!important;
  }

  #list .card .thumb,
  #list .card .thumb img{
    height:210px!important;
    min-height:210px!important;
    max-height:210px!important;
  }

  #list .card .body{
    height:85px!important;
  }
}

/* ===== RAPIKAN KIRI KANAN + FILTER TABS ===== */
body{
  overflow-x:hidden!important;
}

.userTop,
.topBar,
.searchWrap{
  width:100%!important;
  padding:12px 14px!important;
  box-sizing:border-box!important;
}

#search,
input[placeholder*="Cari"]{
  width:100%!important;
  box-sizing:border-box!important;
}

#filterTabs{
  display:flex!important;
  gap:8px!important;
  overflow-x:auto!important;
  padding:10px 2px 2px!important;
  margin:0!important;
  scrollbar-width:none!important;
}

#filterTabs::-webkit-scrollbar{
  display:none!important;
}

#filterTabs button{
  flex:0 0 auto!important;
  border:0!important;
  border-radius:999px!important;
  padding:9px 14px!important;
  background:#ff86c0!important;
  color:white!important;
  font-weight:900!important;
  box-shadow:0 8px 18px rgba(255,63,157,.25)!important;
}

#filterTabs button.active{
  background:#1d9bf0!important;
  transform:scale(1.04)!important;
}

#list{
  width:100%!important;
  max-width:100%!important;
  box-sizing:border-box!important;
  padding-left:14px!important;
  padding-right:14px!important;
  gap:14px!important;
}

#list .card{
  box-sizing:border-box!important;
}

#emptyFilter{
  grid-column:1 / -1!important;
  min-height:180px!important;
  display:none;
  align-items:center!important;
  justify-content:center!important;
  background:white!important;
  border-radius:18px!important;
  color:#ff3f9d!important;
  font-weight:900!important;
  box-shadow:0 10px 25px rgba(255,63,157,.15)!important;
}

#emptyFilter{
  display:none!important;
}

/* ===== ANIMASI CARD ===== */
.card{
  transition:transform .25s ease, box-shadow .25s ease;
}

.card:active{
  transform:scale(0.97);
}

.card:hover{
  transform:translateY(-3px);
  box-shadow:0 14px 30px rgba(0,0,0,.12);
}

/* ===== FAVORIT ANIMASI ===== */
.btnFav{
  transition:transform .2s ease, background .2s;
}

.btnFav:active{
  transform:scale(1.2);
}

/* ===== TAB ACTIVE LEBIH HIDUP ===== */
#filterTabs button.active{
  background:#1d9bf0!important;
  box-shadow:0 6px 14px rgba(29,155,240,.4)!important;
}

/* ===== SMOOTH HIDE FILTER ===== */
#list .card{
  transition:all .25s ease;
}

/* ===== SCROLL HALUS ===== */
html{
  scroll-behavior:smooth;
}


#filterTabs{
  display:flex!important;
  gap:8px!important;
  overflow-x:auto!important;
  padding:10px 2px!important;
}
#filterTabs button{
  flex:0 0 auto!important;
  border:0!important;
  border-radius:999px!important;
  padding:9px 14px!important;
  background:#ff86c0!important;
  color:white!important;
  font-weight:900!important;
}
#filterTabs button.active{
  background:#1d9bf0!important;
}
.btnFav{
  position:absolute!important;
  top:10px!important;
  left:10px!important;
  width:36px!important;
  height:36px!important;
  border-radius:50%!important;
  border:0!important;
  background:#fff!important;
  font-size:18px!important;
  z-index:5!important;
}
.thumb{
  position:relative!important;
}
#emptyFilter{
  display:none!important;
}

/* ===== TAB PREMIUM ===== */
#filterTabs{
  display:flex;
  gap:8px;
  overflow-x:auto;
  padding:10px 6px;
}

#filterTabs button{
  border:0;
  border-radius:999px;
  padding:10px 14px;
  font-weight:900;
  background:#ff86c0;
  color:white;
  transition:.2s;
  position:relative;
}

/* AKTIF = BIRU */
#filterTabs button.active{
  background:#1d9bf0;
  transform:scale(1.05);
  box-shadow:0 6px 14px rgba(29,155,240,.4);
}

/* GARIS BAWAH */
#filterTabs button.active::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-6px;
  transform:translateX(-50%);
  width:20px;
  height:4px;
  border-radius:99px;
  background:#1d9bf0;
}


/* ===== LOVE FAVORIT FIX ===== */
.btnFav{
  position:absolute;
  top:10px;
  left:10px;
  width:36px;
  height:36px;
  border-radius:50%;
  border:none;
  background:rgba(255,255,255,0.85);
  backdrop-filter:blur(6px);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  cursor:pointer;
  transition:all .2s ease;
  box-shadow:0 4px 10px rgba(0,0,0,.15);
}

/* hover / pencet */
.btnFav:active{
  transform:scale(1.2);
}

/* kondisi belum favorit */
.btnFav{
  color:#bbb;
}

/* kondisi sudah favorit */
.btnFav.active{
  color:#ff2d55;
  background:white;
  box-shadow:0 6px 14px rgba(255,45,85,.4);
}


/* ===== UPGRADE UI FAVORIT + CARD ===== */
.card{
  transition:transform .22s ease, box-shadow .22s ease!important;
}

.card:active{
  transform:scale(.97)!important;
}

.card:hover{
  transform:translateY(-3px)!important;
  box-shadow:0 16px 35px rgba(255,63,157,.22)!important;
}

.btnFav{
  position:absolute!important;
  top:10px!important;
  left:10px!important;
  width:38px!important;
  height:38px!important;
  border-radius:50%!important;
  border:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  font-size:19px!important;
  cursor:pointer!important;
  transition:all .18s ease!important;
  background:rgba(255,255,255,.72)!important;
  color:#aaa!important;
  backdrop-filter:blur(8px)!important;
  box-shadow:0 5px 14px rgba(0,0,0,.16)!important;
  z-index:9!important;
}

.btnFav.active{
  background:#fff!important;
  color:#ff2d55!important;
  box-shadow:0 8px 20px rgba(255,45,85,.45)!important;
}

.btnFav.pop{
  animation:favPop .35s ease!important;
}

@keyframes favPop{
  0%{transform:scale(1)}
  45%{transform:scale(1.45)}
  100%{transform:scale(1)}
}

.favBurst{
  position:absolute;
  top:12px;
  left:13px;
  pointer-events:none;
  font-size:18px;
  animation:burstUp .65s ease forwards;
  z-index:20;
}

@keyframes burstUp{
  0%{opacity:1;transform:translateY(0) scale(.8)}
  100%{opacity:0;transform:translateY(-38px) scale(1.6)}
}

/* ===== BALIKIN META ACTIONS RAPI ===== */
.card .body{
  background:#fff!important;
}

.card .meta{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:6px!important;
  margin-top:8px!important;
}

.card .meta span{
  background:white!important;
  border-radius:999px!important;
  padding:5px 7px!important;
  font-size:11px!important;
  box-shadow:0 4px 10px rgba(255,63,157,.15)!important;
}

.card .thumb,
.card .body{
  cursor:pointer!important;
}

.btnFav{
  cursor:pointer!important;
}

/* ===== TOAST NOTIF MODERN ===== */
.toast{
  position:fixed;
  bottom:25px;
  left:50%;
  transform:translateX(-50%) translateY(20px);
  background:#fff;
  color:#333;
  padding:12px 18px;
  border-radius:999px;
  font-size:13px;
  box-shadow:0 10px 25px rgba(0,0,0,.2);
  opacity:0;
  pointer-events:none;
  transition:all .3s ease;
  z-index:9999;
}

.toast.show{
  opacity:1;
  transform:translateX(-50%) translateY(0);
}

.toast.success{
  color:#ff2d55;
  font-weight:600;
}

/* ===== EXPIRED UI PREMIUM ===== */
.expiredBadge{
  position:absolute;
  top:10px;
  right:10px;
  background:#ef4444;
  color:white;
  font-size:11px;
  font-weight:900;
  padding:6px 10px;
  border-radius:999px;
  box-shadow:0 8px 18px rgba(239,68,68,.35);
  z-index:8;
}

.card.expiredCard{
  opacity:.75;
  filter:grayscale(.35);
}

.card.expiredCard .thumb::after{
  content:"EXPIRED";
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.45);
  color:white;
  font-weight:900;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  letter-spacing:1px;
}

.expTime{
  display:inline-flex;
  align-items:center;
  gap:4px;
  margin-left:6px;
  padding:4px 7px;
  border-radius:999px;
  background:#fff0f6;
  color:#ff3f9d;
  font-size:10px;
  font-weight:900;
  box-shadow:0 6px 14px #ff3f9d22;
}
.expTime.danger{
  background:#fee2e2;
  color:#ef4444;
}

.expText{
  display:inline-block;
  margin-top:6px;
  padding:5px 8px;
  border-radius:999px;
  background:#fff0f6;
  color:#ff3f9d;
  font-size:11px;
  font-weight:900;
}

.expText.expired{
  background:#fee2e2;
  color:#ef4444;
}

.expText{
  display:inline-block;
  margin:6px 0 0;
  padding:5px 9px;
  border-radius:999px;
  background:#fff0f6;
  color:#ff3f9d;
  font-size:11px;
  font-weight:900;
}
.expText.expired{
  background:#fee2e2;
  color:#ef4444;
}

.waJoin{
  position:fixed;
  bottom:20px;
  right:18px;
  background:linear-gradient(135deg,#25d366,#128c7e);
  color:white;
  padding:12px 16px;
  border-radius:999px;
  font-weight:900;
  box-shadow:0 10px 25px #0003;
  z-index:999;
  text-decoration:none;
  display:flex;
  align-items:center;
  gap:6px;
  animation:goyang 2s infinite;
}
.waJoin:hover{opacity:.9}

@keyframes goyang{
  0%{transform:translateY(0)}
  50%{transform:translateY(-5px)}
  100%{transform:translateY(0)}
}


/* WA BUTTON UPGRADE */
.waJoin{
  position:fixed;
  bottom:22px;
  right:20px;
  background:linear-gradient(135deg,#25d366,#128c7e);
  color:white;
  padding:14px 20px;
  border-radius:999px;
  font-weight:900;
  font-size:15px;
  box-shadow:0 12px 30px #0004;
  z-index:999;
  text-decoration:none;
  display:flex;
  align-items:center;
  gap:8px;
  animation:goyang 2s infinite;
}

/* icon gede */
.waJoin::before{
  content:"📢";
  font-size:18px;
}

/* hover effect */
.waJoin:hover{
  transform:scale(1.05);
  box-shadow:0 16px 40px #0005;
}

/* animasi */
@keyframes goyang{
  0%{transform:translateY(0)}
  50%{transform:translateY(-6px)}
  100%{transform:translateY(0)}
}

/* MOBILE biar lebih gede lagi */
@media(max-width:600px){
  .waJoin{
    font-size:16px;
    padding:16px 22px;
    bottom:18px;
    right:16px;
  }
}


/* WA BULAT */
.waJoin{
  position:fixed;
  bottom:22px;
  right:20px;
  width:60px;
  height:60px;
  background:#25d366;
  border-radius:50%;
  box-shadow:0 12px 30px #0004;
  z-index:999;
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  animation:goyang 2s infinite;
}

/* icon WA pake emoji */
.waJoin::before{
  content:"📱";
  font-size:28px;
}

/* animasi */
@keyframes goyang{
  0%{transform:translateY(0)}
  50%{transform:translateY(-6px)}
  100%{transform:translateY(0)}
}

/* efek klik */
.waJoin:active{
  transform:scale(0.9);
}


/* WA BULAT LOGO ASLI */
.waJoin{
  position:fixed;
  bottom:22px;
  right:20px;
  width:60px;
  height:60px;
  background:#25d366;
  border-radius:50%;
  box-shadow:0 12px 30px #0004;
  z-index:999;
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  animation:goyang 2s infinite;
}

/* logo WA putih */
.waJoin::before{
  content:"";
  width:28px;
  height:28px;
  background:url("https://upload.wikimedia.org/wikipedia/commons/6/6b/WhatsApp.svg") no-repeat center;
  background-size:contain;
  filter:brightness(0) invert(1);
}

/* animasi */
@keyframes goyang{
  0%{transform:translateY(0)}
  50%{transform:translateY(-6px)}
  100%{transform:translateY(0)}
}

.waJoin:active{
  transform:scale(0.9);
}
/* ===== COMMENT ACTIONS ===== */
.comment-actions{
  margin-top:6px;
  display:flex;
  gap:6px;
}

.comment-actions button{
  padding:5px 8px;
  border-radius:8px;
  background:#eee;
  color:#222;
  border:none;
  cursor:pointer;
}

.comment-actions button:hover{
  background:#ddd;
}

/* ===== BADGE ROLE ===== */
.badge-owner{
  background:gold;
  color:black;
  font-weight:bold;
  padding:3px 7px;
  border-radius:999px;
}

.badge-moderator{
  background:#2ea8ff;
  color:white;
  font-weight:bold;
  padding:3px 7px;
  border-radius:999px;
}

.badge-user{
  background:#ccc;
  color:black;
  padding:3px 7px;
  border-radius:999px;
}

/* ===== OWNER HIGHLIGHT ===== */
.comment.owner{
  background:#fff8dc;
  border-left:4px solid gold;
}
/* ===== AGE WARNING POPUP FINAL ===== */
.ageOverlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.72);
  backdrop-filter:blur(8px);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:99999;
  padding:18px;
}

.ageBox{
  position:relative;
  width:100%;
  max-width:390px;
  background:linear-gradient(180deg,#fff,#fff1f7);
  border:2px solid #ff5bad;
  border-radius:26px;
  padding:26px 24px 24px;
  text-align:center;
  box-shadow:0 25px 70px #0008;
  animation:agePop .28s ease;
}

.closeX{
  position:absolute;
  top:10px;
  right:14px;
  font-size:22px;
  font-weight:900;
  cursor:pointer;
  color:#999;
}

.closeX:hover{color:#ff2e8a}

.ageIcon{
  font-size:44px;
  margin-bottom:8px;
}

.ageBox h2{
  margin:5px 0 10px;
  color:#ff2e8a;
}

.ageBox p{
  font-size:14px;
  line-height:1.55;
  color:#333;
}

.ageWarn{
  background:#ffe0ef;
  border-radius:16px;
  padding:10px;
  margin:14px 0;
  font-weight:900;
  color:#d6005b;
}

.ageBox button{
  width:100%;
  padding:13px;
  border:0;
  border-radius:999px;
  margin-top:8px;
  font-weight:900;
}

.ageEnter{
  background:#ff2e8a;
  color:white;
}

.ageExit{
  background:#e5e7eb;
  color:#333;
}

@keyframes agePop{
  from{transform:scale(.85);opacity:0}
  to{transform:scale(1);opacity:1}
}
.ageImage{
  width:110px !important;
  height:110px !important;
  object-fit:cover !important;
  border-radius:50% !important;
  margin:10px auto !important;
  display:block !important;
  border:4px solid #ffe1ef;
  box-shadow:0 8px 25px rgba(255,46,138,.25);
}
.ageBox{
  position:relative;
  width:100%;
  max-width:360px;
  background:linear-gradient(180deg,#ffffff,#fff0f6);
  border-radius:26px;
  padding:24px 20px;
  text-align:center;
  box-shadow:0 20px 60px rgba(0,0,0,.35);
  animation: agePop .3s ease;
}
.commentBox{
  background:#f9f1f6;
  padding:14px;
  border-radius:18px;
}

.commentItem{
  margin-bottom:12px;
  background:rgba(255,255,255,.6);
  border-radius:12px;
  padding:10px;
}
.commentReply{
  margin-left:0!important;
  border-left:none!important;
  }
.commentName{
  font-weight:700;
  font-size:14px;
}

.commentText{
  font-size:14px;
  color:#444;
  margin:4px 0;
}

.replyBtn{
  background:#eee;
  border:0;
  padding:6px 12px;
  border-radius:999px;
  font-size:12px;
  cursor:pointer;
  transition:.2s; /* ⬅️ PINDAH KE SINI */
}

.replyBtn:hover{
  background:#ff2e8a;
  color:white;
}
}

/* ===== JAKSKY FREE WATCH GATE ===== */

#jakFreeGate{
  position:fixed;
  inset:0;
  z-index:999999;
  background:rgba(10,5,15,.88);
  backdrop-filter:blur(8px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
}

.jakFreeGateBox{
  width:min(92vw,420px);
  background:linear-gradient(
    145deg,
    #ffffff,
    #fff0f8
  );
  border-radius:28px;
  padding:28px 22px;
  text-align:center;
  box-shadow:0 25px 80px rgba(0,0,0,.35);
}

.jakFreeGateBrand{
  font-size:27px;
  font-weight:900;
  color:#ff3295;
  margin-bottom:16px;
}

.jakFreeGateBox h2{
  margin:0 0 8px;
}

.jakFreeGateBox p{
  color:#666;
  line-height:1.5;
}

.jakFreeGateVisual{
  height:130px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.jakFreeGatePulse{
  width:78px;
  height:78px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:30px;
  background:#ff3fa4;
  color:white;
  box-shadow:0 0 0 0 rgba(255,63,164,.4);
  animation:jakGatePulse 1.5s infinite;
}

@keyframes jakGatePulse{
  0%{
    transform:scale(.96);
    box-shadow:0 0 0 0 rgba(255,63,164,.5);
  }

  70%{
    transform:scale(1);
    box-shadow:0 0 0 24px rgba(255,63,164,0);
  }

  100%{
    transform:scale(.96);
    box-shadow:0 0 0 0 rgba(255,63,164,0);
  }
}

.jakFreeGateTimer{
  font-size:17px;
  margin-bottom:12px;
}

#jakGateSeconds{
  color:#ff3295;
  font-size:24px;
}

.jakFreeGateProgress{
  width:100%;
  height:9px;
  background:#eee;
  border-radius:999px;
  overflow:hidden;
  margin-bottom:15px;
}

#jakGateProgressBar{
  width:0;
  height:100%;
  background:linear-gradient(
    90deg,
    #ff3295,
    #8b48df
  );
  transition:width 1s linear;
}

.jakFreeGateBox small{
  color:#888;
}


/* ===== FREE GATE FULLSCREEN FIX ===== */

html.jakGateActive,
html.jakGateActive body{
  overflow:hidden !important;
  overscroll-behavior:none !important;
}

#jakFreeGate{
  position:fixed !important;
  inset:0 !important;

  width:100vw !important;
  height:100vh !important;
  height:100dvh !important;

  margin:0 !important;

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

  padding:20px !important;

  background:rgba(5,3,8,.94) !important;
  backdrop-filter:blur(12px) !important;

  z-index:2147483647 !important;

  box-sizing:border-box !important;
}

#jakFreeGate .jakFreeGateBox{
  position:relative !important;

  width:min(92vw,420px) !important;
  max-height:85dvh !important;

  margin:0 auto !important;

  overflow:auto !important;

  border-radius:26px !important;
  padding:28px 22px !important;

  background:
    linear-gradient(
      145deg,
      #181318,
      #241320
    ) !important;

  color:#fff !important;

  box-shadow:
    0 24px 80px rgba(0,0,0,.65) !important;
}

#jakFreeGate .jakFreeGateBox h2{
  color:#fff !important;
}

#jakFreeGate .jakFreeGateBox p,
#jakFreeGate .jakFreeGateBox small{
  color:#cfc7cc !important;
}


/* ===== COMMENT PROFILE AVATAR ===== */

.commentProfileTap{
  display:inline-flex;
  align-items:center;
  gap:7px;
  cursor:pointer;
  vertical-align:middle;
}

.commentAvatar{
  width:32px;
  height:32px;
  border-radius:50%;
  object-fit:cover;
  flex:0 0 32px;
  background:#2b2228;
  border:2px solid rgba(255,63,164,.45);
}

.replyComment .commentAvatar{
  width:27px;
  height:27px;
  flex-basis:27px;
}

.commentUserName{
  cursor:pointer;
}


.publicProfileBio{
  width:100%;
  margin:14px 0 8px;
  padding:12px 14px;
  border-radius:14px;
  background:rgba(255,255,255,.06);
  color:#ddd;
  line-height:1.45;
  text-align:left;
  word-break:break-word;
}

.publicProfileBio.empty{
  opacity:.55;
  font-style:italic;
}

/* ===== EDIT PROFILE HARD FIX ===== */

#editProfileModal.editProfileOverlay{
  position:fixed !important;
  inset:0 !important;
  width:100vw !important;
  height:100dvh !important;
  z-index:2147483000 !important;
  background:rgba(8,5,10,.82) !important;
  backdrop-filter:blur(10px) !important;

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

  padding:18px !important;
  box-sizing:border-box !important;
  overflow:auto !important;
}

#editProfileModal .editProfileBox{
  position:relative !important;
  width:min(92vw,390px) !important;
  max-height:88dvh !important;
  overflow-y:auto !important;

  margin:auto !important;
  padding:26px 22px !important;

  background:#151215 !important;
  color:#fff !important;

  border:1px solid rgba(255,63,164,.25) !important;
  border-radius:26px !important;

  box-shadow:0 25px 80px rgba(0,0,0,.65) !important;

  box-sizing:border-box !important;
}

#editProfileModal .editProfileBox h2{
  margin:0 0 18px !important;
  text-align:center !important;
  color:#fff !important;
}

#editProfileModal .editProfileClose{
  position:absolute !important;
  top:12px !important;
  right:12px !important;

  width:40px !important;
  height:40px !important;

  border:0 !important;
  border-radius:50% !important;

  background:#33232c !important;
  color:#ff4ba6 !important;

  font-size:18px !important;
  z-index:5 !important;
}

#editProfileModal .editAvatarWrap{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;

  gap:12px !important;
  margin:12px 0 24px !important;
}

#editProfileModal .editProfileAvatar{
  display:block !important;

  width:110px !important;
  height:110px !important;

  max-width:110px !important;
  max-height:110px !important;

  border-radius:50% !important;
  object-fit:cover !important;

  border:3px solid #ff3fa4 !important;
  background:#241b21 !important;
}

#editProfileModal .editAvatarButton{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;

  padding:10px 16px !important;

  border-radius:14px !important;
  background:#33232c !important;
  color:#ff62b3 !important;

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

#editProfileModal .editProfileBox > label{
  display:block !important;
  margin:12px 0 7px !important;

  color:#eee !important;
  font-size:14px !important;
  font-weight:700 !important;
}

#editProfileModal #editProfileUsername,
#editProfileModal #editProfileBio{
  display:block !important;
  width:100% !important;

  box-sizing:border-box !important;

  margin:0 !important;
  padding:13px 14px !important;

  border:1px solid #684253 !important;
  border-radius:14px !important;

  background:#292529 !important;
  color:#fff !important;

  font-size:15px !important;
  outline:none !important;
}

#editProfileModal #editProfileBio{
  min-height:105px !important;
  resize:none !important;
}

#editProfileModal #editProfileUsername:focus,
#editProfileModal #editProfileBio:focus{
  border-color:#ff3fa4 !important;
  box-shadow:0 0 0 3px rgba(255,63,164,.12) !important;
}

#editProfileModal .editProfileCount{
  margin-top:5px !important;
  text-align:right !important;
  font-size:12px !important;
  color:#999 !important;
}

#editProfileModal .editProfileSave{
  display:block !important;
  width:100% !important;

  margin-top:18px !important;
  padding:14px !important;

  border:0 !important;
  border-radius:16px !important;

  background:linear-gradient(90deg,#ff3295,#9d4edd) !important;
  color:#fff !important;

  font-size:15px !important;
  font-weight:900 !important;
}


/* ===== COMMENT PROFILE PHOTO V2 ===== */

.commentAvatarV2{
  width:40px !important;
  height:40px !important;
  min-width:40px !important;
  max-width:40px !important;
  max-height:40px !important;

  border-radius:50% !important;
  object-fit:cover !important;

  display:inline-block !important;
  vertical-align:middle !important;

  margin:0 9px 4px 0 !important;

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

  cursor:pointer !important;
}

.replyComment > .commentAvatarV2{
  width:31px !important;
  height:31px !important;
  min-width:31px !important;
  max-width:31px !important;
  max-height:31px !important;
}

.commentUserName{
  vertical-align:middle !important;
  cursor:pointer !important;
}


/* ===== JAKSKY USER PROFILE MAIN ===== */

#profileAvatarMain.profileAvatarMain{
  display:block !important;
  width:112px !important;
  height:112px !important;
  min-width:112px !important;
  max-width:112px !important;
  min-height:112px !important;
  max-height:112px !important;

  margin:4px auto 14px !important;

  object-fit:cover !important;
  border-radius:50% !important;

  background:#221a20 !important;

  border:3px solid #ff3fa4 !important;

  box-shadow:
    0 0 0 5px rgba(255,63,164,.08),
    0 12px 30px rgba(0,0,0,.28) !important;
}

.profileBioMain{
  width:100% !important;
  box-sizing:border-box !important;

  margin:12px 0 15px !important;
  padding:11px 13px !important;

  border-radius:14px !important;

  background:rgba(255,255,255,.055) !important;
  border:1px solid rgba(255,255,255,.08) !important;

  color:#ddd !important;

  line-height:1.45 !important;
  font-size:13px !important;

  text-align:left !important;

  word-wrap:break-word !important;
  overflow-wrap:anywhere !important;
}

.profileBioMain.empty{
  opacity:.5 !important;
  font-style:italic !important;
}


/* ===== PROFILE SOCIAL STATS ===== */

.publicProfileStats{
  width:100%;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:7px;
  margin:15px 0 10px;
}

.profileStatItem{
  min-width:0;
  padding:10px 5px;
  border-radius:14px;
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.07);
  text-align:center;
}

.profileStatItem b{
  display:block;
  color:#fff;
  font-size:16px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.profileStatItem span{
  display:block;
  margin-top:3px;
  color:#999;
  font-size:10px;
}

.profileStatsLoading{
  grid-column:1 / -1;
  text-align:center;
  font-size:12px;
  opacity:.55;
  padding:10px;
}



/* =================================
   JAKSKY PREMIUM MAINTENANCE V2
================================= */

#jakskyMaintenance{
  position:fixed;
  inset:0;
  z-index:2147483646;
  display:grid;
  place-items:center;
  padding:22px;
  box-sizing:border-box;
  overflow:hidden;
  isolation:isolate;
  color:#fff;
  background:
    radial-gradient(circle at 50% -15%,rgba(255,43,145,.16),transparent 35%),
    radial-gradient(circle at 110% 100%,rgba(127,70,255,.14),transparent 35%),
    linear-gradient(160deg,#0b080b 0%,#100a0f 52%,#070607 100%);
  font-family:inherit;
}

.maintenanceScene{
  position:absolute;
  inset:0;
  z-index:-2;
  pointer-events:none;
  overflow:hidden;
}

.maintenanceAura{
  position:absolute;
  width:min(72vw,600px);
  aspect-ratio:1;
  border-radius:50%;
  filter:blur(80px);
  opacity:.34;
  will-change:transform;
}

.auraOne{
  left:-25%;
  top:-24%;
  background:rgba(255,47,153,.72);
  animation:jakskyAuraOne 12s ease-in-out infinite alternate;
}

.auraTwo{
  right:-30%;
  bottom:-28%;
  background:rgba(122,73,255,.64);
  animation:jakskyAuraTwo 14s ease-in-out infinite alternate;
}

.maintenanceGrid{
  position:absolute;
  inset:-30%;
  opacity:.13;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:28px 28px;
  transform:perspective(650px) rotateX(62deg) translateY(28%);
  transform-origin:center bottom;
  mask-image:linear-gradient(to bottom,transparent 10%,#000 60%,transparent 100%);
  -webkit-mask-image:linear-gradient(to bottom,transparent 10%,#000 60%,transparent 100%);
}

.maintenanceCard{
  position:relative;
  width:min(430px,100%);
  padding:22px 22px 20px;
  box-sizing:border-box;
  border-radius:30px;
  border:1px solid rgba(255,255,255,.08);
  background:
    linear-gradient(145deg,rgba(28,20,27,.92),rgba(14,11,15,.94));
  box-shadow:
    0 35px 100px rgba(0,0,0,.62),
    inset 0 1px 0 rgba(255,255,255,.045);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  animation:jakskyMaintenanceEnter .62s cubic-bezier(.2,.8,.2,1) both;
}

.maintenanceCard::before{
  content:"";
  position:absolute;
  inset:0;
  padding:1px;
  border-radius:inherit;
  pointer-events:none;
  background:linear-gradient(
    120deg,
    rgba(255,54,158,.64),
    rgba(255,255,255,.03) 34%,
    rgba(134,71,255,.45) 68%,
    rgba(255,54,158,.64)
  );
  background-size:240% 240%;
  opacity:.48;
  animation:jakskyMaintenanceBorder 8s linear infinite;
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
}

.maintenanceTopline{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.maintenanceBrandMark,
.maintenanceLiveBadge{
  display:inline-flex;
  align-items:center;
}

.maintenanceBrandMark{
  gap:8px;
  color:#f7edf3;
  font-size:11px;
  font-weight:950;
  letter-spacing:.16em;
}

.brandDot{
  width:9px;
  height:9px;
  border-radius:50%;
  background:linear-gradient(135deg,#ff3197,#9a50ff);
  box-shadow:0 0 15px rgba(255,49,151,.72);
}

.maintenanceLiveBadge{
  gap:6px;
  padding:6px 8px;
  border:1px solid rgba(255,255,255,.06);
  border-radius:999px;
  background:rgba(255,255,255,.035);
  color:#8e858c;
  font-size:8px;
  font-weight:850;
  letter-spacing:.07em;
}

.maintenanceLiveBadge span{
  width:6px;
  height:6px;
  border-radius:50%;
  background:#ff3c9d;
  box-shadow:0 0 10px #ff3c9d;
  animation:jakskyStatusPulse 1.6s ease-in-out infinite;
}

.maintenanceOrbit{
  position:relative;
  width:126px;
  height:126px;
  margin:28px auto 23px;
  display:grid;
  place-items:center;
}

.maintenanceCore{
  position:relative;
  z-index:3;
  width:64px;
  height:64px;
  display:grid;
  place-items:center;
  border-radius:22px;
  background:
    linear-gradient(145deg,rgba(255,49,151,.97),rgba(129,69,255,.94));
  box-shadow:
    0 16px 45px rgba(255,49,151,.2),
    inset 0 1px 0 rgba(255,255,255,.3);
}

.maintenanceCore::after{
  content:"";
  position:absolute;
  inset:7px;
  border-radius:17px;
  border:1px solid rgba(255,255,255,.16);
}

.maintenanceCore svg{
  width:29px;
  height:29px;
  fill:none;
  stroke:#fff;
  stroke-width:1.65;
  stroke-linecap:round;
  stroke-linejoin:round;
  animation:jakskyCoreRotate 8s linear infinite;
}

.orbitRing{
  position:absolute;
  inset:0;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.09);
}

.orbitRingOne{
  inset:10px;
  border-color:rgba(255,62,158,.19);
  animation:jakskyRingPulse 2.8s ease-in-out infinite;
}

.orbitRingTwo{
  inset:0;
  border-style:dashed;
  border-color:rgba(153,89,255,.16);
  animation:jakskyOrbitRotate 16s linear infinite;
}

.orbitDot{
  position:absolute;
  width:8px;
  height:8px;
  border-radius:50%;
  z-index:4;
}

.orbitDotOne{
  top:15px;
  left:50%;
  margin-left:-4px;
  background:#ff4ba7;
  box-shadow:0 0 14px #ff4ba7;
  transform-origin:4px 48px;
  animation:jakskyDotOrbit 5.5s linear infinite;
}

.orbitDotTwo{
  bottom:17px;
  right:22px;
  background:#9c6cff;
  box-shadow:0 0 14px #9c6cff;
  animation:jakskyDotFloat 2.6s ease-in-out infinite alternate;
}

.maintenanceCopy{
  text-align:center;
}

.maintenanceEyebrow{
  margin-bottom:8px;
  color:#ff58ad;
  font-size:9px;
  font-weight:900;
  letter-spacing:.18em;
}

.maintenanceCard h1{
  margin:0 auto 11px;
  max-width:350px;
  color:#fff;
  font-size:clamp(25px,7vw,32px);
  font-weight:900;
  line-height:1.13;
  letter-spacing:-.025em;
}

.maintenanceCard p{
  max-width:350px;
  margin:0 auto;
  color:#a9a0a7;
  font-size:13px;
  line-height:1.68;
}

.maintenanceProgress{
  margin-top:24px;
  padding:14px;
  border:1px solid rgba(255,255,255,.055);
  border-radius:17px;
  background:rgba(255,255,255,.025);
}

.maintenanceProgressTrack{
  position:relative;
  height:5px;
  overflow:hidden;
  border-radius:999px;
  background:rgba(255,255,255,.07);
}

.maintenanceProgressTrack span{
  position:absolute;
  inset:0 auto 0 -45%;
  width:46%;
  border-radius:inherit;
  background:linear-gradient(
    90deg,
    transparent,
    #ff3d9f 35%,
    #9a5aff 72%,
    transparent
  );
  filter:drop-shadow(0 0 7px rgba(255,61,159,.42));
  animation:jakskyProgressSweep 2.2s ease-in-out infinite;
}

.maintenanceProgressMeta{
  margin-top:10px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  color:#80777e;
  font-size:9px;
  font-weight:750;
}

.maintenancePulseText{
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:#bdb4bb;
}

.maintenancePulseText i{
  width:6px;
  height:6px;
  border-radius:50%;
  background:#ff3d9f;
  box-shadow:0 0 10px rgba(255,61,159,.9);
  animation:jakskyStatusPulse 1.5s ease-in-out infinite;
}

.maintenanceRetryBtn{
  width:100%;
  min-height:48px;
  margin-top:15px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  border:0;
  border-radius:16px;
  background:
    linear-gradient(110deg,#ff3197,#d33fbd 48%,#8b50ff);
  color:#fff;
  font:inherit;
  font-size:12px;
  font-weight:900;
  cursor:pointer;
  box-shadow:0 13px 34px rgba(255,49,151,.16);
  transition:transform .15s ease,filter .15s ease,opacity .15s ease;
}

.maintenanceRetryBtn svg{
  width:18px;
  height:18px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.maintenanceRetryBtn:active{
  transform:scale(.985);
}

.maintenanceRetryBtn.isLoading svg{
  animation:jakskyRetrySpin .8s linear infinite;
}

.maintenanceRetryBtn:disabled{
  opacity:.72;
}

.maintenanceFooter{
  margin-top:17px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  color:#645d63;
  font-size:9px;
  font-weight:700;
}

.maintenanceFooter > span:first-child{
  color:#8c838a;
  font-weight:900;
  letter-spacing:.08em;
}

.footerDivider{
  width:3px;
  height:3px;
  border-radius:50%;
  background:#564e54;
}

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

@keyframes jakskyAuraOne{
  from{transform:translate3d(-5%,0,0) scale(.9);}
  to{transform:translate3d(20%,17%,0) scale(1.08);}
}

@keyframes jakskyAuraTwo{
  from{transform:translate3d(0,0,0) scale(1);}
  to{transform:translate3d(-22%,-16%,0) scale(.9);}
}

@keyframes jakskyMaintenanceBorder{
  0%{background-position:0% 50%;}
  100%{background-position:220% 50%;}
}

@keyframes jakskyCoreRotate{
  0%,14%{transform:rotate(0deg);}
  86%,100%{transform:rotate(360deg);}
}

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

@keyframes jakskyRingPulse{
  0%,100%{transform:scale(.97);opacity:.56;}
  50%{transform:scale(1.05);opacity:1;}
}

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

@keyframes jakskyDotFloat{
  from{transform:translateY(-3px) scale(.85);opacity:.55;}
  to{transform:translateY(4px) scale(1.08);opacity:1;}
}

@keyframes jakskyProgressSweep{
  0%{left:-48%;}
  100%{left:105%;}
}

@keyframes jakskyStatusPulse{
  0%,100%{transform:scale(.85);opacity:.55;}
  50%{transform:scale(1.2);opacity:1;}
}

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

@media (max-width:480px){
  #jakskyMaintenance{
    padding:16px;
  }

  .maintenanceCard{
    padding:20px 18px 18px;
    border-radius:26px;
  }

  .maintenanceOrbit{
    margin-top:24px;
    margin-bottom:20px;
  }
}

@media (prefers-reduced-motion:reduce){
  #jakskyMaintenance *,
  #jakskyMaintenance *::before,
  #jakskyMaintenance *::after{
    animation:none !important;
    scroll-behavior:auto !important;
  }
}


/* ===== PUBLIC PROFILE CONSISTENT DARK THEME ===== */

#publicProfileModal{
  color-scheme: dark !important;
}

#publicProfileModal .publicProfileContent,
#publicProfileModal .publicProfileBox,
.publicProfileContent,
.publicProfileBox{
  background:#111 !important;
  color:#fff !important;
}

#publicProfileModal h1,
#publicProfileModal h2,
#publicProfileModal h3,
#publicProfileModal b,
.publicProfileContent h2{
  color:#fff !important;
}

#publicProfileModal p,
#publicProfileModal span,
.publicProfileBio{
  color:#bdbdbd;
}

.publicProfileBio{
  background:transparent !important;
}

.publicProfileStats .profileStatItem{
  background:rgba(255,255,255,.025) !important;
  border:1px solid rgba(255,255,255,.045) !important;
}

.publicProfileStats .profileStatItem b{
  color:#fff !important;
}

.publicProfileStats .profileStatItem span{
  color:#888 !important;
}

/* tombol X */
#publicProfileModal .publicProfileClose,
.publicProfileClose{
  background:#2a1721 !important;
  color:#ff3f9e !important;
}


html{
  color-scheme:dark;
}


/* ===== WATCH HISTORY ===== */

.historyWatchTime{
  display:inline-flex;
  align-items:center;
  gap:4px;

  margin-top:6px;
  padding:5px 9px;

  border-radius:999px;

  background:rgba(255,47,146,.10);
  border:1px solid rgba(255,47,146,.16);

  color:#ff6bb5;

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


/* ===== NOTIFICATION ACTIONS ===== */

.notifBulkActions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px;

  margin-bottom:13px;
  padding-bottom:12px;

  border-bottom:
    1px solid rgba(255,255,255,.07);
}

.notifBulkActions button{
  padding:10px 8px;

  border:0;
  border-radius:13px;

  font-size:12px;
  font-weight:800;

  cursor:pointer;
}

.notifReadAllBtn{
  background:
    rgba(255,55,155,.13);

  color:#ff65b4;

  border:
    1px solid
    rgba(255,55,155,.18) !important;
}

.notifDeleteAllBtn{
  background:
    rgba(255,80,80,.10);

  color:#ff7d7d;

  border:
    1px solid
    rgba(255,80,80,.14) !important;
}

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

.notifEmpty{
  padding:25px 10px;

  text-align:center;

  color:#777;
  font-size:13px;
}



/* ===== JAKSKY RESUME PLAYBACK ===== */

#resumePlaybackBox{
  display:flex;
  align-items:center;
  gap:12px;

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

  border-radius:17px;

  background:#181318;

  border:
    1px solid
    rgba(255,55,155,.20);

  box-shadow:
    0 10px 30px
    rgba(0,0,0,.22);
}

.resumePlaybackIcon{
  flex:none;

  width:42px;
  height:42px;

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

  border-radius:50%;

  background:
    linear-gradient(
      135deg,
      #ff3197,
      #9149ff
    );

  color:#fff;

  font-size:16px;
}

.resumePlaybackText{
  flex:1;
  min-width:0;
}

.resumePlaybackText b{
  display:block;

  color:#fff;

  font-size:13px;
}

.resumePlaybackText span{
  display:block;

  margin-top:3px;

  color:#989098;

  font-size:11px;
}

.resumePlaybackActions{
  display:flex;
  gap:6px;
}

.resumePlaybackActions button{
  border:0;

  padding:9px 10px;

  border-radius:11px;

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

#resumeRestartBtn{
  background:#292529;
  color:#bbb;
}

#resumeContinueBtn{
  background:#ff3297;
  color:#fff;
}


/* ===== VIP DANA PAYMENT ===== */

.vipDanaPaymentCard{
  margin:12px 0 16px;
  padding:15px;

  border-radius:17px;

  background:#181318;
  border:1px solid rgba(255,55,155,.20);

  color:#fff;
  text-align:left;
}

.vipDanaPaymentCard > b{
  display:block;
  margin-bottom:12px;

  font-size:15px;
}

.vipDanaInfo{
  margin-top:10px;
}

.vipDanaLabel{
  display:block;

  margin-bottom:3px;

  color:#8f878d;
  font-size:11px;
}

.vipDanaNumber{
  display:block;

  color:#fff;

  font-size:20px;
  font-weight:900;
  letter-spacing:.5px;
}

.vipDanaActions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;

  margin-top:13px;
}

.vipDanaActions .vipBuyBtn{
  margin:0 !important;
  width:100%;
}

.vipDanaHelp{
  margin:11px 0 0;

  color:#898087;

  font-size:10px;
  line-height:1.5;
}



/* =================================
   JAKSKY VIP CHECKOUT
================================= */

#vipCheckoutModal{
  position:fixed;
  inset:0;

  z-index:2147483000;

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

  padding:18px;
  box-sizing:border-box;

  background:rgba(4,3,5,.82);

  backdrop-filter:blur(9px);
  -webkit-backdrop-filter:blur(9px);
}

.vipCheckoutBox{
  position:relative;

  width:min(390px,92vw);

  padding:27px 20px 22px;
  box-sizing:border-box;

  border-radius:27px;

  background:#111;
  color:#fff;

  text-align:center;

  border:
    1px solid
    rgba(255,55,155,.22);

  box-shadow:
    0 25px 90px
    rgba(0,0,0,.65);
}

.vipCheckoutClose{
  position:absolute;

  top:12px;
  right:12px;

  width:40px;
  height:40px;

  border:0;
  border-radius:50%;

  background:#2d1c25;
  color:#ff4da5;

  font-size:23px;
}

.vipCheckoutIcon{
  width:65px;
  height:65px;

  margin:4px auto 13px;

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

  border-radius:20px;

  background:
    linear-gradient(
      135deg,
      #ff3197,
      #9149ff
    );

  font-size:29px;
}

.vipCheckoutBox h2{
  margin:7px 0 4px;

  color:#fff;
  font-size:22px;
}

.vipCheckoutPrice{
  margin-bottom:18px;

  color:#ff55ad;

  font-size:28px;
  font-weight:900;
}

.vipCheckoutPayment{
  display:grid;
  grid-template-columns:1fr 1fr;

  gap:8px;

  margin-bottom:13px;
}

.vipCheckoutPayment > div{
  padding:12px 8px;

  border-radius:15px;

  background:#1c181b;

  border:
    1px solid
    rgba(255,255,255,.06);
}

.vipCheckoutPayment span{
  display:block;

  margin-bottom:4px;

  color:#888;

  font-size:10px;
}

.vipCheckoutPayment b{
  display:block;

  color:#fff;

  font-size:13px;

  word-break:break-word;
}

.vipCheckoutButtons{
  display:grid;
  grid-template-columns:1fr 1fr;

  gap:8px;
}

.vipCheckoutButtons button,
.vipCheckoutDone{
  min-height:46px;

  border:0;
  border-radius:14px;

  font-size:12px;
  font-weight:900;
}

.vipCheckoutCopy{
  background:#292529;
  color:#ddd;
}

.vipCheckoutPay{
  background:
    linear-gradient(
      90deg,
      #2696ff,
      #22c4ff
    );

  color:#fff;
}

.vipCheckoutHint{
  margin:12px 3px;

  color:#999;

  font-size:11px;
  line-height:1.45;
}

.vipCheckoutDone{
  width:100%;

  background:
    linear-gradient(
      90deg,
      #ff3197,
      #a347ff
    );

  color:#fff;
}

.vipCheckoutSmall{
  margin-top:11px;

  color:#706970;

  font-size:9px;
  line-height:1.45;
}


/* ===== VIP CHECKOUT ORDER ID ===== */

.vipCheckoutOrderInfo{
  margin:12px 0;
  padding:11px 13px;

  border-radius:14px;

  background:rgba(50,200,120,.08);
  border:1px solid rgba(50,200,120,.16);

  text-align:left;
}

.vipCheckoutOrderInfo span{
  display:block;

  color:#7d8b83;
  font-size:9px;
}

.vipCheckoutOrderInfo b{
  display:block;

  margin-top:2px;

  color:#67df9d;
  font-size:15px;
}

.vipCheckoutOrderInfo small{
  display:block;

  margin-top:3px;

  color:#777;
  font-size:9px;
}



/* =================================
   USER VIP ORDER HISTORY
================================= */

.myVipOrdersSection{
  margin-top:17px;
  padding:14px;

  border-radius:18px;

  background:#171217;
  border:
    1px solid
    rgba(255,55,155,.15);

  text-align:left;
}

.myVipOrdersHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:10px;

  margin-bottom:11px;
}

.myVipOrdersHeader b{
  display:block;

  color:#fff;

  font-size:14px;
}

.myVipOrdersHeader span{
  display:block;

  margin-top:2px;

  color:#817981;

  font-size:9px;
}

.myVipOrdersHeader button{
  width:34px;
  height:34px;

  border:0;
  border-radius:50%;

  background:#2a2228;
  color:#ff52aa;

  font-size:18px;
}

.myVipOrderItem{
  padding:12px;

  margin-top:8px;

  border-radius:14px;

  background:#211b20;

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

.myVipOrderTop{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;

  gap:8px;
}

.myVipOrderTop > div:first-child b{
  display:block;

  color:#fff;

  font-size:12px;
}

.myVipOrderTop > div:first-child span{
  display:block;

  margin-top:4px;

  color:#ff62b3;

  font-size:13px;
  font-weight:900;
}

.vipOrderStatusBadge{
  flex:none;

  padding:5px 7px;

  border-radius:999px;

  font-size:8px;
  font-weight:900;
}

.vipOrderStatusBadge.pending{
  background:
    rgba(255,190,45,.10);

  color:#f5bf45;
}

.vipOrderStatusBadge.approved{
  background:
    rgba(50,210,120,.10);

  color:#67df9d;
}

.vipOrderStatusBadge.rejected{
  background:
    rgba(255,70,80,.10);

  color:#ff757d;
}

.myVipOrderBottom{
  display:flex;
  justify-content:space-between;

  margin-top:9px;
  padding-top:8px;

  border-top:
    1px solid
    rgba(255,255,255,.04);

  color:#777;

  font-size:8px;
}

.vipOrderEmpty,
.vipOrderLoading{
  padding:16px 8px;

  text-align:center;

  color:#756e74;

  font-size:10px;
}


/* ===== VIP ORDER REFRESH POLISH ===== */

.myVipOrdersHeader .myVipRefreshBtn{
  width:auto !important;
  height:34px !important;

  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:5px;

  padding:0 11px !important;

  border:1px solid rgba(255,55,155,.15) !important;
  border-radius:999px !important;

  background:#291d26 !important;
  color:#ff58ad !important;

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

  white-space:nowrap;
}

.myVipOrdersHeader .myVipRefreshBtn span{
  color:#ff58ad !important;
  font-size:14px;
  line-height:1;
}

.myVipOrdersHeader .myVipRefreshBtn:active{
  transform:scale(.96);
}


.vipOrderLoading{
  position:relative;

  padding:22px 10px !important;

  color:#837781 !important;

  font-size:10px !important;
}

.vipOrderLoading::before{
  content:"";
  display:block;

  width:22px;
  height:22px;

  margin:0 auto 9px;

  border-radius:50%;

  border:2px solid rgba(255,255,255,.08);
  border-top-color:#ff3b9d;

  animation:vipOrderSpin .75s linear infinite;
}

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


/* ===== VIP REJECTION REASON ===== */

.vipRejectReason{
  margin-top:9px;
  padding:9px 10px;

  border-radius:11px;

  background:rgba(255,70,80,.07);
  border:1px solid rgba(255,70,80,.12);
}

.vipRejectReason span{
  display:block;

  color:#ff7b82;
  font-size:9px;
  font-weight:900;
}

.vipRejectReason p{
  margin:4px 0 0;

  color:#b7a9ad;
  font-size:10px;
  line-height:1.45;
}


/* ===== RETRY VIP PAYMENT ===== */

.vipRetryPaymentBtn{
  width:100%;

  margin-top:10px;
  padding:10px 12px;

  border:0;
  border-radius:11px;

  background:
    linear-gradient(
      90deg,
      #ff3197,
      #a348ff
    );

  color:#fff;

  font-size:10px;
  font-weight:900;

  box-shadow:
    0 6px 18px
    rgba(255,49,151,.15);
}

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



/* =================================
   VIP ORDER DETAIL / INVOICE
================================= */

.vipOrderDetailBtn{
  width:100%;

  margin-top:9px;
  padding:9px 10px;

  border:1px solid rgba(255,255,255,.06);
  border-radius:11px;

  background:#2a2228;
  color:#d8cdd3;

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

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


#vipOrderDetailModal{
  position:fixed;
  inset:0;

  z-index:2147483600;

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

  padding:18px;

  box-sizing:border-box;

  background:rgba(4,3,5,.84);

  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}


.vipOrderDetailBox{
  position:relative;

  width:min(390px,92vw);

  max-height:88vh;
  overflow:auto;

  padding:25px 19px 20px;

  box-sizing:border-box;

  border-radius:27px;

  background:#111;
  color:#fff;

  border:
    1px solid
    rgba(255,55,155,.18);

  box-shadow:
    0 25px 90px
    rgba(0,0,0,.65);

  text-align:center;
}


.vipOrderDetailClose{
  position:absolute;

  right:12px;
  top:12px;

  width:39px;
  height:39px;

  border:0;
  border-radius:50%;

  background:#2b2027;
  color:#ff54aa;

  font-size:22px;
}


.vipOrderDetailIcon{
  width:61px;
  height:61px;

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

  margin:3px auto 10px;

  border-radius:19px;

  background:
    linear-gradient(
      135deg,
      #ff3197,
      #a54cff
    );

  font-size:27px;
}


.vipOrderDetailBox h2{
  margin:6px 0 17px;

  font-size:21px;
}


.vipOrderDetailMain{
  padding:16px;

  border-radius:18px;

  background:#1d171c;

  border:
    1px solid
    rgba(255,255,255,.05);
}


.vipOrderDetailMain > span{
  display:block;

  color:#7e747b;

  font-size:9px;
}


.vipOrderDetailMain strong{
  display:block;

  margin-top:3px;

  color:#ff55ab;

  font-size:17px;
}


.vipOrderDetailMain h3{
  margin:13px 0 2px;

  font-size:16px;
}


.vipOrderDetailAmount{
  color:#fff;

  font-size:27px;
  font-weight:900;
}


.vipOrderDetailStatus{
  display:inline-flex;

  margin-top:11px;
  padding:6px 10px;

  border-radius:999px;

  font-size:9px;
  font-weight:900;
}


.vipOrderDetailStatus.pending{
  background:rgba(255,190,45,.10);
  color:#f5bf45;
}

.vipOrderDetailStatus.approved{
  background:rgba(50,210,120,.10);
  color:#67df9d;
}

.vipOrderDetailStatus.rejected{
  background:rgba(255,70,80,.10);
  color:#ff757d;
}


.vipOrderDetailRows{
  margin-top:11px;

  border-radius:17px;

  overflow:hidden;

  background:#191519;
}


.vipOrderDetailRow{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;

  gap:16px;

  padding:12px;

  border-bottom:
    1px solid
    rgba(255,255,255,.04);

  text-align:left;
}


.vipOrderDetailRow:last-child{
  border-bottom:0;
}


.vipOrderDetailRow span{
  color:#817981;

  font-size:9px;
}


.vipOrderDetailRow b{
  max-width:65%;

  color:#ddd;

  font-size:10px;

  text-align:right;
}


.vipOrderDetailReject{
  margin-top:11px;
  padding:12px;

  border-radius:15px;

  background:rgba(255,70,80,.07);

  border:
    1px solid
    rgba(255,70,80,.13);

  text-align:left;
}


.vipOrderDetailReject span{
  color:#ff7b82;

  font-size:9px;
  font-weight:900;
}


.vipOrderDetailReject p{
  margin:5px 0 0;

  color:#c2b4b7;

  font-size:10px;
  line-height:1.5;
}


.vipOrderDetailDone{
  width:100%;
  min-height:45px;

  margin-top:14px;

  border:0;
  border-radius:14px;

  background:
    linear-gradient(
      90deg,
      #ff3197,
      #a348ff
    );

  color:#fff;

  font-size:12px;
  font-weight:900;
}


/* ===== JAKSKY CUSTOM TITLE STYLES ===== */

.customTitleBadge,
.publicProfileTitleBadge{
  display:inline-flex;
  align-items:center;
  gap:3px;
  font-size:11px;
  font-weight:700;
  margin:2px 3px;
  line-height:1.2;
}

.titleShape-pill{
  border-radius:999px;
  padding:4px 9px;
}

.titleShape-rounded{
  border-radius:8px;
  padding:4px 8px;
}

.titleShape-square{
  border-radius:2px;
  padding:4px 8px;
}

.titleShape-outline{
  border-radius:999px;
  padding:3px 8px;
  background:transparent !important;
}

.titleShape-glow{
  border-radius:999px;
  padding:4px 9px;
  box-shadow:0 0 12px currentColor;
}


.titleColor-pink{
  background:#ffe2f1;
  color:#c72e7c;
  border:1px solid #ff9bce;
}

.titleColor-purple{
  background:#f1e4ff;
  color:#7a39ae;
  border:1px solid #d3adff;
}

.titleColor-blue{
  background:#e3efff;
  color:#2867b2;
  border:1px solid #9fc5ff;
}

.titleColor-cyan{
  background:#dff9ff;
  color:#087f9b;
  border:1px solid #8ee9ff;
}

.titleColor-gold{
  background:#fff4cf;
  color:#8f6900;
  border:1px solid #e6c04d;
}

.titleColor-red{
  background:#ffe2e2;
  color:#b72d2d;
  border:1px solid #ff9c9c;
}

.titleColor-green{
  background:#e2f8e8;
  color:#287a41;
  border:1px solid #92daa6;
}

.titleColor-dark{
  background:#282329;
  color:#fff;
  border:1px solid #555;
}

.titleShape-outline.titleColor-pink{color:#d72b80}
.titleShape-outline.titleColor-purple{color:#813db3}
.titleShape-outline.titleColor-blue{color:#3976bd}
.titleShape-outline.titleColor-cyan{color:#16859f}
.titleShape-outline.titleColor-gold{color:#9a7100}
.titleShape-outline.titleColor-red{color:#c43d3d}
.titleShape-outline.titleColor-green{color:#308349}
.titleShape-outline.titleColor-dark{color:#555}


/* ===== JAKSKY CUSTOM TITLE V2 ===== */

.customTitleBadge{
  display:inline-flex;
  align-items:center;
  gap:4px;
  margin:3px 3px 3px 0;
  font-size:11px;
  line-height:1.2;
  font-weight:700;
  vertical-align:middle;
}

.customTitleIcon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:1;
}

.customTitleText{
  line-height:1.2;
}


/* BENTUK */

.titleShape-pill{
  padding:4px 9px;
  border-radius:999px;
}

.titleShape-rounded{
  padding:4px 9px;
  border-radius:9px;
}

.titleShape-square{
  padding:4px 9px;
  border-radius:2px;
}

.titleShape-outline{
  padding:3px 8px;
  border-radius:999px;
  background:transparent !important;
}

.titleShape-glow{
  padding:4px 9px;
  border-radius:999px;
  box-shadow:
    0 0 8px currentColor,
    0 0 15px rgba(255,255,255,.15);
}


/* WARNA */

.titleColor-pink{
  background:#ffe2f1;
  color:#c72e7c;
  border:1px solid #ff9bce;
}

.titleColor-purple{
  background:#f1e4ff;
  color:#7a39ae;
  border:1px solid #d3adff;
}

.titleColor-blue{
  background:#e3efff;
  color:#2867b2;
  border:1px solid #9fc5ff;
}

.titleColor-cyan{
  background:#dff9ff;
  color:#087f9b;
  border:1px solid #8ee9ff;
}

.titleColor-gold{
  background:#fff3c4;
  color:#8b6500;
  border:1px solid #e4bd43;
}

.titleColor-red{
  background:#ffe2e2;
  color:#b72d2d;
  border:1px solid #ff9c9c;
}

.titleColor-green{
  background:#e2f8e8;
  color:#287a41;
  border:1px solid #92daa6;
}

.titleColor-dark{
  background:#282329;
  color:#fff;
  border:1px solid #555;
}


/* ===== PROFILE BIO READABILITY ===== */

.publicProfileBio,
.profileBio,
.userBio{
  color:#5f5f68 !important;
  opacity:1 !important;
  font-weight:400;
}

.publicProfileBio.empty,
.profileBio.empty,
.userBio.empty{
  color:#999 !important;
  opacity:1 !important;
  font-style:italic;
}



/* ===== MAIN PROFILE 3 TITLE + BIO FIX ===== */

.mainProfileTitleRow{
  display:flex;
  align-items:flex-start;
  flex-wrap:wrap;
  gap:7px;
  margin:8px 0;
}

.mainProfileTitleRow > b{
  padding-top:4px;
}

.mainProfileTitleList{
  display:flex;
  flex:1;
  flex-wrap:wrap;
  align-items:center;
  gap:4px;
  min-width:0;
}


/* Bio profile utama */

.profileBioMain{
  color:#5f6068 !important;
  opacity:1 !important;
  font-size:14px;
  line-height:1.5;
}

.profileBioMain.empty{
  color:#96969f !important;
  opacity:1 !important;
  font-style:italic;
}


/* Bio public profile */

.publicProfileBio{
  color:#5f6068 !important;
  opacity:1 !important;
}

.publicProfileBio.empty{
  color:#96969f !important;
  opacity:1 !important;
  font-style:italic;
}


/* JAKSKY MAINTENANCE REALTIME PROGRESS V1 */
#jakskyMaintenance .maintenanceProgressTrack span{
  left:0;
  width:0;
  height:100%;
  background:linear-gradient(
    90deg,
    #ff3d9f 0%,
    #d743c5 52%,
    #965aff 100%
  );
  filter:drop-shadow(0 0 7px rgba(255,61,159,.42));
  animation:none;
  transition:width .65s cubic-bezier(.2,.8,.2,1);
  overflow:hidden;
}

#jakskyMaintenance .maintenanceProgressTrack span::after{
  content:"";
  position:absolute;
  inset:0;
  transform:translateX(-120%);
  background:linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.35),
    transparent
  );
  animation:jakskyRealtimeProgressShimmer 2.4s ease-in-out infinite;
}

#jakskyMaintenance .maintenanceProgressMeta{
  align-items:flex-start;
}

#jakskyMaintenance #maintenanceProgressStatus{
  min-width:0;
  max-width:68%;
  overflow-wrap:anywhere;
  color:#91878e;
  text-align:left;
}

#jakskyMaintenance .maintenanceProgressLive{
  flex:none;
  display:flex;
  align-items:center;
  gap:9px;
}

#jakskyMaintenance #maintenanceProgressValue{
  color:#f7edf3;
  font-size:11px;
  font-weight:950;
  font-variant-numeric:tabular-nums;
}

#jakskyMaintenance .maintenancePulseText{
  font-size:8px;
  letter-spacing:.08em;
}

@keyframes jakskyRealtimeProgressShimmer{
  0%,38%{transform:translateX(-120%);}
  100%{transform:translateX(180%);}
}

@media (prefers-reduced-motion:reduce){
  #jakskyMaintenance .maintenanceProgressTrack span{
    transition:none;
  }

  #jakskyMaintenance .maintenanceProgressTrack span::after{
    animation:none;
  }
}


/* =====================================================
   JAKSKY IDENTITY UI V3
   VIP badge + admin title + avatar identity ring
===================================================== */

.vipCommentBadge{
  position:relative !important;
  display:inline-flex !important;
  align-items:center !important;
  gap:5px !important;
  min-height:22px !important;
  margin:2px 3px !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;
  white-space:nowrap !important;
  overflow:hidden !important;
  isolation:isolate !important;
}

.vipCommentBadge .vipBadgeIcon{
  position:relative;
  z-index:2;
  width:15px;
  height:15px;
  display:inline-grid;
  place-items:center;
  border-radius:50%;
  font-size:8px;
  line-height:1;
}

.vipCommentBadge .vipBadgeText{
  position:relative;
  z-index:2;
}

.vipBasicBadge{
  color:#dff8ff !important;
  border:1px solid rgba(65,193,255,.62) !important;
  background:linear-gradient(135deg,#133451,#10243c) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 3px 10px rgba(24,157,225,.12) !important;
}

.vipBasicBadge .vipBadgeIcon{
  color:#dff8ff;
  background:linear-gradient(145deg,#37b9f3,#447cff);
  box-shadow:0 0 8px rgba(55,185,243,.35);
}

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

.vipProBadge::after{
  content:"";
  position:absolute;
  top:-35%;
  bottom:-35%;
  width:18px;
  left:-28px;
  z-index:1;
  transform:rotate(18deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);
  animation:jakskyVipProShine 4.2s ease-in-out infinite;
}

.vipProBadge .vipBadgeIcon{
  color:#4e3100;
  background:linear-gradient(145deg,#ffe78b,#ffb52f);
  box-shadow:0 0 9px rgba(255,190,60,.42);
}

@keyframes jakskyVipProShine{
  0%,62%{left:-28px;opacity:0;}
  70%{opacity:1;}
  88%,100%{left:115%;opacity:0;}
}

/* Admin-created titles remain distinct from VIP membership. */
.customTitleBadge{
  position:relative !important;
  min-height:21px !important;
  display:inline-flex !important;
  align-items:center !important;
  gap:4px !important;
  margin:2px 3px !important;
  padding:3px 8px !important;
  font-size:9.5px !important;
  font-weight:850 !important;
  letter-spacing:.015em !important;
  line-height:1 !important;
  vertical-align:middle !important;
  border-width:1px !important;
  border-style:solid !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 2px 7px rgba(0,0,0,.06) !important;
  backdrop-filter:blur(7px);
  -webkit-backdrop-filter:blur(7px);
}

.customTitleIcon{
  width:14px;
  height:14px;
  display:inline-grid !important;
  place-items:center !important;
  border-radius:50%;
  background:rgba(255,255,255,.28);
  font-size:8px;
}

.commentAvatarV2{
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease !important;
}

.commentAvatarV2.avatarVipBasic{
  border:2px solid #43bff1 !important;
  box-shadow:
    0 0 0 3px rgba(67,191,241,.13),
    0 5px 14px rgba(26,130,188,.16) !important;
}

.commentAvatarV2.avatarVipPro{
  border:2px solid #ffc64b !important;
  box-shadow:
    0 0 0 3px rgba(255,198,75,.16),
    0 0 16px rgba(255,180,48,.23),
    0 5px 14px rgba(80,50,0,.13) !important;
}

.commentAvatarV2.avatarStaffOwner{
  border:2px solid #ffbd45 !important;
  box-shadow:0 0 0 3px rgba(255,70,160,.15),0 0 16px rgba(255,189,69,.24) !important;
}

.commentAvatarV2.avatarStaffAdmin{
  border:2px solid #8f8cff !important;
  box-shadow:0 0 0 3px rgba(143,140,255,.14) !important;
}

.commentAvatarV2.avatarStaffMod{
  border:2px solid #39d6dd !important;
  box-shadow:0 0 0 3px rgba(57,214,221,.13) !important;
}

@media (hover:hover) and (pointer:fine){
  .commentAvatarV2:hover{
    transform:translateY(-1px) scale(1.035);
  }
}

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


/* JAKSKY AVATAR FRAME SYSTEM V1 — compact comment rings */
.commentAvatarV2[class*="avatarFrame-"]{
  border-width:2px !important;
  border-style:solid !important;
  background:#111;
}
.commentAvatarV2.avatarFrame-default{border-color:#ff9acb !important;}
.commentAvatarV2.avatarFrame-neon-pink{border-color:#ff47a3 !important;box-shadow:0 0 0 2px rgba(255,56,158,.10),0 0 10px rgba(255,56,158,.22) !important;}
.commentAvatarV2.avatarFrame-violet-orbit{border-color:#9a67ff !important;box-shadow:0 0 0 2px rgba(139,83,255,.10),0 0 10px rgba(137,79,255,.22) !important;}
.commentAvatarV2.avatarFrame-cyber-blue{border-color:#45dcff !important;box-shadow:0 0 0 2px rgba(54,197,255,.10),0 0 10px rgba(54,170,255,.22) !important;}
.commentAvatarV2.avatarFrame-royal-gold{border-color:#ffd05a !important;box-shadow:0 0 0 2px rgba(255,194,54,.11),0 0 11px rgba(255,177,38,.23) !important;}
.commentAvatarV2.avatarFrame-diamond-prism{border-color:#c8f2ff !important;box-shadow:0 0 0 2px rgba(188,226,255,.13),0 0 12px rgba(154,196,255,.26) !important;}


/* =====================================================
   JAKSKY COSMETIC ACHIEVEMENT SYSTEM V1 - COMMENTS
===================================================== */
.commentAchievementBadge{
  display:inline-flex;
  align-items:center;
  gap:4px;
  min-height:21px;
  margin-left:4px;
  padding:3px 7px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.09);
  background:rgba(255,255,255,.045);
  color:#ddd;
  vertical-align:middle;
  font-size:8px;
  font-weight:800;
  line-height:1;
  white-space:nowrap;
}
.commentAchievementBadge b{
  font:inherit;
  font-weight:900;
}
.commentAchievementBadge.achievementTone-emerald{color:#8ff0bd;border-color:rgba(61,219,145,.29);background:rgba(33,152,101,.11)}
.commentAchievementBadge.achievementTone-pink{color:#ff98cc;border-color:rgba(255,71,163,.30);background:rgba(216,46,135,.11)}
.commentAchievementBadge.achievementTone-gold{color:#ffd56b;border-color:rgba(255,193,49,.32);background:rgba(206,147,21,.11)}
.commentAchievementBadge.achievementTone-cyan{color:#89e8ff;border-color:rgba(61,208,241,.29);background:rgba(37,159,188,.11)}
.commentAchievementBadge.achievementTone-violet{color:#c8adff;border-color:rgba(149,101,255,.29);background:rgba(110,63,209,.11)}
.commentAchievementBadge.achievementTone-orange{color:#ffb878;border-color:rgba(255,141,51,.29);background:rgba(205,99,24,.11)}


/* =====================================================
   JAKSKY ACHIEVEMENT CONTRAST V2 - COMMENTS
===================================================== */

.commentAchievementBadge{
  position:relative;
  overflow:hidden;
  min-height:22px !important;
  padding:3px 8px !important;
  border-width:1px !important;
  border-style:solid !important;
  font-size:8px !important;
  font-weight:900 !important;
  text-shadow:none !important;
  box-shadow:
    0 2px 7px rgba(0,0,0,.07),
    inset 0 1px 0 rgba(255,255,255,.75);
}

.commentAchievementBadge.achievementTone-emerald{
  color:#11613e !important;
  border-color:#54cb94 !important;
  background:linear-gradient(135deg,#eafff4,#bcefd5) !important;
}

.commentAchievementBadge.achievementTone-pink{
  color:#8b2058 !important;
  border-color:#ef72ad !important;
  background:linear-gradient(135deg,#fff0f7,#ffc9e1) !important;
}

.commentAchievementBadge.achievementTone-gold{
  color:#674200 !important;
  border-color:#dba416 !important;
  background:linear-gradient(135deg,#fff6bc,#ffd34c) !important;
  box-shadow:
    0 2px 8px rgba(169,113,0,.18),
    inset 0 1px 0 rgba(255,255,255,.86);
}

.commentAchievementBadge.achievementTone-cyan{
  color:#075c70 !important;
  border-color:#4bc6e1 !important;
  background:linear-gradient(135deg,#e9fbff,#b7ecf8) !important;
}

.commentAchievementBadge.achievementTone-violet{
  color:#563192 !important;
  border-color:#a884e5 !important;
  background:linear-gradient(135deg,#f5efff,#d6c5fa) !important;
}

.commentAchievementBadge.achievementTone-orange{
  color:#824000 !important;
  border-color:#e99440 !important;
  background:linear-gradient(135deg,#fff1df,#ffc484) !important;
}

.commentAchievementBadge,
.commentAchievementBadge b,
.commentAchievementBadge span{
  opacity:1 !important;
}

.commentAchievementBadge.achievementTone-gold::after{
  content:"";
  position:absolute;
  top:-35%;
  bottom:-35%;
  left:-36%;
  width:20%;
  pointer-events:none;
  background:linear-gradient(
    100deg,
    transparent,
    rgba(255,255,255,.72),
    transparent
  );
  transform:skewX(-18deg);
  animation:jakCommentAchievementSweep 4.6s ease-in-out infinite;
}

@keyframes jakCommentAchievementSweep{
  0%,70%{left:-36%;opacity:0;}
  76%{opacity:.8;}
  100%{left:125%;opacity:0;}
}

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


/* =====================================================
   JAKSKY REPLY CONTEXT V1
===================================================== */

.replyComment{
  position:relative !important;
  margin-top:12px !important;
  margin-left:24px !important;
  padding:12px 13px 12px 15px !important;
  border-left:0 !important;
  border-radius:15px !important;
  background:
    linear-gradient(
      145deg,
      rgba(255,248,252,.98),
      rgba(252,244,249,.98)
    ) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,74,155,.075),
    0 4px 14px rgba(60,25,43,.035);
}

.replyComment::before{
  content:"";
  position:absolute;
  left:-17px;
  top:-12px;
  width:17px;
  height:34px;
  border-left:2px solid rgba(255,64,151,.28);
  border-bottom:2px solid rgba(255,64,151,.28);
  border-bottom-left-radius:11px;
  pointer-events:none;
}

.replyComment::after{
  content:"";
  position:absolute;
  left:-20px;
  top:19px;
  width:7px;
  height:7px;
  border-radius:50%;
  background:#ff3b98;
  box-shadow:
    0 0 0 3px rgba(255,59,152,.10),
    0 0 10px rgba(255,59,152,.22);
  pointer-events:none;
}

.replyContext{
  margin:8px 0 7px;
  padding:7px 9px;
  border:1px solid rgba(255,56,149,.12);
  border-radius:11px;
  background:
    linear-gradient(
      135deg,
      rgba(255,233,244,.78),
      rgba(246,238,255,.70)
    );
  min-width:0;
}

.replyContextLabel{
  display:flex;
  align-items:center;
  gap:5px;
  min-width:0;
  color:#8f6078;
  font-size:10px;
  font-weight:750;
  line-height:1.3;
}

.replyContextLabel b{
  color:#d72f7f;
  font-weight:900;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  max-width:150px;
}

.replyContextArrow{
  flex:0 0 auto;
  display:inline-grid;
  place-items:center;
  width:18px;
  height:18px;
  border-radius:50%;
  color:#fff;
  background:
    linear-gradient(135deg,#ff3295,#b64dff);
  font-size:11px;
  font-weight:950;
  box-shadow:0 3px 8px rgba(224,47,133,.16);
}

.replyContextQuote{
  margin-top:5px;
  padding-left:23px;
  color:#8b7a83;
  font-size:10px;
  font-style:italic;
  line-height:1.4;
  overflow-wrap:anywhere;
}

.replyComment .replyBodyText{
  margin:8px 0 !important;
  color:#332c31;
  line-height:1.52;
}

.replyComment button{
  position:relative;
  z-index:2;
}

@media (max-width:390px){
  .replyComment{
    margin-left:19px !important;
    padding-left:12px !important;
  }

  .replyComment::before{
    left:-13px;
    width:13px;
  }

  .replyComment::after{
    left:-16px;
  }

  .replyContextLabel b{
    max-width:115px;
  }

  .replyContextQuote{
    padding-left:0;
    margin-left:23px;
  }
}


/* =====================================================
   JAKSKY FREE GATE PROMO V2
===================================================== */

#jakFreeGate .jakFreeGatePromoBox{
  width:min(92vw,430px) !important;
  padding:18px !important;
  text-align:left !important;
  border:1px solid rgba(255,80,164,.16);
  background:
    linear-gradient(
      150deg,
      #171116,
      #21121d 62%,
      #161018
    ) !important;
}

.jakFreeGateTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:12px;
}

#jakFreeGate .jakFreeGateBrand{
  margin:0 !important;
  color:#ff55aa !important;
  font-size:10px !important;
  font-weight:950 !important;
  letter-spacing:.12em;
}

.jakFreeGateSponsored{
  padding:4px 7px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:999px;
  color:#8d8389;
  background:rgba(255,255,255,.025);
  font-size:8px;
  font-weight:800;
}

.jakFreeGateMedia{
  position:relative;
  width:100%;
  aspect-ratio:16/8.4;
  overflow:hidden;
  border-radius:18px;
  background:
    radial-gradient(
      circle at 50% 20%,
      rgba(255,57,151,.18),
      transparent 45%
    ),
    #0e0b0e;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.055);
}

.jakFreeGateMediaImage,
.jakFreeGateMediaVideo{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  background:#0d0b0d;
}

.jakFreeGateFallback{
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  text-align:center;
  background:
    radial-gradient(
      circle at 50% 42%,
      rgba(255,188,55,.15),
      transparent 34%
    ),
    linear-gradient(
      135deg,
      rgba(255,57,151,.08),
      rgba(137,77,255,.08)
    );
}

.jakFreeGateFallback>span{
  font-size:38px;
  filter:drop-shadow(
    0 7px 16px rgba(255,189,47,.22)
  );
}

.jakFreeGateFallback b{
  color:#fff;
  font-size:16px;
}

.jakFreeGateFallback small{
  color:#9b9096 !important;
  font-size:9px;
}

.jakFreeGateCopy{
  padding:14px 2px 4px;
}

#jakFreeGate .jakFreeGateCopy h2{
  margin:0 0 6px !important;
  color:#fff !important;
  font-size:20px;
  line-height:1.22;
}

#jakFreeGate .jakFreeGateText{
  margin:0 !important;
  color:#aaa0a6 !important;
  font-size:11px;
  line-height:1.55;
}

.jakFreeGateQuota{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:9px 10px;
  margin:10px 0;
  border:1px solid rgba(255,255,255,.055);
  border-radius:12px;
  background:rgba(255,255,255,.025);
}

.jakFreeGateQuota span{
  color:#8f858b;
  font-size:9px;
}

.jakFreeGateQuota b{
  color:#f2e8ee;
  font-size:10px;
}

.jakFreeGateCta{
  width:100%;
  min-height:43px;
  margin:3px 0 10px;
  border:0;
  border-radius:13px;
  background:
    linear-gradient(
      100deg,
      #ff3295,
      #bd45c7 55%,
      #8e50ff
    );
  color:#fff;
  font:inherit;
  font-size:10px;
  font-weight:950;
  cursor:pointer;
  box-shadow:
    0 10px 26px rgba(255,50,149,.14);
}

.jakFreeGateTimerRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:9px;
  margin:3px 1px 7px;
  color:#b5abb1;
  font-size:9px;
}

.jakFreeGateTimerRow b{
  color:#ff5aab;
  font-size:15px;
}

.jakFreeGateTimerRow small{
  color:#7f757c !important;
  font-size:8px;
  text-align:right;
}

#jakFreeGate .jakFreeGateProgress{
  height:6px !important;
  margin:0 !important;
  background:#2b2328 !important;
}

#jakFreeGate #jakGateProgressBar{
  background:
    linear-gradient(
      90deg,
      #ff3295,
      #9b50ff
    ) !important;
}

.jakFreeGateDisclosure{
  margin:8px 0 0 !important;
  color:#685f65 !important;
  font-size:7.5px !important;
  text-align:center;
}

@media(max-width:390px){
  #jakFreeGate .jakFreeGatePromoBox{
    padding:14px !important;
  }

  .jakFreeGateTimerRow{
    align-items:flex-end;
  }
}


/* =====================================================
   JAKSKY FREE GATE SOUND TOGGLE V1
===================================================== */

.jakFreeGateSoundBtn{
  position:absolute;
  right:10px;
  bottom:10px;
  z-index:5;
  min-height:34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:7px 10px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:999px;
  background:rgba(10,8,10,.72);
  color:#fff;
  font:inherit;
  font-size:9px;
  font-weight:900;
  cursor:pointer;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  box-shadow:
    0 6px 18px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.08);
  touch-action:manipulation;
  transition:
    transform .14s ease,
    background .14s ease,
    border-color .14s ease;
}

.jakFreeGateSoundBtn:active{
  transform:scale(.96);
}

.jakFreeGateSoundBtn.soundOn{
  border-color:rgba(255,72,164,.34);
  background:
    linear-gradient(
      110deg,
      rgba(255,50,149,.90),
      rgba(142,80,255,.90)
    );
}

.jakGateSoundIcon{
  font-size:12px;
  line-height:1;
}

.jakGateSoundText{
  white-space:nowrap;
}

@media(max-width:390px){
  .jakFreeGateSoundBtn{
    right:8px;
    bottom:8px;
    min-height:32px;
    padding:6px 9px;
    font-size:8px;
  }
}


/* =====================================================
   JAKSKY FREE LIMIT UX V2
===================================================== */

.jakFreeQuotaBar{
  margin:10px 14px 5px;
  padding:11px 13px;
  border:1px solid rgba(255,63,164,.13);
  border-radius:15px;
  background:
    linear-gradient(
      120deg,
      rgba(255,240,248,.96),
      rgba(247,242,255,.96)
    );
  box-shadow:
    0 6px 20px rgba(85,35,65,.045);
}

.jakFreeQuotaBar[hidden]{
  display:none !important;
}

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

.jakFreeQuotaIcon{
  flex:0 0 auto;
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:11px;
  background:#fff;
  font-size:16px;
  box-shadow:
    inset 0 0 0 1px rgba(255,63,164,.09);
}

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

.jakFreeQuotaMain b{
  color:#7c335c;
  font-size:11px;
}

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

.jakFreeQuotaBar.isExhausted{
  border-color:rgba(185,82,91,.15);
  background:
    linear-gradient(
      120deg,
      rgba(255,244,245,.97),
      rgba(250,242,245,.97)
    );
}

.jakFreeQuotaBar.isExhausted b{
  color:#9b3947;
}

.jakFreeQuotaLockedCard{
  opacity:.82;
}

.jakFreeQuotaLockedCard .thumb{
  position:relative;
}

.jakFreeQuotaLockOverlay{
  position:absolute;
  inset:0;
  z-index:7;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  padding:10px;
  background:
    linear-gradient(
      180deg,
      rgba(18,12,16,.50),
      rgba(18,12,16,.82)
    );
  color:#fff;
  text-align:center;
  pointer-events:none;
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
}

.jakFreeQuotaLockOverlay span{
  font-size:18px;
}

.jakFreeQuotaLockOverlay b{
  font-size:10px;
}

.jakFreeQuotaLockOverlay small{
  color:#e6dce1;
  font-size:8px;
}