/*
Theme Name: JKxArtist
Author: JK
Version: 1.0
*/

/* ===============================
   🌌 GLOBAL BACKGROUND SYSTEM
================================ */

html, body {
  background: #020617 !important;
  margin: 0;
  padding: 0;
}

body::before,
body::after,
.site::before,
.site::after {
  display: none !important;
}

main,
.site,
.site-content,
.content-area,
.page,
.wrapper,
#page {
  background: transparent !important;
}

/* ===============================
   ⚠️ AUTH ERRORS
================================ */

.auth-errors {
  margin-bottom: 16px;
}

.auth-errors p {
  color: #c0392b;
  font-size: 14px;
  margin: 4px 0;
}

/* ===============================
   📱 MOBILE MENU SYSTEM
================================ */

/* HEADER HEIGHT (change if needed) */
:root {
  --header-h: 56px;
}

/* OVERLAY (does NOT cover header) */
.menu-overlay {
  position: fixed;
  top: var(--header-h);
  left: 0;
  right: 0;
  bottom: 0;

  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(6px);

  opacity: 0;
  pointer-events: none;
  transition: 0.3s;

  z-index: 998;
}

/* MENU PANEL */
.mobile-menu {
  position: fixed;
  top: var(--header-h);
  right: -100%;
  width: 78%;
  max-width: 320px;
  height: calc(100vh - var(--header-h));

  padding: 28px 24px 24px;

  background: linear-gradient(
    180deg,
    rgba(15, 23, 42, 0.95),
    rgba(2, 6, 23, 0.98)
  );

  backdrop-filter: blur(18px);

  border-left: 1px solid rgba(255,255,255,0.08);

  border-top-left-radius: 22px;
  border-bottom-left-radius: 22px;

  box-shadow:
    -10px 0 40px rgba(0,0,0,0.6),
    inset 0 0 20px rgba(99,102,241,0.08);

  display: flex;
  flex-direction: column;
  gap: 26px;

  transition: all 0.35s ease;

  z-index: 999;
}

/* ACTIVE STATE */
body.menu-open .mobile-menu {
  right: 0;
}

body.menu-open .menu-overlay {
  opacity: 1;
  pointer-events: auto;
}

/* ===============================
   ✨ MENU LINKS
================================ */

.mobile-menu a {
  position: relative;
  font-size: 18px;
  color: #e5e7eb;
  text-decoration: none;
  padding: 6px 0;
  transition: 0.25s ease;
}

/* glow underline */
.mobile-menu a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  height: 2px;
  width: 0;

  background: linear-gradient(90deg, #6366f1, #8b5cf6);
  box-shadow: 0 0 10px rgba(99,102,241,0.8);

  transition: width 0.3s ease;
}

.mobile-menu a:hover {
  color: #fff;
}

.mobile-menu a:hover::after {
  width: 100%;
}

/* ===============================
   🖥️ DESKTOP NAV
================================ */

.nav-desktop a {
  position: relative;
  color: #cbd5f5;
  text-decoration: none;
  padding-bottom: 4px;
  transition: 0.25s;
}

.nav-desktop a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  height: 2px;
  width: 0;

  background: linear-gradient(90deg, #6366f1, #8b5cf6);
  box-shadow: 0 0 8px rgba(99,102,241,0.7);

  transition: width 0.3s ease;
}

.nav-desktop a:hover {
  color: #fff;
}

.nav-desktop a:hover::after {
  width: 100%;
}

/* ===============================
🍔 PERFECT HAMBURGER → X
================================ */

.menu-toggle{
  width:26px;
  height:24px;

  position:relative;

  cursor:pointer;
  z-index:1100;

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

  -webkit-tap-highlight-color:transparent;

  will-change:transform;
}

/* LINES */

.menu-toggle span{

  position:absolute;

  width:24px;
  height:2px;

  left:0;

  background:#fff;
  border-radius:999px;

  transform-origin:center;

  transition:
    transform .28s cubic-bezier(.4,0,.2,1),
    opacity .18s ease,
    background .2s ease,
    box-shadow .2s ease;
}

/* DEFAULT STATE */

.menu-toggle span:nth-child(1){
  transform:translateY(-2px);
}

.menu-toggle span:nth-child(2){
  transform:translateY(0);
}

.menu-toggle span:nth-child(3){
  transform:translateY(2px);
}

/* OPEN STATE */

body.menu-open .menu-toggle span:nth-child(1){
  transform:rotate(45deg);
}

body.menu-open .menu-toggle span:nth-child(2){
  opacity:0;
}

body.menu-open .menu-toggle span:nth-child(3){
  transform:rotate(-45deg);
}

/* PURPLE GLOW */

body.menu-open .menu-toggle span{
  background:#8b5cf6;
  box-shadow:0 0 8px rgba(139,92,246,.45);
}

/* ===============================
MENU PANEL
================================ */

