@import url("/css/light.css?3060737993") screen and (prefers-color-scheme: light);
    @import url("/css/dark.css?3060737993") screen and (prefers-color-scheme: dark);
    @media (prefers-color-scheme: light) {
        :root {
    --theme-primary-rgb: 253,116,108;
    --theme-secondary-rgb: 255,144,104;

    --theme-bg-page-rgb: 255,255,255;
    --theme-bg-primary-rgb: 255,255,255;
    --theme-bg-secondary-rgb: 34,34,34;

        }
    }
    @media (prefers-color-scheme: dark) {
        :root {
    --theme-primary-rgb: 39,44,48;
    --theme-secondary-rgb: 108,117,125;

    --theme-bg-page-rgb: 34,34,34;
    --theme-bg-primary-rgb: 52,58,64;
    --theme-bg-secondary-rgb: 33,37,41;

        }
    }


    :root {
        --theme-gradient: rgba(var(--theme-primary-rgb), var(--theme-opacity));
    }




    :root {
        --theme-border-radius: 0.25rem;
    }

    .btn, .badge, .card,
    div.table-responsive,
    .form-control, .form-select,
    .form-switch .form-check-input,
    .text-editor .toolbar-bubble .toolbar,
    .modal-content,
    .input-group-text,
    .page-item .page-link.page-link, .page-item span,
    .btn-group > .btn,
    .input-group > .form-control,
    .input-group > .form-select,
    .input-group > .input-group-text,
    .input-group > .btn,
    div.swal2-popup, button.swal2-styled.swal2-styled, .swal2-input, .swal2-select,
    .ace_editor {
        border-radius: var(--theme-border-radius);
    }

    .card-img-top {
        border-top-left-radius: calc(var(--theme-border-radius) - 1px);
        border-top-right-radius: calc(var(--theme-border-radius) - 1px);
    }

    .table {
        margin-bottom: 0;
    }

    .table-responsive {
        margin-bottom: 1rem;
    }

            .page-item .page-link {
            height: 35px;
            width: 35px;
            margin: 0 5px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    


	/* =========================================================
   MERCADO PAGO — DEVE FICAR NO INÍCIO DO CSS
   ========================================================= */

.mercadopago-icon {
  display: inline-block;
  width: 32px;
  height: 32px;
  vertical-align: middle;
  background-image: url(https://http2.mlstatic.com/frontend-assets/ui-navigation/6.7.0/mercadopago/favicon.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
/* =========================================================
   EXTREME RUST — TEMA COMPLETO PARA EMBER
   ========================================================= */

:root {
    --extreme-red: #e32235;
    --extreme-red-light: #ff4053;
    --extreme-red-dark: #94101d;

    --extreme-bg: #08090c;
    --extreme-bg-secondary: #0d0f14;
    --extreme-card: #14171e;
    --extreme-card-light: #1a1d25;

    --extreme-border: rgba(255, 255, 255, 0.08);
    --extreme-border-red: rgba(227, 34, 53, 0.55);

    --extreme-text: #ffffff;
    --extreme-muted: #a4a7b0;

    --extreme-radius: 12px;

    --extreme-shadow:
        0 14px 35px rgba(0, 0, 0, 0.45);

    --extreme-shadow-red:
        0 0 25px rgba(227, 34, 53, 0.16);
}


/* =========================================================
   CONFIGURAÇÕES GERAIS
   ========================================================= */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;

    color: var(--extreme-text) !important;

    background:
        radial-gradient(
            circle at 10% 5%,
            rgba(227, 34, 53, 0.12),
            transparent 30%
        ),
        radial-gradient(
            circle at 90% 60%,
            rgba(227, 34, 53, 0.07),
            transparent 35%
        ),
        linear-gradient(
            180deg,
            #07080a 0%,
            #0d0f14 45%,
            #07080a 100%
        ) !important;

    background-attachment: fixed !important;

    font-family:
        Inter,
        Montserrat,
        Arial,
        Helvetica,
        sans-serif !important;

    min-height: 100vh;
    overflow-x: hidden;
}

body::before {
    content: "";

    position: fixed;
    inset: 0;

    z-index: -2;
    pointer-events: none;

    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.016) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.016) 1px,
            transparent 1px
        );

    background-size: 42px 42px;
}

body::after {
    content: "";

    position: fixed;
    top: -220px;
    left: 50%;

    width: 700px;
    height: 420px;

    transform: translateX(-50%);

    background: rgba(227, 34, 53, 0.11);
    filter: blur(140px);

    border-radius: 50%;

    z-index: -1;
    pointer-events: none;
}

::selection {
    color: #ffffff;
    background: var(--extreme-red);
}


/* =========================================================
   BARRA DE ROLAGEM
   ========================================================= */

::-webkit-scrollbar {
    width: 9px;
}

::-webkit-scrollbar-track {
    background: #08090c;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(
        180deg,
        var(--extreme-red-light),
        var(--extreme-red-dark)
    );

    border: 2px solid #08090c;
    border-radius: 20px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--extreme-red-light);
}


