/* =====================================================================
   CYBER-DEVS  ?  
   Load this file AFTER the inline <style> block in index.php so it wins
   the cascade. It only changes look (colors / fonts / glow / shape)  
   it does NOT touch layout, positions, or markup. Same panel, same
   order, same everything   just re-painted in the UltimateX style.

   Path: /style/cyberdevs_style1.css
   Include in <head>, right before </head> or right after the existing
   <style> block:
       <link rel="stylesheet" href="/style/cyberdevs_style1.css">
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Audiowide&family=Share+Tech+Mono&family=Rajdhani:wght@400;500;600;700&display=swap');

/* ===== 1. CORE PALETTE   override every --g/--bg/etc. variable ===== */
:root {
    /* base surface */
    --bg:      #020a06;
    --bgcard:  #0a1a10;
    --lgray:   rgba(255,255,255,0.10);
    --mgray:   #8bb3a0;
    --dgray:   #cff0e0;
    --black:   #f0f0f0;

    /* accent (dark green) */
    --g:       #00d26a;
    --gl:      #4ee29a;
    --gd:      #00a850;
    --gdark:   #007b3a;
    --gpale:   rgba(0,210,106,0.08);
    --gmid:    rgba(0,210,106,0.18);

    /* status colors kept but tuned to fit dark theme */
    --red:     #ff3e6a;
    --gold:    #ffd24a;
    --blue:    #29c46a;

    /* secondary accent used for CTA/donate-style elements (was pink already) */
    --pink:    #ff3e8a;
    --pink-l:  #ff7eb3;

    --shadow:  0 2px 12px rgba(0,0,0,0.45);
    --shadowM: 0 8px 28px rgba(0,0,0,0.55);
    --shadowG: 0 4px 22px rgba(0,210,106,0.30);

    --r:      12px;
    --rL:     18px;
    --rBtn:   10px;
}

/* ===== 2. FONTS   left as normal/default site fonts, no override ===== */
body {
    background: var(--bg);
    color: var(--dgray);
}

/* Sidebar menu labels ("Buy Privileges", "Buyers List", etc.) were plain
   text (.sb-nav-txt) while other UI used a styled display font. Give the
   menu labels the same modern treatment so the whole nav matches. */
.sb-nav-txt {
    font-family: 'Rajdhani', sans-serif !important;
    font-weight: 700 !important;
    letter-spacing: 0.4px !important;
}

/* ===== 3. BACKDROP   realistic black + green smoke/haze mixed in the
   top-left corner, fading out toward the rest of the page ===== */