.mobile-menu{

  position:fixed;

  top:var(--header-h);
  right:0;

  width:min(78vw,340px);
  height:calc(100dvh - var(--header-h));

  background:
    rgba(4,8,24,.82);

  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);

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

  border-top-left-radius:22px;

  padding:28px 24px;

  display:flex;
  flex-direction:column;
  gap:26px;

  /* START HIDDEN */

  transform:translateX(105%);
  opacity:.98;

  transition:
    transform .34s cubic-bezier(.22,1,.36,1);

  z-index:1090;
}

/* OPEN */

body.menu-open .mobile-menu{
  transform:translateX(0);
}
.menu-toggle{
  display:flex;
  align-items:center;
  justify-content:center;
}
/* ===============================
OVERLAY
================================ */

.menu-overlay{

  position:fixed;

  top:var(--header-h);
  left:0;
  right:0;
  bottom:0;

  background:
    rgba(2,6,23,.38);

  opacity:0;
  visibility:hidden;

  transition:
    opacity .25s ease,
    visibility .25s ease;

  z-index:1080;

  /* important */
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}

body.menu-open .menu-overlay{
  opacity:1;
  visibility:visible;
}

/* LINKS */

.mobile-menu a{
  color:#fff;
  text-decoration:none;

  font-size:20px;
  font-weight:600;

  opacity:.92;

  transform:translateX(12px);
  transition:
    transform .28s ease,
    opacity .28s ease;
}

body.menu-open .mobile-menu a{
  transform:translateX(0);
}

/* stagger effect */

body.menu-open .mobile-menu a:nth-child(1){ transition-delay:.05s; }
body.menu-open .mobile-menu a:nth-child(2){ transition-delay:.08s; }
body.menu-open .mobile-menu a:nth-child(3){ transition-delay:.11s; }
body.menu-open .mobile-menu a:nth-child(4){ transition-delay:.14s; }

/* ===============================
✨ MOBILE SOCIAL ICONS
================================ */

.mobile-socials{

  margin-top:8px;

  display:flex;
  align-items:center;
  gap:18px;

  padding-top:14px;

  border-top:
    1px solid rgba(255,255,255,.05);
}
/* ICON BUTTON */

