/* =====================================================================
   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/ultimatex-theme.css
   Include in <head>, right before </head> or right after the existing
   <style> block:
       <link rel="stylesheet" href="/style/ultimatex-theme.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   Audiowide (chunky old-school display) for headings/UI, Rajdhani for body ===== */
body {
    font-family: 'Rajdhani', sans-serif;
    background: var(--bg);
    color: var(--dgray);
}

.idx-logo-txt, .idx-hdr-page-title, .idx-panel-nick, .idx-section-title,
.sb-nav-btn, .ch-title, .pg-title, .flbl, .btn, .btn-buy, .btn-help,
.site-footer-copy, h1, h2, h3, h4 {
    font-family: 'Audiowide', cursive !important;
    letter-spacing: 0.5px;
}
.pg-title, .ch-title, h1, h2 {
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

/* ===== 3. BACKDROP   subtle radial glow instead of flat off-white ===== */
html, body {
    background:
        radial-gradient(circle at 15% 10%, rgba(0,210,106,0.07) 0%, transparent 45%),
        radial-gradient(circle at 85% 90%, rgba(255,62,138,0.05) 0%, transparent 45%),
        var(--bg) !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 {
    border-color: var(--g) !important;
    box-shadow: 0 0 15px rgba(0,210,106,0.35) !important;
}
.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(255,210,74,0.10) !important; color:#ffd24a !important; border-left-color:#ffd24a !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), #4ee29a) !important;
    border: none !important;
    color: #001018 !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; }

.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: mycabinet.php hardcodes Bangers/Nunito inline; force Audiowide/Rajdhani ---- */
.cab-btn, .cab-nav-btn, .cab-logout-btn, .cab-section-title,
.donate-buy-btn, .admin-card-title, .dib-title,
.cab-logo-txt, .cab-header-title, .cab-header-nick, .cab-header-back,
[style*="font-family:'Bangers'"], [style*='font-family:"Bangers"'] {
    font-family: 'Audiowide', cursive !important;
}
.cab-logo-txt { color: #fff !important; }
.cab-header-title { color: var(--mgray) !important; }
.cab-header-nick { color: var(--g) !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; }