html, body {
    background:
        radial-gradient(ellipse 900px 700px at 0% 0%, rgba(0,60,30,0.55) 0%, rgba(0,40,20,0.30) 22%, rgba(0,20,12,0.12) 42%, transparent 62%),
        radial-gradient(ellipse 600px 500px at 6% 4%, rgba(0,210,106,0.20) 0%, rgba(0,120,65,0.10) 30%, transparent 60%),
        radial-gradient(circle at 0% 0%, #000000 0%, transparent 55%),
        var(--bg) !important;
    background-repeat: no-repeat !important;
}

/* ===== 4. SCROLLBAR ===== */
::-webkit-scrollbar-track { background: #0a1a10; }
::-webkit-scrollbar-thumb { background: var(--g); }

/* ===== 5. HEADER ===== */
header {
    background: rgba(2,10,6,0.9) !important;
    backdrop-filter: blur(15px);
    border-bottom: 1.5px solid rgba(0,210,106,0.25) !important;
    box-shadow: 0 2px 20px rgba(0,210,106,0.10) !important;
}
.idx-hdr-sep { background: rgba(255,255,255,0.12) !important; }
.idx-hdr-page-title { color: #fff; letter-spacing: 1px; }
.idx-logo-txt { color: #fff; }
.idx-logo-txt span { color: var(--g) !important; text-shadow: 0 0 12px var(--gpale); }
.idx-hdr-nick { color: var(--mgray); }

/* ===== 6. LEFT PANEL / NAV ===== */
.idx-panel {
    background: rgba(255,255,255,0.02) !important;
    border-right: 1px solid rgba(255,255,255,0.06) !important;
}
.idx-panel-balance { border-bottom: 1px solid rgba(255,255,255,0.06) !important; }
.idx-panel-avatar-ring {
    /* Base ring color is now driven entirely by the .rank-* class applied
       in the markup (see section 14, Site Rank System) so every privilege
       shows its own color instead of a fixed green. */
}
.idx-panel-nick { color: #fff !important; }
.idx-section-title { color: var(--mgray) !important; letter-spacing: 2px; }

.sb-nav-btn {
    color: rgba(255,255,255,0.55) !important;
    border-left: 2px solid transparent !important;
}
.sb-nav-btn i { color: var(--mgray) !important; }
.sb-nav-btn:hover,
.sb-nav-btn.active {
    background: rgba(0,210,106,0.08) !important;
    color: #fff !important;
    border-left-color: var(--g) !important;
}
.sb-nav-btn:hover i,
.sb-nav-btn.active i { color: var(--g) !important; }

/* Keep each nav item's own accent hue, just recolored for dark glass look */
.sb-nav-btn[data-page="buy-privileges"].active,
.sb-nav-btn[data-page="buy-privileges"]:hover { background:rgba(0,210,106,0.10) !important; color:var(--g) !important; border-left-color:var(--g) !important; }
.sb-nav-btn[data-page="personal-account"].active,
.sb-nav-btn[data-page="personal-account"]:hover { background:rgba(41,196,106,0.10) !important; color:#29c46a !important; border-left-color:#29c46a !important; }
.sb-nav-btn[data-page="servers-tracking"].active,
.sb-nav-btn[data-page="servers-tracking"]:hover { background:rgba(0,210,106,0.10) !important; color:#00d26a !important; border-left-color:#00d26a !important; }
.sb-nav-btn[data-page="tech-support"].active,
.sb-nav-btn[data-page="tech-support"]:hover { background:rgba(255,178,74,0.10) !important; color:#ffb24a !important; border-left-color:#ffb24a !important; }
.sb-nav-btn[data-page="support-us"].active,
.sb-nav-btn[data-page="support-us"]:hover,
.sb-nav-btn[data-page="adminpanel"].active,
.sb-nav-btn[data-page="adminpanel"]:hover { background:rgba(255,62,138,0.10) !important; color:var(--pink) !important; border-left-color:var(--pink) !important; }
.sb-nav-btn[data-page="create-clan"].active,
.sb-nav-btn[data-page="create-clan"]:hover { background:rgba(255,62,110,0.10) !important; color:var(--red) !important; border-left-color:var(--red) !important; }
.sb-nav-btn.cs-nav-btn.active,
.sb-nav-btn.cs-nav-btn:hover { background:rgba(255,62,110,0.10) !important; color:var(--red) !important; border-left-color:var(--red) !important; }
.sb-nav-btn.cs-nav-btn.active i,
.sb-nav-btn.cs-nav-btn:hover i { color: var(--red) !important; }
.sb-nav-btn[data-page="top-clans"].active,
.sb-nav-btn[data-page="top-clans"]:hover { background:rgba(0,210,106,0.10) !important; color:#00d26a !important; border-left-color:#00d26a !important; }
.sb-nav-btn[data-page="top-players"].active,
.sb-nav-btn[data-page="top-players"]:hover { background:rgba(0,210,106,0.10) !important; color:var(--g) !important; border-left-color:var(--g) !important; }
.sb-nav-btn[data-page="off-client"].active,
.sb-nav-btn[data-page="off-client"]:hover { background:rgba(41,196,106,0.10) !important; color:#29c46a !important; border-left-color:#29c46a !important; }
.sb-nav-btn[data-page="giveaways"].active,
.sb-nav-btn[data-page="giveaways"]:hover { background:rgba(255,210,74,0.10) !important; color:#ffd24a !important; border-left-color:#ffd24a !important; }
.sb-nav-btn[data-page="offers"].active,
.sb-nav-btn[data-page="offers"]:hover { background:rgba(255,126,60,0.10) !important; color:#ff7e3c !important; border-left-color:#ff7e3c !important; }

/* ===== 7. CARDS ===== */
.card {
    background: rgba(255,255,255,0.02) !important;
    border: 1px solid rgba(255,255,255,0.07) !important;
    box-shadow: var(--shadow) !important;
}
.card:hover {
    box-shadow: var(--shadowM) !important;
    border-color: rgba(0,210,106,0.25) !important;
}
.card-top { border-top: 3px solid var(--g) !important; }
.card-head { border-bottom: 1px solid rgba(255,255,255,0.07) !important; }
.ch-icon {
    background: var(--gpale) !important;
    border-color: rgba(0,210,106,0.30) !important;
    color: var(--g) !important;
}
.ch-title { color: #fff !important; }
.ch-sub { color: var(--mgray) !important; }

.pg-title { color: #fff !important; text-shadow: 0 0 20px rgba(0,210,106,0.35); }
.pg-title-accent { color: var(--g) !important; }
.pg-sub { color: var(--mgray) !important; }

/* ===== 8. FORMS / INPUTS ===== */
.flbl { color: rgba(255,255,255,0.75) !important; }
.flbl i { color: var(--g) !important; }
.finp, .fsel {
    background: rgba(0,0,0,0.35) !important;
    border: 1.5px solid rgba(255,255,255,0.12) !important;
    color: #fff !important;
}
.finp:focus, .fsel:focus {
    border-color: var(--g) !important;
    background: rgba(0,0,0,0.5) !important;
    box-shadow: 0 0 14px rgba(0,210,106,0.25) !important;
}
.finp::placeholder { color: var(--mgray) !important; }
.fsel option { background: #0a1a10 !important; color: #fff; }
.fhint { color: var(--mgray) !important; }
.fhint i { color: var(--gold) !important; }
.freq { color: var(--g) !important; }
.ferr { color: var(--red) !important; }

/* ===== 9. BUTTONS ===== */
.btn {
    border: 2px solid var(--g) !important;
    background: rgba(0,210,106,0.06) !important;
    color: var(--g) !important;
    box-shadow: 0 0 0 rgba(0,210,106,0);
    transition: transform .2s, box-shadow .2s, background .2s;
}
.btn:hover {
    background: rgba(0,210,106,0.14) !important;
    box-shadow: 0 8px 22px rgba(0,210,106,0.30) !important;
}
.btn-g, .btn-out {
    background: rgba(0,210,106,0.06) !important;
    border-color: var(--g) !important;
    color: var(--g) !important;
}
.btn-disc {
    background: rgba(47,191,90,0.08) !important;
    border-color: #2fbf5a !important;
    color: #2fbf5a !important;
}
.btn-disc:hover { box-shadow: 0 6px 20px rgba(47,191,90,0.40) !important; }
.btn-ghost {
    background: rgba(255,255,255,0.03) !important;
    border-color: rgba(255,255,255,0.12) !important;
    color: rgba(255,255,255,0.7) !important;
}
.btn-ghost:hover { border-color: var(--g) !important; color: var(--g) !important; }

.btn-buy {
    background: linear-gradient(135deg, var(--g), var(--gd)) !important;
    border: 2.5px solid var(--g) !important;
    color: #fff !important;
    box-shadow: 0 8px 25px rgba(0,210,106,0.35) !important;
}
.btn-buy:hover { transform: translateY(-3px); box-shadow: 0 15px 35px rgba(0,210,106,0.45) !important; }

/* ===== VIP TEST (5 Days) - option row inside the "Choose Privilege" dropdown ===== */
#privilege-select option.opt-viptest {
    color: #3ddc70;
    font-weight: 800;
    background: #0a1f12;
}
/* Purchase button re-themed to the VIP Test glow while that option is selected */
#purchase-btn.btn-viptest-active {
    background: linear-gradient(135deg, #0a5c28, #1db954, #3ddc70) !important;
    background-size: 200% 200% !important;
    border: 2px solid #3ddc70 !important;
    box-shadow: 0 0 0 0 rgba(61,220,112,0.55), 0 8px 25px rgba(0,210,106,0.35) !important;
    text-shadow: 0 0 8px rgba(61,220,112,0.9), 0 0 2px rgba(0,0,0,0.6);
    animation: viptestPulse 2.2s ease-in-out infinite, viptestSheen 3.6s linear infinite;
}

/* ===== VIP TEST (5 Days) - free trial button, Zombie Plague UltimateX only ===== */
.btn-viptest {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 14px;
    margin-bottom: 14px;
    background: linear-gradient(135deg, #0a5c28, #1db954, #3ddc70) !important;
    background-size: 200% 200% !important;
    border: 2px solid #3ddc70 !important;
    border-radius: 10px !important;
    color: #ffffff !important;
    font-family: 'Bangers', cursive !important;
    font-size: 16px !important;
    letter-spacing: 2px !important;
    text-shadow: 0 0 8px rgba(61,220,112,0.9), 0 0 2px rgba(0,0,0,0.6);
    cursor: pointer;
    overflow: hidden;
    animation: viptestPulse 2.2s ease-in-out infinite, viptestSheen 3.6s linear infinite;
    transition: transform .22s;
}
.btn-viptest:hover { transform: translateY(-3px); }
.btn-viptest:disabled { cursor: default; opacity: 0.75; animation: none; transform: none; }
.btn-viptest i { filter: drop-shadow(0 0 4px rgba(61,220,112,0.9)); }
@keyframes viptestPulse {
    0%   { box-shadow: 0 0 0 0 rgba(61,220,112,0.55), 0 8px 25px rgba(0,210,106,0.35); }
    50%  { box-shadow: 0 0 22px 6px rgba(61,220,112,0.65), 0 8px 25px rgba(0,210,106,0.45); }
    100% { box-shadow: 0 0 0 0 rgba(61,220,112,0.55), 0 8px 25px rgba(0,210,106,0.35); }
}
@keyframes viptestSheen {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.btn-help {
    background: rgba(255,255,255,0.02) !important;
    border-color: rgba(255,255,255,0.10) !important;
    color: rgba(255,255,255,0.65) !important;
}
.btn-help:hover {
    border-color: var(--g) !important;
    color: var(--g) !important;
    background: rgba(0,210,106,0.06) !important;
}

.btn-danger {
    border-color: var(--red) !important;
    background: rgba(255,62,110,0.08) !important;
    color: var(--red) !important;
}

/* ===== 10. GLOW ANIMATIONS   swap green pulses for cyan pulses ===== */
@keyframes greenGlow {
    0%   { border-color:#007b3a; box-shadow:0 0 0 0 rgba(0,168,110,0); }
    25%  { border-color:#00d26a; box-shadow:0 0 14px 3px rgba(0,210,106,.40); }
    50%  { border-color:#4ee29a; box-shadow:0 0 24px 6px rgba(78,226,154,.35); }
    75%  { border-color:#00d26a; box-shadow:0 0 14px 3px rgba(0,210,106,.40); }
    100% { border-color:#007b3a; box-shadow:0 0 0 0 rgba(0,168,110,0); }
}
@keyframes greenHdr {
    0%,100%{ border-bottom-color:#007b3a; box-shadow:0 3px 12px rgba(0,168,110,.15);}
    50%    { border-bottom-color:#4ee29a; box-shadow:0 3px 22px rgba(78,226,154,.35);}
}
@keyframes greenLeftBar {
    0%,100%{ border-left-color:#007b3a; }
    50%    { border-left-color:#4ee29a; }
}
@keyframes greenShadow {
    0%,100%{ box-shadow:0 0 8px rgba(0,210,106,.10); }
    50%    { box-shadow:0 0 20px rgba(0,210,106,.35); }
}
@keyframes greenRing {
    0%,100%{ box-shadow:0 0 0 3px rgba(0,168,110,.30), 0 0 0 0 rgba(78,226,154,0); }
    50%    { box-shadow:0 0 0 3px rgba(0,210,106,.60), 0 0 10px 4px rgba(78,226,154,.30); }
}
@keyframes greenDot {
    0%,100%{ background:#007b3a; transform:scale(1);   }
    50%    { background:#4ee29a; transform:scale(1.25); }
}
@keyframes greenThumb {
    0%,100%{ background:#007b3a; }
    50%    { background:#4ee29a; }
}
@keyframes pulse404 { 0%,100%{text-shadow:0 0 0 transparent} 50%{text-shadow:0 0 30px rgba(0,210,106,.40)} }

/* ===== 11. MISC TEXT COLORS THAT WERE HARDCODED TO GREEN ===== */
.site-footer-copy span { color: var(--g) !important; }

/* ===== 12. XMAS-MODE OVERRIDE   force green even if the site's Christmas
   toggle (body.xmas-mode) is switched on server-side. index.php's xmas
   CSS repaints --g to cyan (#00d4ff) with body.xmas-mode selectors, which
   are more specific than :root and load after us, so we must match that
   same specificity here to win the cascade. ===== */
body.xmas-mode {
    --g:       #00d26a !important;
    --gl:      #4ee29a !important;
    --gd:      #00a850 !important;
    --gdark:   #007b3a !important;
    --gpale:   rgba(0,210,106,0.08) !important;
    --gmid:    rgba(0,210,106,0.18) !important;
    --xmas-blue:     #00d26a !important;
    --xmas-bluedark: #00a850 !important;
    --xmas-glow1:    rgba(0,210,106,0.55) !important;
    --xmas-glow2:    rgba(0,150,80,0.35) !important;
    --shadowG: 0 4px 22px rgba(0,210,106,0.32) !important;
}
body.xmas-mode ::-webkit-scrollbar-thumb { background: var(--g) !important; }
body.xmas-mode header { border-bottom-color: var(--g) !important; }
body.xmas-mode .logo-img { border-color: var(--g) !important; }
body.xmas-mode .logo-txt span { color: var(--g) !important; }
body.xmas-mode .hdr-pill { background: var(--g) !important; }
body.xmas-mode .btn-acc { border-color: var(--g) !important; color: var(--gd) !important; }
body.xmas-mode .acc-dot { background: var(--g) !important; }
body.xmas-mode .top-nav { border-bottom-color: rgba(0,210,106,.3) !important; }
body.xmas-mode .nav-item.active { border-color: var(--g) !important; color: var(--gd) !important; }
body.xmas-mode .nav-item:hover { border-color: rgba(0,210,106,.30) !important; color: var(--gd) !important; }
body.xmas-mode .hero::before { background: linear-gradient(90deg, var(--gd), var(--g), #4ee29a, var(--g), var(--gd)) !important; }
body.xmas-mode .hero-title span { color: var(--g) !important; }
body.xmas-mode .hero-logo { border-color: var(--g) !important; }
body.xmas-mode .stat:hover { border-color: var(--g) !important; }
body.xmas-mode .stat::after { background: linear-gradient(90deg, var(--gd), #4ee29a) !important; }
body.xmas-mode .stat-ico { color: var(--g) !important; }
body.xmas-mode .sdot.online { background: var(--g) !important; }
body.xmas-mode .card-top { border-top-color: var(--g) !important; }
body.xmas-mode .pg-title-accent { color: var(--g) !important; }
body.xmas-mode .acard-icon.green { background: rgba(0,210,106,.12) !important; color: var(--g) !important; }
body.xmas-mode .acard.acard-green { border-top-color: var(--g) !important; }
body.xmas-mode .btn, body.xmas-mode .btn-g, body.xmas-mode .btn-out, body.xmas-mode .btn-buy,
body.xmas-mode .btn-acc, body.xmas-mode .priv-btn, body.xmas-mode .skin-buy-btn, body.xmas-mode .btn-help {
    border-color: var(--g) !important;
    color: var(--gd) !important;
}

/* Admin panel "Christmas Mode" toggle card   recolored green so its own
   on/off indicator matches the rest of the site instead of standing out
   in blue. This only affects the switch UI, not what it controls. */
.acard-xmas { border-color: var(--g) !important; border-top-color: var(--g) !important; box-shadow: 0 0 30px rgba(0,210,106,.25) !important; }
.acard-xmas .xmas-sub { color: #8fd9ae !important; }
.xmas-big-toggle input:checked + .xmas-toggle-track {
    background: linear-gradient(135deg, var(--gdark), var(--gd)) !important;
    border-color: var(--g) !important;
    box-shadow: 0 0 20px rgba(0,210,106,.60), inset 0 2px 8px rgba(0,0,0,.2) !important;
}
.xmas-big-toggle input:checked + .xmas-toggle-track::after {
    background: var(--g) !important;
    box-shadow: 0 0 12px rgba(0,210,106,.80) !important;
}
.xmas-toggle-label.on { color: var(--g) !important; text-shadow: 0 0 10px rgba(0,210,106,.70) !important; }
.acard-addfeats { border-top-color: rgba(0,210,106,.25) !important; }
.xmas-perm-banner { border-color: rgba(0,210,106,.20) !important; }
.xmas-perm-label i { color: var(--gd) !important; }
.xmas-sm-toggle input:checked + .xmas-sm-track {
    background: linear-gradient(135deg, var(--gdark), var(--gd)) !important;
    border-color: var(--gd) !important;
    box-shadow: 0 0 10px rgba(0,210,106,.45) !important;
}
.xmas-sm-toggle input:checked + .xmas-sm-track::after {
    background: var(--g) !important;
    box-shadow: 0 0 8px rgba(0,210,106,.70) !important;
}
.xmas-sm-badge.on-badge { background: rgba(0,210,106,.15) !important; color: var(--gd) !important; border-color: var(--g) !important; }

/* Re-point the xmas neon-blue keyframes at green so any element still
   animating with neonBlue* names renders green instead of cyan. */
@keyframes neonBlueGlow {
    0%   { border-color:#007b3a; box-shadow:0 0 4px 1px rgba(0,168,110,0); }
    25%  { border-color:#00d26a; box-shadow:0 0 18px 5px rgba(0,210,106,.55); }
    50%  { border-color:#4ee29a; box-shadow:0 0 32px 10px rgba(78,226,154,.50); }
    75%  { border-color:#00d26a; box-shadow:0 0 18px 5px rgba(0,210,106,.55); }
    100% { border-color:#007b3a; box-shadow:0 0 4px 1px rgba(0,168,110,0); }
}
@keyframes neonBlueHdr {
    0%,100%{ border-bottom-color:#007b3a; box-shadow:0 3px 14px rgba(0,168,110,.20);}
    50%    { border-bottom-color:#4ee29a; box-shadow:0 3px 28px rgba(78,226,154,.50);}
}
@keyframes neonBlueDot {
    0%,100%{ background:#007b3a; transform:scale(1); }
    50%    { background:#4ee29a; transform:scale(1.25); }
}
@keyframes neonBlueRing {
    0%,100%{ box-shadow:0 0 0 3px rgba(0,168,110,.35), 0 0 0 0 rgba(78,226,154,0); }
    50%    { box-shadow:0 0 0 3px rgba(0,210,106,.65), 0 0 14px 5px rgba(78,226,154,.35); }
}
@keyframes neonBlueLeftBar {
    0%,100%{ border-left-color:#007b3a; }
    50%    { border-left-color:#4ee29a; }
}
@keyframes neonBlueShadow {
    0%,100%{ box-shadow:0 0 8px rgba(0,210,106,.12); }
    50%    { box-shadow:0 0 24px rgba(0,210,106,.45); }
}
@keyframes neonBlueThumb {
    0%,100%{ background:#007b3a; }
    50%    { background:#4ee29a; }
}
/* =====================================================================
   13. MYCABINET.PHP REAL CLASS OVERRIDES
   The block above targets a different markup (.btn, .sb-nav-btn, .idx-*)
   that doesn't exist in mycabinet.php. This section targets the actual
   classes used there (.cab-btn, .cab-nav-btn, .donate-buy-btn, and the
   hardcoded font-family rules) so the reskin applies site-wide, not
   just the header. Added, nothing above removed or edited.
   ===================================================================== */

/* ---- Fonts left as the site default (no Audiowide override) ---- */
.cab-logo-txt { color: #fff !important; }
.cab-header-title { color: var(--mgray) !important; }
.cab-header-nick { color: var(--g) !important; }
.cab-name-txt { color: var(--black) !important; font-size: 15px !important; letter-spacing: 1px !important; }
.cab-header-back { color: var(--mgray) !important; border-color: rgba(255,255,255,0.10) !important; }
.cab-header-back:hover { border-color: var(--g) !important; color: var(--g) !important; }
.cab-logout-btn { color: var(--red) !important; border-color: rgba(255,62,110,0.35) !important; }
.cab-logout-btn:hover { background: rgba(255,62,110,0.08) !important; border-color: var(--red) !important; }

.cab-btn, .cab-nav-btn, .cab-logout-btn, .cab-section-title, .donate-buy-btn {
    letter-spacing: 0.5px !important;
}

/* ---- Generic action buttons (.cab-btn) ---- */
.cab-btn {
    background: var(--bgcard) !important;
    border-color: var(--g) !important;
    color: var(--gd) !important;
    box-shadow: var(--shadow) !important;
}
.cab-btn:hover {
    box-shadow: var(--shadowG) !important;
    transform: translateY(-2px);
}
.cab-btn-red { border-color: var(--red) !important; color: var(--red) !important; }
.cab-btn-admin { border-color: #ff5fa6 !important; color: #ff5fa6 !important; }
.cab-logout-btn:hover { background: rgba(255,62,110,0.08) !important; border-color: var(--red) !important; }

/* ---- Sidebar nav buttons (.cab-nav-btn) ---- */
.cab-nav-btn { color: var(--dgray) !important; }
.cab-nav-btn i { color: var(--mgray) !important; }
.cab-nav-btn:hover,
.cab-nav-btn.active {
    background: var(--gpale) !important;
    color: var(--g) !important;
    border-left-color: var(--g) !important;
}
.cab-nav-btn:hover i,
.cab-nav-btn.active i { color: var(--g) !important; }

.cab-nav-btn.nav-admin,
.cab-nav-btn.nav-admin i { color: #ff5fa6 !important; }
.cab-nav-btn.nav-admin:hover, .cab-nav-btn.nav-admin.active {
    background: rgba(255,95,166,0.10) !important; border-left-color: #ff5fa6 !important; color: #ff5fa6 !important;
}
.cab-nav-btn.nav-tech,
.cab-nav-btn.nav-tech i { color: var(--gold) !important; }
.cab-nav-btn.nav-tech:hover, .cab-nav-btn.nav-tech.active {
    background: rgba(255,210,74,0.10) !important; border-left-color: var(--gold) !important; color: var(--gold) !important;
}
.cab-nav-btn.nav-donate-skins.active, .cab-nav-btn.nav-donate-skins:hover {
    background: rgba(0,180,216,0.10) !important; border-left-color: #22d3ee !important; color: #22d3ee !important;
}
.cab-nav-btn.nav-donate-cars.active, .cab-nav-btn.nav-donate-cars:hover {
    background: rgba(168,85,247,0.10) !important; border-left-color: #c084fc !important; color: #c084fc !important;
}
.cab-nav-btn.nav-donate-costumes.active, .cab-nav-btn.nav-donate-costumes:hover {
    background: rgba(249,115,22,0.10) !important; border-left-color: #fb923c !important; color: #fb923c !important;
}
.cab-nav-btn.nav-donate-pets.active, .cab-nav-btn.nav-donate-pets:hover {
    background: rgba(233,30,140,0.10) !important; border-left-color: var(--pink) !important; color: var(--pink) !important;
}
.cab-nav-btn.nav-donate-abilitys.active, .cab-nav-btn.nav-donate-abilitys:hover {
    background: rgba(34,197,94,0.10) !important; border-left-color: var(--g) !important; color: var(--g) !important;
}
.cab-nav-btn.nav-donate-weapons.active, .cab-nav-btn.nav-donate-weapons:hover {
    background: rgba(255,62,110,0.10) !important; border-left-color: var(--red) !important; color: var(--red) !important;
}

/* ---- Donate buy buttons (grid cards across all donate pages) ---- */
.donate-buy-btn {
    background: var(--bgcard) !important;
    border-color: var(--g) !important;
    color: var(--g) !important;
}
.donate-buy-btn:hover { background: var(--gpale) !important; }
.donate-buy-btn.owned-btn { color: var(--gl) !important; }
.donate-buy-btn-pink { border-color: var(--pink) !important; color: var(--pink) !important; }
.donate-buy-btn-pink:hover { background: rgba(255,62,138,0.10) !important; }

/* ---- Panels / section titles / result box ---- */
.cab-panel-section {
    background: var(--bgcard) !important;
    border-color: rgba(255,255,255,0.07) !important;
    box-shadow: var(--shadow) !important;
}
.cab-section-title {
    color: var(--mgray) !important;
    background: rgba(255,255,255,0.03) !important;
    border-bottom-color: rgba(255,255,255,0.07) !important;
}
.cab-result.ok  { background: var(--gpale) !important; color: var(--g) !important; }
.cab-result.err { background: rgba(255,62,110,0.10) !important; color: var(--red) !important; }

/* =====================================================================
   14. SITE RANK SYSTEM   VIP / Administrator / Owner / Founder / Main Founder
   Colors + avatar-ring glow + badge chip, shared across index.php and
   mycabinet.php (same class names, same markup pattern in both files).
   ===================================================================== */

/* ---- Rank text colors ---- */
.rank-vip          { color: #ffd24a !important; }               /* gold */
.rank-administrator{ color: #3aa8ff !important; }                /* blue */
.rank-owner        { color: #6fe3a3 !important; }                /* light green, not too saturated */
.rank-founder      { color: #ff4d4d !important; }                /* red */
.rank-mainfounder  {
    background: linear-gradient(90deg,#ff1a1a,#000000,#ff1a1a,#000000);
    background-size: 300% 100%;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: #ff1a1a;
    animation: mainFounderShift 3.5s linear infinite;
}
@keyframes mainFounderShift {
    0%   { background-position: 0% 50%; }
    100% { background-position: 300% 50%; }
}

/* ---- Site Rank badge chip (under the nickname, both files) ---- */
.site-rank-badge {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 11px; letter-spacing: 1px; text-transform: uppercase;
    padding: 3px 10px; border-radius: 20px; border: 1.5px solid currentColor;
    background: rgba(255,255,255,0.03);
}
.site-rank-badge.rank-vip           { border-color: #ffd24a; box-shadow: 0 0 10px rgba(255,210,74,0.35); }
.site-rank-badge.rank-administrator { border-color: #3aa8ff; box-shadow: 0 0 10px rgba(58,168,255,0.35); }
.site-rank-badge.rank-owner         { border-color: #6fe3a3; box-shadow: 0 0 10px rgba(111,227,163,0.35); }
.site-rank-badge.rank-founder       { border-color: #ff4d4d; box-shadow: 0 0 10px rgba(255,77,77,0.35); }
.site-rank-badge.rank-mainfounder   {
    border-color: #ff1a1a;
    color: #ff3b3b !important;
    -webkit-text-fill-color: #ff3b3b !important;
    background: rgba(255,26,26,0.10) !important;
    box-shadow: 0 0 14px rgba(255,26,26,0.55);
    animation: mainFounderBorderShift 3.5s linear infinite;
}
@keyframes mainFounderBorderShift {
    0%,100% { border-color:#ff1a1a; box-shadow:0 0 10px rgba(255,26,26,.45); }
    50%     { border-color:#111;    box-shadow:0 0 16px rgba(255,26,26,.75); }
}

/* ---- VIP Test (5 Days) badge - separate from the site rank system,
   shown next to it while a trial is active (index.php + mycabinet.php) ---- */
.rank-viptest { color: #3ddc70 !important; }
.site-rank-badge.rank-viptest {
    border-color: #3ddc70;
    color: #3ddc70 !important;
    background: rgba(61,220,112,0.10) !important;
    box-shadow: 0 0 12px rgba(61,220,112,0.55);
    animation: viptestBadgePulse 2.2s ease-in-out infinite;
}
@keyframes viptestBadgePulse {
    0%,100% { box-shadow: 0 0 8px rgba(61,220,112,0.40); }
    50%     { box-shadow: 0 0 16px rgba(61,220,112,0.75); }
}
.cab-avatar-ring.rank-viptest,
.idx-panel-avatar-ring.rank-viptest {
    border-color: #3ddc70 !important;
    box-shadow: 0 0 0 4px rgba(61,220,112,0.30), 0 0 16px rgba(61,220,112,0.55) !important;
}

/* ---- Avatar ring glow, matched to rank (used around the profile photo
   wherever it appears: mycabinet sidebar, index.php left panel, Cyber Store
   comments, etc.) ---- */
.cab-avatar-ring.rank-vip,
.cs-avatar-ring.rank-vip,
.idx-panel-avatar-ring.rank-vip {
    border-color: #ffd24a !important;
    box-shadow: 0 0 0 4px rgba(255,210,74,0.30), 0 0 16px rgba(255,210,74,0.55) !important;
}
.cab-avatar-ring.rank-administrator,
.cs-avatar-ring.rank-administrator,
.idx-panel-avatar-ring.rank-administrator {
    border-color: #3aa8ff !important;
    box-shadow: 0 0 0 4px rgba(58,168,255,0.30), 0 0 16px rgba(58,168,255,0.55) !important;
}
.cab-avatar-ring.rank-owner,
.cs-avatar-ring.rank-owner,
.idx-panel-avatar-ring.rank-owner {
    border-color: #6fe3a3 !important;
    box-shadow: 0 0 0 4px rgba(111,227,163,0.30), 0 0 16px rgba(111,227,163,0.55) !important;
}
.cab-avatar-ring.rank-founder,
.cs-avatar-ring.rank-founder,
.idx-panel-avatar-ring.rank-founder {
    border-color: #ff4d4d !important;
    box-shadow: 0 0 0 4px rgba(255,77,77,0.30), 0 0 16px rgba(255,77,77,0.55) !important;
}
.cab-avatar-ring.rank-mainfounder,
.cs-avatar-ring.rank-mainfounder,
.idx-panel-avatar-ring.rank-mainfounder {
    border-color: #ff1a1a !important;
    animation: mainFounderBorderShift 3.5s linear infinite;
}

/* ---- Locked function buttons (Upload / Manage Product for ranks that
   don't have access yet) with a hover tooltip explaining who it's for ---- */
.cs-locked-btn {
    position: relative;
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 12.5px; letter-spacing: 0.5px;
    padding: 9px 16px; border-radius: var(--rBtn);
    border: 1.5px solid rgba(255,255,255,0.15);
    color: var(--mgray); background: rgba(255,255,255,0.03);
    cursor: not-allowed; opacity: 0.65;
}
.cs-locked-btn:hover { opacity: 0.85; }
.cs-locked-btn::after {
    content: attr(data-locktip);
    position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
    background: #000; color: #fff; font-family: 'Rajdhani', sans-serif; font-size: 12px;
    padding: 6px 12px; border-radius: 8px; white-space: nowrap;
    opacity: 0; pointer-events: none; transition: opacity .15s;
    box-shadow: 0 4px 14px rgba(0,0,0,0.4); z-index: 20;
}
.cs-locked-btn:hover::after { opacity: 1; }

/* ---- Premium (VIP-only) sticker lock overlay in the emoji/sticker picker ---- */
.cs-emoji-picker img.cs-sticker-locked {
    position: relative; filter: grayscale(1) brightness(0.55);
    cursor: not-allowed;
}
.cs-sticker-lock-wrap { position: relative; display: inline-block; }
.cs-sticker-lock-wrap .cs-sticker-lock-icon {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 13px; pointer-events: none;
    background: rgba(0,0,0,0.35); border-radius: 6px;
}
.cs-sticker-lock-wrap::after {
    content: attr(data-locktip);
    position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
    background: #000; color: #fff; font-family: 'Rajdhani', sans-serif; font-size: 11.5px;
    padding: 6px 10px; border-radius: 8px; white-space: nowrap;
    opacity: 0; pointer-events: none; transition: opacity .15s;
    box-shadow: 0 4px 14px rgba(0,0,0,0.4); z-index: 60;
}
.cs-sticker-lock-wrap:hover::after { opacity: 1; }

/* =====================================================================
   16. Admin Panel section visibility is handled via inline style
   (see mycabinet.php: <div id="sec-admin" style="display:none;">) and
   toggled by JS showSection(). No CSS override needed here - keeping
   this file free of #sec-admin rules avoids any specificity conflict
   with the inline style / JS toggle.
   ===================================================================== */

/* =====================================================================
   15. DISCORD HEADER BUTTON   shared between index.php and mycabinet.php.
   Clean round Discord-brand button, icon only, with a click "pulse" ring.
   ===================================================================== */
.hdr-discord-wrap {
    position:relative;
    display:flex;align-items:center;justify-content:center;
    width:34px;height:34px;
    border-radius:50%;
    background:#5865F2;
    flex-shrink:0;
    cursor:pointer;
    box-shadow:0 2px 8px rgba(88,101,242,0.35);
    transition:transform .15s ease, box-shadow .15s ease;
}
.hdr-discord-wrap:hover {
    transform:scale(1.08);
    box-shadow:0 3px 12px rgba(88,101,242,0.55);
}
.hdr-discord-wrap:active { transform:scale(0.92); }
.hdr-discord-logo {
    display:flex;align-items:center;justify-content:center;
    font-size:17px;color:#fff;
    flex-shrink:0;
    z-index:2;
    position:relative;
}
/* Click pulse: a ring that expands and fades outward from the button */
.hdr-discord-wrap::after {
    content:'';
    position:absolute; inset:0; border-radius:50%;
    border:2px solid #5865F2;
    opacity:0; transform:scale(1);
    pointer-events:none;
}
.hdr-discord-wrap:active::after {
    animation: discordPulse .5s ease-out;
}
@keyframes discordPulse {
    0%   { opacity:.65; transform:scale(1); }
    100% { opacity:0;   transform:scale(1.8); }
}