.social-icon{

  width:42px;
  height:42px;

  border-radius:14px;

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

  text-decoration:none;

  background:
    rgba(255,255,255,.03);

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

  color:#8f96b8;

  transition:
    transform .22s ease,
    background .22s ease,
    color .22s ease,
    box-shadow .22s ease;

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

/* SVG */

.social-icon svg{
  width:20px;
  height:20px;
}

/* HOVER */

.social-icon:hover{
  transform:translateY(-2px);
}

/* INSTAGRAM */

.social-icon.instagram:hover{

  color:#ff4fa3;

  background:
    rgba(255,79,163,.10);

  box-shadow:
    0 0 20px rgba(255,79,163,.22);
}

/* DISCORD */

.social-icon.discord:hover{

  color:#5865F2;

  background:
    rgba(88,101,242,.10);

  box-shadow:
    0 0 20px rgba(88,101,242,.22);
}

/* YOUTUBE */

.social-icon.youtube:hover{

  color:#ff3b30;

  background:
    rgba(255,59,48,.10);

  box-shadow:
    0 0 20px rgba(255,59,48,.22);
}

/* MOBILE TAP */

.social-icon:active{
  transform:scale(.95);
}

/* ===============================
   🎨 Animated Gradient "X"
================================ */

.logo {
  font-weight: 700;
  font-size: 20px;
  color: #fff;
  text-decoration: none;
}

/* THE MAGIC X */
.logo-x {
  display: inline-block;

  background: linear-gradient(
    270deg,
    #ff6ec4,
    #7873f5,
    #00f5d4,
    #ff9a9e,
    #fad0c4
  );

  background-size: 300% 300%;

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  animation: gradientMove 4s ease infinite;
}

/* Smooth flowing animation */
@keyframes gradientMove {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* ONLY target main site navbar */
.site-header {
  position: sticky;
  top: 0;
  z-index: 999;

  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  background: rgba(5, 8, 22, 0.6);
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

/* 🚨 FORCE REMOVE BLACK BOX */
.auth-header,
.auth-header *,
.auth-header h1,
.auth-header p {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

/* optional cleanup */
.auth-header{
  padding: 0 !important;
  margin-bottom: 24px;
}


/* =====================================================
✨ CRAFTSPACE MOBILE BOTTOM DOCK
===================================================== */
/* HIDE BY DEFAULT */

.craftspace-mobile-dock{
  display:none;
}
/* =====================================================
✨ CRAFTSPACE MOBILE BOTTOM DOCK
===================================================== */

@media (max-width:768px){

  .craftspace-mobile-dock{

    position:fixed;
    bottom:14px;

    left:50%;
    transform:translateX(-50%);

    z-index:999999;

    width:calc(100% - 24px);
    max-width:390px;

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

    padding:9px;

    border-radius:24px;

    background:
      linear-gradient(
    180deg,
    rgba(20,24,42,0.88),
    rgba(10,14,28,0.92)
  );

    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);

    border:1px solid rgba(255,255,255,0.08);

    box-shadow:
        0 10px 35px rgba(0,0,0,0.45),
  0 0 0 1px rgba(255,255,255,0.03),
  inset 0 1px 0 rgba(255,255,255,0.04);
  
  overflow:hidden;
  }

  .craftspace-mobile-dock .dock-item{

    flex:1;

    display:flex;
    flex-direction:column;

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

    gap:4px;

    text-decoration:none;

    padding:9px 6px;

    border-radius:16px;

    transition:all .22s ease;
  }

  .craftspace-mobile-dock .dock-icon{
    width:19px;
    height:19px;

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

  .craftspace-mobile-dock .dock-icon svg{

    width:100%;
    height:100%;

    stroke:#8d93b7;
    stroke-width:1.9;

    transition:all .22s ease;
  }

  .craftspace-mobile-dock .dock-label{

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

    letter-spacing:.2px;

    color:#8d93b7;

    transition:all .22s ease;
  }

  /* ACTIVE TAB */

  .craftspace-mobile-dock .dock-item.active{

    background:
      rgba(104,98,255,0.12);

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.03);
  }

  .craftspace-mobile-dock .dock-item.active .dock-icon svg{
    stroke:#ffffff;
  }

  .craftspace-mobile-dock .dock-item.active .dock-label{
    color:#ffffff;
  }

  .craftspace-mobile-dock .dock-item:active{
    transform:scale(.96);
  }

}
.craftspace-mobile-dock::before{
  content:"";

  position:absolute;
  inset:0;

  border-radius:inherit;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.06),
      transparent 45%
    );

  pointer-events:none;
}


/* =====================================================
FIX CONTENT HIDING BEHIND MOBILE DOCK
===================================================== */

@media (max-width:768px){

  /* ADD SAFE SPACE ONLY TO PAGE CONTENT */

  body::after{
    content:"";
    display:block;
    height:95px;
    width:100%;
  }

}

@media (max-width:768px){

  .site-content,
  main,
  .elementor,
  .elementor-section-wrap{
    padding-bottom:95px;
  }

}

/* =====================================================
REFERRAL ADMIN
===================================================== */

.jkx-admin-wrap{

    width:min(1400px,92%);

    margin:60px auto 120px;

    color:#fff;
}

.jkx-admin-top{

    margin-bottom:34px;
}

.jkx-admin-top h1{

    font-size:64px;

    line-height:1;

    margin-bottom:14px;

    font-weight:800;

    background:linear-gradient(
        90deg,
        #ff4fd8,
        #9c6bff
    );

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;
}

.jkx-admin-top p{

    color:rgba(255,255,255,.65);

    font-size:18px;
}

/* =========================
STATS
========================= */

.jkx-stats-grid{

    display:grid;

    grid-template-columns:
    repeat(4,1fr);

    gap:22px;

    margin-bottom:28px;
}

.jkx-stat-card{

    position:relative;

    overflow:hidden;

    padding:30px;

    border-radius:28px;

    background:
    linear-gradient(
        145deg,
        rgba(12,16,45,.92),
        rgba(3,5,25,.96)
    );

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

    min-height:170px;
}

.jkx-stat-card::before{

    content:'';

    position:absolute;

    width:160px;
    height:160px;

    border-radius:50%;

    top:-50px;
    right:-50px;

    opacity:.25;
}

.jkx-stat-card.pink::before{
    background:#ff4fd8;
}

.jkx-stat-card.green::before{
    background:#00ffb3;
}

.jkx-stat-card.orange::before{
    background:#ffb700;
}

.jkx-stat-card.purple::before{
    background:#8b5cff;
}

.jkx-stat-card h2{

    font-size:68px;

    line-height:1;

    margin-bottom:14px;

    font-weight:800;
}

.jkx-stat-card p{

    color:rgba(255,255,255,.7);

    font-size:18px;
}

/* =========================
TABLE
========================= */

.jkx-admin-table{

    background:
    linear-gradient(
        145deg,
        rgba(10,15,40,.92),
        rgba(3,5,25,.96)
    );

    border-radius:34px;

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

    padding:24px;
}

.jkx-admin-controls{

    display:flex;

    gap:16px;

    margin-bottom:22px;
}

.jkx-admin-controls input,
.jkx-admin-controls select{

    height:58px;

    border:none;

    outline:none;

    border-radius:18px;

    padding:0 22px;

    background:
    rgba(255,255,255,.05);

    color:#fff;

    font-size:16px;
}

.jkx-admin-controls input{

    flex:1;
}

.jkx-admin-controls select{

    width:240px;
}

.jkx-admin-controls input::placeholder{

    color:rgba(255,255,255,.45);
}

/* =========================
TABLE
========================= */

.jkx-table-scroll{

    overflow-x:auto;
}

#jkxAdminTable{

    width:100%;

    border-collapse:collapse;

    min-width:1100px;
}