/* =========================================================
   TEXTOS
   ========================================================= */

h1,
h2,
h3,
h4,
h5,
h6 {
    color: #ffffff !important;

    font-family:
        Montserrat,
        Inter,
        Arial,
        sans-serif !important;

    font-weight: 800 !important;
}

h1 {
    font-size: clamp(2.2rem, 5vw, 4.5rem) !important;
    line-height: 1.05 !important;
}

h2 {
    font-size: clamp(1.7rem, 3vw, 2.6rem) !important;
}

h3 {
    font-size: 1.35rem !important;
}

p,
span,
small,
label,
li {
    color: var(--extreme-muted);
}

a {
    color: var(--extreme-red-light);
    text-decoration: none !important;

    transition:
        color 0.2s ease,
        background 0.2s ease,
        transform 0.2s ease;
}

a:hover {
    color: #ffffff;
}

img {
    max-width: 100%;
}


/* =========================================================
   MENU SUPERIOR
   ========================================================= */

nav,
.navbar,
header .navbar {
    position: relative;
    z-index: 1000;

    min-height: 76px;

    padding-top: 11px !important;
    padding-bottom: 11px !important;

    background: rgba(10, 12, 16, 0.94) !important;

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

    box-shadow:
        0 12px 35px rgba(0, 0, 0, 0.38);

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

nav::after,
.navbar::after {
    content: "";

    position: absolute;
    left: 50%;
    bottom: -1px;

    width: min(700px, 80%);
    height: 1px;

    transform: translateX(-50%);

    background: linear-gradient(
        90deg,
        transparent,
        var(--extreme-red),
        transparent
    );
}


/* =========================================================
   LOGO DO MENU — CORRIGIDA
   ========================================================= */

.navbar-brand,
.navbar-brand span,
nav .brand,
.logo-text,
.site-title,
.site-logo,
header .logo {
    display: inline-flex;
    align-items: center;

    color: #ffffff !important;

    font-size: 1.35rem !important;
    font-weight: 900 !important;

    letter-spacing: 0.08em !important;
    line-height: 1 !important;

    text-transform: uppercase;

    background: transparent !important;

    text-shadow:
        0 2px 10px rgba(0, 0, 0, 0.55);
}

/*
   Desativa qualquer estilo estranho
   aplicado somente na primeira letra
*/

.navbar-brand::first-letter,
.navbar-brand span::first-letter,
.logo-text::first-letter,
.site-title::first-letter {
    color: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
}

/*
   Remove elementos decorativos que possam
   estar criando faixa ou letra vermelha
*/

.navbar-brand::before,
.logo-text::before,
.site-title::before {
    display: none !important;
    content: none !important;
}

/*
   Caso o logo seja uma imagem
*/

.navbar-brand img,
.site-logo img,
header .logo img {
    display: block;

    width: auto;
    max-width: 210px;
    max-height: 50px;

    object-fit: contain;

    filter: none !important;
}


/* =========================================================
   LINKS DO MENU
   ========================================================= */

.navbar-nav {
    gap: 5px;
}

.navbar-nav .nav-link {
    position: relative;

    padding: 10px 15px !important;

    color: #b8bbc4 !important;

    border-radius: 8px;

    font-size: 0.86rem;
    font-weight: 750 !important;

    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
    color: #ffffff !important;
    background: rgba(227, 34, 53, 0.12);
}

.navbar-nav .nav-link::after {
    content: "";

    position: absolute;
    left: 50%;
    bottom: 3px;

    width: 0;
    height: 2px;

    transform: translateX(-50%);

    background: var(--extreme-red-light);
    border-radius: 10px;

    transition: width 0.25s ease;
}

.navbar-nav .nav-link:hover::after,
.navbar-nav .nav-link.active::after {
    width: calc(100% - 30px);
}

.navbar-toggler {
    background: rgba(227, 34, 53, 0.1) !important;

    border:
        1px solid var(--extreme-border-red) !important;

    box-shadow: none !important;
}


/* =========================================================
   BANNER PRINCIPAL
   ========================================================= */

.hero,
.jumbotron,
.home-header,
.home-hero,
.page-header,
header + section:first-of-type,
main > section:first-child {
    position: relative;
    overflow: hidden;

    padding-top: clamp(70px, 10vw, 140px) !important;
    padding-bottom: clamp(70px, 10vw, 130px) !important;

    background:
        linear-gradient(
            90deg,
            rgba(6, 7, 9, 0.98) 0%,
            rgba(8, 9, 12, 0.88) 50%,
            rgba(8, 9, 12, 0.54) 100%
        ),
        radial-gradient(
            circle at 85% 40%,
            rgba(227, 34, 53, 0.18),
            transparent 38%
        ) !important;

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

.hero h1,
.jumbotron h1,
.home-header h1,
.home-hero h1 {
    display: inline-block;
    position: relative;

    margin-bottom: 14px !important;

    color: #ffffff !important;

    text-transform: uppercase;

    text-shadow:
        0 4px 20px rgba(0, 0, 0, 0.8),
        0 0 25px rgba(227, 34, 53, 0.18);
}

.hero h1::after,
.jumbotron h1::after,
.home-header h1::after,
.home-hero h1::after {
    content: "";

    display: block;

    width: 82px;
    height: 5px;

    margin-top: 17px;

    background: linear-gradient(
        90deg,
        var(--extreme-red-light),
        var(--extreme-red-dark)
    );

    border-radius: 10px;

    box-shadow:
        0 0 18px rgba(227, 34, 53, 0.3);
}


/* =========================================================
   SEÇÕES
   ========================================================= */

section {
    position: relative;

    padding-top: 52px;
    padding-bottom: 52px;
}

section h2,
.section-title {
    position: relative;

    margin-bottom: 30px !important;
    padding-bottom: 13px;

    text-transform: uppercase;
}

section h2::after,
.section-title::after {
    content: "";

    position: absolute;
    left: 0;
    bottom: 0;

    width: 55px;
    height: 3px;

    background: linear-gradient(
        90deg,
        var(--extreme-red-light),
        transparent
    );

    border-radius: 10px;
}


/* =========================================================
   CARDS
   ========================================================= */

.card,
.panel,
.well,
.list-group-item,
.package,
.product,
.server,
.server-card,
.stat-card,
.stats-card {
    position: relative;
    overflow: hidden;

    color: var(--extreme-text) !important;

    background:
        linear-gradient(
            145deg,
            rgba(25, 28, 36, 0.97),
            rgba(14, 16, 21, 0.98)
        ) !important;

    border:
        1px solid var(--extreme-border) !important;

    border-radius:
        var(--extreme-radius) !important;

    box-shadow:
        var(--extreme-shadow);

    transition:
        transform 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease;
}

.card::before,
.panel::before,
.package::before,
.product::before,
.server-card::before,
.stat-card::before {
    content: "";

    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 2px;

    background: linear-gradient(
        90deg,
        transparent,
        var(--extreme-red-light),
        transparent
    );

    opacity: 0.75;
}

.card:hover,
.panel:hover,
.package:hover,
.product:hover,
.server:hover,
.server-card:hover,
.stat-card:hover,
.stats-card:hover {
    transform: translateY(-4px);

    border-color:
        var(--extreme-border-red) !important;

    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.52),
        0 0 25px rgba(227, 34, 53, 0.1);
}

.card-header,
.panel-heading {
    color: #ffffff !important;

    background:
        rgba(255, 255, 255, 0.025) !important;

    border-bottom:
        1px solid var(--extreme-border) !important;

    font-weight: 800;
    text-transform: uppercase;
}

.card-footer,
.panel-footer {
    color: var(--extreme-muted) !important;

    background:
        rgba(0, 0, 0, 0.16) !important;

    border-top:
        1px solid var(--extreme-border) !important;
}


/* =========================================================
   CARD DOS SERVIDORES
   ========================================================= */

.server,
.server-card,
.servers .card {
    padding: 0 !important;

    border:
        1px solid rgba(227, 34, 53, 0.55) !important;

    border-radius: 13px !important;
}

.server img,
.server-card img,
.servers .card img,
.server .card-img-top,
.server-card .card-img-top {
    width: 100%;

    object-fit: cover;

    border-radius:
        12px 12px 0 0 !important;
}

.server .card-body,
.server-card .card-body,
.servers .card .card-body {
    padding: 18px 16px 16px !important;
}

.server-name,
.server-card h3,
.server-card h4,
.servers .card-title {
    margin-bottom: 8px !important;

    color: #ffffff !important;

    font-size: 1.35rem !important;
    font-weight: 900 !important;

    line-height: 1.2 !important;
}

.server-status,
.status-online {
    color: #9dffbd !important;
}


/* =========================================================
   BARRA DE JOGADORES ONLINE — CORRIGIDA
   ========================================================= */

.progress {
    position: relative;

    width: 100%;
    height: 18px !important;
    min-height: 18px !important;

    margin: 0 !important;

    overflow: hidden;

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

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

    border-radius: 20px !important;

    box-shadow:
        inset 0 2px 5px rgba(0, 0, 0, 0.35);
}

.progress-bar {
    position: relative;

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

    min-width: 7px;
    height: 100% !important;

    overflow: visible !important;

    color: transparent !important;

    background: linear-gradient(
        90deg,
        #b71324,
        #ff4053
    ) !important;

    border-radius: 20px !important;

    box-shadow:
        0 0 14px rgba(255, 64, 83, 0.38);

    font-size: 0 !important;
}

.progress-bar::after {
    content:
        attr(aria-valuenow)
        "/"
        attr(aria-valuemax);

    position: absolute;
    top: 50%;

    /*
       Centraliza o texto na barra completa,
       independentemente da porcentagem preenchida
    */

    left: calc(50vw - 50%);

    color: #ffffff !important;

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

    line-height: 1 !important;