/* ============================================================
   SurfTank Redesign — "Colorido Vibrante"
   Auto-loaded by index.php (scans wc_css/)
   ============================================================ */

/* --- Custom Properties (Paleta) --- */
:root {
    --st-blue: #1E90FF;
    --st-orange: #FF8C00;
    --st-green: #00C853;
    --st-pink: #FF4081;
    --st-purple: #7C4DFF;
    --st-yellow: #FFD600;
    --st-bg-dark: #0B1120;
    --st-bg-dark-end: #1A1A3E;
    --st-radius: 16px;
    --st-radius-sm: 10px;
    --st-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
    --st-shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.22);
}

/* --- Animations --- */
@keyframes st-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}
@keyframes st-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.04); }
}
@keyframes st-slide-up {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes st-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes st-shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}
@keyframes st-twinkle {
    0%, 100% { opacity: 0.3; transform: scale(0.8); }
    50% { opacity: 1; transform: scale(1.2); }
}

/* --- Global Body --- */
body {
    background: var(--st-bg-dark) !important;
    color: #e0e0e0;
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* --- Typography --- */
.st-bold { font-weight: 800; }
.st-bolder { font-weight: 900; }

/* --- Buttons --- */
.btn-st-blue {
    background: linear-gradient(135deg, var(--st-blue), #4AA8FF);
    color: #fff;
    border: none;
    border-radius: 999px;
    font-weight: 800;
    padding: 12px 28px;
    box-shadow: 0 6px 20px rgba(30, 144, 255, 0.35);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn-st-blue:hover, .btn-st-blue:focus {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(30, 144, 255, 0.45);
    color: #fff;
}

.btn-st-orange {
    background: linear-gradient(135deg, var(--st-orange), #FFa940);
    color: #fff;
    border: none;
    border-radius: 999px;
    font-weight: 800;
    padding: 12px 28px;
    box-shadow: 0 6px 20px rgba(255, 140, 0, 0.35);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn-st-orange:hover, .btn-st-orange:focus {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(255, 140, 0, 0.45);
    color: #fff;
}

.btn-st-green {
    background: linear-gradient(135deg, var(--st-green), #33D97A);
    color: #fff;
    border: none;
    border-radius: 999px;
    font-weight: 800;
    padding: 12px 28px;
    box-shadow: 0 6px 20px rgba(0, 200, 83, 0.35);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn-st-green:hover, .btn-st-green:focus {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(0, 200, 83, 0.45);
    color: #fff;
}

.btn-st-purple {
    background: linear-gradient(135deg, var(--st-purple), #9C6FFF);
    color: #fff;
    border: none;
    border-radius: 999px;
    font-weight: 800;
    padding: 12px 28px;
    box-shadow: 0 6px 20px rgba(124, 77, 255, 0.35);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn-st-purple:hover, .btn-st-purple:focus {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(124, 77, 255, 0.45);
    color: #fff;
}

.btn-st-pink {
    background: linear-gradient(135deg, var(--st-pink), #FF6FA0);
    color: #fff;
    border: none;
    border-radius: 999px;
    font-weight: 800;
    padding: 12px 28px;
    box-shadow: 0 6px 20px rgba(255, 64, 129, 0.35);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn-st-pink:hover, .btn-st-pink:focus {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(255, 64, 129, 0.45);
    color: #fff;
}

.btn-st-outline {
    background: transparent;
    color: #fff;
    border: 2px solid rgba(255,255,255,0.5);
    border-radius: 999px;
    font-weight: 800;
    padding: 12px 28px;
    transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.btn-st-outline:hover, .btn-st-outline:focus {
    background: rgba(255,255,255,0.1);
    border-color: #fff;
    color: #fff;
    transform: translateY(-2px);
}

/* --- Cards --- */
.st-card {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--st-radius);
    padding: 24px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.st-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--st-shadow-lg);
}

/* --- Sections --- */
.st-section {
    padding: 80px 0;
    position: relative;
}
.st-section-title {
    font-weight: 900;
    font-size: 2.2rem;
    color: #fff;
    text-align: center;
    margin-bottom: 12px;
    letter-spacing: -0.02em;
}
.st-section-sub {
    text-align: center;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 600;
    font-size: 1.1rem;
    margin-bottom: 48px;
}

/* --- Hero Section --- */
.st-hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    overflow: hidden;
    background: linear-gradient(170deg, var(--st-bg-dark) 0%, var(--st-bg-dark-end) 50%, #12203d 100%);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.st-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to bottom, rgba(11, 17, 32, 0.15) 0%, rgba(11, 17, 32, 0.5) 50%, rgba(11, 17, 32, 0.85) 100%),
        radial-gradient(ellipse 600px 400px at 20% 30%, rgba(30, 144, 255, 0.12) 0%, transparent 70%),
        radial-gradient(ellipse 500px 350px at 80% 60%, rgba(255, 140, 0, 0.10) 0%, transparent 70%);
    pointer-events: none;
}
.st-hero-content {
    position: relative;
    z-index: 2;
    animation: st-slide-up 0.8s ease-out;
}
.st-hero-logo {
    max-width: 320px;
    width: 80%;
    margin: 0 auto 24px;
    display: block;
    filter: drop-shadow(0 8px 30px rgba(30, 144, 255, 0.3));
    animation: st-float 4s ease-in-out infinite;
}
.st-hero-tagline {
    font-size: 2.8rem;
    font-weight: 900;
    color: #fff;
    margin-bottom: 12px;
    letter-spacing: -0.02em;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}
.st-hero-sub {
    font-size: 1.25rem;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 700;
    margin-bottom: 36px;
    max-width: 550px;
    margin-left: auto;
    margin-right: auto;
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.6), 0 0 40px rgba(0, 0, 0, 0.3);
}
.st-hero-actions {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}
.st-hero-actions .btn-st-blue {
    font-size: 1.15rem;
    padding: 16px 40px;
    background: linear-gradient(135deg, #1E90FF, #4AA8FF) !important;
    box-shadow: 0 8px 30px rgba(30, 144, 255, 0.5) !important;
    border: 2px solid rgba(255, 255, 255, 0.2) !important;
}
.st-hero-actions .btn-st-outline {
    font-size: 1.15rem;
    padding: 16px 40px;
    background: rgba(255, 255, 255, 0.15) !important;
    border: 2px solid rgba(255, 255, 255, 0.6) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.st-hero-actions .btn-st-outline:hover {
    background: rgba(255, 255, 255, 0.25) !important;
    border-color: #fff !important;
}

/* Hero logado (banner com boxlogado) */
.st-hero-logado {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    min-height: 280px;
    display: flex;
    align-items: center;
}
.st-hero-logado::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(11,17,32,0.3) 0%, rgba(11,17,32,0.8) 100%);
    pointer-events: none;
}
.st-hero-logado > .container {
    position: relative;
    z-index: 2;
}

/* Hero particles (CSS-only stars) */
.st-hero-stars {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}
.st-hero-stars .star {
    position: absolute;
    width: 3px;
    height: 3px;
    background: #fff;
    border-radius: 50%;
    animation: st-twinkle 3s ease-in-out infinite;
}

/* --- Feature Cards --- */
.st-features {
    background: linear-gradient(180deg, var(--st-bg-dark-end) 0%, var(--st-bg-dark) 100%);
}
.st-features .row {
    display: flex;
    flex-wrap: wrap;
}
.st-features .row > [class*="col-"] {
    display: flex;
}
.st-feature-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--st-radius);
    padding: 0;
    overflow: visible;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    text-align: center;
    display: flex;
    flex-direction: column;
    width: 100%;
}
.st-feature-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--st-shadow-lg);
}
.st-feature-card.border-blue { border-top: 4px solid var(--st-blue); box-shadow: 0 -4px 20px rgba(30, 144, 255, 0.15); }
.st-feature-card.border-orange { border-top: 4px solid var(--st-orange); box-shadow: 0 -4px 20px rgba(255, 140, 0, 0.15); }
.st-feature-card.border-green { border-top: 4px solid var(--st-green); box-shadow: 0 -4px 20px rgba(0, 200, 83, 0.15); }
.st-feature-card.border-purple { border-top: 4px solid var(--st-purple); box-shadow: 0 -4px 20px rgba(124, 77, 255, 0.15); }

.st-feature-icon {
    width: 100%;
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    color: #fff;
}
.st-feature-icon.bg-blue { background: linear-gradient(135deg, rgba(30,144,255,0.15), rgba(30,144,255,0.05)); color: var(--st-blue); }
.st-feature-icon.bg-orange { background: linear-gradient(135deg, rgba(255,140,0,0.15), rgba(255,140,0,0.05)); color: var(--st-orange); }
.st-feature-icon.bg-green { background: linear-gradient(135deg, rgba(0,200,83,0.15), rgba(0,200,83,0.05)); color: var(--st-green); }
.st-feature-icon.bg-purple { background: linear-gradient(135deg, rgba(124,77,255,0.15), rgba(124,77,255,0.05)); color: var(--st-purple); }

.st-feature-img {
    width: 100%;
    height: 180px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 20px 20px 0 0;
}
.st-feature-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}
.st-feature-card:hover .st-feature-img img {
    transform: scale(1.05);
}

.st-feature-body {
    padding: 20px 16px 24px;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.st-feature-title {
    font-weight: 900;
    font-size: 1.1rem;
    color: #fff;
    margin-bottom: 8px;
}
.st-feature-desc {
    font-weight: 600;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.55);
    line-height: 1.5;
}

/* --- Stats Section --- */
.st-stats {
    padding: 50px 0;
    background: linear-gradient(135deg, rgba(30, 144, 255, 0.06), rgba(124, 77, 255, 0.06));
    border-top: 1px solid rgba(255, 255, 255, 0.04);
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.st-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    text-align: center;
}
.st-stat {
    padding: 24px 16px;
    animation: st-slide-up 0.6s ease-out both;
}
.st-stat:nth-child(1) { animation-delay: 0s; }
.st-stat:nth-child(2) { animation-delay: 0.1s; }
.st-stat:nth-child(3) { animation-delay: 0.2s; }
.st-stat:nth-child(4) { animation-delay: 0.3s; }
.st-stat-icon {
    font-size: 2rem;
    margin-bottom: 12px;
    color: var(--st-orange);
    filter: drop-shadow(0 0 8px rgba(255, 140, 0, 0.3));
}
.st-stat-value {
    font-size: 2.5rem;
    font-weight: 900;
    color: #fff;
    letter-spacing: -0.02em;
    line-height: 1;
    margin-bottom: 6px;
}
.st-stat-label {
    font-size: 0.85rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.45);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
@media (max-width: 767.98px) {
    .st-stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
    .st-stat-value {
        font-size: 1.8rem;
    }
}

/* --- Download Section --- */
.st-download {
    background: linear-gradient(180deg, var(--st-bg-dark) 0%, #0d1428 100%);
}
.st-download-grid {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
}
@media (min-width: 768px) {
    .st-download-btn {
        flex: 1 1 0;
        min-width: 0;
    }
}
.st-download-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: var(--st-radius);
    padding: 16px 28px;
    color: #fff;
    font-weight: 800;
    font-size: 1rem;
    text-decoration: none !important;
    transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.st-download-btn:hover, .st-download-btn:focus {
    transform: translateY(-3px);
    background: rgba(255, 255, 255, 0.10);
    box-shadow: 0 8px 30px rgba(255, 140, 0, 0.2);
    color: #fff;
}
.st-download-btn i {
    font-size: 1.6rem;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.st-download-btn .fa-windows { color: #00A4EF; }
.st-download-btn .fa-apple { color: #A2AAAD; }
.st-download-btn .fa-android { color: #3DDC84; }
.st-download-btn .fa-mobile { color: #FF8C00; }

/* --- News / Announce Redesign (global) --- */
.announce-card {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: 20px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2) !important;
    overflow: hidden !important;
    backdrop-filter: blur(12px) !important;
}
.announce-head {
    background: linear-gradient(135deg, rgba(255, 140, 0, 0.08), rgba(30, 144, 255, 0.06)) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    padding: 18px 20px !important;
}
.announce-title {
    color: #fff !important;
    font-size: 18px !important;
}
.announce-icon {
    background: linear-gradient(135deg, var(--st-orange), #FFa940) !important;
    color: #fff !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 14px rgba(255, 140, 0, 0.3) !important;
}
.announce-sub {
    color: rgba(255, 255, 255, 0.4) !important;
}

/* News tabs */
.nav-tabs-modern {
    border-bottom: none !important;
    padding: 12px 16px !important;
    gap: 10px !important;
    display: inline-flex !important;
    flex-wrap: wrap !important;
    width: auto !important;
    list-style: none !important;
}
.nav-tabs-modern .nav-item {
    display: inline-block !important;
    width: auto !important;
    float: none !important;
}
.nav-tabs-modern .nav-link {
    border: none !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.06) !important;
    color: rgba(255, 255, 255, 0.7) !important;
    font-weight: 800 !important;
    padding: 10px 20px !important;
    transition: all 0.2s ease !important;
    display: inline-block !important;
    width: auto !important;
}
.nav-tabs-modern .nav-link:hover {
    background: rgba(255, 255, 255, 0.10) !important;
    color: #fff !important;
    transform: translateY(-1px) !important;
}
.nav-tabs-modern .nav-link.active {
    background: linear-gradient(135deg, var(--st-orange), #FFa940) !important;
    color: #fff !important;
    box-shadow: 0 6px 20px rgba(255, 140, 0, 0.3) !important;
}

/* Tab content */
.tab-content-modern {
    background: transparent !important;
    padding: 8px 16px 16px !important;
}
.tab-content-modern .tab-pane,
.tab-pane {
    background: transparent !important;
}

/* News items */
.ann-modern {
    gap: 8px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.ann-item {
    margin: 0 !important;
    list-style: none !important;
    border: none !important;
    padding: 0 !important;
}
.ann-item::marker,
.ann-item::before {
    content: none !important;
    display: none !important;
}
/* Kill old theme ann styles (style.css has .announce .tab-pane ul.ann li:before with >) */
.announce .tab-pane ul.ann li:before,
.announce .tab-pane ul.ann li::before,
.ann li::before,
ul.ann li::before {
    content: none !important;
    display: none !important;
}
.announce .tab-pane ul.ann li,
.ann li,
ul.ann li {
    list-style: none !important;
    border: none !important;
    border-bottom: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.announce .tab-pane ul.ann,
ul.ann {
    margin-left: 0 !important;
}
.announce .tab-pane ul.ann li a {
    color: inherit !important;
}
.ann-link {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: 14px !important;
    color: #fff !important;
    padding: 14px 16px !important;
    transition: all 0.2s ease !important;
    text-decoration: none !important;
    overflow: hidden !important;
}
.ann-link:hover {
    background: rgba(255, 140, 0, 0.08) !important;
    border-color: rgba(255, 140, 0, 0.15) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15) !important;
    color: #fff !important;
    transform: translateY(-2px) !important;
    text-decoration: none !important;
}
.ann-dot {
    background: var(--st-orange) !important;
    width: 8px !important;
    height: 8px !important;
    min-width: 8px !important;
    box-shadow: 0 0 8px rgba(255, 140, 0, 0.4) !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
}
.ann-text {
    color: rgba(255, 255, 255, 0.85) !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    flex: 1 !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}
/* Arrow indicator on news items */
.ann-link::after {
    content: '\f105';
    font-family: FontAwesome;
    color: rgba(255, 255, 255, 0.15);
    font-size: 16px;
    flex-shrink: 0;
    padding-left: 8px;
    transition: all 0.2s ease;
}
.ann-link:hover::after {
    color: var(--st-orange);
}
@media (max-width: 575.98px) {
    .ann-text {
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: unset !important;
        font-size: 13px !important;
    }
    .ann-link {
        padding: 12px 14px !important;
    }
}

/* Announce footer / pagination */
.announce-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
    background: rgba(255, 255, 255, 0.02) !important;
    padding: 14px 16px !important;
    text-align: center !important;
}
/* Pagination — force on ALL pagination elements */
.pagination,
ul.pagination,
.announce-footer .pagination,
#news-pager .pagination,
#ann-pager .pagination,
#acc .pagination {
    display: inline-flex !important;
    gap: 6px !important;
    justify-content: center !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    flex-wrap: wrap !important;
}
.pagination li,
.page-item {
    margin: 0 !important;
}
.pagination li a,
.pagination li span,
.page-item .page-link,
.page-link {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 10px !important;
    color: rgba(255, 255, 255, 0.7) !important;
    font-weight: 800 !important;
    font-size: 13px !important;
    padding: 8px 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 38px !important;
    text-decoration: none !important;
    transition: all 0.15s ease !important;
}
.pagination li a:hover,
.page-item .page-link:hover,
.page-link:hover {
    background: rgba(255, 255, 255, 0.10) !important;
    color: #fff !important;
    transform: translateY(-1px) !important;
    text-decoration: none !important;
}
.pagination li.active a,
.pagination li.active span,
.page-item.active .page-link {
    background: linear-gradient(135deg, var(--st-blue), #4AA8FF) !important;
    border-color: transparent !important;
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(30, 144, 255, 0.3) !important;
}
.pagination li.disabled a,
.page-item.disabled .page-link {
    opacity: 0.4 !important;
    pointer-events: none !important;
}
/* Custom Pager class (ul.paginator) */
ul.paginator {
    display: inline-flex !important;
    gap: 6px !important;
    justify-content: center !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    flex-wrap: wrap !important;
}
ul.paginator li {
    margin: 0 !important;
}
ul.paginator li a {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 10px !important;
    color: rgba(255, 255, 255, 0.7) !important;
    font-weight: 800 !important;
    font-size: 13px !important;
    padding: 8px 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 38px !important;
    text-decoration: none !important;
    transition: all 0.15s ease !important;
}
ul.paginator li a:hover {
    background: rgba(255, 255, 255, 0.10) !important;
    color: #fff !important;
    transform: translateY(-1px) !important;
}
ul.paginator li .active,
ul.paginator li span.active {
    background: linear-gradient(135deg, var(--st-blue), #4AA8FF) !important;
    border: none !important;
    border-radius: 10px !important;
    color: #fff !important;
    font-weight: 800 !important;
    font-size: 13px !important;
    padding: 8px 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 38px !important;
    box-shadow: 0 4px 14px rgba(30, 144, 255, 0.3) !important;
}

/* --- Header Override --- */
.header-modern {
    background: linear-gradient(135deg, var(--st-bg-dark), var(--st-bg-dark-end)) !important;
    border-bottom: 3px solid transparent !important;
    border-image: linear-gradient(90deg, var(--st-blue), var(--st-orange), var(--st-pink), var(--st-purple), var(--st-blue)) 1 !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
    backdrop-filter: none !important;
}
.header-modern .nav-link {
    color: rgba(255, 255, 255, 0.85) !important;
    font-weight: 700 !important;
}
.header-modern .nav-link:hover,
.header-modern .nav-link:focus {
    color: var(--st-orange) !important;
    background: rgba(255, 255, 255, 0.06) !important;
}
.header-modern .navbar-toggler {
    border-color: rgba(255, 255, 255, 0.2);
}
.header-modern .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.8%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}
.header-modern .dropdown-menu {
    background: var(--st-bg-dark-end) !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4) !important;
}
.header-modern .dropdown-item {
    color: rgba(255, 255, 255, 0.85) !important;
    font-weight: 600 !important;
}
.header-modern .dropdown-item:hover,
.header-modern .dropdown-item:focus {
    background: rgba(255, 255, 255, 0.08) !important;
    color: var(--st-orange) !important;
    transform: translateX(2px);
}
.header-modern .dropdown-item i {
    width: 20px;
    color: rgba(255, 255, 255, 0.4);
}
.header-modern .dropdown-divider {
    border-top-color: rgba(255, 255, 255, 0.08) !important;
}

/* Header CTA buttons */
.btn-header-login {
    background: linear-gradient(135deg, var(--st-blue), #4AA8FF) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 999px !important;
    font-weight: 800 !important;
    padding: 8px 20px !important;
    box-shadow: 0 4px 16px rgba(30, 144, 255, 0.3);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn-header-login:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 22px rgba(30, 144, 255, 0.4);
    color: #fff !important;
}

.btn-header-register {
    background: linear-gradient(135deg, var(--st-orange), #FFa940) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 999px !important;
    font-weight: 800 !important;
    padding: 8px 20px !important;
    box-shadow: 0 4px 16px rgba(255, 140, 0, 0.3);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn-header-register:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 22px rgba(255, 140, 0, 0.4);
    color: #fff !important;
}

.btn-header-play {
    background: linear-gradient(135deg, var(--st-blue), #4AA8FF) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 999px !important;
    font-weight: 800 !important;
    padding: 8px 24px !important;
    box-shadow: 0 4px 16px rgba(30, 144, 255, 0.3);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    animation: st-pulse 2.5s ease-in-out infinite;
}
.btn-header-play:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 22px rgba(30, 144, 255, 0.5);
    color: #fff !important;
    animation: none;
}

/* --- Login/Register Modal Override --- */
.st-modal .modal-content {
    background: var(--st-bg-dark-end);
    border: 2px solid transparent;
    border-image: linear-gradient(135deg, var(--st-blue), var(--st-orange), var(--st-pink), var(--st-purple)) 1;
    border-radius: var(--st-radius) !important;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.st-modal .modal-content {
    border: none;
    position: relative;
}
.st-modal .modal-content::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--st-radius);
    padding: 2px;
    background: linear-gradient(135deg, var(--st-blue), var(--st-orange), var(--st-pink), var(--st-purple));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}
.st-modal .modal-header {
    background: rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.st-modal .modal-title {
    color: #fff;
    font-weight: 900;
}
.st-modal .modal-header .close {
    color: rgba(255, 255, 255, 0.7);
    text-shadow: none;
}
.st-modal .modal-body {
    background: var(--st-bg-dark-end);
}
/* Override form elements inside modal */
.st-modal .login-card,
.st-modal .form-card {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow: none !important;
}
.st-modal .login-head,
.st-modal .form-head {
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}
.st-modal .login-title,
.st-modal .form-title {
    color: #fff !important;
}
.st-modal .login-sub,
.st-modal .form-sub {
    color: rgba(255, 255, 255, 0.55) !important;
}
.st-modal .input-addon-modern {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: rgba(255, 255, 255, 0.6) !important;
}
.st-modal .form-control-modern,
.st-modal .form-control {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #fff !important;
}
.st-modal .form-control-modern:focus,
.st-modal .form-control:focus {
    border-color: var(--st-blue) !important;
    background: rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 0 0 0.2rem rgba(30, 144, 255, 0.2) !important;
}
.st-modal .form-control::placeholder {
    color: rgba(255, 255, 255, 0.35) !important;
}
.st-modal .login-link {
    color: rgba(255, 255, 255, 0.65) !important;
}
.st-modal .login-link:hover {
    color: var(--st-orange) !important;
}
.st-modal .field > span {
    color: rgba(255, 255, 255, 0.7) !important;
}
.st-modal .checkbox-label {
    color: rgba(255, 255, 255, 0.6) !important;
}
.st-modal .checkbox-label a {
    color: var(--st-blue) !important;
}
.st-modal .alert-modern {
    background: rgba(220, 53, 69, 0.12) !important;
    border: 1px solid rgba(220, 53, 69, 0.25) !important;
}
.st-modal .alert-title {
    color: rgba(255, 255, 255, 0.9) !important;
}
.st-modal .alert-sub {
    color: rgba(255, 255, 255, 0.65) !important;
}
.st-modal .modal-dialog {
    animation: st-slide-up 0.3s ease-out;
}

/* --- Footer Override --- */
.site-footer {
    background: linear-gradient(135deg, var(--st-bg-dark), var(--st-bg-dark-end)) !important;
    border-top: 3px solid transparent !important;
    border-image: linear-gradient(90deg, var(--st-blue), var(--st-orange), var(--st-pink), var(--st-purple), var(--st-blue)) 1 !important;
    padding: 0 !important;
    margin-top: 0 !important;
}

/* --- Account Sidebar Override (global) --- */
.card-profile {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: var(--st-shadow) !important;
}
.card-profile .card-body {
    background: transparent !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 20px 16px 16px !important;
}
.avatar-wrap {
    background: linear-gradient(135deg, var(--st-orange), var(--st-pink), var(--st-purple)) !important;
    box-shadow: 0 8px 24px rgba(255, 140, 0, 0.25) !important;
}
.card-profile .card-title {
    color: #fff !important;
}
.user-email {
    color: rgba(255, 255, 255, 0.5) !important;
}
.card-divider {
    background: rgba(255, 255, 255, 0.06) !important;
}
.menu-link {
    color: rgba(255, 255, 255, 0.85) !important;
    background: rgba(255, 255, 255, 0.03) !important;
}
.menu-link:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #fff !important;
}
.logoff .menu-link {
    background: rgba(220, 53, 69, 0.12) !important;
    color: #ff6b6b !important;
}
.sidebar-group-label {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.35);
    padding: 16px 14px 6px;
}
.menu-link i {
    width: 22px;
    text-align: center;
    margin-right: 10px;
    color: rgba(255, 255, 255, 0.45);
    font-size: 14px;
    flex-shrink: 0;
}

/* Email lock badge polish */
.lock-badge {
    background: linear-gradient(135deg, #dc3545, #ff6b6b) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 12px !important;
    font-size: 11px !important;
    padding: 8px 14px !important;
    font-weight: 800 !important;
    box-shadow: 0 4px 14px rgba(220, 53, 69, 0.25) !important;
}

/* --- Dashboard Override (global) --- */
.inner-block-modern {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: var(--st-shadow) !important;
    backdrop-filter: blur(12px) !important;
}
.inner-head .title {
    color: #fff !important;
}
.subtitle {
    color: rgba(255, 255, 255, 0.5) !important;
}
.server-card-inner {
    background: rgba(255, 255, 255, 0.03) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}
.server-card:hover .server-card-inner {
    background: rgba(255, 255, 255, 0.06) !important;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.3) !important;
}
.server-name-wrap {
    color: #fff !important;
}
.server-sub {
    background: linear-gradient(135deg, var(--st-blue), #4AA8FF) !important;
    color: #fff !important;
    font-size: 11px !important;
    padding: 6px 12px !important;
    box-shadow: 0 4px 12px rgba(30, 144, 255, 0.25) !important;
}
.server-thumb-fixed {
    background: rgba(255, 255, 255, 0.03) !important;
}
.legacy-card-inner {
    background: rgba(255, 255, 255, 0.03) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}
.legacy-card:hover .legacy-card-inner {
    background: rgba(255, 255, 255, 0.06) !important;
}
.legacy-title {
    color: #fff !important;
}
.legacy-sub {
    color: rgba(255, 255, 255, 0.5) !important;
}

/* Quick Actions bar */
.st-quick-actions {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
    overflow-x: auto;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
}
.st-quick-action {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border-radius: 999px;
    font-weight: 800;
    font-size: 0.9rem;
    text-decoration: none !important;
    white-space: nowrap;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    color: #fff !important;
    flex-shrink: 0;
}
.st-quick-action,
.st-quick-action:link,
.st-quick-action:visited {
    color: #fff !important;
}
.st-quick-action:hover {
    transform: translateY(-2px);
    color: #fff !important;
}
.st-quick-action.qa-blue {
    background: linear-gradient(135deg, var(--st-blue), #4AA8FF);
    box-shadow: 0 4px 16px rgba(30, 144, 255, 0.3);
}
.st-quick-action.qa-orange {
    background: linear-gradient(135deg, var(--st-orange), #FFa940);
    box-shadow: 0 4px 16px rgba(255, 140, 0, 0.3);
}
.st-quick-action.qa-green {
    background: linear-gradient(135deg, var(--st-green), #33D97A);
    box-shadow: 0 4px 16px rgba(0, 200, 83, 0.3);
}
.st-quick-action.qa-purple {
    background: linear-gradient(135deg, var(--st-purple), #9C6FFF);
    box-shadow: 0 4px 16px rgba(124, 77, 255, 0.3);
}

/* Server card colored left border */
.st-dashboard .server-card-inner {
    border-left: 4px solid var(--st-blue) !important;
}
.st-dashboard .server-card:nth-child(2n) .server-card-inner {
    border-left-color: var(--st-orange) !important;
}
.st-dashboard .server-card:nth-child(3n) .server-card-inner {
    border-left-color: var(--st-green) !important;
}
.st-dashboard .server-card:nth-child(4n) .server-card-inner {
    border-left-color: var(--st-purple) !important;
}
.st-dashboard .server-card:hover .server-card-inner {
    border-left-width: 4px !important;
}

/* --- Boxlogado / Account Mini Override (global) --- */
.account-mini {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: var(--st-shadow) !important;
}
.account-mini-head {
    background: rgba(255, 255, 255, 0.03) !important;
    border-bottom-color: rgba(255, 255, 255, 0.06) !important;
}
.account-mini-avatar {
    border-color: var(--st-orange) !important;
}
.account-mini-welcome {
    color: rgba(255, 255, 255, 0.6) !important;
}
.account-mini-name {
    color: #fff !important;
}
.btn-pill.btn-primary {
    background: linear-gradient(135deg, var(--st-blue), #4AA8FF) !important;
    box-shadow: 0 6px 20px rgba(30, 144, 255, 0.3) !important;
    color: #fff !important;
}
.btn-pill.btn-danger {
    background: linear-gradient(135deg, #dc3545, #ff6b6b) !important;
    box-shadow: 0 6px 20px rgba(220, 53, 69, 0.25) !important;
    color: #fff !important;
}
.btn-pill.btn-success {
    background: linear-gradient(135deg, var(--st-green), #33D97A) !important;
    box-shadow: 0 6px 20px rgba(0, 200, 83, 0.25) !important;
    color: #fff !important;
}

/* --- Recharge Modal Override --- */
#exampleModalCenter .modal-content {
    background: var(--st-bg-dark-end) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}
#exampleModalCenter .modal-header {
    background: rgba(255, 255, 255, 0.03) !important;
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}
#exampleModalCenter .modal-title {
    color: #fff !important;
}
#exampleModalCenter .close {
    color: rgba(255, 255, 255, 0.7) !important;
    text-shadow: none !important;
}
#exampleModalCenter .card-body {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
}

/* --- 14+ Badge Vibrant --- */
.classind-badge,
.classind-badge-sm {
    background: linear-gradient(135deg, var(--st-blue), var(--st-purple)) !important;
}

/* --- Global containers dark override --- */
.back {
    background: var(--st-bg-dark) !important;
    background-image: none !important;
}
.login-blog,
.login-blog.rounded {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}
.blocox {
    background: transparent !important;
}
.bloco {
    background: transparent !important;
}
.duvidas {
    background: transparent !important;
}

/* --- Form Card / Global Card Override --- */
.form-card {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2) !important;
}
.form-head {
    border-bottom-color: rgba(255, 255, 255, 0.06) !important;
}
.form-title {
    color: #fff !important;
}
.form-sub {
    color: rgba(255, 255, 255, 0.4) !important;
}
.field > span {
    color: rgba(255, 255, 255, 0.7) !important;
}
.actions-modern {
    background: rgba(255, 255, 255, 0.03) !important;
}

/* --- Global Login Card Dark Override --- */
.login-card {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow: var(--st-shadow) !important;
}
.login-head {
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}
.login-title {
    color: #fff !important;
}
.login-sub {
    color: rgba(255, 255, 255, 0.55) !important;
}
.login-link {
    color: rgba(255, 255, 255, 0.65) !important;
}
.login-link:hover {
    color: var(--st-orange) !important;
}
.input-addon-modern,
.input-group-addon.input-addon-modern {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-right: 0 !important;
    color: var(--st-orange) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 46px !important;
    padding: 0 12px !important;
    border-radius: 14px 0 0 14px !important;
    font-size: 16px !important;
}
.input-addon-modern i,
.input-addon-modern [class*="icon-"] {
    color: var(--st-orange) !important;
    font-size: 16px !important;
    line-height: 1 !important;
}
/* Input group fix — keep addon and input aligned */
.input-group-modern {
    display: flex !important;
    align-items: stretch !important;
}
.input-group-modern .form-control-modern {
    border-radius: 0 14px 14px 0 !important;
    flex: 1 !important;
}
.form-control-modern {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #fff !important;
    height: 46px !important;
    font-size: 14px !important;
}
.form-control-modern:focus {
    border-color: var(--st-blue) !important;
    background: rgba(255, 255, 255, 0.08) !important;
}
.form-control-modern::placeholder {
    color: rgba(255, 255, 255, 0.35) !important;
}

/* --- Global Content Dark Override (all inner pages) --- */
/* Kill all white/light backgrounds */
.bg-white,
.bg-light {
    background: transparent !important;
}
.account_form_actions,
.account_form_actions.m_top {
    background: rgba(255, 255, 255, 0.04) !important;
    border-radius: var(--st-radius-sm) !important;
}
/* Generic form control override */
.form-control {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #fff !important;
}
.form-control:focus {
    border-color: var(--st-blue) !important;
    background: rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 0 0 0.2rem rgba(30, 144, 255, 0.2) !important;
}
.form-control::placeholder {
    color: rgba(255, 255, 255, 0.35) !important;
}
select.form-control {
    background: rgba(255, 255, 255, 0.06) !important;
    color: #fff !important;
}
select.form-control option {
    background: var(--st-bg-dark-end);
    color: #fff;
}
.legal-page {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: var(--st-radius) !important;
    color: rgba(255, 255, 255, 0.85) !important;
    padding: 32px !important;
}
.legal-title {
    color: #fff !important;
    font-weight: 900 !important;
    font-size: 2rem !important;
    margin-bottom: 4px !important;
}
.legal-updated {
    color: rgba(255, 255, 255, 0.4) !important;
    font-weight: 600 !important;
}
.legal-page h2 {
    color: var(--st-orange) !important;
    font-weight: 800 !important;
    font-size: 1.3rem !important;
    margin-top: 28px !important;
    padding-top: 16px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
}
.legal-page h3, .legal-page h4 {
    color: #fff !important;
    font-weight: 800 !important;
}
.legal-page p, .legal-page li {
    color: rgba(255, 255, 255, 0.75) !important;
    line-height: 1.7 !important;
}
.legal-page strong {
    color: rgba(255, 255, 255, 0.95) !important;
}
.legal-page a {
    color: var(--st-blue) !important;
}
.legal-page a.btn {
    color: #fff !important;
}
.legal-page ul {
    padding-left: 20px !important;
}
.legal-page ul li {
    margin-bottom: 6px !important;
}
.legal-content {
    background: transparent !important;
}
.ranking-card {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: rgba(255, 255, 255, 0.85) !important;
}
.ranking-card h1, .ranking-card h2, .ranking-card h3, .ranking-card h4, .ranking-card h5 {
    color: #fff !important;
}
/* --- Tickets System Redesign --- */
.page_ticket {
    color: rgba(255, 255, 255, 0.85) !important;
}
/* Hide original h3 tabs — the accTabs plugin generates <button> tabs instead */
.page_ticket > h3,
.js-tabs > h3 {
    display: none !important;
}
/* Legacy CSS override (unused but keeping selector) */
.page_ticket > h3.legacy-placeholder {
    border: none !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.06) !important;
    color: rgba(255, 255, 255, 0.7) !important;
    font-weight: 800 !important;
    padding: 12px 20px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    margin: 0 4px 4px 0 !important;
    display: inline-block !important;
    font-size: 14px !important;
}
.page_ticket > h3:hover {
    background: rgba(255, 255, 255, 0.10) !important;
    color: #fff !important;
}
.page_ticket > h3.active,
.page_ticket > h3.ui-state-active,
.page_ticket > h3[aria-selected="true"] {
    background: linear-gradient(135deg, var(--st-purple), #9C6FFF) !important;
    color: #fff !important;
    box-shadow: 0 6px 20px rgba(124, 77, 255, 0.3) !important;
}

/* Ticket card/box */
.box_ticket {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: 16px !important;
    padding: 16px !important;
    margin-bottom: 12px !important;
    transition: all 0.2s ease !important;
}
.box_ticket:hover {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.10) !important;
}
.box_ticket.aberto {
    border-left: 3px solid var(--st-green) !important;
}
.box_ticket:not(.aberto) {
    border-left: 3px solid rgba(255, 255, 255, 0.15) !important;
}

.tkt_title {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin-bottom: 10px !important;
}
.tkt_title h4 {
    color: #fff !important;
    font-weight: 800 !important;
    margin: 0 !important;
    font-size: 15px !important;
    float: none !important;
}
.tkt_description {
    color: rgba(255, 255, 255, 0.6) !important;
    font-size: 13px !important;
}
.tkt_description b {
    color: rgba(255, 255, 255, 0.8) !important;
}
.tkt_small {
    margin-top: 8px !important;
    padding-top: 8px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
}
.tkt_small p {
    color: rgba(255, 255, 255, 0.4) !important;
    font-size: 12px !important;
    margin: 2px 0 !important;
}
.tkt-infor {
    background: rgba(124, 77, 255, 0.10) !important;
    border: 1px solid rgba(124, 77, 255, 0.2) !important;
    border-radius: 14px !important;
    color: rgba(255, 255, 255, 0.8) !important;
    padding: 14px 18px !important;
    font-weight: 700 !important;
    text-align: center !important;
}

/* Ticket buttons */
.btn_green {
    background: linear-gradient(135deg, var(--st-green), #33D97A) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 999px !important;
    font-weight: 800 !important;
    padding: 8px 16px !important;
    font-size: 12px !important;
    float: none !important;
}
.btn_blue {
    background: linear-gradient(135deg, var(--st-blue), #4AA8FF) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 999px !important;
    font-weight: 800 !important;
    padding: 8px 16px !important;
    font-size: 12px !important;
    float: none !important;
}

/* Ticket form */
.form_pfil {
    color: rgba(255, 255, 255, 0.85) !important;
}
.form_pfil h4 {
    color: #fff !important;
    font-weight: 800 !important;
}
.form_pfil p {
    color: rgba(255, 255, 255, 0.6) !important;
}
.input-field {
    margin-bottom: 14px !important;
}
.input-field label {
    color: rgba(255, 255, 255, 0.7) !important;
    font-weight: 700 !important;
    margin-bottom: 6px !important;
    display: block !important;
}
.input-field input,
.input-field textarea {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 12px !important;
    color: #fff !important;
    padding: 12px 14px !important;
    width: 100% !important;
}
.input-field input:focus,
.input-field textarea:focus {
    border-color: var(--st-blue) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(30, 144, 255, 0.15) !important;
}
.choose_file {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 2px dashed rgba(255, 255, 255, 0.12) !important;
    border-radius: 14px !important;
    padding: 20px !important;
    text-align: center !important;
    color: rgba(255, 255, 255, 0.5) !important;
    margin: 14px 0 !important;
}
.choose_file label {
    color: rgba(255, 255, 255, 0.5) !important;
    cursor: pointer !important;
}
.label_50 {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 14px !important;
}
.label_50 .label label,
.label_100 label {
    color: rgba(255, 255, 255, 0.7) !important;
    font-weight: 700 !important;
    margin-bottom: 6px !important;
    display: block !important;
}
.label_100 {
    grid-column: 1 / -1 !important;
    margin-top: 8px !important;
}
@media (max-width: 575.98px) {
    .label_50 {
        grid-template-columns: 1fr !important;
    }
}

/* Account form pages (dados, changenick, changemail, etc.) */
.workcontrol_account_view,
.workcontrol_account_home {
    color: rgba(255, 255, 255, 0.85) !important;
}
.workcontrol_account_home h3,
.workcontrol_account_home h4,
.workcontrol_account_home .title {
    color: #fff !important;
    font-weight: 900 !important;
}
.account_form_fields {
    background: transparent !important;
}
.account_form_callback {
    border-radius: var(--st-radius-sm) !important;
}
.legend {
    color: rgba(255, 255, 255, 0.5) !important;
    font-weight: 700 !important;
}
.form_suporte label,
.form-horizontal label {
    color: rgba(255, 255, 255, 0.7) !important;
    font-weight: 700 !important;
}

/* Common.css overrides (recharge/account views) */
.recom-box, .recom-box li a, .search-bd,
.sp_recharge, .list_product, .product-box {
    color: rgba(255, 255, 255, 0.85) !important;
}
.legend, .form-label, label {
    color: rgba(255, 255, 255, 0.7) !important;
}
.input.form-control[disabled],
.input.form-control[readonly],
span.input.form-control {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: rgba(255, 255, 255, 0.6) !important;
    opacity: 0.8 !important;
}
/* File input styling */
input[type="file"] {
    color: rgba(255, 255, 255, 0.7) !important;
}
input[type="file"]::file-selector-button {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: rgba(255, 255, 255, 0.85) !important;
    border-radius: 10px !important;
    padding: 8px 16px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: background 0.15s ease !important;
}
input[type="file"]::file-selector-button:hover {
    background: rgba(255, 255, 255, 0.12) !important;
}

/* Modal dark override (recharge, player preview, etc.) */
.modal-content {
    background: var(--st-bg-dark-end) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 18px !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5) !important;
    overflow: hidden !important;
}
.modal-backdrop.show {
    background: rgba(0, 0, 0, 0.7) !important;
}
.modal-header {
    background: rgba(255, 255, 255, 0.03) !important;
    border-bottom-color: rgba(255, 255, 255, 0.06) !important;
}
.modal-title {
    color: #fff !important;
    font-weight: 900 !important;
}
.modal-header .close {
    color: rgba(255, 255, 255, 0.6) !important;
    text-shadow: none !important;
}
.modal-body {
    color: rgba(255, 255, 255, 0.85) !important;
}
.modal-footer {
    border-top-color: rgba(255, 255, 255, 0.06) !important;
}
/* Content containers */
.content,
.inner-block,
.inner,
.workcontrol,
.workcontrol_content,
.postContent,
.post-content,
.col-md-9 .bloco,
.col-md-9 .container {
    background: transparent !important;
    color: rgba(255, 255, 255, 0.85) !important;
}

/* Tables */
.table,
.table th,
.table td,
table,
table th,
table td {
    color: rgba(255, 255, 255, 0.85) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}
.table thead th {
    background: rgba(255, 255, 255, 0.04) !important;
    border-bottom-color: rgba(255, 255, 255, 0.10) !important;
    color: rgba(255, 255, 255, 0.6) !important;
    font-weight: 800 !important;
}
.table-striped tbody tr:nth-of-type(odd) {
    background: rgba(255, 255, 255, 0.02) !important;
}
.table-hover tbody tr:hover {
    background: rgba(255, 255, 255, 0.06) !important;
}

/* Forms inside pages */
.col-md-9 .form-control,
.col-md-9 input,
.col-md-9 select,
.col-md-9 textarea {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #fff !important;
}
.col-md-9 .form-control:focus {
    border-color: var(--st-blue) !important;
    background: rgba(255, 255, 255, 0.08) !important;
}
.col-md-9 label,
.col-md-9 .control-label {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* Nav tabs inside content pages */
.col-md-9 .nav-tabs {
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}
.col-md-9 .nav-tabs .nav-link {
    color: rgba(255, 255, 255, 0.7) !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}
.col-md-9 .nav-tabs .nav-link.active {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #fff !important;
    border-bottom-color: transparent !important;
}

/* Cards/panels inside content */
.col-md-9 .card,
.col-md-9 .panel,
.col-md-9 .well {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: rgba(255, 255, 255, 0.85) !important;
}

/* Headings */
.col-md-9 h1,
.col-md-9 h2,
.col-md-9 h3,
.col-md-9 h4,
.col-md-9 h5 {
    color: #fff !important;
}

/* Links inside content — text links only */
.workcontrol_account_home a,
.legal-page a,
.legal-content a,
.tkt_description a,
.orders-empty a {
    color: var(--st-blue) !important;
}
.workcontrol_account_home a:hover,
.legal-page a:hover,
.legal-content a:hover {
    color: var(--st-orange) !important;
}

/* Alerts */
.alert-success,
.trigger_success,
.account_form_callback .trigger_success {
    background: rgba(0, 200, 83, 0.15) !important;
    border: 1px solid rgba(0, 200, 83, 0.25) !important;
    color: #66ff99 !important;
    border-radius: 14px !important;
    padding: 14px 18px !important;
    font-weight: 700 !important;
}
.alert-danger,
.trigger_alert,
.trigger_error,
.account_form_callback .trigger_alert {
    background: rgba(220, 53, 69, 0.15) !important;
    border: 1px solid rgba(220, 53, 69, 0.25) !important;
    color: #ff8888 !important;
    border-radius: 14px !important;
    padding: 14px 18px !important;
    font-weight: 700 !important;
}
.trigger_alert a, .trigger_error a {
    color: var(--st-blue) !important;
    text-decoration: underline !important;
}
.alert-info,
.trigger_info,
.trigger {
    background: rgba(30, 144, 255, 0.15) !important;
    border: 1px solid rgba(30, 144, 255, 0.25) !important;
    color: #88ccff !important;
    border-radius: 14px !important;
    padding: 14px 18px !important;
    font-weight: 700 !important;
}
.trigger a, .trigger_info a {
    color: var(--st-orange) !important;
}
.alert-warning,
.trigger_warning {
    background: rgba(255, 193, 7, 0.15) !important;
    border: 1px solid rgba(255, 193, 7, 0.25) !important;
    color: #ffdd66 !important;
    border-radius: 14px !important;
    padding: 14px 18px !important;
    font-weight: 700 !important;
}

/* Account form callback container */
.account_form_callback {
    margin-bottom: 12px !important;
}
.account_form_callback > div {
    border-radius: 14px !important;
    padding: 14px 18px !important;
    font-weight: 700 !important;
}

/* Legal/article pages */
.artigo,
.article-content,
.legal-content,
.post-body {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: var(--st-radius) !important;
    color: rgba(255, 255, 255, 0.85) !important;
    padding: 24px !important;
}

/* Generic text color fix */
p, li, span, div, td, th, label, small, em, strong {
    color: inherit;
}

/* Buttons fix for content pages */
.btn-primary {
    background: linear-gradient(135deg, #0062CC, var(--st-blue)) !important;
    border: none !important;
    color: #fff !important;
}
.btn-success {
    background: linear-gradient(135deg, var(--st-green), #33D97A) !important;
    border: none !important;
    color: #fff !important;
}
.btn-danger {
    background: linear-gradient(135deg, #dc3545, #ff6b6b) !important;
    border: none !important;
    color: #fff !important;
}
.btn-warning {
    background: linear-gradient(135deg, var(--st-orange), #FFa940) !important;
    border: none !important;
    color: #fff !important;
}

/* --- Badges (pedidos, status, etc.) --- */
.badge {
    border-radius: 999px !important;
    font-weight: 800 !important;
    padding: 6px 12px !important;
    font-size: 12px !important;
}
.badge-default,
.badge-secondary {
    background: rgba(255, 255, 255, 0.08) !important;
    color: rgba(255, 255, 255, 0.7) !important;
}
.badge-success {
    background: linear-gradient(135deg, var(--st-green), #33D97A) !important;
    color: #fff !important;
}
.badge-danger {
    background: linear-gradient(135deg, #dc3545, #ff6b6b) !important;
    color: #fff !important;
}
.badge-warning {
    background: linear-gradient(135deg, var(--st-orange), #FFa940) !important;
    color: #fff !important;
}
.badge-info,
.badge-primary {
    background: linear-gradient(135deg, var(--st-blue), #4AA8FF) !important;
    color: #fff !important;
}

/* Status labels em tabelas de pedidos */
td .label,
td span[class*="label-"],
td span[class*="badge"] {
    border-radius: 999px !important;
    padding: 5px 12px !important;
    font-weight: 800 !important;
    font-size: 12px !important;
}

/* --- Tickets tabs redesign --- */
.col-md-9 .nav-tabs .nav-link,
.col-md-9 .nav-pills .nav-link {
    border: none !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.06) !important;
    color: rgba(255, 255, 255, 0.7) !important;
    font-weight: 800 !important;
    padding: 12px 20px !important;
    transition: all 0.2s ease !important;
    margin-bottom: 4px !important;
}
.col-md-9 .nav-tabs .nav-link:hover,
.col-md-9 .nav-pills .nav-link:hover {
    background: rgba(255, 255, 255, 0.10) !important;
    color: #fff !important;
}
.col-md-9 .nav-tabs .nav-link.active,
.col-md-9 .nav-pills .nav-link.active {
    background: linear-gradient(135deg, var(--st-blue), #4AA8FF) !important;
    color: #fff !important;
    box-shadow: 0 6px 20px rgba(30, 144, 255, 0.25) !important;
    border: none !important;
}
.col-md-9 .nav-tabs {
    border-bottom: none !important;
    gap: 8px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    margin-bottom: 20px !important;
}

/* --- Download buttons upgrade --- */
.st-download-btn {
    border-radius: 14px !important;
    padding: 16px 28px !important;
    font-size: 1rem !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    transition: all 0.2s ease !important;
}
.st-download-btn:hover {
    background: rgba(255, 140, 0, 0.12) !important;
    border-color: rgba(255, 140, 0, 0.2) !important;
    box-shadow: 0 8px 24px rgba(255, 140, 0, 0.2) !important;
    transform: translateY(-3px) !important;
}

/* --- Feature cards upgrade --- */
.st-feature-card {
    border-radius: 20px !important;
    overflow: visible !important;
    transition: all 0.25s ease !important;
}
.st-feature-card:hover {
    transform: translateY(-6px) !important;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.3) !important;
}
.st-feature-body {
    padding: 20px 18px 24px !important;
}

/* --- Server cards in dashboard --- */
.server-card-inner {
    border-radius: 16px !important;
    transition: all 0.2s ease !important;
}
.server-card:hover .server-card-inner {
    transform: translateY(-3px) !important;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.25) !important;
}

/* --- Quick Actions upgrade --- */
.st-quick-action {
    border-radius: 14px !important;
    padding: 14px 22px !important;
    font-size: 0.95rem !important;
    transition: all 0.2s ease !important;
}
.st-quick-action:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25) !important;
}

/* --- Empty state / info messages --- */
.alert-success {
    border-radius: 14px !important;
}
.alert-danger {
    border-radius: 14px !important;
}
.alert-info {
    border-radius: 14px !important;
}
.alert-warning {
    border-radius: 14px !important;
}

/* --- Article page (noticia individual) --- */
.artigo-content,
.post-content,
.post-body,
.article {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 20px !important;
    padding: 28px !important;
    color: rgba(255, 255, 255, 0.85) !important;
}

/* --- Article / Post page --- */
.slidetop,
.slidetop-modern {
    background: linear-gradient(135deg, var(--st-bg-dark), var(--st-bg-dark-end)) !important;
}
.post {
    position: relative;
}
.post > .title {
    background: linear-gradient(135deg, rgba(30, 144, 255, 0.15), rgba(124, 77, 255, 0.12)) !important;
    background-image: none !important;
    padding: 40px 20px !important;
    margin: 0 !important;
    font-size: 1.8rem !important;
    font-weight: 900 !important;
    color: #fff !important;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
    border-bottom: 3px solid var(--st-orange);
}

/* Share bar */
.workcontrol_socialshare {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: 14px !important;
    padding: 14px !important;
    margin: 16px 0 !important;
}
.workcontrol_socialshare_cta {
    color: rgba(255, 255, 255, 0.5) !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    font-size: 12px !important;
    letter-spacing: 0.06em !important;
}
.post-content {
    border-radius: 20px !important;
    padding: 24px !important;
}
.post-content .embed-container {
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 20px;
}
.post-content .cover {
    border-radius: 14px;
    width: 100%;
    height: auto;
    margin-bottom: 20px;
}
.related-posts {
    margin-top: 24px;
}
.related-posts h3 {
    color: #fff !important;
    font-weight: 800 !important;
    margin-bottom: 16px !important;
}
.related-posts article {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    overflow: hidden;
    transition: all 0.2s ease;
    margin-bottom: 16px;
}
.related-posts article:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}
.related-posts article .thumb img {
    width: 100%;
    height: auto;
    display: block;
}
.related-posts article .title {
    padding: 12px 14px !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    background: transparent !important;
    border: none !important;
    text-shadow: none !important;
}
.related-posts article .title a {
    color: rgba(255, 255, 255, 0.85) !important;
    text-decoration: none !important;
}
.related-posts article .title a:hover {
    color: var(--st-orange) !important;
}

/* Article sidebar widgets */
.widget {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    margin-bottom: 16px !important;
}
.widget.buttons {
    background: rgba(255, 255, 255, 0.04) !important;
}
.widget a {
    color: #fff !important;
    transition: all 0.15s ease !important;
}
.widget .btn-mod,
.widget .btn-torneio,
.widget .btn-ban {
    border-radius: 12px !important;
    margin: 6px !important;
    padding: 12px 16px !important;
    font-weight: 800 !important;
}
.btn-server {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 12px !important;
    color: rgba(255, 255, 255, 0.85) !important;
}
.widget select,
.widget .form-control {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #fff !important;
    border-radius: 10px !important;
}

/* Scrollbar (WebKit) --- */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: var(--st-bg-dark);
}
::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.12);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* --- Ranking Table Styles (global) --- */
.table-modern { margin: 0 !important; }
.table-modern thead th {
    border-top: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    font-weight: 900 !important;
    font-size: 12px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    color: rgba(255, 255, 255, 0.4) !important;
    background: rgba(255, 255, 255, 0.02) !important;
    padding: 12px 16px !important;
}
.table-modern td,
.table-modern th {
    vertical-align: middle !important;
    padding: 12px 16px !important;
    border-color: rgba(255, 255, 255, 0.04) !important;
    color: rgba(255, 255, 255, 0.85) !important;
}
.table-modern tbody tr { transition: background 0.15s ease; }
.table-modern tbody tr:hover { background: rgba(255, 255, 255, 0.04) !important; }

/* Top 3 rows */
.table-modern tbody tr:nth-child(1) { background: linear-gradient(90deg, rgba(255, 215, 0, 0.12), transparent) !important; }
.table-modern tbody tr:nth-child(1) .cell-rank { color: #FFD700 !important; font-size: 1.2em; text-shadow: 0 0 16px rgba(255, 215, 0, 0.6) !important; }
.table-modern tbody tr:nth-child(1) .cell-name { color: #FFD700 !important; }
.table-modern tbody tr:nth-child(2) { background: linear-gradient(90deg, rgba(192, 192, 192, 0.10), transparent) !important; }
.table-modern tbody tr:nth-child(2) .cell-rank { color: #C0C0C0 !important; font-size: 1.1em; text-shadow: 0 0 10px rgba(192, 192, 192, 0.3) !important; }
.table-modern tbody tr:nth-child(2) .cell-name { color: #C0C0C0 !important; }
.table-modern tbody tr:nth-child(3) { background: linear-gradient(90deg, rgba(205, 127, 50, 0.12), transparent) !important; }
.table-modern tbody tr:nth-child(3) .cell-rank { color: #CD7F32 !important; font-size: 1.05em; text-shadow: 0 0 10px rgba(205, 127, 50, 0.3) !important; }
.table-modern tbody tr:nth-child(3) .cell-name { color: #CD7F32 !important; }

.cell-rank { font-weight: 900; color: rgba(255, 255, 255, 0.5); min-width: 40px; }
.cell-name { font-weight: 800; word-break: break-word; color: rgba(255, 255, 255, 0.9); }
.cell-name.player-nick { cursor: pointer; transition: color 0.15s ease; }
.cell-name.player-nick:hover { color: var(--st-orange) !important; }
.cell-win { font-weight: 800; color: var(--st-green) !important; }
.cell-fp { font-weight: 800; color: var(--st-blue) !important; }
.row-total {
    background: rgba(255, 255, 255, 0.04) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}
.row-total td, .row-total th { font-weight: 900 !important; color: rgba(255, 255, 255, 0.6) !important; }
.row-me {
    background: linear-gradient(90deg, rgba(30, 144, 255, 0.15), rgba(124, 77, 255, 0.10)) !important;
    border-left: 3px solid var(--st-blue) !important;
}
.row-me td, .row-me th { color: #fff !important; font-weight: 900 !important; }

/* Nav tabs for server selection */
.nav-modern {
    border: 0 !important;
    gap: 8px;
    flex-wrap: wrap;
}
.nav-modern .nav-item { margin: 0; }
.nav-modern .nav-link {
    border: 0 !important;
    border-radius: 999px !important;
    font-weight: 900;
    padding: 10px 16px;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.7);
    transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
    max-width: 320px;
    white-space: normal;
    line-height: 1.15;
    text-align: center;
}
.nav-modern .nav-link:hover,
.nav-modern .nav-link:focus {
    background: rgba(255, 255, 255, 0.10);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}
.nav-modern .nav-link.active {
    background: linear-gradient(135deg, var(--st-blue), #4AA8FF);
    color: #fff;
    box-shadow: 0 8px 24px rgba(30, 144, 255, 0.3);
}

/* --- Ranking Card (global) --- */
.ranking-card {
    border-radius: 20px !important;
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2) !important;
}
.ranking-head {
    padding: 18px 20px !important;
    display: flex !important;
    align-items: baseline !important;
    justify-content: space-between !important;
    gap: 12px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    background: linear-gradient(135deg, rgba(255, 140, 0, 0.06), rgba(30, 144, 255, 0.04)) !important;
}
.ranking-title {
    font-weight: 900 !important;
    letter-spacing: -0.02em !important;
    font-size: 18px !important;
    color: #fff !important;
}
.ranking-sub {
    color: rgba(255, 255, 255, 0.4) !important;
    font-weight: 800 !important;
    font-size: 13px !important;
    white-space: nowrap !important;
}

/* --- Podium Top 3 (global) --- */
.podium {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 12px;
    padding: 24px 16px 24px;
    margin-bottom: 0;
    background: linear-gradient(180deg, rgba(255, 215, 0, 0.04), transparent);
    border-radius: 18px 18px 0 0;
    overflow: visible;
}
.ranking-card { overflow: visible !important; }
.podium-slot {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    flex-shrink: 0;
    max-width: 200px;
}
.podium-1 { order: 2; }
.podium-2 { order: 1; }
.podium-3 { order: 3; }
.podium-canvas {
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.2);
    border: 2px solid rgba(255, 255, 255, 0.06);
    display: block;
    object-fit: contain;
}
.podium-1 .podium-canvas {
    width: 180px !important;
    height: 246px !important;
    border-color: rgba(255, 215, 0, 0.3);
    box-shadow: 0 0 24px rgba(255, 215, 0, 0.15);
}
.podium-2 .podium-canvas,
.podium-3 .podium-canvas {
    width: 150px !important;
    height: 205px !important;
}
.podium-2 .podium-canvas {
    border-color: rgba(192, 192, 192, 0.25);
    box-shadow: 0 0 16px rgba(192, 192, 192, 0.1);
}
.podium-3 .podium-canvas {
    border-color: rgba(205, 127, 50, 0.25);
    box-shadow: 0 0 16px rgba(205, 127, 50, 0.1);
}
.podium-name {
    font-weight: 900;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.9);
    margin-top: 8px;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.podium-name-gold {
    color: #FFD700 !important;
    font-size: 16px;
    text-shadow: 0 0 12px rgba(255, 215, 0, 0.4);
}
.podium-wins {
    font-size: 12px;
    color: var(--st-green);
    font-weight: 700;
    margin-top: 2px;
}
.podium-base {
    margin-top: 8px;
    padding: 6px 16px;
    border-radius: 10px;
    font-weight: 900;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.podium-base-gold {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.2), rgba(255, 215, 0, 0.08));
    color: #FFD700;
    box-shadow: 0 4px 12px rgba(255, 215, 0, 0.15);
}
.podium-base-silver {
    background: linear-gradient(135deg, rgba(192, 192, 192, 0.15), rgba(192, 192, 192, 0.06));
    color: #C0C0C0;
}
.podium-base-bronze {
    background: linear-gradient(135deg, rgba(205, 127, 50, 0.15), rgba(205, 127, 50, 0.06));
    color: #CD7F32;
}
.podium-medal { font-size: 18px; }
.podium-data { display: none; }
@media (max-width: 575.98px) {
    .podium { gap: 6px; padding: 16px 8px 8px; }
    .podium-1 .podium-canvas { width: 120px !important; height: 164px !important; }
    .podium-2 .podium-canvas, .podium-3 .podium-canvas { width: 100px !important; height: 137px !important; }
    .podium-name { font-size: 12px; max-width: 100px; }
}

/* --- Advanced Visual Effects --- */

/* Animated gradient border on feature cards */
.st-feature-card::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 22px;
    background: linear-gradient(135deg, var(--st-blue), var(--st-orange), var(--st-pink), var(--st-purple), var(--st-blue));
    background-size: 300% 300%;
    animation: st-gradient-rotate 6s ease infinite;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.st-feature-card {
    position: relative;
    z-index: 1;
}
.st-feature-card:hover::before {
    opacity: 1;
}
@keyframes st-gradient-rotate {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Neon glow on CTA buttons */
.btn-st-blue {
    position: relative;
}
.btn-st-blue::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: inherit;
    filter: blur(16px);
    opacity: 0;
    z-index: -1;
    transition: opacity 0.3s ease;
}
.btn-st-blue:hover::after {
    opacity: 0.5;
}

/* Server card hover glow border */
.server-card-inner {
    transition: all 0.3s ease !important;
}
.server-card:hover .server-card-inner {
    box-shadow:
        0 0 20px rgba(30, 144, 255, 0.15),
        0 12px 36px rgba(0, 0, 0, 0.25) !important;
}

/* Pulse animation on "Jogar Agora" header button */
.btn-header-play {
    position: relative;
}
.btn-header-play::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--st-blue), #4AA8FF);
    z-index: -1;
    animation: st-pulse-glow 2s ease-in-out infinite;
}
@keyframes st-pulse-glow {
    0%, 100% { opacity: 0.4; transform: scale(1); filter: blur(8px); }
    50% { opacity: 0.7; transform: scale(1.08); filter: blur(12px); }
}

/* Quick action cards hover glow */
.st-quick-action.qa-blue:hover { box-shadow: 0 0 24px rgba(30, 144, 255, 0.4), 0 8px 24px rgba(0, 0, 0, 0.2) !important; }
.st-quick-action.qa-orange:hover { box-shadow: 0 0 24px rgba(255, 140, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.2) !important; }
.st-quick-action.qa-green:hover { box-shadow: 0 0 24px rgba(0, 200, 83, 0.4), 0 8px 24px rgba(0, 0, 0, 0.2) !important; }
.st-quick-action.qa-purple:hover { box-shadow: 0 0 24px rgba(124, 77, 255, 0.4), 0 8px 24px rgba(0, 0, 0, 0.2) !important; }

/* Ranking medal glow */
.table-modern tbody tr:nth-child(1) .cell-rank { text-shadow: 0 0 16px rgba(255, 215, 0, 0.6) !important; }
.table-modern tbody tr:nth-child(2) .cell-rank { text-shadow: 0 0 14px rgba(192, 192, 192, 0.5) !important; }
.table-modern tbody tr:nth-child(3) .cell-rank { text-shadow: 0 0 14px rgba(205, 127, 50, 0.5) !important; }

/* News item hover with slide-in dot effect */
.ann-link .ann-dot {
    transition: all 0.3s ease !important;
}
.ann-link:hover .ann-dot {
    transform: scale(1.5) !important;
    box-shadow: 0 0 12px rgba(255, 140, 0, 0.6) !important;
}

/* Sidebar menu item active indicator */
.menu-link {
    position: relative !important;
    overflow: hidden !important;
}
.menu-link::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 0;
    background: var(--st-orange);
    border-radius: 0 4px 4px 0;
    transition: height 0.2s ease;
}
.menu-link:hover::before {
    height: 60%;
}

/* Avatar ring spin on hover */
.avatar-wrap {
    transition: all 0.4s ease !important;
}
.avatar-wrap:hover {
    transform: rotate(5deg) scale(1.05) !important;
}

/* Card body subtle transition */
.card-profile {
    transition: all 0.3s ease !important;
}

/* Hero stars enhanced */
.st-hero-stars .star {
    box-shadow: 0 0 6px 2px rgba(255, 255, 255, 0.3);
}

/* Smooth transitions on all interactive elements */
*, *::before, *::after {
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Loading skeleton shimmer for images */
.st-feature-img {
    position: relative;
    overflow: hidden;
}
.st-feature-img::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.04), transparent);
    background-size: 200% 100%;
    animation: st-shimmer 1.5s ease infinite;
    z-index: 1;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s;
}
.st-feature-card:hover .st-feature-img::before {
    opacity: 1;
}

/* --- Responsive --- */
@media (max-width: 991.98px) {
    /* Mobile navbar */
    .header-modern .navbar-collapse {
        background: var(--st-bg-dark-end, #1A1A3E) !important;
        border-radius: 16px !important;
        padding: 16px !important;
        margin-top: 10px !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4) !important;
    }
    .header-modern .navbar-collapse .nav-item {
        border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    }
    .header-modern .navbar-collapse .nav-item:last-child {
        border-bottom: none;
    }
    .header-modern .navbar-collapse .nav-link {
        padding: 12px 14px !important;
    }
    .header-modern .navbar-collapse .btn-header-login,
    .header-modern .navbar-collapse .btn-header-register {
        width: 100% !important;
        text-align: center !important;
        margin: 4px 0 !important;
        padding: 12px !important;
    }
    .header-modern .navbar-collapse .btn-header-play {
        width: 100% !important;
        text-align: center !important;
        margin: 8px 0 4px !important;
    }
    .header-modern .navbar-toggler {
        border: 1px solid rgba(255, 255, 255, 0.15) !important;
        padding: 8px 12px !important;
        border-radius: 12px !important;
    }
    .header-modern .navbar-toggler-icon {
        filter: brightness(2) !important;
    }
}
@media (max-width: 767.98px) {
    .st-hero-tagline {
        font-size: 1.8rem;
    }
    .st-hero-sub {
        font-size: 1rem;
    }
    .st-hero-logo {
        max-width: 220px;
    }
    .st-section {
        padding: 50px 0;
    }
    .st-section-title {
        font-size: 1.7rem;
    }
    .st-quick-actions {
        gap: 6px;
        padding: 0 4px 8px;
    }
    .st-quick-action {
        padding: 10px 14px !important;
        font-size: 0.82rem !important;
        border-radius: 12px !important;
    }
    /* Mobile news fix */
    .announce-card {
        border-radius: 14px !important;
        margin: 0 -5px !important;
    }
    .announce-head {
        flex-direction: column !important;
        gap: 4px !important;
        padding: 14px !important;
    }
    .nav-tabs-modern {
        padding: 10px 12px !important;
        gap: 8px !important;
    }
    .nav-tabs-modern .nav-link {
        padding: 8px 14px !important;
        font-size: 13px !important;
    }
    .tab-content-modern {
        padding: 6px 10px 10px !important;
    }
    .announce-footer {
        padding: 12px !important;
    }
    .pagination li a,
    .pagination li span,
    .page-link {
        padding: 6px 10px !important;
        min-width: 32px !important;
        font-size: 12px !important;
    }

    /* Mobile podium */
    .podium { gap: 2px !important; padding: 10px 0 8px !important; }
    .podium-slot { max-width: 110px !important; }
    .podium-1 .podium-canvas { width: 90px !important; height: 123px !important; }
    .podium-2 .podium-canvas, .podium-3 .podium-canvas { width: 75px !important; height: 103px !important; }
    .podium-name { font-size: 10px !important; max-width: 80px !important; }
    .podium-wins { font-size: 9px !important; }
    .podium-base { padding: 3px 8px !important; font-size: 11px !important; }
    .podium-medal { font-size: 13px !important; }

    /* ===== RANKING MOBILE: Card Layout (global — all rankings) ===== */
    .table-modern thead { display: none !important; }
    .table-modern { border-collapse: separate !important; border-spacing: 0 !important; }
    .table-modern, .table-modern tbody { display: block !important; width: 100% !important; }
    .table-modern tr {
        display: grid !important;
        grid-template-columns: 44px 1fr auto !important;
        align-items: center !important;
        background: rgba(255, 255, 255, 0.03) !important;
        border: 1px solid rgba(255, 255, 255, 0.06) !important;
        border-radius: 14px !important;
        padding: 10px 12px !important;
        margin-bottom: 8px !important;
        width: 100% !important;
        gap: 0 8px !important;
    }
    .table-modern tr td, .table-modern tr th {
        border: none !important; padding: 0 !important; text-align: left !important;
    }
    .table-modern tr .cell-rank {
        grid-column: 1 !important; grid-row: 1 / 3 !important;
        font-size: 20px !important; min-width: auto !important;
        text-align: center !important; align-self: center !important;
    }
    .table-modern tr .cell-name {
        grid-column: 2 !important; grid-row: 1 !important;
        font-size: 14px !important; font-weight: 800 !important;
        overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important;
    }
    .table-modern tr .cell-win {
        grid-column: 3 !important; grid-row: 1 !important;
        font-size: 12px !important; text-align: right !important; white-space: nowrap !important;
    }
    .table-modern tr .cell-fp {
        grid-column: 2 / 4 !important; grid-row: 2 !important;
        font-size: 11px !important; color: rgba(255,255,255,0.4) !important;
        white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important;
    }
    .table-modern tr .cell-win::before { content: '⚔ '; opacity: 0.5; }
    .table-modern tr .cell-fp::before { content: '⚡ FC '; opacity: 0.5; }
    .table-modern tbody tr:nth-child(1) { border-left: 4px solid #FFD700 !important; background: linear-gradient(90deg, rgba(255,215,0,0.06), transparent) !important; }
    .table-modern tbody tr:nth-child(2) { border-left: 4px solid #C0C0C0 !important; }
    .table-modern tbody tr:nth-child(3) { border-left: 4px solid #CD7F32 !important; }

    /* Total separator */
    .row-total {
        display: flex !important;
        background: linear-gradient(135deg, rgba(255,140,0,0.12), rgba(255,140,0,0.04)) !important;
        border: 2px solid rgba(255,140,0,0.2) !important;
        border-radius: 14px !important; padding: 14px 16px !important;
        margin: 20px 0 !important; justify-content: center !important;
        align-items: center !important; gap: 8px !important;
    }
    .row-total td, .row-total th { font-size: 14px !important; color: var(--st-orange, #FF8C00) !important; font-weight: 900 !important; }
    .row-total .cell-rank { display: none !important; }
    .row-total .cell-name { display: block !important; font-size: 13px !important; grid-column: auto !important; grid-row: auto !important; }
    .row-total .cell-win { grid-column: auto !important; grid-row: auto !important; }
    .row-total .cell-win::before { content: '⚔ Total: ' !important; }
    .row-total .cell-fp { display: none !important; }

    /* Your position */
    .row-me:first-of-type::before {
        content: '🎯 Sua Posição'; display: block; position: absolute;
        top: -28px; left: 0; right: 0; text-align: center;
        font-size: 11px; font-weight: 800; text-transform: uppercase;
        letter-spacing: 0.08em; color: var(--st-blue, #1E90FF);
    }
    .row-me:first-of-type { margin-top: 36px !important; position: relative; }
    .row-me {
        border: 1px solid rgba(30,144,255,0.25) !important;
        border-left: 4px solid var(--st-blue, #1E90FF) !important;
        background: linear-gradient(135deg, rgba(30,144,255,0.1), rgba(124,77,255,0.06)) !important;
        box-shadow: 0 4px 16px rgba(30,144,255,0.1) !important;
    }
    .row-me .cell-name { color: #fff !important; font-weight: 900 !important; }

    /* Mobile changenick */
    .nick-canvas-wrap {
        width: 100% !important;
        max-width: 270px !important;
        height: auto !important;
        aspect-ratio: 250 / 342;
        margin: 0 auto;
    }
    .nick-canvas {
        width: 100% !important;
        height: auto !important;
        max-width: 250px !important;
    }
    .nick-preview {
        flex: none !important;
        width: 100% !important;
    }

    /* Mobile tables — compact to fit */
    .table-modern td, .table-modern th {
        padding: 5px 6px !important;
        font-size: 11px !important;
    }
    .table-modern thead th {
        font-size: 10px !important;
        letter-spacing: 0 !important;
    }

    /* Player modal centered */
    .player-modal .modal-dialog {
        margin: 1rem auto !important;
        max-width: calc(100% - 2rem) !important;
    }
    .player-preview-container {
        width: 200px !important;
        height: 274px !important;
    }
    #playerPreviewCanvas {
        width: 200px !important;
        height: 274px !important;
    }

    /* Mobile pedido individual */
    .order-info-grid {
        grid-template-columns: 1fr !important;
    }
    .order-detail-header {
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    /* Mobile dados */
    .dados-grid-2 {
        grid-template-columns: 1fr !important;
    }

    /* Mobile server selection modal */
    .play-server-item {
        padding: 10px 12px !important;
        gap: 10px !important;
    }
    .play-server-item img {
        width: 44px !important;
        height: 33px !important;
    }
}