#jkxAdminTable th{

    background:
    rgba(255,255,255,.04);

    color:#fff;

    text-align:left;

    padding:20px;

    font-size:14px;

    font-weight:700;
}

#jkxAdminTable td{

    padding:20px;

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

    color:rgba(255,255,255,.82);

    font-size:14px;
}

#jkxAdminTable tr{

    transition:.25s;
}

#jkxAdminTable tr:hover{

    background:
    rgba(255,255,255,.03);
}

/* =========================
BADGES
========================= */

.jkx-badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:10px 16px;

    border-radius:999px;

    font-size:12px;

    font-weight:700;
}

.jkx-badge.success{

    background:
    rgba(0,255,179,.12);

    color:#00ffb3;

    border:1px solid
    rgba(0,255,179,.2);
}

.jkx-badge.pending{

    background:
    rgba(255,183,0,.12);

    color:#ffb700;

    border:1px solid
    rgba(255,183,0,.2);
}

/* =====================================================
MOBILE
===================================================== */

/* =====================================================
MOBILE
===================================================== */

@media(max-width:768px){

    .jkx-admin-wrap{

        width:92%;

        margin:30px auto 120px;
    }

    .jkx-admin-top h1{

        font-size:36px;

        line-height:1.1;
    }

    .jkx-admin-top p{

        font-size:14px;
    }

    .jkx-stats-grid{

        grid-template-columns:
        1fr 1fr;

        gap:12px;
    }

    .jkx-stat-card{

        min-height:100px;

        padding:16px;

        border-radius:20px;
    }

    .jkx-stat-card h2{

        font-size:34px;

        margin-bottom:10px;
    }

    .jkx-stat-card p{

        font-size:12px;

        line-height:1.3;
    }

    .jkx-admin-table{

        padding:14px;

        border-radius:24px;
    }

    /* ====================================
       SEARCH + FILTER
    ==================================== */

    .jkx-admin-controls{

        display:flex;

        flex-direction:row;

        align-items:center;

        gap:10px;

        margin-bottom:18px;
    }

    .jkx-admin-controls input{

        flex:1;

        min-width:0;

        height:52px;

        padding:0 18px;

        border-radius:16px;

        font-size:14px;
    }

    .jkx-admin-controls select{

        width:145px;

        min-width:145px;

        height:52px;

        border-radius:16px;

        padding:0 42px 0 16px;

        font-size:13px;
    }

    /* ====================================
       REAL TABLE MOBILE
    ==================================== */

    .jkx-table-scroll{

        overflow-x:auto;

        -webkit-overflow-scrolling:touch;

        border-radius:18px;
    }

    #jkxAdminTable{

        width:100%;

        min-width:900px;

        border-collapse:collapse;
    }

    #jkxAdminTable thead{

        display:table-header-group !important;
    }

    #jkxAdminTable tbody{

        display:table-row-group !important;
    }

    #jkxAdminTable tr{

        display:table-row !important;
    }

    #jkxAdminTable th{

        display:table-cell !important;

        white-space:nowrap;

        padding:18px 16px;

        font-size:13px;
    }

    #jkxAdminTable td{

        display:table-cell !important;

        white-space:nowrap;

        padding:18px 16px;

        font-size:13px;

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

    #jkxAdminTable td::before{

        display:none !important;

        content:none !important;
    }

}
/* =========================================
REFERRAL ADMIN — MOBILE FIX PACK
========================================= */

.jkx-admin-controls{
    display:flex;
    gap:16px;
    margin-bottom:28px;
    align-items:center;
}

.jkx-admin-controls input,
.jkx-admin-controls select{
    background:#11152b;
    border:1px solid rgba(255,255,255,0.08);
    color:#fff;
    height:58px;
    border-radius:18px;
    padding:0 22px;
    font-size:16px;
    outline:none;
    transition:0.25s ease;
    box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    0 10px 30px rgba(0,0,0,0.22);
}

.jkx-admin-controls input{
    flex:1;
    min-width:0;
}

.jkx-admin-controls input::placeholder{
    color:rgba(255,255,255,0.45);
}

.jkx-admin-controls input:focus,
.jkx-admin-controls select:focus{
    border-color:#ff4fd8;
    box-shadow:
    0 0 0 3px rgba(255,79,216,0.15);
}

/* =========================================
FIX SELECT LOOK
========================================= */

.jkx-admin-controls select{
    width:240px;

    appearance:none;
    -webkit-appearance:none;
    -moz-appearance:none;

    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M1.5 5.5l6 6 6-6' stroke='white' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");

    background-repeat:no-repeat;
    background-position:right 18px center;

    padding-right:52px;

    cursor:pointer;
}

/* fixes white dropdown options */

.jkx-admin-controls select option{
    background:#0b1023;
    color:#fff;
}

/* =========================================
MOBILE CONTROL BAR FINAL FIX
========================================= */

@media(max-width:768px){

    .jkx-admin-controls{
        display:flex;
        flex-direction:row !important;
        align-items:center;
        gap:10px;
        margin-bottom:18px;
    }

    /* SEARCH */

    .jkx-admin-controls input{
        flex:1;
        min-width:0;

        height:52px !important;

        padding:0 18px !important;

        border-radius:16px !important;

        font-size:15px !important;

        background:#121833 !important;

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

        box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.03),
        0 8px 24px rgba(0,0,0,0.24);

        color:#fff !important;
    }

    .jkx-admin-controls input::placeholder{
        color:rgba(255,255,255,0.45);
        font-size:15px;
    }

    /* FILTER */

    .jkx-admin-controls select{

        width:145px !important;

        min-width:145px !important;

        max-width:145px !important;

        height:52px !important;

        border-radius:16px !important;

        padding:0 42px 0 16px !important;

        font-size:14px !important;

        background-color:#121833 !important;

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

        color:#fff !important;

        appearance:none;
        -webkit-appearance:none;
        -moz-appearance:none;

        background-size:16px;

        background-position:right 14px center;

        box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.03),
        0 8px 24px rgba(0,0,0,0.24);
    }

    /* DROPDOWN OPTIONS */

    .jkx-admin-controls select option{
        background:#0b1023 !important;
        color:#ffffff !important;
        font-size:14px;
    }

}

/* =========================================
EXTRA SMALL PHONES
========================================= */

@media(max-width:420px){

    .jkx-admin-controls{
        gap:8px;
    }

    .jkx-admin-controls input{
        height:48px !important;
        font-size:14px !important;
        padding:0 16px !important;
    }

    .jkx-admin-controls select{

        width:132px !important;
        min-width:132px !important;
        max-width:132px !important;

        height:48px !important;

        font-size:13px !important;

        padding:0 38px 0 14px !important;
    }

}


/* =========================================
TOP SUPPORTERS SECTION
========================================= */

.jkx-leaderboard-wrap{

    margin-top:42px;

    background:
    linear-gradient(
        180deg,
        rgba(255,255,255,0.03),
        rgba(255,255,255,0.015)
    );

    border:1px solid rgba(255,255,255,0.06);

    border-radius:34px;

    padding:28px;

    overflow:hidden;

    backdrop-filter:blur(18px);

    box-shadow:
    0 20px 60px rgba(0,0,0,0.28);
}

.jkx-section-head{
    margin-bottom:24px;
}

.jkx-section-head h2{

    font-size:34px;

    font-weight:800;

    color:#fff;

    margin-bottom:10px;
}

.jkx-section-head p{

    color:rgba(255,255,255,0.58);

    font-size:15px;
}

.jkx-leaderboard-table{
    width:100%;
    border-collapse:collapse;
}

.jkx-leaderboard-table th{

    background:#121833;

    color:#fff;

    font-size:14px;

    font-weight:700;

    padding:20px;

    text-align:left;
}

.jkx-leaderboard-table td{

    padding:22px 20px;

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

    color:rgba(255,255,255,0.92);

    font-size:15px;
}

.jkx-leaderboard-table tr:hover{

    background:
    rgba(255,255,255,0.02);
}

/* =========================================
MOBILE
========================================= */

@media(max-width:768px){

    .jkx-leaderboard-wrap{
        padding:18px;
        border-radius:26px;
        margin-top:28px;
    }

    .jkx-section-head h2{
        font-size:28px;
    }

    .jkx-section-head p{
        font-size:14px;
        line-height:1.6;
    }

    .jkx-leaderboard-table,
    .jkx-leaderboard-table thead,
    .jkx-leaderboard-table tbody,
    .jkx-leaderboard-table tr,
    .jkx-leaderboard-table td{
        display:block;
        width:100%;
    }

    .jkx-leaderboard-table thead{
        display:none;
    }

    .jkx-leaderboard-table tr{

        background:#0f1430;

        border:
        1px solid rgba(255,255,255,0.06);

        border-radius:22px;

        padding:18px;

        margin-bottom:16px;
    }

    .jkx-leaderboard-table td{

        display:flex;

        justify-content:space-between;

        gap:14px;

        padding:12px 0;

        font-size:14px;

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

    .jkx-leaderboard-table td:last-child{
        border-bottom:none;
    }

    .jkx-leaderboard-table td:nth-child(1)::before{
        content:"Rank";
        font-weight:700;
    }

    .jkx-leaderboard-table td:nth-child(2)::before{
        content:"User ID";
        font-weight:700;
    }

    .jkx-leaderboard-table td:nth-child(3)::before{
        content:"Email";
        font-weight:700;
    }

    .jkx-leaderboard-table td:nth-child(4)::before{
        content:"Referrals";
        font-weight:700;
    }

    .jkx-leaderboard-table td:nth-child(5)::before{
        content:"Rewarded";
        font-weight:700;
    }

    .jkx-leaderboard-table td:nth-child(6)::before{
        content:"Pending";
        font-weight:700;
    }

    .jkx-leaderboard-table td:nth-child(7)::before{
        content:"Human Escape";
        font-weight:700;
    }

    .jkx-leaderboard-table td:nth-child(8)::before{
        content:"Last Activity";
        font-weight:700;
    }

}

/* =========================================
TOP SUPPORTERS
========================================= */

.jkx-top-supporters{

  margin-top:40px;

  padding:28px;

  border-radius:28px;

  background:
  rgba(255,255,255,.04);

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

  overflow:hidden;
}

.jkx-top-header h2{

  margin:0;

  font-size:28px;

  color:#fff;
}

.jkx-top-header p{

  margin-top:8px;

  color:rgba(255,255,255,.65);
}

.jkx-supporters-table-wrap{

  overflow-x:auto;

  margin-top:26px;
}

.jkx-supporters-table{

  width:100%;

  border-collapse:collapse;

  min-width:1100px;
}

.jkx-supporters-table th{

  text-align:left;

  padding:16px;

  font-size:13px;

  color:#94a3b8;

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

.jkx-supporters-table td{

  padding:18px 16px;

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

  color:#fff;

  font-size:14px;
}

.jkx-user-cell{

  display:flex;
  align-items:center;

  gap:12px;
}

.jkx-user-avatar{

  width:42px;
  height:42px;

  border-radius:50%;

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

  background:
  linear-gradient(
    135deg,
    #ec4899,
    #8b5cf6
  );

  color:#fff;

  font-weight:700;
}

.jkx-user-cell small{

  display:block;

  margin-top:4px;

  color:rgba(255,255,255,.45);
}

.jkx-human{

  display:inline-flex;

  align-items:center;

  padding:7px 12px;

  border-radius:999px;

  font-size:12px;

  font-weight:700;
}

.jkx-human.yes{

  background:
  rgba(34,197,94,.15);

  color:#4ade80;
}

.jkx-human.no{

  background:
  rgba(255,255,255,.08);

  color:#94a3b8;
}

/* MOBILE */

@media(max-width:768px){

  .jkx-top-supporters{

    padding:18px;
  }

  .jkx-top-header h2{

    font-size:22px;
  }

  .jkx-supporters-table{

    min-width:900px;
  }

}


/* ====================================
   PAGINATION
==================================== */

.jkx-pagination{

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

  gap:14px;

  margin-top:28px;
}

.jkx-pagination button{

  height:44px;

  padding:0 18px;

  border-radius:14px;

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

  background:
  rgba(255,255,255,.04);

  color:#fff;

  font-size:14px;
  font-weight:600;

  cursor:pointer;

  transition:.25s;
}

.jkx-pagination button:hover{

  background:
  rgba(236,72,153,.15);

  border-color:
  rgba(236,72,153,.4);
}

.jkx-pagination button:disabled{

  opacity:.35;
  cursor:not-allowed;
}

#jkxPageInfo{

  color:
  rgba(255,255,255,.72);

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

/* MOBILE */

@media(max-width:768px){

  .jkx-pagination{

    margin-top:20px;

    gap:10px;
  }

  .jkx-pagination button{

    flex:1;

    height:42px;

    font-size:13px;
  }

  #jkxPageInfo{

    font-size:12px;
  }

}




/* =========================================
   TOP SUPPORTERS PAGINATION
========================================= */

.jkx-supporters-pagination{

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

  margin-top:22px;
}

.jkx-supporters-pagination button{

  height:44px;

  padding:0 18px;

  border:none;
  border-radius:14px;

  background:
  rgba(255,255,255,.06);

  color:#fff;

  font-size:14px;
  font-weight:600;

  cursor:pointer;

  transition:.25s;
}

.jkx-supporters-pagination button:hover{

  background:
  rgba(255,255,255,.12);

}

.jkx-supporters-pagination button:disabled{

  opacity:.35;
  cursor:not-allowed;

}

#jkxSupportersPageInfo{

  color:rgba(255,255,255,.7);

  font-weight:600;
}


@media (max-width:768px){

  .preview-watermark{

      left:50% !important;
      top:50% !important;

      transform:translate(-50%, -50%) !important;

      width:max-content !important;

      max-width:90vw;

      text-align:center;

      font-size:42px !important;

      line-height:1.05;

      white-space:normal;

      word-break:break-word;

  }


}



/* =========================================
   🌌 HUMAN ESCAPE HOME
========================================= */

.home-human-escape{

  position:relative;

  padding:130px 24px;

  overflow:hidden;
}

.human-escape-glow{

  position:absolute;

  width:520px;
  height:520px;

  border-radius:999px;

  background:
  radial-gradient(
    circle,
    rgba(236,72,153,.14),
    transparent 70%
  );

  top:50%;
  left:50%;

  transform:
  translate(-50%,-50%);

  filter:blur(40px);

  pointer-events:none;
}

.human-escape-wrap{

  position:relative;

  z-index:2;

  width:100%;
  max-width:1180px;

  margin:auto;

  display:grid;

  grid-template-columns:
  1.08fr .92fr;

  gap:70px;

  align-items:center;
}

/* =========================================
   LEFT
========================================= */

.human-escape-mini{

  display:inline-flex;

  align-items:center;

  gap:8px;

  padding:10px 16px;

  border-radius:999px;

  background:
  rgba(255,255,255,.04);

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

  color:
  rgba(255,255,255,.72);

  font-size:13px;

  margin-bottom:24px;
}

.human-escape-left h2{

  font-size:82px;

  line-height:.95;

  font-weight:900;

  letter-spacing:-4px;

  max-width:620px;

  margin-bottom:28px;
}

.human-escape-left p{

  max-width:560px;

  color:
  rgba(255,255,255,.72);

  line-height:1.95;

  font-size:17px;

  margin-bottom:36px;
}

.human-escape-btn{

  display:inline-flex;

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

  height:58px;

  padding:0 30px;

  border-radius:18px;

  background:
  linear-gradient(
    90deg,
    #ec4899,
    #8b5cf6
  );

  color:white;

  font-weight:700;

  text-decoration:none;

  transition:.25s ease;
}

.human-escape-btn:hover{

  transform:
  translateY(-2px);

  box-shadow:
  0 14px 40px rgba(236,72,153,.24);
}

/* =========================================
   RIGHT
========================================= */

.human-progress-card{

  position:relative;

  padding:34px;

  border-radius:34px;

  background:
  rgba(255,255,255,.04);

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

  backdrop-filter:blur(18px);

  overflow:hidden;
}

.human-progress-card::before{

  content:"";

  position:absolute;

  inset:0;

  background:
  linear-gradient(
    135deg,
    rgba(236,72,153,.06),
    rgba(139,92,246,.04)
  );

  pointer-events:none;
}

.human-progress-badge{

  position:absolute;

  top:24px;
  right:24px;

  padding:10px 14px;

  border-radius:999px;

  background:
  rgba(236,72,153,.14);

  color:#f472b6;

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

.human-progress-number{

  position:relative;

  z-index:2;

  font-size:88px;

  line-height:1;

  font-weight:900;

  margin-bottom:12px;

  background:
  linear-gradient(
    90deg,
    #ec4899,
    #8b5cf6
  );

  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

.human-progress-label{

  color:
  rgba(255,255,255,.84);

  font-size:18px;

  margin-bottom:22px;
}

.human-progress-text{

  color:
  rgba(255,255,255,.68);

  line-height:1.9;

  margin-bottom:28px;

  max-width:520px;
}

.human-progress-head{

  display:flex;

  align-items:center;
  justify-content:space-between;

  gap:20px;

  margin-bottom:14px;

  color:
  rgba(255,255,255,.72);

  font-size:14px;
}

.human-progress-track{

  width:100%;
  height:16px;

  border-radius:999px;

  overflow:hidden;

  background:
  rgba(255,255,255,.05);
}

.human-progress-fill{

  height:100%;

  border-radius:999px;

  background:
  linear-gradient(
    90deg,
    #ec4899,
    #8b5cf6
  );

  box-shadow:
  0 0 24px rgba(236,72,153,.3);

  animation:
  humanProgressLoad 1.6s ease;
}

@keyframes humanProgressLoad{

  from{
    width:0;
  }

  to{
    width:<?php echo $progress; ?>%;
  }
}

/* =========================================
   MOBILE
========================================= */

@media(max-width:768px){

  .home-human-escape{

    padding:100px 18px;
  }

  .human-escape-wrap{

    grid-template-columns:1fr;

    gap:38px;
  }

  .human-escape-left{

    text-align:center;
  }

  .human-escape-left h2{

    font-size:48px;

    line-height:1.02;

    letter-spacing:-2px;

    margin:
    0 auto 20px;

    max-width:320px;
  }

  .human-escape-left p{

    margin:
    0 auto 28px;

    max-width:320px;

    font-size:15px;
  }

  .human-progress-card{

    padding:26px 22px;

    border-radius:28px;
  }

  .human-progress-badge{

    position:static;

    display:inline-flex;

    margin-bottom:20px;
  }

  .human-progress-number{

    font-size:62px;
  }

}



.jk-contact-page{
    min-height:100vh;
    padding:120px 20px 60px;
    background:#050816;
    display:flex;
    justify-content:center;
}

.jk-contact-card{
    width:100%;
    max-width:720px;
    background:rgba(255,255,255,0.03);
    border:1px solid rgba(255,255,255,0.06);
    border-radius:28px;
    padding:32px;
    backdrop-filter:blur(18px);
}

.jk-badge{
    display:inline-flex;
    padding:8px 14px;
    border-radius:999px;
    background:rgba(236,72,153,0.12);
    color:#ff77c8;
    font-size:13px;
    margin-bottom:18px;
}

.jk-contact-head h1{
    font-size:42px;
    color:#fff;
    margin-bottom:14px;
}

.hero-text{
    color:rgba(255,255,255,0.72);
    line-height:1.7;
    font-size:16px;
}

.jk-note{
    margin-top:34px;
}

.jk-note p{
    color:rgba(255,255,255,0.76);
    line-height:1.8;
    margin-bottom:18px;
}

#jkContactForm{
    margin-top:40px;
    display:flex;
    flex-direction:column;
    gap:18px;
}

#jkContactForm input,
#jkContactForm textarea{
    width:100%;
    background:rgba(255,255,255,0.04);
    border:1px solid rgba(255,255,255,0.08);
    border-radius:18px;
    padding:18px;
    color:#fff;
    font-size:15px;
}

#jkContactForm textarea{
    resize:none;
}

#jkContactForm button{
    height:56px;
    border:none;
    border-radius:18px;
    background:linear-gradient(135deg,#8b5cf6,#ec4899);
    color:#fff;
    font-weight:600;
    font-size:15px;
    cursor:pointer;
}

#jkContactStatus{
    color:#7dffb3;
    font-size:14px;
}

@media(max-width:768px){

    .jk-contact-card{
        padding:24px;
        border-radius:22px;
    }

    .jk-contact-head h1{
        font-size:32px;
    }

}






/* =========================================
   PREVIEW EXIT BUTTON
========================================= */

.preview-exit-btn{

  position:fixed;
  top:18px;
  left:18px;

  width:48px;
  height:48px;

  border-radius:999px;

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

  z-index:999999;

  background:rgba(255,255,255,0.10);

  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);

  border:1px solid rgba(255,255,255,0.16);

  box-shadow:
    0 8px 30px rgba(0,0,0,0.22),
    inset 0 1px 0 rgba(255,255,255,0.12);

  transition:all .25s ease;

  text-decoration:none;
}

.preview-exit-btn:hover{

  transform:scale(1.06);

  background:rgba(255,255,255,0.14);
}

.preview-exit-btn:active{

  transform:scale(.96);
}

.preview-exit-btn svg{

  opacity:.92;
}


/* =========================================
   PREVIEW WATERMARK FIX
========================================= */

.preview-watermark{

  position:fixed;

  top:50%;
  left:50%;

  transform:translate(-50%,-50%) rotate(-28deg);

  width:100%;

  text-align:center;

  pointer-events:none;

  z-index:9999;

  font-size:clamp(20px,6vw,58px);

  font-weight:800;

  letter-spacing:.18em;

  color:rgba(255,255,255,0.07);

  white-space:nowrap;

  user-select:none;
}


/* MOBILE */
@media(max-width:768px){

  .preview-watermark{

    width:140%;

    font-size:28px;

    letter-spacing:.12em;

    transform:translate(-50%,-50%) rotate(-28deg);
  }

  .preview-exit-btn{

    top:14px;
    left:14px;

    width:44px;
    height:44px;
  }

}
.preview-watermark{
    position:fixed;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);

    width:100%;
    text-align:center;

    font-size:72px;
    font-weight:800;
    letter-spacing:2px;
    line-height:1.05;

    color:rgba(255,255,255,0.06);

    pointer-events:none;
    user-select:none;

    z-index:1;

    white-space:normal;
    padding:0 20px;
    box-sizing:border-box;
}


@media (max-width:768px){

  .preview-watermark{

      left:50% !important;
      top:50% !important;

      transform:translate(-50%, -50%) !important;

      width:max-content !important;

      max-width:90vw;

      text-align:center;

      font-size:42px !important;

      line-height:1.05;

      white-space:normal;

      word-break:break-word;

  }

}

/* =========================================
PREVIEW WATERMARK
========================================= */

/* =========================================
DESKTOP WATERMARK FIX ONLY
========================================= */

.preview-watermark{

    position:fixed;

    top:50% !important;
    left:50% !important;

    transform:
    translate(-50%, -50%)
    rotate(-28deg) !important;

    width:auto !important;

    max-width:none !important;

    text-align:center;

    white-space:nowrap;

    z-index:1;

    pointer-events:none;

    user-select:none;

    font-size:72px;

    font-weight:800;

    line-height:1.05;

    letter-spacing:2px;

    color:rgba(255,255,255,0.06);
}

/* MOBILE */

@media(max-width:768px){

    .preview-watermark{

        font-size:42px;

        width:90vw;

        max-width:90vw;

        white-space:normal;

        word-break:break-word;

        line-height:1.08;

        transform:
        translate(-50%, -50%)
        rotate(-28deg);
    }

}



.preview-watermark{
    position: fixed !important;

    top: 50% !important;
    left: 50% !important;

    transform: translate(-50%, -50%) !important;

    width: 100% !important;

    text-align: center !important;

    font-size: 64px !important;
    font-weight: 800 !important;
    letter-spacing: 8px !important;

    white-space: nowrap !important;

    color: rgba(255,255,255,.06) !important;

    z-index: 1 !important;

    pointer-events: none !important;
}



@media (max-width:768px){

  .preview-watermark{

      font-size:22px !important;

      letter-spacing:3px !important;

      width:90% !important;

      white-space:normal !important;

      line-height:1.4 !important;

      text-align:center !important;

  }

}