.spinner-border.text-warning {
    --bs-spinner-color: var(--shop-accent);
}

.editor-icon-box {
    background: radial-gradient(circle, rgba(139, 92, 246, 0.4) 0%, rgba(139, 92, 246, 0) 70%);
    border-radius: 50%; /* Torna o brilho circular em vez de quadrado */
    padding: 20px;
}
.fixedWidth130Button {
    width: 130px !important;
}
.fixedWidth140Button {
    width: 140px !important;
}
.fixedWidth170Button {
    width: 170px !important;
}
.toolbar-left {
    display: flex;
    width: 100%;
    gap: 6px;
    flex-wrap: wrap;
}

.toolbar-left .btn-square-outline,
.toolbar-left .btn-control {
    flex: 0 1 auto;
    min-width: auto;
    height: 38px;
    padding: 0 14px !important;
    
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;

    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    white-space: nowrap;
    
    /* Configuração de Borda e Fundo */
    border-width: 1px;
    border-style: solid;
}

@media (max-width: 992px) {
    .toolbar-left {
        flex-wrap: wrap;
    }
    .toolbar-left .btn-square-outline {
        min-width: 45%; /* Em tablets, divide em 2 colunas */
    }
}
.btn-default-amber {
    background: var(--text-gray-dark) !important;
    border-color: rgba(240, 185, 11, 0.5) !important; /* Amber mais suave */
    color: rgba(240, 185, 11, 0.8) !important; /* Amber mais suave */
    transition: all 0.3s ease, opacity 0.3s ease !important; /* Adicionar transição de opacity */
}

.btn-default-amber:hover {
    background: var(--accent-hover) !important;
    border-color: rgba(240, 185, 11, 0.7) !important;
    color: var(--accent-text) !important;
}

.btn-default-amber.active {
    background: #F0B90B !important; /* Amber */
    border-color: #F0B90B !important;
    color: var(--accent-text) !important;
}

#clear-filters-drawer-btn:hover {
    border-color: var(--status-down);
    color: var(--status-down) !important;
    background-color: #ff0a0a1c;  
}

/* ========================
   BOTÕES (FIM)
   ======================== */


/* ============================================================================
   TOOLBAR BUTTONS
   ============================================================================ */
.green-outline-btn {
    color: oklch(79.2% .209 151.711) !important;
    background-color: color-mix(in oklab, oklch(79.2% .209 151.711) 5%, transparent) !important;
    border-color: color-mix(in oklab, oklch(79.2% .209 151.711) 50%, transparent) !important;
}
.green-outline-btn:hover {
    background-color: color-mix(in oklab, oklch(76.5% .177 163.223) 15%, transparent) !important;
    color: oklch(79.2% .209 151.711) !important;
}

.add-server-button {
    background: #52565c !important;
    border-radius: 8px !important;
    color: var(--accent-white);
    padding: 0 16px !important;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    outline: none !important;
    width: 100%;

    font-size: 0.72rem !important;
    font-weight: 800 !important;
    text-decoration: none;

}
/* 2. MOUSE HOVER: Efeito de Iluminação */
.add-server-button:hover {
    background: #5c636d !important;
    color: #FFFFFF !important;
    filter: brightness(1.1); /* Dá o aspecto de "luz acesa" */
}

.add-server-button:active {
    filter: brightness(0.9);
}

.btn-square-outline.active svg,
#navbar-favorites-toggle.active svg {
    filter: drop-shadow(0 0 3px rgba(0, 229, 255, 0.3));
}

/* 4. BOTÕES SHUFFLE E RESET (Sem estado ativo, apenas hover) */
#shuffle-servers-btn,
#default-sort-btn {
    background: rgba(255, 255, 255, 0.02) !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
}

/* RESET button hidden by default, shown via JS when filters are active */
#default-sort-btn {
    display: none;
}

#shuffle-servers-btn:hover {
    background: rgba(139, 92, 246, 0.08) !important;
    border-color: rgba(139, 92, 246, 0.25) !important;
    color: rgba(139, 92, 246, 0.9) !important;
}

#shuffle-servers-btn:hover i {
    color: rgba(139, 92, 246, 0.9) !important;
}

#default-sort-btn:hover {
    background: rgba(239, 68, 68, 0.08) !important;
    border-color: rgba(239, 68, 68, 0.25) !important;
    color: rgba(239, 68, 68, 0.9) !important;
}

#default-sort-btn:hover i {
    color: rgba(239, 68, 68, 0.9) !important;
}

/* 5. ESTADO DESABILITADO (MUTED) */
.btn-square-outline.muted,
.transparent-button.muted,
.btn-control.muted,
.disabled-state {
    opacity: 0.25 !important;
    cursor: not-allowed !important;
    pointer-events: none;
}

/* 6. AJUSTE DE ÍCONES SVG E FONTAWESOME */
.btn-square-outline svg,
.transparent-button svg,
.btn-control svg {
    width: 14px;
    height: 14px;
    stroke-width: 2;
    transition: all 0.15s ease;
    opacity: 0.7;
}

.btn-control i {
    font-size: 13px;
    transition: all 0.15s ease;
    opacity: 0.7;
}

.btn-square-outline:hover svg,
.btn-control:hover svg {
    transform: scale(1.05);
    opacity: 1;
}

.btn-control:hover i {
    opacity: 1;
}

/* Ícones nos botões ativos ficam mais visíveis */
.btn-control.active svg,
.btn-control.active i {
    opacity: 1;
}


/* ============================================================================
   LIVE DATA DOT (Estilo Radar)
   ============================================================================ */

.status-pulse-icon {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: middle;
    position: relative;
    /* Removemos o background-color daqui para definir nas subclasses */
}

/* --- ONLINE (Verde) --- */
.status-pulse-icon.online {
    background-color: var(--status-up, #0ECB81);
    box-shadow: 0 0 0 0 rgba(14, 203, 129, 0.7);
    animation: pulse-green-radar 2s infinite cubic-bezier(0.66, 0, 0, 1);
}

/* --- OFFLINE (Vermelho) --- */
.status-pulse-icon.offline {
    background-color: var(--status-down, #F6465D);
    box-shadow: 0 0 0 0 rgba(246, 70, 93, 0.7);
    animation: pulse-red-radar 2s infinite cubic-bezier(0.66, 0, 0, 1);
}

/* --- ANIMAÇÕES --- */
@keyframes pulse-green-radar {
    0% {
        box-shadow: 0 0 0 0 rgba(14, 203, 129, 0.7);
    }
    70% {
        box-shadow: 0 0 0 6px rgba(14, 203, 129, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(14, 203, 129, 0);
    }
}
@keyframes pulse-red-radar {
    0% {
        box-shadow: 0 0 0 0 rgba(246, 70, 93, 0.7);
    }
    70% {
        box-shadow: 0 0 0 6px rgba(246, 70, 93, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(246, 70, 93, 0);
    }
}
@keyframes pulse-yellow-radar {
    0% {
        box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.7);
    }
    70% {
        box-shadow: 0 0 0 6px rgba(245, 158, 11, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(245, 158, 11, 0);
    }
}

/* Garante que o ícone de check fique visível e alinhado */
.check-indicator {
    color: #f0b90b;
}


/* Apenas em telas grandes (lg) */
@media (min-width: 992px) {
    .menu-col-divider {
        /* Adiciona a linha fina à direita */
        border-right: 1px solid #2b3139;
        
        /* Ajuste fino: garante que o conteúdo não cole na linha.
           O Bootstrap já dá padding por causa do 'g-4', mas isso reforça visualmente */
        padding-right: calc(var(--bs-gutter-x) * 0.5 + 15px) !important; 
    }

    /* Ajusta a coluna SEGUINTE para dar espaço da linha */
    .menu-col-divider + div[class^="col-"] {
         padding-left: calc(var(--bs-gutter-x) * 0.5 + 15px) !important;
    }
}

/* Limita a altura da lista e customiza a barra de rolagem */
#location-list-options {
    max-height: 60vh; /* Ocupa no máximo 60% da altura da tela */
    overflow-y: auto; /* Habilita rolagem */
    padding-right: 5px; /* Espaço para não colar na barra */
}

/* Cores Muted (Itens anteriores) */
.icon-muted {
    color: #64748B; /* Cinza slate */
    font-size: 0.9rem;
}

.label-muted {
    color: #94A3B8;
}

/* Separador elegante */
.separator {
    color: #475569; /* Cinza escuro para o separador */
    font-size: 0.65rem;
    margin: 0 8px;
}

/* Item Ativo (Destaque Ciano da Screenshot 56) */
.icon-active, .label-active {
    color: #00E5FF !important; /* Azul Cyan da marca */
    gap: 6px;
    display: flex;
    align-items: center;
    font-weight: 700;
}
.icon-muted, .label-muted {
    color: #94A3B8; /* Slate gray para profundidade */
}
.black-bg {
    background: #0b0e11ad;
}

.hightech-input {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    background: var(--text-gray-dark) !important; /* var(--bg-body) */
    border: 1px solid var(--border-color) !important;
    padding: 5px 0px 0px 8px;
    transition: all 0.2s ease;
    /* Sombra interna para parecer que está "afundado" no painel */
    box-shadow: inset 0 3px 6px rgba(0,0,0,0.8) !important;    
    border-radius: 0px !important; /* Um pouco mais quadrado = mais tech */
    overflow: hidden; /* Garante que o input não vase as bordas */
}

/* Estilo para o label dentro do flex container */
.hightech-input .auth-label {
    color: var(--text-secondary);
    white-space: nowrap;
    padding-right: 12px;
    font-weight: 500;
    font-size: 0.9rem;
    margin-bottom: 0; /* Reset bootstrap label margin */
}

.hightech-input:focus-within {
    border-color: var(--accent-primary) !important; /* #FCD535 */
    /*box-shadow: 0 0 0 1px var(--accent-primary) !important;*/
    background: rgba(252, 213, 53, 0.05);
    box-shadow: 
        inset 0 0 8px rgba(252, 213, 53, 0.2), 
        0 0 10px rgba(252, 213, 53, 0.5),
        0 0 20px rgba(252, 213, 53, 0.2);
}
.hightech-input:focus-within {
    color: var(--accent-primary) !important; /* Emerald */
}
.hightech-input:focus-within svg {
    stroke: var(--accent-primary) !important;
}
.hightech-input:focus {
    border-color: var(--accent-color) !important;
}

.input-wrapper-ticket input:-webkit-autofill, .input-wrapper-ticket input:-webkit-autofill:hover, .input-wrapper-ticket input:-webkit-autofill:focus, .input-wrapper-ticket input:-webkit-autofill:active, .input-wrapper-ticket textarea:-webkit-autofill, .input-wrapper-ticket textarea:-webkit-autofill:hover, .input-wrapper-ticket textarea:-webkit-autofill:focus, .input-wrapper-ticket select:-webkit-autofill, .input-wrapper-ticket select:-webkit-autofill:hover, .input-wrapper-ticket select:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 30px var(--bg-body) inset !important;
}
/* Ajuste para alinhar lista e chat horizontalmente */
.ticket-layout-wrapper {
    display: flex;
    height: 500px; /* Altura fixa para permitir scroll interno */
    background: rgba(0,0,0,0.2);
    border-radius: 8px;
    overflow: hidden;
}

.ticket-list-col {
    width: 350px; /* Largura fixa para a lista lateral */
    border-right: 1px solid rgba(255,255,255,0.1);
    display: flex;
    flex-direction: column;
    background: rgba(255,255,255,0.02);
}

.ticket-chat-col {
    flex: 1; /* O chat ocupa todo o resto do espaço */
    display: flex;
    flex-direction: column;
    background: transparent;
}

/* Garante que a lista tenha scroll se crescer muito */
.ticket-list-scroll {
    flex: 1;
    overflow-y: auto;
}
/* Estilo para o ticket selecionado na lista lateral */
.ticket-list-scroll .list-group-item.active {
    background-color: rgba(252, 213, 53, 0.1) !important; /* Amarelo bem suave */
    border-left: 3px solid #FCD535 !important; /* Barra lateral amarela */
    color: #fff !important;
    border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}

/* Ajuste das cores de texto quando ativo para não ficarem cinzas */
.ticket-list-scroll .list-group-item.active h6,
.ticket-list-scroll .list-group-item.active small {
    color: #fff !important;
}

/* Hover simples para os tickets não selecionados */
.ticket-list-scroll .list-group-item:hover:not(.active) {
    background-color: rgba(255, 255, 255, 0.05) !important;
}
#chatMessages {
    padding: 20px;
    background-image: url('https://www.transparenttextures.com/patterns/carbon-fibre.png'); /* Opcional: textura leve */
}

.bg-primary {
    background-color: #005c4b !important; /* Estilo WhatsApp Dark */
    border-radius: 15px 15px 0 15px !important;
    margin-left: 20%;
}
 
.ticket-trigger.active {
    background-color: rgba(252, 213, 53, 0.1) !important;
    border-left: 3px solid #FCD535 !important;
}


/* Botão de limpar texto (X) */
.clear-text-btn {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    z-index: 20;
    transition: color 0.2s;
}

.clear-text-btn:hover {
    color: var(--accent-white);
}

@keyframes slideInRight {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

/*controls start*/

/* --- CUSTOM DROPDOWNS (Melhorado) --- */
.custom-dropdown-wrapper {
    position: relative;
}

.custom-dropdown-trigger {
    width: 100%;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0;
    color: #D1D5DB;
    font-weight: 600;
    padding: 8px 12px;
    font-size: 0.75rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    text-align: left;
    transition: all 0.15s ease;
}

.custom-dropdown-trigger:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.15);
}

.custom-dropdown-trigger.active {
    border-color: #00E5FF;
    background: rgba(0, 229, 255, 0.05);
}

.custom-dropdown-trigger svg {
    transition: transform 0.2s ease;
    flex-shrink: 0;
    opacity: 0.7;
}

.custom-dropdown-trigger.active svg {
    transform: rotate(180deg);
    opacity: 1;
}

.custom-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    max-height: 250px;
    overflow-y: auto;
    background: #2B2D31;
    border: 1px solid rgba(0, 229, 255, 0.3);
    border-top: none;
    z-index: 1000;
    display: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.custom-dropdown-menu.show { 
    display: block;
    animation: slideDown 0.15s ease;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.custom-option {
    padding: 10px 12px;
    font-size: 0.75rem;
    color: #9CA3AF;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.1s ease;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

.custom-option:last-child {
    border-bottom: none;
}

.custom-option:hover {
    background: rgba(0, 229, 255, 0.08);
    color: #00E5FF;
}

.custom-option.selected {
    background: rgba(0, 229, 255, 0.12);
    color: #00E5FF;
    font-weight: 600;
}

/*controls end*/


.restricted-access-card {
    border: 1px solid rgba(252, 213, 53, 0.3);
    border-radius: var(--radius-big, 20px);
    padding: 40px 30px;
    text-align: center;
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

/* Efeito de brilho no topo */
.restricted-access-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, #FCD535, transparent);
    opacity: 0.8;
}

/* Container do Ícone Neon */
.neon-lock-wrapper {
    display: flex;
    justify-content: center;
    margin-bottom: 25px;
}

.neon-lock-svg {
    width: 64px;
    height: 64px;
    fill: none;
    stroke: #FCD535; /* Cor Neon Principal */
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 10px rgba(252, 213, 53, 0.6)); /* O Brilho Neon */
    animation: pulse-neon 3s infinite alternate;
}

@keyframes pulse-neon {
    from { filter: drop-shadow(0 0 5px rgba(252, 213, 53, 0.4)); }
    to { filter: drop-shadow(0 0 15px rgba(252, 213, 53, 0.8)); }
}

.restricted-title {
    color: #fff;
    font-weight: 700;
    font-size: 1.5rem;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Layout da Frase + Botão */
.action-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap; /* Garante responsividade em telas muito pequenas */
}

.restricted-text {
    color: #b7bdc6;
    font-size: 1rem;
    margin: 0;
}

/* 2. Container do Ícone Neon */
.menu-icon-wrapper {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
    margin-right: 16px;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

/* 3. O Ícone SVG em si */
.neon-svg {
    width: 22px;
    height: 22px;
    transition: all 0.3s ease;
    filter: drop-shadow(0 0 2px rgba(255,255,255,0.1));
}

/* 4. Efeito Hover no Item do Menu */
.menu-grid-item {
    padding: 12px 16px;
    border-radius: 12px;
    transition: all 0.2s ease;
    border: 1px solid transparent;
}

.menu-grid-item:hover {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.08);
    transform: translateX(4px);
}

/* Quando passa o mouse no item, o ícone brilha */
.menu-grid-item:hover .menu-icon-wrapper {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 15px rgba(0,0,0,0.2);
}

.menu-grid-item:hover .neon-svg {
    transform: scale(1.1);
    filter: drop-shadow(0 0 6px currentColor); /* O ícone brilha na própria cor */
}


/* Botão de Fechar (X) - Ajuste para ficar discreto */
.btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
    opacity: 0.5;
    position: absolute;
    right: 20px;
    top: 20px;
    z-index: 10;
}
.btn-close:hover { opacity: 1; }


.form-select {
    width: auto; /* Remove largura fixa de 50px para se adaptar ao conteúdo */
    min-width: 60px; /* Garante um tamanho mínimo */
    color: var(--text-primary);
    background-color: var(--bg-card-secondary); /* Adicionado fallback de cor */
    
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23c5c6ca' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
    
    color-scheme: var(--input-bg); /* Força o navegador a desenhar o menu dropdown (lista) em modo escuro */
    background-position: right 8px center !important;
    
    background-repeat: no-repeat !important;
    background-size: 12px 12px !important; /* Ajuste leve no tamanho */
    
    /* Ajuste de padding: Espaço na direita para a seta não cobrir o texto */
    padding: 4px 30px 4px 10px !important; 
    
    font-size: 0.85rem !important;
    line-height: 1.5 !important; /* Aumentado um pouco para centralizar melhor */
    border: 1px solid var(--input-border) !important;
    border-radius: var(--radius-std) !important;
    
    /* Remove estilo padrão do navegador */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.form-select:focus {
    border-color: var(--input-border) !important;
    outline: none;
    box-shadow: none !important;
    background-color: var(--input-bg) !important;
}

.form-select:hover {
    border-color: var(--input-border);
}

.select-archives {
    background: var(--bg-card-secondary);
    border: 1px solid var(--border-color);
    height: 42px;
    border-radius: var(--radius-std);
}

/* 2. Ícone de Calendário/Relógio (Inputs de Data) */
/* Aplica-se a date, datetime-local, time, month, week */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    
    /* A mágica acontece aqui: O filtro inverte o ícone preto padrão 
       e ajusta a cor para chegar no Amarelo Dourado (#FCD535)
    */
    filter: invert(80%) sepia(45%) saturate(700%) hue-rotate(355deg) brightness(105%) contrast(105%);
    
    /* Aumenta um pouco para ficar mais fácil de clicar */
    width: 20px;
    height: 20px;
    opacity: 0.8;
    transition: opacity 0.2s, transform 0.2s;
}

/* Efeito Hover no ícone do calendário */
input[type="date"]::-webkit-calendar-picker-indicator:hover,
input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover,
input[type="time"]::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
    transform: scale(1.1);
}


/* Garante que o corpo do modal não crie uma segunda barra de rolagem */
#clientsModal .modal-body {
    overflow: hidden; 
    padding-bottom: 0 !important; /* Remove padding inferior para colar no footer */
}

/* Header Estilizado */
.border-bottom-subtle {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.header-icon-container {
    width: 38px;
    height: 38px;
    background: rgba(247, 78, 97, 0.1); /* Fundo vermelho sutil */
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #f74e61;
    font-size: 1.2rem;
}

.card-title {
    font-size: 1rem;
    font-weight: 600;
    color: #FFFFFF;
    letter-spacing: 0.3px;
}

/* Texto e Código */
.description-text {
    line-height: 1.6;
    color: var(--text-primary);
}

.code-highlight {
    background: rgba(247, 78, 97, 0.15);
    color: #f74e61;
    padding: 2px 6px;
    border-radius: 4px;
    font-family: 'Fira Code', monospace;
    font-weight: 600;
}

/* Inputs Otimizados */
.claim-input {
    background-color: #1A1D21 !important;
    border: 1.5px solid #3F444E !important;
    color: #FFFFFF !important;
    border-radius: 8px !important;
    padding: 0.6rem !important;
    font-size: 14px !important;
    transition: border-color 0.2s ease;
}

.claim-input:focus {
    border-color: #f74e61 !important;
    box-shadow: none !important;
}

/* Correção do Input de Remover Servidor */
.claim-input {
    background-color: #1e2227 !important;
    border: 1.5px solid #3f444e !important;
    height: 38px;
    padding-left: 10px !important;
    border-radius: var(--radius-std);
}
.claim-input:focus {
    background-color: #1e2227 !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important; /* Ou use var(--accent-color) se quiser brilho */
    box-shadow: none !important; /* Remove o brilho azul/cinza padrão */
}

/* Opcional: Efeito hover sutil para saber que está ativo */
.claim-input:hover {
    border-color: rgba(255, 255, 255, 0.3) !important;
}
.modal-compact .modal-body {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
}

.modal-compact .modal-status-icon {
    width: 48px !important;  /* Reduzido de 72px */
    height: 48px !important;
    margin-bottom: 10px !important;
}

.modal-compact .modal-status-icon i, 
.modal-compact .modal-status-icon svg {
    font-size: 1.5rem !important; /* Ícone menor */
}

.modal-compact .modal-hero-text {
    font-size: 1.2rem !important; /* Título menor */
    margin-bottom: 2px !important;
}

.modal-compact {
    font-size: 0.8rem !important;
    margin-bottom: 16px !important;
}

/* Força inputs menores no modo compacto */
.modal-compact .form-control, 
.modal-compact .form-select {
    padding: 0.35rem 0.6rem !important;
    font-size: 0.85rem !important;
}

.modal-compact .form-label {
    font-size: 0.75rem !important;
    margin-bottom: 2px !important;
}
.clients-list-container {
    max-height: 40vh; /* Reduzi para 40% da tela */
    overflow-y: auto;
    padding-right: 4px;
    margin-top: 10px;
}

/* Item da lista mais fino */
.client-item-row {
    background-color: #2B3139;
    border: 1px solid transparent;
    color: #EAECEF;
    transition: all 0.2s ease;
    margin-bottom: 6px; /* Menos margem entre itens */
    padding: 8px 12px !important; /* Padding reduzido drasticamente */
}

.client-item-row:hover {
    background-color: #363c45;
    border-color: #FCD535;
    transform: translateX(2px);
}
/* ============================================================================
   MODAL STANDARDIZATION  - END
   ============================================================================ */

.btn-primary, button.action {
    background-color: var(--accent-primary) !important;
    color: #181a20 !important; /* Texto preto no amarelo */
    font-weight: 600;
    border-radius: 4px;
}
.server-list-row {
    border-bottom: 1px solid #2b3139 !important;
}
.server-list-row:hover {
    background-color: #2b3139 !important; /* Highlight sutil */
}
/* --- SERVER LOGO / BANNER STYLES --- */
.server-logo-container {
    width: 100%;
    height: 120px; /* Altura fixa para manter o layout estável */
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--sd-border);
    border-radius: var(--radius-std);
    margin-bottom: 20px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.server-logo-container:hover {
    border-color: var(--accent-color);
    box-shadow: 0 0 15px rgba(252, 213, 53, 0.1);
}

.server-logo-media {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    z-index: 2;
    filter: drop-shadow(0 0 5px rgba(0,0,0,0.5));
}
 
/* Modal Preview Style */
.logo-upload-preview {
    width: 100%;
    height: 100px;
    border: 2px dashed var(--border-color);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    overflow: hidden;
    background: rgba(0,0,0,0.2);
    cursor: pointer;
    transition: all 0.2s;
}
.logo-upload-preview:hover {
    border-color: var(--accent-color);
    background: rgba(255,255,255,0.02);
}
.logo-upload-preview img, 
.logo-upload-preview video {
    max-height: 100%;
    max-width: 100%;
}

.server-logo-media {
    max-width: 100%;
    max-height: 140px; /* Limite visual */
    width: auto;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.3));
    transition: transform 0.3s ease;
}

.server-logo-media:hover {
    transform: scale(1.02);
}

/* Garantir que table e elementos relacionados tenham background escuro */
/* 1. Aplica o fundo base APENAS na tabela e linhas normais (não destacadas) */
table,
tbody,
thead,
tr:not(.highlighted) {
    
}

/* 2. CRUCIAL: As células devem ser transparentes para mostrar o fundo da linha (inclusive o destaque) */
td, th {
    background-color: transparent !important;
}
/* Remover limitações de largura em filtros e search */
.filtersClass {
    display: flex;
    margin-top: 15px;
    width: 100%;
    max-width: 100%;
    justify-content: space-between;
}
.search-wrapper {
    width: 100%;
    max-width: 100%;
}

/* Stats Harmonizados em Grid 4 Colunas */
.stats-section-integrated {
    margin: 0;
    position: relative;
    z-index: 2;
    flex-shrink: 0;
    margin-top: auto;
}

.stats-top-row-integrated {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 6px !important;
}

/* Ícones Binance Style - Emerald */
.stat-icon-wrapper-modern {
    width: 20px !important;
    height: 20px !important;
    margin: 0;
    position: relative;
    order: -1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.stat-icon-modern {
    font-size: 14px !important;
    transition: all 0.2s ease;
    color: var(--accent-color) !important;
}

.stat-item-integrated:hover .stat-icon-modern {
    transform: scale(1.15);
    color: var(--accent-color) !important;
    filter: drop-shadow(0 0 6px rgba(252, 213, 53, 0.6));
}

/* Cores dos Ícones - Todos Amarelo Binance */
.stat-icon-servers .stat-icon-modern,
.stat-icon-players .stat-icon-modern,
.stat-icon-uptime .stat-icon-modern,
.stat-icon-countries .stat-icon-modern {
    color: var(--accent-color) !important;
}

/* Valores Harmonizados */
.stat-content-integrated {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    position: relative;
    z-index: 1;
    flex: 1;
    justify-content: center;
}

/* Indicador de Mudança - Setas de Subida e Descida */

/* Cores específicas para cada ícone - Estilo Binance */
.stat-icon-servers {
    color: var(--accent-primary) !important; /* #FCD535 - Amarelo */
}
.stat-icon-servers svg {
    stroke: var(--accent-primary) !important;
}
.stat-icon-players {
    color: var(--status-up) !important; /* #0ECB81 - Verde */
}
.stat-icon-players svg {
    stroke: var(--status-up) !important;
}
.stat-icon-uptime {
    color: #3B82F6 !important; /* Azul - para uptime */
}
.stat-icon-uptime svg {
    stroke: #3B82F6 !important;
}
.stat-icon-countries {
    color: #F6465D !important; /* Vermelho Binance - para países */
}
.stat-icon-countries svg {
    stroke: #F6465D !important;
}

/* Estilos para os ícones de estatísticas */
.stat-card-micro {
    position: relative;
    min-height: 50px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 10px 15px;
    min-width: 120px;
    box-sizing: border-box;
}
.widget-card-header {
    margin-bottom: 20px;
    border-radius: var(--radius-std);
}

.stat-icon {
    margin: 0px;
    padding: 0px;
    width: 30px;
    height: 30px;
    position: relative;
    top: 27px;
    right: 7px;
    /* display: flex; */
    justify-content: center;
    background: rgba(252, 213, 53, 0.1);
    border-radius: 50%;
    flex-shrink: 0;
}

.stat-icon svg {
    width: 18px;
    height: 18px;
}

/* Ajustes para os cards de estatísticas */
.stat-card-micro {
    position: relative;
    padding-left: 30px;
}

.stat-card-micro::before {
    content: '';
    position: absolute;
    left: 6;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.stat-card-micro:nth-child(1)::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23FCD535'%3E%3Cpath d='M4 1h16a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1zm0 8h16a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-4a1 1 0 0 1 1-1zm0 8h16a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-4a1 1 0 0 1 1-1z'/%3E%3C/svg%3E");
}

.stat-card-micro:nth-child(2)::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23FCD535'%3E%3Cpath d='M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm0 18c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8zm1-14h-2v8h2V6zm0 10h-2v2h2v-2z'/%3E%3C/svg%3E");
}

.stat-card-micro:nth-child(3)::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23FCD535'%3E%3Cpath d='M12 2C6.486 2 2 6.486 2 12s4.486 10 10 10 10-4.486 10-10S17.514 2 12 2zm0 18c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8z'/%3E%3Cpath d='M13 7h-2v6h6v-2h-4z'/%3E%3C/svg%3E");
}

.stat-card-micro:nth-child(4)::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23FCD535'%3E%3Cpath d='M12 2C6.486 2 2 6.486 2 12s4.486 10 10 10 10-4.486 10-10S17.514 2 12 2zm0 18c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8z'/%3E%3Cpath d='M12 6c-3.309 0-6 2.691-6 6s2.691 6 6 6 6-2.691 6-6-2.691-6-6-6zm0 10c-2.206 0-4-1.794-4-4s1.794-4 4-4 4 1.794 4 4-1.794 4-4 4z'/%3E%3Cpath d='M12 10c-1.103 0-2 .897-2 2s.897 2 2 2 2-.897 2-2-.897-2-2-2z'/%3E%3C/svg%3E");
}

/* Ajustes para os cards de estatísticas */
.banner-stats-section {
    display: flex;
    gap: 15px;
    align-items: center;
    flex-wrap: wrap;
}

.stat-card-micro {
    background: rgba(30, 35, 41, 0.7);
    border: 1px solid rgba(252, 213, 53, 0.2);
    border-radius: var(--radius-std); /* 8px */
    padding: 10px 15px;
    min-width: 120px;
    position: relative;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 10px;
}

.stat-card-micro:hover {
    background: rgba(30, 35, 41, 0.9);
    border-color: var(--accent-color);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.stat-change-indicator-integrated.positive {
    color: #0ecb81;
    background: rgba(14, 203, 129, 0.15);
}

.stat-change-indicator-integrated.negative {
    color: #f6465d;
    background: rgba(246, 70, 93, 0.15);
}


@keyframes fadeInScale {
    0% {
        opacity: 0;
        transform: scale(0.5);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Seta de Subida - Verde Binance (Trading) */
.stat-change-indicator-integrated.change-up,
.stat-change-indicator-integrated[data-change="up"] {
    color: var(--status-up) !important;
}

.stat-change-indicator-integrated.change-up i,
.stat-change-indicator-integrated[data-change="up"] i {
    color: var(--status-up) !important;
    filter: drop-shadow(0 0 4px rgba(14, 203, 129, 0.5));
}

/* Seta de Descida - Vermelho Binance (Trading) */
.stat-change-indicator-integrated.change-down,
.stat-change-indicator-integrated[data-change="down"] {
    color: var(--status-down) !important;
}

.stat-change-indicator-integrated.change-down i,
.stat-change-indicator-integrated[data-change="down"] i {
    color: var(--status-down) !important;
    filter: drop-shadow(0 0 4px rgba(246, 70, 93, 0.4));
}

/* Esconder quando não há mudança */
.stat-change-indicator-integrated.change-none,
.stat-change-indicator-integrated[data-change="0"] {
    display: none;
}

.stat-label-integrated {
    font-size: 0.6rem;
    color: var(--text-secondary) !important;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    font-weight: 600 !important;
    transition: color 0.2s;
    white-space: nowrap;
    line-height: 1.3;
}

.stat-item-integrated:hover .stat-label-integrated {
    color: var(--accent-color) !important;
}

/* Divider Compacto */
.promotional-divider {
    display: none;
}
.server-website {
    display: inline-block;
    font-size: 0.75rem;
    line-height: 1.2;
    color: var(--text-secondary);
    text-align: left; /* Alinhar à esquerda */
    flex: 1 1 auto; /* Permitir expansão */
    min-width: 0; /* Permitir shrink se necessário */
    max-width: none; /* Remover limite máximo */
    width: max-content;
}
.server-website a {
    color: var(--text-secondary);
    text-decoration: none;
    transition: color 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: flex-start; /* Alinhar à esquerda */
    gap: 8px;
    width: 100%;
    text-align: left; /* Alinhar à esquerda */
}
.server-website a:hover { 
    color: var(--accent-color);
}
.server-name a:hover { 
    color: var(--accent-color);
}
.server-website-text {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left; /* Alinhar à esquerda */
    color: var(--bs-gray-400);
}
.server-website-text:hover {
    color: var(--accent-color);
}

/* Galaxy NÃO deve ser escondida pela classe simple-tooltip-container */
#mini-galaxy-container.simple-tooltip-container {
    display: flex !important;
}

.border-solid {
    border: 1px solid var(--color-Line) !important;
}


/* COLUNA DIREITA - Área de Propagandas Compacta */
.top-panel-item[data-panel="advertising"],
.top-panel-item[data-panel="featured2"] {
    background: var(--bg-darker);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-std);
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    flex: 1;
}

/* Placeholder para propagandas - Binance Style */
.top-panel-item[data-panel="advertising"]::before,
.top-panel-item[data-panel="featured2"]::before {
    content: 'AD SPACE\AAVAILABLE';
    white-space: pre;
    text-align: center;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--text-muted);
    letter-spacing: 2px;
    line-height: 1.6;
}

.box-panel,
.banner-panel {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.panel-header {
    padding: 12px 16px;
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border-color);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.panel-content {
    flex: 1;
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Section Header - Browse Text */
.section-header {
    text-align: left;
    margin-bottom: 24px;
    position: relative;
    z-index: 2;
    background: transparent !important;
    margin-bottom: 15px;
    margin-top: 15px;
}


.section-subtitle {
    font-size: 0.9rem;
    color: var(--text-secondary) !important;
    font-weight: 400;
    background: transparent !important;
}

#active-servers-count {
    color: var(--accent-color);
    font-weight: 700;
}

/* Responsive */

/* Telas Ultra-Largas - Aproveitar ao máximo o espaço */
@media (min-width: 1920px) {
    .container-fluid[style*="min-height"] {
        padding-left: 24px !important;
        padding-right: 24px !important;
    }
    
    aside.col-xl-2,
    aside.col-lg-2 {
        max-width: 340px !important;
        min-width: 320px !important;
    }
    
    main.col-xl-10,
    main.col-lg-10 {
        padding-left: 24px !important;
    }
}

@media (min-width: 1600px) and (max-width: 1919px) {
    .container-fluid[style*="min-height"] {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
    
    aside.col-xl-2,
    aside.col-lg-2 {
        max-width: 320px !important;
        min-width: 300px !important;
    }
}

/* Tablets em landscape - otimizar espaço */
@media (min-width: 1024px) and (max-width: 1399px) {
    .container-fluid[style*="min-height"] {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    
    aside.col-xl-2,
    aside.col-lg-2 {
        max-width: 280px !important;
        min-width: 260px !important;
    }
    
    main.col-xl-10,
    main.col-lg-10 {
        padding-left: 12px !important;
    }
}

@media (max-width: 1400px) {
    .banners-row {
        grid-template-columns: 320px 1fr;
    }
    
    .top-panel-item.promotional-panel {
        max-width: 100% !important;
        width: 100% !important;
    }
    
    .promotional-text-wrapper {
        display: block;
    }
    
    /* Sidebar ajusta para telas médias */
    aside.col-xl-2,
    aside.col-lg-2 {
        max-width: 260px !important;
        min-width: 240px !important;
        flex-shrink: 0; /* Garante que o menu não encolha demais */
    }

    main.col-xl-10,
    main.col-lg-10 {
        min-width: 0; /* Permite que o main encolha abaixo do conteúdo mínimo */
    }
}

@media (max-width: 1200px) {
    .banners-row {
        grid-template-columns: 1fr;
        max-height: 55px;
    }
    
    .banners-row > *:not(#mini-galaxy-container) {
        height: 55px;
        max-height: 55px;
    }
    
    .top-panel-item.promotional-panel {
        max-width: 100% !important;
        width: 100% !important;
        height: 55px;
        max-height: 55px;
        min-height: 55px;
        padding: 6px 10px;
    }
    
    .promotional-text-wrapper {
        display: block;
    }
    
    .promotional-title .title-text {
        font-size: 1rem;
    }
    
    .promotional-subtitle {
        font-size: 0.75rem !important;
    }
    
    .stats-top-row-integrated {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 8px !important;
    }
    
    .stat-item-integrated {
        padding: 8px 6px !important;
    }
    
    .stat-icon-wrapper-modern {
        width: 24px !important;
        height: 24px !important;
    }
    
    .stat-icon-modern {
        font-size: 16px !important;
    }
    
    .stat-value-integrated {
        font-size: 1.1rem !important;
    }
}

@media (max-width: 992px) {
    .stats-top-row-integrated {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    /* Sidebar fica menor em tablets */
    aside.col-xl-2,
    aside.col-lg-2 {
        max-width: 240px !important;
        min-width: 240px !important;
    }
    
    /* Main usa mais espaço */
    main.col-xl-10,
    main.col-lg-10 {
        padding-left: 12px !important;
    }
}

@media (max-width: 768px) {
    .promotional-title .title-text {
        font-size: 0.65rem;
    }
    
    .promotional-subtitle {
        font-size: 0.6rem !important;
    }
    
    .stat-value-integrated {
        font-size: 0.75rem !important;
    }
    
    .stat-label-integrated {
        font-size: 0.4rem !important;
    }
    
    .stat-icon-wrapper-modern {
        width: 14px !important;
        height: 14px !important;
    }
    
    .stat-icon-modern {
        font-size: 10px !important;
    }
    
    .stat-item-integrated {
        padding: 3px 2px !important;
    }
    
    /* Sidebar some em mobile ou fica em modo collapse */
    aside.col-xl-2,
    aside.col-lg-2 {
        position: fixed;
        left: -100%;
        top: 0;
        height: 100vh;
        z-index: 9999;
        transition: left 0.3s ease;
        max-width: 280px !important;
        min-width: 280px !important;
        width: 280px !important;
        background: var(--accent-text);
        box-shadow: 2px 0 20px rgba(0, 0, 0, 0.5);
        overflow-y: auto;
        padding: 20px;
    }
    
    aside.col-xl-2.show-mobile,
    aside.col-lg-2.show-mobile {
        left: 0;
    }
    
    /* Main usa toda largura em mobile */
    main.col-xl-10,
    main.col-lg-10 {
        max-width: 100% !important;
        width: 100% !important;
        flex: 1 1 100% !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
    
    /* Container ajusta padding em mobile */
    .container-fluid[style*="min-height"] {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
    
    /* Toolbar vira coluna em mobile */
    .toolbar-layout {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    
    .toolbar-left,
    .toolbar-right {
        justify-content: center;
        width: 100%;
    }
    
    .toolbar-center {
        order: -1; /* Search vai pro topo */
    }
    
    .search-container {
        max-width: 100% !important;
    }
}

/* Telas muito pequenas */
@media (max-width: 480px) {
    .container-fluid[style*="min-height"] {
        padding-left: 4px !important;
        padding-right: 4px !important;
    }
    
    main.col-xl-10,
    main.col-lg-10 {
        padding-left: 4px !important;
        padding-right: 4px !important;
    }
    
    .toolbar-panel {
        padding: 10px !important;
    }
    
    /* Botões da toolbar menores */
    .toolbar-left button,
    .toolbar-right button {
        font-size: 0.8rem;
        padding: 6px 10px !important;
    }
    
    .top-panel-item.promotional-panel {
        padding: 8px;
        min-height: 100px;
    }
}

.table-responsive.server-table-container,
.table-responsive {
    /*border: 1px solid var(--border-color) !important;*/
    border-radius: 0px !important;
    margin-top: 0;
    position: relative !important;
    z-index: 2;
    overflow-x: visible; /* Permite animação radar aparecer nas bordas */
    overflow-y: visible !important; /* Importante: permite SVG ultrapassar verticalmente */
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
}
.no-shadow {
    box-shadow: unset !important;
}

/* Garantir overflow horizontal em telas pequenas */
@media (max-width: 1200px) {
    .table-responsive {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }
}


.filter-toggle-row {
    background: var(--bg-card-secondary) !important;
    border-bottom: 1px solid var(--border-color) !important;
}

.filter-toggle-row td {
    padding: 12px 14px !important;
}

.filter-toggle-left,
.filter-toggle-right {
    gap: 10px !important;
}

.toolbar-right {
    flex-shrink: 0;
    margin-left: auto;
}

/* Estilos consistentes para botões na toolbar */
.server-toolbar .modern-menu-toggle,
.server-toolbar {
    display: inline-flex;
    justify-content: center;

    font-size: 0.75rem !important;
    font-weight: 500 !important;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    border-radius: var(--radius-std) !important;
    width: 32%;
}

/* Estilo para botões ativos */
.server-toolbar .modern-menu-toggle.active,
.server-toolbar .modern-menu-toggle:active,
.server-toolbar .modern-menu-toggle.active i {
    color: var(--bs-navbar-active-color) !important;
    background: var(--accent-primary) !important;

    border-color: var(--accent-color) !important;
    box-shadow: 0 0 0 1px var(--accent-color);
}

.input-group:hover {
    background-color: var(--bg-card-secondary) !important;
    /*border: 1px solid var(--accent-color) !important;*/
}

/* Efeito hover para os botões */
.server-toolbar .modern-menu-toggle:hover {
    background: var(--bg-tertiary) !important;
    color: var(--accent-white) !important;
}

/* Estilo específico para o botão de favoritos */
#favorites-only i {
    color: var(--text-danger) !important;
}

#favorites-only.active i {
    color: var(--accent-color) !important;
}

/* ===== HERO SECTION ===== */
.hero-section {
    text-align: center;
    padding: 80px 20px 60px;
    position: relative;
    overflow: hidden;
    min-height: 500px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.hero-title {
    font-size: 3.5rem;
    font-weight: 800;
    color: var(--accent-white);
    margin-bottom: 20px;
    letter-spacing: -0.02em;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    position: relative;
    z-index: 2;
}

.hero-subtitle {
    font-size: 1.3rem;
    color: var(--text-secondary);
    margin-bottom: 50px;
    position: relative;
    z-index: 2;
}

.stat-label {
    font-size: 0.6rem;
    color: var(--text-muted) !important;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Browse Text */
.browse-text {
    font-size: 1.15rem;
    color: var(--text-secondary);
    margin-bottom: 0;
    position: relative;
    z-index: 2;
}

/* ===== FILTERS SECTION ===== */
.filters-section {
    background: var(--bg-card-secondary);
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    padding: 24px 0;
    position: sticky;
    top: var(--navbar-height);
    z-index: 100;
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.filters-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}

.filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 24px;
    background: var(--bg-tertiary);
    border: 2px solid var(--border-color-light);
    border-radius: var(--radius-std);
    color: var(--accent-white);
    font-size: 0.95rem;
    font-weight: 600;
    transition: all var(--transition-fast);
    position: relative;
    min-width: 140px;
    justify-content: center;
}

.filter-btn:hover {
    background: var(--bg-card);
    border-color: var(--accent-color);
    color: var(--accent-color);
}

.filter-btn.active {
    background: var(--accent-color);
    border-color: var(--accent-color);
    color: var(--accent-text);
}

.filter-btn i {
    font-size: 1.1rem;
}

.filter-btn span {
    display: none;
}

/* Premium Button - Binance Yellow */
.filter-btn.premium {
    border-color: rgba(252, 213, 53, 0.4);
    color: var(--accent-color);
}

.filter-btn.premium:hover {
    background: rgba(252, 213, 53, 0.15);
    border-color: var(--accent-color);
}

.filter-btn.premium.active {
    background: var(--accent-color);
    border-color: var(--accent-color);
    color: var(--accent-text);
}

/* Group Button - Binance Yellow */
.filter-btn.group {
    border-color: rgba(252, 213, 53, 0.4);
    color: var(--accent-color);
}

.filter-btn.group:hover {
    background: rgba(252, 213, 53, 0.15);
    border-color: var(--accent-color);
}

.filter-btn.group.active {
    background: var(--accent-color);
    border-color: var(--accent-color);
    color: var(--accent-text);
}

.server-row-actions {
    display: flex;
    flex-direction: row-reverse;
}

/* Fallback para PNG (caso ainda exista) */
.server-flag {
    width: 24px; /* Aumentado */
    height: 18px; /* Aumentado */
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--radius-std);
}

.server-info {
    flex: 1;
    min-width: 0;
}

.server-name {
    font-weight: 700 !important; /* Aumentado para mais nitidez */
    color: #FFFFFF !important; /* Branco Absoluto para nitidez */
    font-size: 0.75rem !important; /* Compacto */
    margin-bottom: 0;
    display: inline-flex;
    align-items: center;
    flex: 1;
    min-width: 0;
    gap: 0px; /* Reduzido de 6px para 4px */
    justify-content: flex-start !important;
    position: relative; /* Necessário para posicionamento absoluto do filho */
}

.server-name a {
    color: #FFFFFF !important; /* Branco Absoluto para nome do servidor */
    text-decoration: none;
    font-weight: 700 !important; /* Mais pesado para nitidez */
}

.server-name a:hover {
    color: var(--accent-primary) !important; /* Amarelo no hover */
    text-shadow: none;
}
.server-name-wrapper {
    display: flex;
    align-items: center;
    gap: 0 !important; /* Importante: Gap zero para não deixar buraco quando o ícone estiver fechado */
    width: 100%;
}

/* 2. Configura o botão do ícone para OCUPAR ESPAÇO sempre */
.server-link-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    
    /* Começa invisível e sem ocupar espaço */
    width: 0px;
    opacity: 0;
    margin: 0;
    padding: 0;
    overflow: hidden; /* Importante para não mostrar pedaço do ícone */
    
    color: var(--text-muted) !important;
    border-radius: 50%;
    /* Altura fixa igual ao tamanho do ícone desejado */
    height: 19px; 
    
    font-size: 0.6rem;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    
    /* Remove bordas e background padrão */
    background: transparent;
    border: none;
    z-index: 10;
    flex-shrink: 0;

    cursor: pointer;
}

.server-site {
    margin: 0 !important;
    transition: transform 0.3s ease;
    font-size: 0.75rem !important;
    color: var(--text-secondary) !important;
    font-weight: 400;
    white-space: nowrap;
    font-family: 'Rajdhani', sans-serif !important;
    flex-shrink: 0;
}

.server-link-btn svg {
    width: 14px;
    height: 14px;
    display: block;
    color: #bababa;
}
.server-link-btn svg:hover {
    color: var(--status-up);
}

.server-link-btn-index {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    
    margin: 0;
    padding: 0;
    overflow: hidden; /* Importante para não mostrar pedaço do ícone */
    
    color: var(--text-muted) !important;
    border-radius: 50%;
    /* Altura fixa igual ao tamanho do ícone desejado */
    height: 19px; 
    
    font-size: 0.6rem;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    
    /* Remove bordas e background padrão */
    background: transparent;
    border: none;
    z-index: 10;
    flex-shrink: 0;

    cursor: pointer;
}


.server-title {
    font-size: 0.65rem !important; /* Compacto */
    color: #848E9C !important; /* Cinza mais visível */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 2px;
    font-weight: 500 !important;
}

/* Badges na linha do nome */
.server-badges {
    display: inline-flex;
    gap: 4px;
    margin-left: 8px;
}

.server-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px;
    font-size: 0.6rem !important; /* Compacto */
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: var(--radius-std);
}

.server-badge.premium {
    background: rgba(14, 203, 129, 0.2) !important; /* Emerald */
    color: #0ECB81 !important; /* Emerald */
    border: 1px solid rgba(14, 203, 129, 0.4) !important;
    text-shadow: 0 0 6px rgba(14, 203, 129, 0.4);
}

.server-badge.new {
    background: rgba(14, 203, 129, 0.25) !important; /* Emerald */
    color: #0ECB81 !important; /* Emerald */
    border: 1px solid rgba(14, 203, 129, 0.5) !important;
    text-shadow: 0 0 6px rgba(14, 203, 129, 0.5);
}
.server-badge.online {
    background: rgb(14 203 129 / 9%) !important;
    color: #0ECB81 !important; /* Emerald */
    border: 1px solid rgba(14, 203, 129, 0.5) !important;
    text-shadow: 0 0 6px rgba(14, 203, 129, 0.5);
}

.server-badge.offline {
    background: #f6465d12;
    color: var(--status-down);
    border: 1px solid rgb(203 14 14 / 50%) !important;
}

.server-badge.starting-soon {
    background: rgba(14, 203, 129, 0.2) !important; /* Emerald */
    color: #0ECB81 !important; /* Emerald */
    border: 1px solid rgba(14, 203, 129, 0.4) !important;
    text-shadow: 0 0 6px rgba(14, 203, 129, 0.4);
}

/* Status Column */
.server-status {
    width: 120px;
}

.status-indicator {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    text-align: right;
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.status-dot.online {
    background: var(--status-online);
    box-shadow: 0 0 8px var(--status-online);
    animation: pulse-status 2s infinite;
}

.status-dot.offline {
    background: var(--status-offline);
}

@keyframes pulse-status {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.status-text {
    font-weight: 500;
    font-size: 0.85rem;
}

.status-text.online {
    color: var(--status-online);
}

.status-text.offline {
    color: var(--status-offline);
}

.online-count {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.7rem !important; /* Compacto */
    color: #EAECEF !important; /* Branco puro */
    font-weight: 700 !important;
    margin-top: 0;
}

/* Seta de mudança de players (↑/↓) - Binance Trading Colors */
.player-change {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 0.7rem;
    font-weight: 500;
}

.player-change.up {
    color: #0ECB81 !important; /* Verde vibrante */
    text-shadow: 0 0 6px rgba(14, 203, 129, 0.5);
    font-weight: 600 !important;
}

.player-change.down {
    color: #F6465D !important; /* Vermelho vibrante */
    text-shadow: 0 0 6px rgba(246, 70, 93, 0.5);
    font-weight: 600 !important;
}

/* Exp Rate Column - Estilo da Imagem (Branco) */
.server-exp {
    width: 100px;
    text-align: left;
}

.exp-value {
    font-weight: 600 !important; /* Mais negrito */
    font-size: 0.7rem !important; /* Compacto */
    color: #EAECEF !important; /* Branco puro */
}

.exp-label {
    font-size: 0.65rem !important; /* Compacto */
    color: #848E9C !important; /* Cinza mais visível */
    text-transform: uppercase;
}

/* PVP Type Column - Estilo da Imagem (Texto Simples Branco) */
.server-pvp {
    width: 100px;
    text-align: left;
}

.pvp-badge {
    display: inline-block;
    padding: 0;
    background: transparent;
    color: var(--accent-white);
    border: none;
    font-size: 0.85rem;
    font-weight: 500;
    text-transform: uppercase;
}

.pvp-badge.optional-pvp {
    background: rgba(252, 213, 53, 0.15);
    color: var(--accent-color);
    border-color: rgba(252, 213, 53, 0.3);
}

.pvp-badge.no-pvp {
    background: rgba(14, 203, 129, 0.15);
    color: var(--status-up);
    border-color: rgba(14, 203, 129, 0.3);
}

.pvp-badge.retro-open-pvp {
    background: rgba(252, 213, 53, 0.15);
    color: var(--accent-color);
    border-color: rgba(252, 213, 53, 0.3);
}

/* Uptime Column */
.server-uptime {
    width: 100px;
    text-align: center;
}

.uptime-value.high {
    color: var(--status-up);
}

.uptime-value.medium {
    color: #F0B90B; /* Amarelo Binance para médio */
}

.uptime-value.low {
    color: var(--status-down);
}

.uptime-bar {
    width: 100%;
    height: 4px;
    background: var(--bg-primary);
    margin-top: 6px;
    overflow: hidden;
}

.uptime-fill {
    height: 100%;
    background: var(--accent-color);
    transition: width var(--transition-normal);
}

/* Client Version Column - Estilo da Imagem */
.server-version {
    width: 90px;
    text-align: left;
    font-family: 'Courier New', monospace;
    font-weight: 500;
    color: #ffffff;
    font-size: 0.85rem;
}

/* Bot/MC Rules Column - Estilo da Imagem (FEAT com ícones verdes) */
.server-rules {
    width: 80px;
    text-align: left;
}

.rules-icons {
    display: flex;
    justify-content: flex-start;
    gap: 6px;
}

.rule-icon {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    font-size: 0.85rem;
    color: #10b981;
}

.rule-icon.allowed {
    color: #10b981;
}

.rule-icon.forbidden {
    color: #80848e;
    opacity: 0.5;
}

.pagination-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 32px 0;
}

.pagination-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color-light);
    border-radius: var(--radius-std);
    color: var(--accent-white);
    font-size: 0.9rem;
    font-weight: 500;
    transition: all var(--transition-fast);
}

.pagination-btn:hover:not(:disabled) {
    background: var(--bg-card);
    border-color: var(--accent-color);
    color: var(--accent-color);
}

.pagination-btn.active {
    background: var(--accent-color);
    border-color: var(--accent-color);
    color: #000;
}

.pagination-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

@media (max-width: 992px) {
    .hero-title {
        font-size: 2.5rem;
    }
    
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
    
    .stat-card {
        padding: 24px 16px;
    }
}

@media (max-width: 768px) {
    .hero-section {
        padding: 60px 20px 40px;
        min-height: 400px;
    }
    
    .hero-title {
        font-size: 2rem;
    }
    
    .hero-subtitle {
        font-size: 1rem;
        margin-bottom: 30px;
    }
    
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
    
    .stat-card {
        padding: 20px 12px;
    }
    
    .stat-icon {
        font-size: 1.5rem;
    }
    
    .stat-value {
        font-size: 2rem;
    }
    
    .stat-label {
        font-size: 0.7rem;
    }
    
    .filters-container {
        flex-direction: column;
        align-items: stretch;
    }
    
    .filter-btn {
        width: 100%;
        justify-content: center;
    }
    
    .server-name-cell,
    .server-rank,
    .server-status,
    .server-exp,
    .server-pvp,
    .server-uptime,
    .server-version,
    .server-rules,
    .server-ping {
        width: 100%;
        text-align: left;
    }
}


/* Toolbar Buttons */
.btn-dark {
    background-color: #1a1b1e;
    border: 1px solid #2b2d31;
    color: #b5bac1;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    padding: 10px 20px;
    border-radius: var(--radius-std) !important;
    transition: all 0.2s;
}

.btn-dark:hover {
    background-color: #2b2d31;
    color: #fff;
    border-color: #3f4148;
}

/* Botão Live com ponto verde */
.active-live {
    color: #10b981 !important;
    border-color: rgba(16, 185, 129, 0.3) !important;
    background-color: rgba(16, 185, 129, 0.1) !important;
}

.live-dot {
    width: 6px;
    height: 6px;
    background-color: #10b981;
    border-radius: 50%;
    box-shadow: 0 0 5px #10b981;
}

.col-rank-box {
    background: #202225;
    color: #72767d;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-std);
    font-size: 0.75rem;
    margin: 0 auto;
}

.trend-icon {
    display: inline-block;
    width: 14px;
    height: 14px;
    vertical-align: middle;
    flex-shrink: 0;
}
.trend-icon.trend-up {
    color: var(--status-up) !important; /* Verde Binance para aumento */
}
.trend-icon.trend-up svg {
    stroke: var(--status-up) !important;
    color: var(--status-up) !important;
}
.trend-icon.trend-down {
    color: var(--status-down) !important; /* Vermelho Binance para queda */
    opacity: 1; /* Opacidade total para visibilidade */
}
.trend-icon.trend-down svg {
    stroke: var(--status-down) !important;
    color: var(--status-down) !important;
}
.trend-value {
    margin-right: 7px;
    font-size: 0.75rem !important;
    letter-spacing: 0px  !important;
}

/* Stat Trends no Painel Esquerdo */
.stat-trend-icon.stat-trend-up + .trend-value {
    color: var(--status-up) !important; /* Verde Binance para aumento */
}
.stat-trend-icon.stat-trend-down + .trend-value {
    color: var(--status-down) !important; /* Vermelho Binance para queda */
    opacity: 1; /* Opacidade total */
}
.trend-value.trend-up {
    color: var(--status-up) !important; /* Verde Binance para aumento */
}
.trend-value.trend-down {
    color: var(--status-down) !important; /* Vermelho Binance para queda */
    opacity: 1; /* Opacidade total */
}

.stat-trend-icon {
    display: inline-block;
    width: 14px;
    height: 14px;
    vertical-align: middle;
    flex-shrink: 0;
    margin-right: 2px;
}

.stat-trend-icon.stat-trend-up {
    color: var(--status-up) !important; /* Verde Binance para aumento */
}

.stat-trend-icon.stat-trend-up svg {
    stroke: var(--status-up) !important;
    color: var(--status-up) !important;
}

.stat-trend-icon.stat-trend-down {
    color: var(--status-down) !important; /* Vermelho Binance para queda */
    opacity: 1; /* Opacidade total */
}

.stat-trend-icon.stat-trend-down svg {
    stroke: var(--status-down) !important;
    color: var(--status-down) !important;
}

.stat-trend-value {
    font-size: 0.7rem;
    font-weight: 600;
    margin-left: 2px;
}

.stat-trend-icon.stat-trend-up + .stat-trend-value {
    color: var(--status-up) !important;
    position: absolute;
    /* top: 24px; */
    right: 19px;
    margin: 0 !important;
    font-size: 0.65rem;
    display: flex;
    align-items: center;
    gap: 2px;
}

.stat-trend-icon.stat-trend-down + .stat-trend-value {
    color: var(--status-down) !important; /* Vermelho Binance para queda */
    opacity: 1;
    position: absolute;
     /* top: 24px; */
    right: 19px;
    margin: 0 !important;
    font-size: 0.65rem;
    display: flex;
    align-items: center;
    gap: 2px;
}

.ping-green { color: #0ECB81 !important; text-shadow: 0 0 6px rgba(14, 203, 129, 0.5); }
.ping-yellow { color: #FCD535 !important; text-shadow: 0 0 6px rgba(252, 213, 53, 0.5); }
.ping-red { color: #F6465D !important; text-shadow: 0 0 6px rgba(246, 70, 93, 0.5); }

@keyframes blinkLive { 0% { opacity: 1; } 50% { opacity: 0.4; } 100% { opacity: 1; } }
.blinking-dot { animation: blinkLive 2s infinite; }


/* =========================================
   CABEÇALHO DA TABELA (THEAD) & SORT ICONS
   ========================================= */

.sort-icon {
    margin-left: 6px;
    font-size: 0.75em;
    color: var(--text-muted) !important; /* #848E9C - Inativo */
    transition: all 0.2s ease;
    display: inline-block;
    vertical-align: middle;
    opacity: 0.6;
}

/* Botões de Ação na Direita (Group, Fav, Prem) */
.btn-dark-action {
    background-color: #1a1b1e;
    border: 1px solid #2b2d31;
    border-radius: var(--radius-std) !important;
    color: #9ca3af;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 10px 20px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-dark-action:hover {
    background-color: #2b2d31;
    border-color: #4b5563;
    color: #fff;
}

/* Estado Ativo (Checked/On) */
.btn-dark-action.active {
    background-color: rgba(16, 185, 129, 0.1); /* Fundo verde bem suave */
    border-color: #10b981;
    color: #fff;
}

/* Inputs do Painel de Filtro */
.label-xs {
    font-size: 0.7rem;
    text-transform: uppercase;
    color: #6b7280;
    font-weight: 700;
    margin-bottom: 4px;
    display: block;
}

.select-dark {
    background-color: #111 !important;
    border-color: #2b2d31 !important;
    color: #d1d5db !important;
    font-size: 0.85rem;
}

.select-dark:focus, 
.form-control:focus {
    box-shadow: none !important;
}

.ls-1 { letter-spacing: 1px; }


@keyframes radar-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(0, 229, 255, 0.7);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(0, 229, 255, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(0, 229, 255, 0);
    }
}

/* Animação radar usando pseudo-elemento para evitar cortes */
@keyframes radar-pulse-ring {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.7;
    }
    70% {
        transform: translate(-50%, -50%) scale(2.5);
        opacity: 0;
    }
    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0;
    }
}

.btn-group-toggle {
    /* MUDANÇA: Voltamos para relative para ele acompanhar a rolagem da tabela */
    position: relative !important;
    z-index: 100; /* Z-index alto para garantir que a animação apareça sobre outros elementos */

    background: rgba(0, 229, 255, 0.05); /* Fundo base muito sutil */
    border: 1px solid var(--tibialist-cyan);
    color: var(--tibialist-cyan);
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer !important; /* Força o ponteiro */

    border-radius: 50%;
    
    /* CORREÇÃO: Garante renderização de GPU para evitar cortes no navegador */
    transform: translateZ(0); 
    overflow: visible !important;
    
    /* Adiciona margem para dar espaço para a animação radar (10px de cada lado) */
    margin: 0 12px;
}

/* Animação radar usando ::before para evitar cortes de overflow */
.btn-group-toggle::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 1px solid rgba(0, 229, 255, 0.7);
    animation: radar-pulse-ring 3s infinite cubic-bezier(0.66, 0, 0, 1);
    pointer-events: none;
    z-index: -1;
}

.btn-group-toggle:hover {
    background: rgba(0, 229, 255, 0.2);
    transform: scale(1.1);
    box-shadow: 0 0 10px rgba(0, 229, 255, 0.3);
    color: #ffffff; /* Ícone fica branco no hover */
}

/* ESTADO EXPANDIDO (O problema estava aqui) */
.btn-group-toggle.expanded {
    /* MUDANÇA: Usamos rgba em vez de cor sólida para efeito vidro neon */
    background: rgba(0, 229, 255, 0.2); 
    
    /* MUDANÇA: Ícone branco para contraste máximo contra o brilho ciano */
    color: #ffffff; 
    
    border-color: var(--tibialist-cyan);
    
    /* Glow externo e interno para profundidade */
    box-shadow: 
        0 0 15px var(--tibialist-cyan-glow),
        inset 0 0 10px rgba(0, 229, 255, 0.1); 
}

/* Para a animação radar quando expandido */
.btn-group-toggle.expanded::before {
    animation: none;
    opacity: 0;
}

.btn-group-toggle.expanded:hover {
    background: rgba(0, 229, 255, 0.4); /* Fica mais forte ao passar o mouse */
    box-shadow: 0 0 20px var(--tibialist-cyan-glow);
}

/* Animação pulse discreta */
@keyframes pulse-expand {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(0, 210, 255, 0.4);
        border-color: rgba(0, 210, 255, 0.3);
    }
    50% {
        box-shadow: 0 0 0 4px rgba(0, 210, 255, 0);
        border-color: rgba(0, 210, 255, 0.6);
    }
}
 
/* Ícones + e - */
.expand-icon,
.collapse-icon {
    background: transparent;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
    stroke: currentColor;
}

.expand-icon.active,
.collapse-icon.active {
    opacity: 1;
}
/* Ajuste para o ícone de seta quando expandido */
.fa-rotate-90 {
    transform: rotate(90deg);
}












/* =========================================
   TOP FILTERS DRAWER (Gaveta Superior)
   ========================================= */

.filters-drawer {
    position: fixed;
    top: var(--navbar-height, 70px); /* Começa logo abaixo da navbar */
    left: 0;
    width: 100%;
    background-color: var(--bg-card-secondary); /* Fundo cinza Binance */
    border-bottom: 1px solid var(--border-color);
    border-radius: 0 0 var(--radius-std) var(--radius-std);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    z-index: 1040; /* Acima do conteúdo, abaixo de modais full */
    
    /* Estado Inicial: Escondido para cima */
    transform: translateY(-150%);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    
    max-height: 80vh; /* Não ocupar a tela toda */
    overflow-y: auto;
}

.filters-drawer.open {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
}

/* Backdrop Escuro */
.filters-backdrop {
    position: fixed;
    top: var(--navbar-height, 70px);
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(2px);
    z-index: 1039; /* Logo abaixo do drawer */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
}

.filters-backdrop.show {
    opacity: 1;
    visibility: visible;
}

/* Conteúdo Interno */
.filters-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
    border-bottom: 1px solid var(--border-color-light);
}

.filters-title {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--accent-white);
}

.filters-close-btn {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 1.2rem;
    cursor: pointer;
    transition: color 0.2s;
}
.filters-close-btn:hover { color: var(--accent-white); }

.filters-body {
    padding: 24px 0;
}

/* Inputs Estilo Binance */
.filter-label {
    display: block;
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-bottom: 6px;
    font-weight: 600;
    text-transform: uppercase;
}

.filter-select {
    width: 100%;
    background-color: var(--input-bg, #2B3139);
    border: 1px solid transparent;
    border-radius: var(--radius-std);
    color: var(--accent-white);
    padding: 10px 12px;
    font-size: 0.9rem;
    outline: none;
    transition: border 0.2s;
}

.filter-select:focus {
    border-color: var(--accent-color);
    background-color: var(--bg-card);
}

/* Checkboxes Customizados */
.filter-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    color: var(--accent-white);
    font-size: 0.9rem;
    user-select: none;
}

.filter-checkbox input {
    accent-color: var(--accent-color);
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* Rodapé */
.filters-footer {
    padding: 20px 0 24px;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    border-top: 1px solid var(--border-color-light);
}












/* =========================================
   BINANCE COMPACT BANNER (Layout Horizontal Fixo)
   ========================================= */

/* Container Principal */
.top-panel-item.promotional-panel.binance-banner-compact {
    grid-column: span 2; /* Ocupa 2 colunas no grid pai */
    width: 100%;
    margin-left: 0px;
    /* Altura fixa compacta */
    height: 55px !important;
    min-height: 55px !important;
    max-height: 55px !important;
    aspect-ratio: auto !important;
    
    background-color: rgb(108 108 108 / 7%);
    border-color: rgba(252, 213, 53, .4);
    border-radius: var(--radius-std);
    padding: 0;
    overflow: hidden;
    position: relative;
    display: block;
    margin-bottom: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* Informação sobre altura máxima no banner compacto */
.top-panel-item.promotional-panel.binance-banner-compact::after {
    content: 'Max: 55px';
    position: absolute;
    top: 2px;
    right: 8px;
    font-size: 0.6rem;
    color: var(--text-muted);
    opacity: 0.5;
    font-weight: 600;
    z-index: 10;
    pointer-events: none;
}

/* Flex Container que segura os 3 blocos */
.banner-flex-container-compact {
    display: flex;
    flex-direction: row;
    align-items: center; /* Centraliza verticalmente */
    justify-content: space-between; /* Espalha horizontalmente */
    padding: 0 12px;
    height: 100%;
    max-height: 55px;
    gap: 10px;
}

/* --- BLOCO 1: TEXTO (Esquerda) --- */
.banner-text-section {
    flex: 0 0 35%; /* Ocupa ~35% da largura */
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1.1;
    z-index: 2;
}

.promotional-title-compact {
    font-family: 'Inter', sans-serif;
    font-size: 1.1rem; /* Tamanho controlado */
    font-weight: 700;
    color: #fff;
    margin: 0 0 4px 0;
}

.text-highlight {
    color: #FCD535; /* Amarelo Binance */
}

.promotional-subtitle-compact {
    font-size: 0.75rem;
    color: #848e9c;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- BLOCO 2: ESTATÍSTICAS (Meio - Grid 2x2) --- */
.banner-stats-section {
    flex: 1; /* Ocupa o espaço que sobrar no meio */
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2 colunas */
    grid-template-rows: 1fr 1fr;    /* 2 linhas */
    gap: 6px 12px; /* Gap pequeno vertical, médio horizontal */
    justify-content: center;
    max-width: 400px; /* Não deixa esticar demais */
}

/* Os Micro Cards com Borda */
.stat-card-micro {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    width: 120px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-std);
    padding: 4px 10px; /* Padding interno pequeno */
    
    height: 42px; /* Altura fixa para alinhar o grid */
    transition: all 0.2s ease;
}
.stat-card-micro:hover {
    border-color: rgba(252, 213, 53, 0.4);
    background: rgba(255, 255, 255, 0.05);
}
#threejs-galaxy-container {
    width: 100%;
    height: 350px; /* Altura ajustável conforme necessidade */
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: -40px; /* Puxa o banner de baixo um pouco para cima para integrar */
    z-index: 1; /* Fica atrás do banner se sobrepor */
}

#threejs-galaxy-container canvas {
    position: absolute;
}

.stat-label-micro {
    font-size: 0.55rem;
    color: #5e6673;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
    top: 0px;
    position: relative;
    z-index: 13;
}

.stat-content {
    display: flex;
    flex-direction: column;
    min-width: 60px;
    width: 100%;
    /* overflow: hidden; */
    text-align: right;
}

/* Animações */
.floating-group { animation: serverFloat 6s ease-in-out infinite; transform-origin: center; }
@keyframes serverFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.pulsing-core { animation: corePulse 3s infinite; }
@keyframes corePulse { 0%, 100% { opacity: 0.8; r: 8; } 50% { opacity: 0.4; r: 6; } }
.floating-particle { opacity: 0.8; }
.p1 { animation: particleFloat 4s ease-in-out infinite alternate; }
@keyframes particleFloat { 0% { transform: translate(0, 0); opacity: 0.4; } 100% { transform: translate(0, -5px); opacity: 1; } }

/* --- BACKGROUND ANIMADO DE REDE (Global) --- */
#digital-network-bg {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: -1;
    background: linear-gradient(135deg, #0b0e11 0%, var(--bg-body) 100%);
    pointer-events: none;
}

/* --- MOBILE --- */
@media (max-width: 768px) {
    .top-panel-item.promotional-panel.binance-banner-compact {
        height: 55px !important;
        max-height: 55px !important;
        min-height: 55px !important;
        padding: 0 10px;
        grid-column: span 1;
    }
    
    .banner-flex-container-compact {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
    
    .banner-text-section {
        max-width: 100%;
        text-align: left;
    }
    
    .banner-stats-section {
        width: 100%;
        max-width: 100%;
    }
}

#toggle-filters-btn {
    position: relative !important; /* Segura o ícone dentro do botão */
    overflow: visible !important;  /* Permite que o ícone "saia" um pouquinho da borda sem ser cortado */
}



.form-select-square {
    border-radius: var(--square-radius) !important;
    border: 1px solid var(--input-border);
    font-size: 0.8rem;
}

.btn-square {
    border-radius: var(--square-radius) !important;
}

.btn-cta-yellow {
    background: var(--accent-primary) !important;
    color: var(--accent-text) !important;
    border: 1px solid var(--accent-primary) !important;
    transition: all 0.2s;
}
.btn-cta-yellow:hover {
    background: #F0B90B !important;
    border-color: #F0B90B !important;
    color: var(--accent-text) !important;
}

/* Ads Banners */
.holographic-ad {
    position: relative;
    height: 55px;
    max-height: 55px;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: none !important;
}

.holographic-ad:hover {
    transform: scale(1.01);
}

/* Wrapper do banner com imagem */
.ad-banner-wrapper {
    border-radius: var(--side-padding);
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* Imagem do banner - cobre toda área */
.ad-banner-image {
    /*filter: grayscale(100%);*/
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    
    /* Cursor Lupa Premium: Amarelo com Borda Preta e sinal de + */
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none"><defs><filter id="a" x="0" y="0" width="24" height="24"><feDropShadow dx="1" dy="1" stdDeviation="1" flood-opacity="0.5"/></filter></defs><path d="M15 15L21 21" stroke="black" stroke-width="5" stroke-linecap="round"/><circle cx="10" cy="10" r="7" stroke="black" stroke-width="5"/><path d="M15 15L21 21" stroke="%23FCD535" stroke-width="2" stroke-linecap="round"/><circle cx="10" cy="10" r="7" fill="rgba(0,0,0,0.2)" stroke="%23FCD535" stroke-width="2"/><path d="M7 10H13M10 7V13" stroke="%23FCD535" stroke-width="2" stroke-linecap="round"/></svg>') 10 10, zoom-in;
    
    transition: transform 0.3s ease;
}

.ad-banner-wrapper:hover .ad-banner-image {
    transform: scale(1.02);
}

/* Efeito Shimmer/Brilho Moderno */
.ad-shimmer {
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.2) 30%,
        rgba(255, 255, 255, 0.4) 50%,
        rgba(255, 255, 255, 0.2) 70%,
        transparent 100%
    );
    transform: skewX(-25deg);
    animation: shimmer 5s ease-in-out infinite;
    pointer-events: none;
    z-index: 2;
    filter: blur(1px);
}

@keyframes shimmer {
    0% {
        left: -100%;
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        left: 100%;
        opacity: 0;
    }
}

/* Delay para o segundo banner */
.holographic-ad:nth-child(2) .ad-shimmer {
    animation-delay: 2.5s;
}

/* Texto "Announce Here" com efeitos */
.ad-announce-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    pointer-events: none;
    text-align: center;
}

.ad-announce-word {
    font-size: 0.7rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #EAECEF;
    text-shadow: 
        0 0 10px rgba(252, 213, 53, 0.8),
        0 0 20px rgba(252, 213, 53, 0.6),
        0 0 30px rgba(252, 213, 53, 0.4),
        0 2px 4px rgba(0, 0, 0, 0.8),
        0 0 0 1px rgba(0, 0, 0, 0.5);
    filter: drop-shadow(0 0 8px rgba(252, 213, 53, 0.9));
    animation: announceGlow 2s ease-in-out infinite alternate;
    line-height: 1.2;
}

.ad-announce-word:nth-child(2) {
    animation-delay: 0.1s;
}

@keyframes announceGlow {
    0% {
        text-shadow: 
            0 0 10px rgba(252, 213, 53, 0.8),
            0 0 20px rgba(252, 213, 53, 0.6),
            0 0 30px rgba(252, 213, 53, 0.4),
            0 2px 4px rgba(0, 0, 0, 0.8),
            0 0 0 1px rgba(0, 0, 0, 0.5);
        filter: drop-shadow(0 0 8px rgba(252, 213, 53, 0.9));
    }
    100% {
        text-shadow: 
            0 0 15px rgba(252, 213, 53, 1),
            0 0 25px rgba(252, 213, 53, 0.8),
            0 0 35px rgba(252, 213, 53, 0.6),
            0 2px 4px rgba(0, 0, 0, 0.8),
            0 0 0 1px rgba(0, 0, 0, 0.5);
        filter: drop-shadow(0 0 12px rgba(252, 213, 53, 1));
    }
}

.holographic-ad:hover .ad-announce-word {
    color: var(--accent-primary);
    text-shadow: 
        0 0 20px rgba(252, 213, 53, 1),
        0 0 30px rgba(252, 213, 53, 0.9),
        0 0 40px rgba(252, 213, 53, 0.7),
        0 2px 4px rgba(0, 0, 0, 0.8),
        0 0 0 1px rgba(0, 0, 0, 0.5);
    filter: drop-shadow(0 0 15px rgba(252, 213, 53, 1));
}

/* Badge de tamanho no canto direito - Discreto */
.ad-size-badge {
    position: absolute;
    bottom: 3px;
    right: 4px;
    background: rgba(11, 14, 17, 0.6);
    border: 1px solid rgba(132, 142, 156, 0.3);
    border-radius: var(--radii-xs);
    padding: 1px 4px;
    z-index: 4;
    pointer-events: none;
    opacity: 0.5;
    transition: opacity 0.2s ease;
}

.holographic-ad:hover .ad-size-badge {
    opacity: 0.8;
}

.ad-size-badge small {
    font-size: 0.55rem;
    color: rgba(132, 142, 156, 0.8);
    font-weight: 500;
    font-family: monospace;
    letter-spacing: 0.5px;
}

.banner-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(11, 14, 17, 0.95);
    backdrop-filter: blur(10px);
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    animation: fadeIn 0.3s ease forwards;
}

@keyframes fadeIn {
    to { opacity: 1; }
}

.banner-modal-container {
    position: relative;
    width: 90%;
    max-width: 1200px;
    height: 90vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.banner-modal-content {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.banner-modal-content .banner-modal-info {
    position: absolute;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    z-index: 5;
    width: 100%;
}

.banner-modal-image {
    max-width: 100%;
    max-height: calc(90vh - 150px);
    object-fit: contain;
    object-position: center;
    border-radius: var(--radius-std);
    box-shadow: 0 0 50px rgba(252, 213, 53, 0.3);
    border: 2px solid var(--accent-primary);
    background: var(--accent-text);
    padding: 10px;
}

.banner-modal-info {
    text-align: center;
    color: var(--accent-white);
}

.banner-modal-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--accent-primary);
    margin-bottom: 8px;
}

.banner-modal-size {
    font-size: 0.9rem;
    color: var(--text-muted);
    font-family: monospace;
}

/* Botões do modal */
.banner-modal-close {
    position: absolute;
    top: 0;
    right: 0;
    width: 45px;
    height: 45px;
    background: var(--text-gray-dark);
    border: 1px solid var(--border-color);
    border-top: none;
    border-right: none;
    color: var(--accent-white);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: default;
    transition: all 0.3s ease;
    z-index: 10;
    font-size: 1.2rem;
}

.banner-modal-close:hover {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: var(--accent-text);
    transform: scale(1.1);
}

.banner-modal-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    background: var(--text-gray-dark);
    border: 1px solid var(--border-color);
    border-radius: var(--radii-xs);
    color: var(--accent-white);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: default;
    transition: all 0.3s ease;
    z-index: 10;
    font-size: 1.2rem;
}

.banner-modal-nav:hover {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: var(--accent-text);
    transform: translateY(-50%) scale(1.1);
}

.banner-modal-prev {
    left: 20px;
}

.banner-modal-next {
    right: 20px;
}

.banner-modal-actions {
    position: absolute;
    bottom: 30px;
    display: flex;
    gap: 15px;
    z-index: 10;
}

.banner-modal-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: var(--accent-primary);
    color: var(--accent-text);
    border: none;
    border-radius: var(--radii-xs);
    font-weight: 700;
    text-decoration: none;
    cursor: default;
    transition: all 0.3s ease;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.banner-modal-link:hover {
    background: var(--accent-hover);
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(252, 213, 53, 0.4);
}

/* Responsive - Modal */
@media (max-width: 768px) {
    .banner-modal-container {
        width: 95%;
        height: 95vh;
    }
    
    .banner-modal-image {
        max-height: calc(95vh - 200px);
    }
    
    .banner-modal-nav {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }
    
    .banner-modal-prev {
        left: 10px;
    }
    
    .banner-modal-next {
        right: 10px;
    }
    
    .banner-modal-close {
        top: 0;
        right: 0;
        width: 40px;
        height: 40px;
    }
    
    .banner-modal-content .banner-modal-info {
        bottom: 80px;
    }
    
    .banner-modal-actions {
        bottom: 15px;
    }
    
    .banner-modal-link {
        padding: 10px 20px;
        font-size: 0.8rem;
    }
}

/* --- TOOLBAR PANEL (ONDE FICAM OS BOTÕES DE FILTRO E PAGINAÇÕES) --- */
.toolbar-panel {
    background: var(--panel-bg);
    border: 1px solid var(--panel-border);
    border-radius: var(--side-padding);
    width: 100%;
    max-width: 100%;
}

.toolbar-layout {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 16px;
    align-items: center;
    width: 100%;
    max-width: 100%;
}

.toolbar-center {
    display: none;
}

.toolbar-right {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    min-width: 120px;
}

/* Custom Search Input */
.search-container {
    max-width: 600px; /* Aumentado de 450px */
    width: 100%;
}

/* Em telas ultra-largas, search pode ser ainda maior */
@media (min-width: 1920px) {
    .search-container {
        max-width: 800px;
    }
}

@media (min-width: 1600px) and (max-width: 1919px) {
    .search-container {
        max-width: 700px;
    }
}

/* --- CUSTOM RANGE SLIDER (COM PREENCHIMENTO AMARELO) --- */
.custom-range {
    appearance: none; /* Padrão moderno */
    -webkit-appearance: none; /* Remove estilo nativo */
    width: 100%;
    height: 6px;
    /* Fundo base dinâmico (controlado via JS para WebKit) */
    background: linear-gradient(to right, var(--accent-color) 0%, #616469 0%);
    border-radius: 3px;
    outline: none;
    margin-top: 5px;
    margin-bottom: 5px;
    padding: 0;
    cursor: pointer;
}

/* Foco */
.custom-range:focus {
    outline: none;
    box-shadow: none;
}

/* --- TRILHO (TRACK) --- */

/* Chrome / Safari / Edge: Track Transparente para mostrar o gradiente do input */
.custom-range::-webkit-slider-runnable-track {
    width: 100%;
    height: 6px;
    cursor: pointer;
    background: transparent; /* Importante: deixa ver o gradiente de fundo */
    border: 1px solid var(--panel-border);
    border-radius: 3px;
    box-shadow: none;
}

/* Firefox: Track Escuro (Cobre o gradiente do input, pois usa o progress nativo) */
.custom-range::-moz-range-track {
    width: 100%;
    height: 6px;
    cursor: pointer;
    background: #616469;
    border: 1px solid var(--panel-border);
    border-radius: 3px;
    box-shadow: none;
}

/* Firefox: Barra de Progresso Nativa (Preenchimento) */
.custom-range::-moz-range-progress {
    background-color: var(--accent-color);
    height: 6px;
    border-radius: 3px;
}

/* --- BOLINHA (THUMB) --- */

/* Chrome / Safari / Edge */
.custom-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: var(--accent-color);
    border: 2px solid var(--bg-body);
    cursor: pointer;
    margin-top: -6px; /* Centraliza verticalmente */
    box-shadow: 0 0 5px rgba(252, 213, 53, 0.5);
    transition: transform 0.1s ease, box-shadow 0.2s ease;
}

/* Firefox */
.custom-range::-moz-range-thumb {
    height: 16px;
    width: 16px;
    border: 2px solid var(--bg-body);
    border-radius: 50%;
    background: var(--accent-color);
    cursor: pointer;
    box-shadow: 0 0 5px rgba(252, 213, 53, 0.5);
    transition: transform 0.1s ease, box-shadow 0.2s ease;
    border: none; /* Firefox adiciona borda extra as vezes */
}

/* Hover na Bolinha */
.custom-range::-webkit-slider-thumb:hover {
    transform: scale(1.2);
    box-shadow: 0 0 10px rgba(252, 213, 53, 0.8);
}
.custom-range::-moz-range-thumb:hover {
    transform: scale(1.2);
    box-shadow: 0 0 10px rgba(252, 213, 53, 0.8);
}


.filter-flag-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 6px;
}

/* Fallback para PNG se ainda existir */
.filter-flag-icon img {
    width: 20px;
    height: 15px;
    object-fit: cover;
    border-radius: 1px;
}

/* Heart icon favoritos - SVG outline */
.heart-icon {
    stroke: var(--text-muted);
    transition: all 0.2s ease;
}

.heart-icon.heart-favorited {
    stroke: #F6465D !important; /* Vermelho Binance quando favoritado */
    filter: drop-shadow(0 0 4px rgba(246, 70, 93, 0.5));
}

/* Uptime cell */
.uptime-cell {
    text-align: center;
    height: 32px !important; /* Altura fixa padronizada */
    padding: 0 !important; /* Remove padding para centralizar verticalmente */
}

/* Verde para uptime alto (>= 90%) */
.uptime-cell[data-uptime]:not([data-uptime="-"]) .uptime-value {
    color: var(--status-up);
}

/* Badge Verde estilo "FILTERS" para o botão FAVORITE */
.filter-badge.badge-green {
    background-color: var(--status-up) !important; /* Verde #0ECB81 */
    color: #fff !important; /* Texto Branco */
    border: 1px solid rgba(14, 203, 129, 0.5);
    box-shadow: 0 0 5px rgba(14, 203, 129, 0.4);
    
    /* Ajuste de posição para ficar no canto superior direito */
    position: absolute;
    top: -6px;
    right: -6px;
    z-index: 10;
    min-width: 18px;
    height: 18px;
    border-radius: 50%;
    font-size: 0.65rem;
    font-weight: 700;
    display: flex; /* Importante para centralizar o número */
    align-items: center;
    justify-content: center;
    padding: 0 4px;
}

/* =========================================
   2. STATS BAR (COMPACT & DISCRETA)
   ========================================= */
.stats-section-compact {
    background: rgba(26, 29, 33, 0.6); /* Mais transparente/discreto */
    border: 1px solid var(--sd-border);
    border-radius: 8px;
    padding: 12px 15px;
    margin-bottom: 20px;
    backdrop-filter: blur(5px);
}

.stats-compact-row {
    display: flex;
    justify-content: space-around; /* Espalha os itens */
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
}

.stat-item-compact {
    display: flex;
    align-items: center;
    gap: 12px;
}

.stat-icon-wrapper-compact {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    background: rgba(255, 255, 255, 0.03);
}

.stat-content-compact {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.stat-value-compact {
    font-size: 1rem;
    font-weight: 700;
    color: var(--sd-text-main);
}

.stat-label-compact {
    font-size: 0.6rem;
    text-transform: uppercase;
    color: var(--sd-text-muted);
    font-weight: 600;
}

/* RIBBON STYLE (Faixa de Canto) */
.ribbon-wrapper {
    position: absolute;
    top: 0;
    right: 0;
    width: 75px;
    height: 75px;
    overflow: unset;
    z-index: 10;
    pointer-events: none;
    opacity: 0.7;
}

.ribbon {
    position: absolute;
    top: 34px;
    right: -44px;
    width: 130%;
    height: 60%;
    z-index: 400;
    background-color: #333;
    background-size: cover;
    background-position: center;
    transform: rotate(44deg) translateY(-20px) translateX(-35px);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5);
    border: none;
}

/* CSS Extra para o Ribbon */
.server-card-left {
    position: relative;
    overflow: hidden; /* Importante para cortar a ponta da faixa */
}

.sidebar-divider {
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0));
    margin: 15px 0;
}


.heart-icon-details {
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.rate-icon-loot i {
    color: #e91e63;
}
.disabled-favorite {
    cursor: not-allowed;
}
/* Esconde o ícone de fonte antigo, pois usaremos imagem de fundo */
.ribbon .fi {
    display: none;
}


/* Submenu */
.submenu-container { max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out; }
.nav-item.active .submenu-container { max-height: 500px; }
.submenu-inner {
    padding: 2px 0 2px 20px;
    display: flex;
    flex-direction: column;
    border-left: 1px solid rgba(255,255,255,0.05);
    margin-left: 20px;
}
/* Status */
.server-details-status { border-top: 1px solid var(--sd-border); padding-top: 15px; margin-top: 10px; }
.server-status-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px; }
.server-status-title { font-size: 0.7rem; text-transform: uppercase; color: var(--sd-text-muted); font-weight: 700; margin: 0; }
.server-status-badge { padding: 2px 8px; border-radius: 4px; font-weight: 700; }
.status-online { 
    color: #10b981 !important; /* Verde Sucesso */
    border-color: rgba(16, 185, 129, 0.3);
    background: rgba(16, 185, 129, 0.1);
}
.status-offline { background: rgba(218, 54, 51, 0.15); color: #da3633; border: 1px solid rgba(218, 54, 51, 0.3); }
.server-status-time { font-size: 0.7rem; color: var(--sd-text-muted); margin: 0; }

/* =========================================
   6. CARDS & PANELS (Right Side)
   ========================================= */
.server-card-modern {
    border: 1px solid var(--sd-border);
    border-radius: var(--radius-big);
    display: flex;
    flex-direction: column;
    height: 100%;
}

.card-header-modern {
    padding: 12px 15px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 58px;
}

.card-title-modern {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--sd-text-main);
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.card-body-modern {
    padding: 15px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Info Grid (Grid system fix) */
.info-grid-modern {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 15px;
    margin-bottom: 15px;
}

.info-item-modern { display: flex; flex-direction: column; gap: 2px; }
.info-label { font-size: 0.65rem; text-transform: uppercase; color: var(--sd-text-muted); font-weight: 600; }
.info-value { font-size: 0.85rem; color: var(--sd-text-main); font-weight: 500; display: flex; align-items: center; gap: 5px; }

/* Rates Grid - Estilo Horizontal Compacto */
.rates-container {
    display: grid;
    /* Ajusta automaticamente: mínimo 110px, máximo 1fr */
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 8px;
    margin-top: auto;
}

.rate-box {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--sd-border);
    border-radius: 6px;
    padding: 6px 10px; /* Padding reduzido */
    
    /* MUDANÇA: Flex Row para ficar lado a lado */
    display: flex;
    flex-direction: row; 
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    
    transition: all 0.2s;
}

.rate-box:hover {
    border-color: var(--sd-accent);
    background: rgba(252, 213, 53, 0.05);
}

/* Ícone na esquerda */
.rate-icon-svg {
    font-size: 1.1rem;
    color: var(--sd-accent);
    margin-bottom: 0; /* Remove margem inferior */
    
    /* Centraliza o ícone num quadrado fixo */
    width: 24px; 
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
}

/* Texto na direita */
.rate-content-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1;
}

.rate-num {
    font-weight: 700;
    font-size: 0.9rem;
    color: #fff;
}

.rate-name {
    font-size: 0.6rem;
    text-transform: uppercase;
    color: var(--sd-text-muted);
    font-weight: 600;
    margin-top: 2px;
}

/* Boosted Creatures */
.boosted-display {
    display: flex;
    align-items: center;
    justify-content: space-around;
    height: 100%;
    padding-bottom: 6px;
}
.creature-slot { display: flex; flex-direction: column; align-items: center; gap: 8px; flex: 1; }
.creature-frame {
    width: 54px;
    height: 54px;
    background: rgba(0,0,0,0.3);
    border: 1px solid var(--sd-border);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: all 0.3s ease;
}
.creature-slot:hover .creature-frame { border-color: var(--sd-accent); box-shadow: 0 0 10px rgba(252, 213, 53, 0.1); }
.creature-img { max-width: 40px; max-height: 40px; object-fit: contain; }
.creature-tag { font-size: 0.6rem; color: var(--sd-accent); text-transform: uppercase; letter-spacing: 0.5px; }
.creature-name { font-size: 0.75rem; font-weight: 600; color: #fff; text-align: center; }

.boosted-btn {
    width: 100%;
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--sd-border);
    color: var(--sd-text-muted);
    font-size: 0.75rem;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;

    border-radius: 6px;
    padding: 6px 10px;
    height: 40px;
}
.boosted-btn:hover { background: var(--sd-accent); color: #000; border-color: var(--sd-accent); }

/* Latency Widget */
.latency-widget-modern {
    background: rgba(0,0,0,0.3);
    border: 1px solid var(--sd-border);
    border-radius: 6px;
    padding: 4px 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.latency-dot { width: 6px; height: 6px; border-radius: 50%; background-color: var(--sd-text-muted); animation: pulse-green-radar 2s infinite cubic-bezier(0.66, 0, 0, 1); }
.latency-dot.good { background-color: var(--sd-success); box-shadow: 0 0 4px var(--sd-success); }
.latency-dot.medium { background-color: #e3b341; box-shadow: 0 0 4px #e3b341; }
.latency-dot.bad { background-color: var(--sd-danger); box-shadow: 0 0 4px var(--sd-danger); }
.latency-content { display: flex; flex-direction: column; line-height: 1; }
.latency-label { font-size: 0.55rem; text-transform: uppercase; color: var(--sd-text-muted); font-weight: 600; margin-bottom: 1px; }
.latency-value-row { display: flex; align-items: baseline; gap: 2px; }
.latency-number { font-family: 'Roboto Mono', monospace; font-weight: 700; font-size: 0.8rem; color: var(--sd-text-main); }
.latency-unit { font-size: 0.65rem; color: var(--sd-text-muted); }

.copy-btn { background: none; border: none; color: var(--sd-accent); cursor: pointer; padding: 0 4px; opacity: 0.7; }
.copy-btn:hover { opacity: 1; }

@media (max-width: 991px) {
    .rates-container { grid-template-columns: repeat(2, 1fr); }
    .server-details-sidebar { z-index: 5; margin-bottom: 20px; }
}

/* --- Header Compact Stats --- */
.header-stats-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
    background: var(--bg-card);
    border: 1px solid var(--sd-border);
    border-radius: 6px;
    padding: 8px;
}

.h-stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
    position: relative;
}

/* Linha divisória entre itens (opcional) */
.h-stat-item:not(:last-child)::after {
    content: '';
    position: absolute;
    right: -4px;
    top: 10%;
    height: 80%;
    width: 1px;
    background: var(--sd-border);
    opacity: 0.5;
}

.h-stat-icon-wrapper {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.h-stat-icon-wrapper svg {
    width: 14px;
    height: 14px;
    fill: currentColor;
}

.h-stat-info {
    display: flex;
    flex-direction: column;
    line-height: 1;
}

.h-stat-value {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--sd-text-main);
    font-family: 'Roboto Condensed', sans-serif;
}

.h-stat-label {
    font-size: 0.6rem;
    text-transform: uppercase;
    color: var(--sd-text-muted);
    font-weight: 600;
    margin-top: 2px;
}

/* Estilo DEV para Embed Code (Mesmo do Widget Ping Map) */
.dev-embed-wrapper { background: #0b0e11; border: 1px solid rgba(255,255,255,0.08); border-radius: 8px; padding: 20px; margin-top: 15px; }
.dev-controls-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; flex-wrap: wrap; gap: 15px; }
.dev-label-title { font-size: 0.9rem; font-weight: 600; color: #e6edf3; display: flex; align-items: center; gap: 8px; }
.dev-controls-group { display: flex; gap: 10px; }
.dev-select-box { display: flex; align-items: center; gap: 8px; background: #161a1e; padding: 4px 12px; border-radius: 4px; border: 1px solid rgba(255,255,255,0.05); }
.dev-select-label { font-size: 11px; font-weight: 700; color: #848e9c; text-transform: uppercase; }
.dev-select { background: transparent; border: none; color: #FCD535; font-size: 13px; font-weight: 500; cursor: pointer; outline: none; }
.dev-select option { background: #161a1e; color: #fff; }
.dev-code-wrap { position: relative; background: #161a1e; border: 1px solid rgba(255,255,255,0.05); border-radius: 8px; padding: 0; overflow: hidden; }
.dev-code-pre { background: #161a1e !important; padding: 1.25rem !important; padding-right: 5rem !important; margin: 0; font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace; font-size: 0.85rem; color: #a9b7c6; line-height: 1.5; white-space: pre-wrap; word-break: break-all; max-height: 120px; overflow-y: auto !important; }
.dev-btn-copy { position: absolute; top: 12px; right: 12px; z-index: 10; background: rgba(255, 193, 7, 0.1); border: 1px solid rgba(255, 193, 7, 0.2); color: #FCD535; font-size: 0.75rem; font-weight: 600; padding: 4px 12px; border-radius: 4px; cursor: pointer; transition: all 0.2s; display: flex; align-items: center; gap: 6px; }
.dev-btn-copy:hover { background: rgba(255, 193, 7, 0.2); transform: translateY(-1px); color: #fff; }
.dev-copy-feedback { position: absolute; top: 15px; right: 90px; font-size: 11px; color: #2ea043; font-weight: 600; opacity: 0; transition: opacity 0.3s; pointer-events: none; }
.dev-copy-feedback.show { opacity: 1; }

/* Estilo para Host Information */
.host-info-detailed .info-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    padding: 10px;
    margin-bottom: 8px;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 10px;
}
.host-info-detailed .info-card:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.12);
    transform: translateY(-1px);
}
.host-info-detailed .info-icon {
    font-size: 1rem;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}
.host-info-detailed .info-icon.ip { background: rgba(0, 255, 136, 0.2); color: #00ff88; box-shadow: 0 0 8px rgba(0, 255, 136, 0.4); }
.host-info-detailed .info-icon.port { background: rgba(255, 215, 0, 0.2); color: #ffd700; box-shadow: 0 0 8px rgba(255, 215, 0, 0.4); }
.host-info-detailed .info-icon.isp { background: rgba(52, 152, 219, 0.2); color: #3498db; box-shadow: 0 0 8px rgba(52, 152, 219, 0.4); }
.host-info-detailed .info-icon.org { background: rgba(155, 89, 182, 0.2); color: #9b59b6; box-shadow: 0 0 8px rgba(155, 89, 182, 0.4); }
.host-info-detailed .info-icon.country { background: rgba(46, 204, 113, 0.2); color: #2ecc71; box-shadow: 0 0 8px rgba(46, 204, 113, 0.4); }
.host-info-detailed .info-icon.region { background: rgba(231, 76, 60, 0.2); color: #e74c3c; box-shadow: 0 0 8px rgba(231, 76, 60, 0.4); }
.host-info-detailed .info-icon.city { background: rgba(241, 196, 15, 0.2); color: #f1c40f; box-shadow: 0 0 8px rgba(241, 196, 15, 0.4); }
.host-info-detailed .info-icon.timezone { background: rgba(155, 89, 182, 0.2); color: #9b59b6; box-shadow: 0 0 8px rgba(155, 89, 182, 0.4); }
.host-info-detailed .info-icon.coords { background: rgba(231, 76, 60, 0.2); color: #e74c3c; box-shadow: 0 0 8px rgba(231, 76, 60, 0.4); }
.host-info-detailed .info-icon.asn { background: rgba(52, 73, 94, 0.2); color: #34495e; box-shadow: 0 0 8px rgba(52, 73, 94, 0.4); }
.host-info-detailed .info-content {
    flex: 1;
}
.host-info-detailed .info-label {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-bottom: 2px;
    font-weight: 600;
}
.host-info-detailed .info-value {
    font-size: 0.8rem;
    color: #fff;
    font-weight: 500;
}

/* Experience Stages Styles */
.stage-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 15px;
    transition: all 0.3s ease;
    margin-bottom: 10px;
}
.stage-card:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.stage-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}
.stage-level {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 500;
}
.stage-multiplier {
    font-size: 0.9rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.1);
}
.stage-multiplier.text-success {
    color: #28a745;
    background: rgba(40, 167, 69, 0.2);
}
.stage-multiplier.text-warning {
    color: #ffc107;
    background: rgba(255, 193, 7, 0.2);
}
.stage-multiplier.text-info {
    color: #17a2b8;
    background: rgba(23, 162, 184, 0.2);
}
.stage-multiplier.text-secondary {
    color: var(--text-secondary);
    background: rgba(108, 117, 125, 0.2);
}
.stage-progress {
    margin-top: 8px;
}
.progress-bar.bg-gradient {
    background: linear-gradient(90deg, #28a745, #ffc107, #dc3545) !important;
}

/* ===== CARDS ===== */
.card {
    background: var(--bg-base-server-list);
    border: solid 1px #333b47d4;
    border-radius: 0;
    padding: 20px;
    transition: all var(--transition-fast);
}
.card:hover {
    /*border-color: var(--accent-color);*/
}

/* ===== BUTTONS ===== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    border: 1px solid transparent;
}
.btn:hover {
    background: var(--bg-tertiary);
    border-color: var(--accent-color);
    color: var(--accent-white);
}

/* ===== BADGES ===== */
.mini-badge {
    padding: 1px 8px;
    border-radius: 4px;
    font-size: 0.6rem;
    font-weight: 600;
}

.badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-secondary);
    line-height: 1.2;
    border-radius: var(--radius-std);
    padding: 4px 8px;
    font-size: 0.7rem;
    font-weight: 600;
}

.badge.online {
    background: rgba(16, 185, 129, 0.1);
    color: var(--accent-color);
}

.badge.offline {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.badge.highlighted {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.1), rgba(255, 165, 0, 0.1));
    color: #fbbf24;
}

/* ===== TABLES ===== */
.table {
    width: 100%;
    border-collapse: collapse;
}

.table th,
.table td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid #3232382e;
}

.table th {
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.5px;
}

.table td {
    color: var(--accent-white);
}

.table tbody tr:hover {
    background: var(--bg-tertiary);
}

/* ===== FORMS ===== */
.form-group {
    margin-bottom: 20px;
}

.form-label {
    display: block;
    margin-bottom: 8px;
    color: var(--accent-white);
    font-weight: 500;
    font-size: 0.9rem;
}

/* ===== DROPDOWNS ===== */
.dropdown-menu {
    background: var(--bg-card-secondary);
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    padding: 8px;
}

.dropdown-item {
    padding: 10px 12px;
    color: var(--accent-white);
    text-decoration: none;
    display: block;
    transition: all var(--transition-fast);
}

.dropdown-item:hover {
    background: var(--bg-tertiary);
    color: var(--accent-color);
}

/* ===== ALERTS ===== */
.alert {
    padding: 16px 20px;
    border: 1px solid;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
}

.alert-success {
    background: #000000;
    border-color: var(--accent-color);
    color: var(--accent-color);
}

.alert-error {
    background: rgba(239, 68, 68, 0.1);
    border-color: #ef4444;
    color: #ef4444;
}

.alert-warning {
    background: rgba(251, 191, 36, 0.1);
    border-color: #fbbf24;
    color: #fbbf24;
}

.alert-info {
    background: rgba(59, 130, 246, 0.1);
    border-color: #3b82f6;
    color: #3b82f6;
}

/* ===== SPINNERS ===== */
.spinner {
    width: 24px;
    height: 24px;
    border: 3px solid var(--border-color);
    border-top-color: var(--accent-color);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ===== DIVIDERS ===== */
hr, .divider {
    border: 0;
    height: 1px;
    background: var(--border-color);
    margin: 20px 0;
}

.divider-accent {
    background: linear-gradient(
        to right,
        transparent,
        var(--accent-color),
        transparent
    );
    opacity: 0.3;
}

/* ===== TOOLTIPS ===== */
[data-tooltip] {
    position: relative;
}

[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-8px);
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-std);
    padding: 6px 12px;
    font-size: 0.75rem;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-fast);
}

[data-tooltip]:hover::after {
    opacity: 1;
}

/* ============================================================================
   FOOTER
   ============================================================================ */

.site-footer {
    background: var(--nav-bars);
    border-top: 10px solid var(--bg-input);
}

.footer-content {
    width: 100%;
}

/* Footer Sections */
.footer-section {
    margin-bottom: 50px;
    margin-top: 50px;
}

.footer-section-header {
    text-align: center;
    margin-bottom: 60px;
}

.section-title-group {
    gap: 12px;
    margin-bottom: 8px;
}

.section-icon {
    color: var(--accent-primary);
    flex-shrink: 0;
}

.section-title {
    margin-top: 20px;
    color: var(--accent-white);
    /* margin: 0; */
    text-transform: uppercase;
    letter-spacing: 1px;
    /*font-family: 'Montserrat';*
    font-weight: 900;
    font-size: 1.4rem;
}

.section-subtitle {
    font-size: 0.875rem;
    color: var(--text-muted);
    margin: 0;
    padding-left: 32px; /* Alinha com o título */
}

.footer-divider {
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--border-color) 20%,
        var(--border-color) 80%,
        transparent 100%
    );
    margin: 50px 0;
}

.ribbon-wrapper-left {
    position: absolute;
    top: 0;
    left: 0;
    width: 85px;
    height: 85px;
    overflow: hidden;
    z-index: 5;
    pointer-events: none;
}

.ribbon-left {
    position: absolute;
    top: 5px;
    left: -46px;
    width: 120px;
    height: 30px;
    background-color: #333;
    background-size: cover;
    background-position: center;
    transform: rotate(-45deg);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5);
    z-index: 10;
}

.text-cyan {
    color: #00E5FF !important;
    font-weight: 800;
}

/* Estilo para o Título Centralizado (Mais fino e moderno) */
.promotional-title-compact {
    font-family: 'Rajdhani', sans-serif !important;
    font-weight: 500 !important;
    letter-spacing: 4px !important; /* Estilo futurista */
    text-transform: uppercase;
    color: #FFFFFF;
}

.artifact-mini-container {
    width: 80px; /* Aumentado de 60px */
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    perspective: 1000px;
    margin-right: -10px; /* Ajuste para não empurrar o layout */
}

.micro-universe {
    top: -6px;
    position: relative;
    width: 65px; /* Universo maior */
    height: 65px;
    transform: rotateX(65deg) rotateY(-15deg);
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Núcleo Central mais nítido */
.center-star {
    position: absolute;
    top: 50%; left: 50%;
    width: 8px; height: 8px;
    background: #7a8494; /* Cinza mais claro para nitidez */
    border-radius: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.2);
    transition: all 0.4s ease;
}

/* Caminhos das Órbitas (Mais nítidos) */
.orbit-path {
    position: absolute;
    top: 50%; left: 50%;
    border: 1.5px solid rgba(122, 132, 148, 0.3); /* Linha levemente mais grossa e clara */
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: all 0.4s ease;
}

.ring-1 { width: 22px; height: 22px; animation: rotatePlanets 5s linear infinite; }
.ring-2 { width: 42px; height: 42px; animation: rotatePlanets 9s linear infinite reverse; }
.ring-3 { width: 62px; height: 62px; animation: rotatePlanets 15s linear infinite; } /* Órbita externa lenta */

/* Estilo dos Planetas */
.planet {
    position: absolute;
    top: -3px; /* Centralizado na linha de 1.5px */
    left: 50%;
    background: #7a8494;
    border-radius: 50%;
    transform: translateX(-50%);
    transition: all 0.4s ease;
}

.p1 { width: 5px; height: 5px; }
.p2 { width: 4px; height: 4px; }
.p3 { width: 3px; height: 3px; opacity: 0.8; } /* Planeta externo menor e sutil */

/* --- INTERAÇÃO HOVER (MODO ATIVO) --- */

.artifact-mini-container:hover .micro-universe {
    transform: rotateX(0deg) rotateY(0deg) scale(1.1);
}

.artifact-mini-container:hover .center-star {
    background: #00E5FF;
    box-shadow: 0 0 15px #00E5FF, 0 0 30px rgba(0, 229, 255, 0.4);
}

.artifact-mini-container:hover .orbit-path {
    border-color: rgba(0, 229, 255, 0.4);
}

.artifact-mini-container:hover .planet {
    background: #00E5FF;
    box-shadow: 0 0 10px #00E5FF;
}

/* Animação de Rotação */
@keyframes rotatePlanets {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Ajuste no alinhamento da linha do Cockpit */
.cockpit-header-row {
    padding: 18px 0 0 0;
}
.tech-server-svg {
    shape-rendering: geometricPrecision;
    width: 100%;
    max-height: 90px !important;
    filter: drop-shadow(0 0 10px rgba(0, 229, 255, 0.3));
    cursor: pointer;
}

.brand-icon {
    color: var(--accent-primary);
}

.brand-text {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--accent-white);
    letter-spacing: 1px;
}

.brand-highlight {
    color: var(--accent-primary);
}

.copyright {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin: 0;
}

.visitor-stats {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.stat-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.stat-item svg {
    color: var(--accent-primary);
}

.stat-separator {
    color: var(--border-color);
}

/* ===== PARTNERS SECTION ===== */
.partners-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.partner-item {
    display: flex;
    align-items: center;
    justify-content: center;
    /* padding: 20px; */
    /*background: var(--bg-card-secondary);*/
    /* border: 1px solid var(--border-color); */
    /* border-radius: var(--radius-std); */
    transition: all var(--transition-fast);
}
.partner-item:hover {
    border-color: var(--accent-color);
}
.partner-image {
    max-width: 100%;
    height: auto;
    max-height: 60px;
    object-fit: contain;
    filter: grayscale(100%);
    opacity: 0.6;
    transition: all var(--transition-fast);
}
.partner-item:hover .partner-image {
    filter: grayscale(0%);
    opacity: 1;
}



/* Favorites Sidebar (Modern Minimalist Style) - Discord Color Palette */
/* 1. Container Principal (Apenas estrutura, sem cores) */


/* Quando expandido, remover o translateX */
.favorites-sidebar:not(.collapsed) {
    transform: translateX(0);
}

/* Mostrar sidebar quando JavaScript estiver pronto */
body.favorites-sidebar-ready .favorites-sidebar {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Container com scroll para o conteúdo do sidebar */
.favorites-sidebar-content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0;
    gap: 0;
    border-right: 1px solid rgb(255 255 255 / 7%) !important;
    box-shadow: 4px 0px 20px rgb(0 0 0 / 21%);
}

/* Estado colapsado */
.favorites-sidebar.collapsed {
    transform: translateX(-70px) !important;
    overflow: visible; /* Manter visível para a seta */
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.favorites-sidebar-logo .cssLogo {
    width: 50px !important;
    height: 50px !important;
    /*
    filter: drop-shadow(0 0 10px rgba(0, 229, 255, 0.8)) 
            drop-shadow(0 0 20px rgba(0, 229, 255, 0.6))
            drop-shadow(0 0 30px rgba(0, 229, 255, 0.4));
    animation: logo-pulse 2s ease-in-out infinite alternate;
    */
    transition: all 0.3s ease;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

.logo-neon-box {
    width: 40px;
    height: 40px;
    /* border: 1px solid #00E5FF; */
    border-radius: 8px;
    /* box-shadow: 0 0 15px rgba(0, 229, 255, 1), inset 0 0 15px rgba(0, 229, 255, 0.4); */
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    position: relative;
}



@keyframes logo-pulse {
    0% {
        filter: drop-shadow(0 0 10px rgba(0, 229, 255, 0.8)) 
                drop-shadow(0 0 20px rgba(0, 229, 255, 0.6))
                drop-shadow(0 0 30px rgba(0, 229, 255, 0.4));
    }
    100% {
        filter: drop-shadow(0 0 15px rgba(0, 229, 255, 1)) 
                drop-shadow(0 0 30px rgba(0, 229, 255, 0.8))
                drop-shadow(0 0 45px rgba(0, 229, 255, 0.6));
    }
}

.favorites-divider {
    height: 1px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        var(--border-color) 20%, 
        var(--border-color) 80%, 
        transparent 100%
    );
    margin: 0 16px 16px 16px;
    opacity: 0.6;
    position: relative;
}

.favorites-divider::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 2px;
    background: linear-gradient(90deg, 
        transparent, 
        rgba(0, 229, 255, 0.3), 
        transparent
    );
    border-radius: 1px;
}

.favorites-sidebar.collapsed .favorites-list,
.favorites-sidebar.collapsed .useful-links-section,
.favorites-sidebar.collapsed .favorites-divider {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.favorites-list,
.useful-links-section,
.favorites-divider,
.favorites-sidebar-logo {
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Garantir que a seta sempre fique visível mesmo quando colapsado - apenas pontinha */
.favorites-sidebar.collapsed .favorites-sidebar-toggle {
    background-color: var(--bg-primary) !important;
    border-right: 1px solid var(--border-color) !important;
    backdrop-filter: blur(6px);
    position: fixed !important;
    left: 69px !important;
    top: 50vh !important;
    transform: translateY(-50%) !important;
    z-index: 1000 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
    cursor: default;
    /* transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important; */
    display: flex !important;
    visibility: visible !important;
}



.favorites-sidebar.collapsed .favorites-sidebar-toggle .toggle-icon {
    transform: rotate(180deg) !important;
    margin-left: 0 !important;
    width: 16px !important;
    height: 16px !important;
    color: var(--text-secondary) !important;
}

.favorites-sidebar-toggle {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    pointer-events: none !important;
}

.favorites-sidebar-toggle .toggle-icon {
    width: 20px;
    height: 20px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: center;
    position: relative;
    z-index: 2;
}

/* Efeito de hover com gradiente sutil */
.favorites-sidebar-toggle:hover {
    background: var(--bg-primary);
    border-color: var(--accent-color);
    /*width: 40px;*/
}

.favorites-sidebar-toggle:hover .toggle-icon {
    transform: scale(1.15) translateX(2px);
    filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.2));
    color: var(--accent-color);
}

/* Classe para destacar a borda da sidebar */
.favorites-sidebar.highlight-border {
    border-right: 1px solid var(--accent-color) !important;
}

.favorites-sidebar-toggle:active {
    transform: translateY(calc(-50% + 1px));
    box-shadow: 0 2px 6px rgba(252, 213, 53, 0.2);
}

/* Quando colapsado, ajustar estilo do botão */
.favorites-sidebar.collapsed .favorites-sidebar-toggle {
    left: 0;
    border-radius: 0 12px 12px 0;
    background: rgba(252, 213, 53, 0.1);
    border: 1px solid rgba(252, 213, 53, 0.2);
    border-left: none;
    box-shadow: 4px 0 12px rgba(0, 0, 0, 0.1);
}

/* Rotação do ícone quando colapsado */
.favorites-sidebar.collapsed .favorites-sidebar-toggle .toggle-icon {
    transform: rotate(180deg);
}
/* Efeito de hover quando colapsado */
.favorites-sidebar.collapsed .favorites-sidebar-toggle:hover {
    width: 40px !important;
    color: var(--text-secondary) !important;
    /* background: linear-gradient(135deg, rgba(252, 213, 53, 0.9) 0%, rgba(252, 213, 53, 0.7) 100%) !important; */
    border-color: var(--accent-color) !important;
    /* box-shadow: 0 0 20px rgba(252, 213, 53, 0.4) !important; */
}

/* Ajuste do ícone no hover quando colapsado */
.favorites-sidebar.collapsed .favorites-sidebar-toggle:hover .toggle-icon {
    color: var(--text-secondary) !important;
    /* color: var(--bg-primary) !important; */
    transform: rotate(180deg) scale(1.15) translateX(2px);
    filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.2));
}

/* 1. Elemento Pai: Limpa o visual, mantém espaçamento */
.my-panel-card {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important; /* Garante que não tenha sombra duplicada */
    
    padding: 20px !important;
    position: relative;
    isolation: isolate;
}

.my-panel-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--bg-base-server-list, #36393f) !important;
    border: 1px solid #333b47d4;
    border-radius: 0px;
    /* -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 80px, black 100%); */
    /* mask-image: linear-gradient(to bottom, transparent 0%, black 80px, black 100%); */
    pointer-events: none;
}

.my-panel-card .text-muted {
    color: #b7bdc6 !important;
    font-size: 0.8rem !important;
    margin-bottom: 0.5rem !important;
}
/* Último login - cor clara */
.my-panel-card small.text-muted {
    color: #b7bdc6 !important;
}



.my-mid-panel-card {
    background: var(--bg-base-server-list);
    border: solid 1px #333b47d4 !important;
    border-radius: 0px 0px 10px 10px;
    padding: 20px !important;
}
.my-mid-panel-card .text-muted {
    color: #b7bdc6 !important;
    font-size: 0.8rem !important;
    margin-bottom: 0.5rem !important;
}

/* Último login - cor clara */
.my-mid-panel-card small.text-muted {
    color: #b7bdc6 !important;
}

/* Activity description - cor clara */
#activity .text-muted {
    color: #b7bdc6 !important;
}

.bg-success-subtle-custom {
    background-color: #00ff4024;
}
.bg-danger-subtle-custom {
    background-color: #ff03031f;
}
.text-muted {
    color: var(--text-secondary) !important;
}
.text-secondary {
    color: var(--text-secondary) !important;
}


/* Cards do painel - compactação */
.my-panel-card .card-body {
    padding: 0.75rem !important;
}

.my-panel-card .card-title {
    font-size: 1rem !important;
    margin-bottom: 0.5rem !important;
    line-height: 1.3 !important;
}

/* Espaçamento entre seções do card */
.my-panel-card .mb-3 {
    margin-bottom: 0.75rem !important;
}

.my-panel-card .pb-3 {
    padding-bottom: 0.75rem !important;
}

.my-panel-card .border-bottom {
    margin-bottom: 0.75rem !important;
    padding-bottom: 0.75rem !important;
}

 
.my-panel-card .d-flex.gap-2 {
    gap: 0.5rem !important;
    margin-top: 0.5rem !important;
}

/* Menu compacto */
#panel-nav .card-body {
    padding: 0.75rem !important;
}

#panel-nav .card-title {
    font-size: 1rem !important;
    margin-bottom: 0.5rem !important;
    line-height: 1.3 !important;
}

/* Separadores compactos */
#panel-nav hr {
    margin: 0.5rem 0 !important;
}

/* Alertas compactos */
.alert {
    padding: 0.75rem 1rem !important;
    margin-bottom: 0.75rem !important;
}

.alert-heading {
    font-size: 1rem !important;
    margin-bottom: 0.25rem !important;
    line-height: 1.3 !important;
}

.alert p {
    margin-bottom: 0.5rem !important;
    font-size: 0.85rem !important;
    line-height: 1.3 !important;
}

/* Activity section - compactação */
#activity .d-flex.justify-content-between {
    margin-bottom: 0.75rem !important;
}

#activity .card-title {
    margin-bottom: 0.25rem !important;
}

/* Lista de atividades compacta */
.activity-list {
    max-height: 500px !important;
}

.activity-item {
    padding: 0.5rem 0.75rem !important;
    margin-bottom: 0.5rem !important;
}

/* Uso horizontal otimizado */
.panel-section .d-flex {
    flex-wrap: nowrap !important;
}

.panel-section .d-flex.align-items-center {
    gap: 0.5rem !important;
}

/* Textos inline compactos */
.panel-section .d-flex.justify-content-between {
    margin-bottom: 0.5rem !important;
}

.panel-section .d-flex.justify-content-between:last-child {
    margin-bottom: 0 !important;
}

/* Dropdown Admin */
.admin-dropdown {
    position: relative;
}

.admin-dropdown-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: default;
    width: 100%;
    color: #FCD535 !important;
    font-weight: 600 !important;
    background: rgba(252, 213, 53, 0.1) !important;
    border-left: 2px solid #FCD535 !important;
    margin-bottom: 0 !important;
    padding: 0.5rem 0.75rem !important;
    transition: background-color 0.2s ease, box-shadow 0.2s ease !important;
    border-radius: 0 !important;
    box-shadow: inset 0 0 0 0 transparent;
    font-size: 0.9rem !important;
    line-height: 1.3 !important;
}

.admin-dropdown-toggle:hover {
    background: rgba(252, 213, 53, 0.15) !important;
    box-shadow: inset 1px 0 0 0 #FCD535;
}

.admin-dropdown-arrow {
    font-size: 0.7rem;
    margin-left: auto;
    pointer-events: none;
    color: #FCD535;
    transition: opacity 0.2s ease;
}

.admin-dropdown.active .admin-dropdown-arrow {
    opacity: 0.7;
}

.admin-dropdown-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-top: none;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.25s ease, opacity 0.25s ease;
    opacity: 0;
}

.admin-dropdown.active .admin-dropdown-menu {
    max-height: 500px;
    opacity: 1;
    overflow-y: visible;
}

.admin-dropdown-item {
    display: flex;
    align-items: center;
    padding: 0.5rem 0.75rem;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.85rem;
    transition: background-color 0.2s ease, border-left-width 0.2s ease, color 0.2s ease, padding-left 0.2s ease;
    border-left: 2px solid transparent;
    background: transparent;
    border-radius: 0 !important;
    line-height: 1.3 !important;
}

.admin-dropdown-item:hover {
    background: rgba(252, 213, 53, 0.1);
    color: #FCD535;
    border-left-width: 3px;
    border-left-color: #FCD535;
    padding-left: calc(1rem + 1px);
}

.admin-dropdown-item.active {
    background: rgba(252, 213, 53, 0.15);
    color: #FCD535;
    border-left-width: 3px;
    border-left-color: #FCD535;
    font-weight: 600;
    padding-left: calc(1rem + 1px);
}

.admin-dropdown-item i {
    width: 16px;
    text-align: center;
    font-size: 0.75rem;
    margin-right: 0.5rem;
    transition: color 0.2s ease;
}

.admin-dropdown-item:hover i,
.admin-dropdown-item.active i {
    color: #FCD535;
}

/* Menu Principal - Links de Navegação (CORRIGIDO PARA O NOVO PAINEL) */
/* Aplica tanto para o menu de usuário quanto admin */
#panel-nav-user .nav-item,
#panel-nav-admin .nav-item {
    margin-bottom: 0;
}

/* painel admin */
.panel-section .card-body {
    padding: 1rem !important;
}

.panel-section .card-title {
    margin-bottom: 0.5rem !important;
    font-size: 1.1rem !important;
    line-height: 1.3 !important;
}

.panel-section h3.card-title {
    font-size: 1.15rem !important;
    margin-bottom: 0.5rem !important;
}

.panel-section h4.card-title {
    font-size: 1.05rem !important;
    margin-bottom: 0.5rem !important;
}
.panel-section .text-muted,
.panel-section p.text-muted,
.panel-section small.text-muted {
    color: #b7bdc6 !important;
    font-size: 0.8rem !important;
}
#panel-nav .btn,
.panel-section .btn,
.card .btn {
    border-radius: 0px;
    border: 1px solid transparent;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, border-width 0.2s ease;
}
.panel-section .d-flex {
    flex-wrap: nowrap !important;
}
.panel-section .d-flex.align-items-center {
    gap: 0.5rem !important;
}
.panel-section .d-flex.justify-content-between {
    margin-bottom: 0.5rem !important;
}
.panel-section .d-flex.justify-content-between:last-child {
    margin-bottom: 0 !important;
}


/* Botão Primário */
.btn-primary,
.btn-buy-credits {
    background-color: #FCD535 !important;
    border-color: #FCD535 !important;
    color: #0b0e11 !important;
    font-weight: 600;
}

.btn-primary:hover,
.btn-buy-credits:hover {
    background-color: #F0B90B !important;
    border-color: #F0B90B !important;
}

/* Botão Outline/Secundário */
.btn-outline-primary, .btn-outline-secondary, .btn-modern-clean {
    border-color: var(--border-color) !important;
    color: var(--accent-white) !important;
    background: #52565c !important;
    border: 1.5px solid rgba(255, 255, 255, 0.05) !important;
}

.btn-outline-primary:hover,
.btn-outline-secondary:hover,
.btn-modern-clean:hover, .btn-secondary:hover {
    background: #6d7177 !important;
    border-color: #909090 !important;
    color: #ffffff !important;
}

/* Botão Danger */
.btn-danger,
.btn-outline-danger {
    background-color: transparent !important;
    border-color: #F6465D !important;
    color: #F6465D !important;
}

.btn-danger:hover,
.btn-outline-danger:hover {
    background-color: rgba(246, 70, 93, 0.1) !important;
}

/* Botão Success */
.btn-success {
    background-color: #0ECB81 !important;
    border-color: #0ECB81 !important;
    color: #0b0e11 !important;
}

.btn-success:hover {
    background-color: #0db874 !important;
    border-color: #0db874 !important;
}

/* Botão Info/Warning */
.btn-info {
    background-color: transparent !important;
    border-color: #3b82f6 !important;
    color: #3b82f6 !important;
}

.btn-info:hover {
    background-color: rgba(59, 130, 246, 0.1) !important;
}

.btn-warning {
    background-color: #FCD535 !important;
    border-color: #FCD535 !important;
    color: #0b0e11 !important;
}

.btn-warning:hover {
    background-color: #F0B90B !important;
    border-color: #F0B90B !important;
}

/* Otimização de espaço horizontal - usar toda largura disponível */
.panel-section .row {
    margin-left: 0;
    margin-right: 0;
}

.panel-section .col,
.panel-section [class*="col-"] {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

/* Textos inline compactos - usar espaço horizontal */
.panel-section .d-flex.align-items-center {
    flex-wrap: nowrap;
    gap: 0.5rem;
}

/* Inputs e form controls compactos */
.panel-section .form-control,
.panel-section .form-select {
    padding: 0.4rem 0.75rem;
    font-size: 0.85rem;
    line-height: 1.3;
    border-radius: 0;
}

/* Tabelas compactas */
.panel-section table {
    font-size: 0.85rem;
}

.panel-section table th,
.panel-section table td {
    padding: 0.5rem 0.75rem;
    vertical-align: middle;
}

/* Spinners e loaders compactos */
.panel-section .spinner-border {
    width: 1.5rem;
    height: 1.5rem;
    border-width: 0.15rem;
}

/* Gráficos compactos */
#activity-chart-container {
    margin-bottom: 1rem !important;
}

/* Listas compactas */
.panel-section ul,
.panel-section ol {
    margin-bottom: 0.5rem;
    padding-left: 1.25rem;
}

.panel-section li {
    margin-bottom: 0.25rem;
    line-height: 1.3;
}

/* =========================================
   SWITCH DE MODO (USER / ADMIN)
   ========================================= */
.panel-mode-switch-container {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Estilizando o Checkbox como um Switch Moderno */
.custom-mode-switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 24px;
}

.custom-mode-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.mode-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--bg-gray-checkbox); /* Cor Fundo Desativado */
    border: 1px solid var(--border-color);
    transition: .4s;
    border-radius: 34px;
}
.mode-slider:hover {
    background-color: #5e6269;  
}

.mode-slider:before {
    position: absolute;
    content: "\f007"; /* FontAwesome User Icon */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 2px;
    background-color: #b7bdc6;
    color: var(--bg-card);
    transition: .4s;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
}

/* Estado Ativo (Admin) */
.custom-mode-switch input:checked + .mode-slider {
    background-color: rgba(252, 213, 53, 0.15);
    border-color: #FCD535;
}

.custom-mode-switch input:checked + .mode-slider:before {
    transform: translateX(24px);
    background-color: #FCD535;
    content: "\f3ed"; /* FontAwesome Shield Icon */
    color: #000;
}

/* Rótulo do Switch */
.switch-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    transition: color 0.3s ease;
}

.custom-mode-switch input:checked ~ .switch-label.admin-label {
    color: #FCD535;
}

.custom-mode-switch input:not(:checked) ~ .switch-label.user-label {
    color: var(--accent-white);
}

/* Animação de fade para as listas */
.menu-list-container {
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.menu-list-container.hidden {
    display: none;
    opacity: 0;
    transform: translateX(-10px);
}
.menu-list-container.visible {
    display: block;
    opacity: 1;
    transform: translateX(0);
    animation: fadeInList 0.3s forwards;
}

@keyframes fadeInList {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}

/* =========================================
   MENU HORIZONTAL ACIMA DA COL-MD-9
   ========================================= */

/* Container do Menu Horizontal */
.horizontal-menu-container {
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.horizontal-menu-container.hidden {
    display: none;
    opacity: 0;
    transform: translateY(-10px);
}

.horizontal-menu-container.visible {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

/* Navegação Horizontal */
.horizontal-nav {
    width: 100%;
}

.horizontal-nav .nav {
    gap: 0.5rem;
    flex-wrap: wrap;
}

.horizontal-nav .nav-item {
    flex: 1;
    min-width: 0;
}

.horizontal-nav .nav-link {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 0.75rem;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: 500;
    transition: all 0.2s ease;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-big);
    background: transparent;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 38px;
}

.horizontal-nav .nav-link:hover {
    background: rgba(252, 213, 53, 0.1);
    color: #FCD535;
    border-color: #FCD535;
}

.horizontal-nav .nav-link.active {
    background: rgba(252, 213, 53, 0.15);
    color: #FCD535;
    border-color: #FCD535;
    font-weight: 600;
}

.horizontal-nav .nav-link i {
    margin-right: 0.25rem;
    font-size: 0.75rem;
    transition: color 0.2s ease;
}

.horizontal-nav .nav-link:hover i,
.horizontal-nav .nav-link.active i {
    color: #FCD535;
}

/* Responsividade do Menu Horizontal */
@media (max-width: 768px) {
    .horizontal-nav .nav {
        gap: 0.25rem;
    }
    
    .horizontal-nav .nav-link {
        padding: 0.4rem 0.5rem;
        font-size: 0.75rem;
        min-height: 34px;
    }
    
    .horizontal-nav .nav-link i {
        margin-right: 0.2rem;
        font-size: 0.7rem;
    }
    
    .horizontal-nav .nav-link span.d-none.d-md-inline {
        display: none !important;
    }
}

@media (max-width: 576px) {
    .horizontal-nav .nav {
        gap: 0.2rem;
    }
    
    .horizontal-nav .nav-link {
        padding: 0.3rem 0.4rem;
        font-size: 0.7rem;
        min-height: 30px;
        flex: 1;
    }
    
    .horizontal-nav .nav-link i {
        margin-right: 0.1rem;
        font-size: 0.65rem;
    }
}

/* Ajuste para cards com menu horizontal */
.col-md-9 .card:first-child {
    margin-top: 0;
}

/* Sincronização visual com menu lateral */
.horizontal-nav .nav-link.active {
    box-shadow: inset 0 0 0 1px rgba(252, 213, 53, 0.3);
}

/* Indicador de verificação de email */
#email-verification-status {
    transition: opacity 0.2s ease;
    user-select: none;
}

#email-verification-status.email-not-verified-clickable {
    cursor: pointer;
}

#email-verification-status.email-not-verified-clickable:hover {
    opacity: 0.8;
    text-decoration: underline;
}

#user-activity-list {
    max-height: 500px; /* Altura máxima */
    overflow-y: auto;  /* Barra de rolagem se passar disso */
    padding-right: 5px; /* Espaço para a barra não colar no texto */
}

#user-activity-list::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
}
.activity-item-hover {
    transition: background-color 0.2s ease;
}
.activity-item-hover:hover {
    background-color: rgba(255, 255, 255, 0.03) !important; /* Leve brilho ao passar o mouse */
}

.email-row-container {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100%;
    gap: 12px; /* Garante um respiro entre o email e o status */
}

.email-truncate-wrapper {
    display: flex;
    align-items: center;
    min-width: 0; /* ESSENCIAL: Permite que o flex item encolha */
    flex: 1;      /* Ocupa todo o espaço sobrando */
}

.email-text-content {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* Adiciona ... se o email for gigante */
    color: #b7bdc6 !important;
    font-size: 0.8rem !important;
}

/* Status do Email */
#email-verification-status {
    white-space: nowrap !important; /* Impede que "Não verificado" quebre em 2 linhas */
    flex-shrink: 0; /* Garante que o status nunca seja esmagado */
    font-size: 0.75rem !important;
    margin-left: auto;
}






/* CARD E ESTRUTURA */
.binance-card {
    background-color: var(--header-primary) !important;
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: var(--radius-big);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    display: flex;
    flex-direction: column;
    height: 100%;
}

.binance-header {
    border-bottom: 1px solid rgba(255,255,255,0.05);
    padding: 16px 20px;
    flex-shrink: 0;
}
.binance-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
}
.binance-table-wrapper {
    overflow-x: auto;
}
.binance-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem; /* Fonte menor para densidade */
}
.binance-table th {
    text-align: left;
    color: var(--text-muted);
    font-weight: 500;
    padding: 0.5rem;
    border-bottom: 1px solid var(--border-color);
}
.binance-table td {
    padding: 0.6rem 0.5rem; /* Compacto */
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-color-light);
    transition: background 0.2s;
}
.binance-table tr:hover td {
    background: var(--bg-hover); /* Efeito hover estilo Binance */
    cursor: pointer;
}
/* Status Badges */
.badge-binance {
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}
.badge-open { background: rgba(14, 203, 129, 0.15); color: #0ecb81; } /* Verde Binance */
.badge-closed { background: rgba(112, 122, 138, 0.15); color: #707a8a; } /* Cinza */
.badge-pending { background: rgba(240, 185, 11, 0.15); color: #f0b90b; } /* Amarelo Binance */
/* Tabela de Tickets Estilo Binance */
.binance-ticket-table {
    width: 100%;
    border-collapse: collapse;
}

.binance-ticket-table th {
    background: rgba(255,255,255,0.02);
    color: var(--text-muted);
    font-size: 0.75rem;
    text-transform: uppercase;
    font-weight: 600;
    border-bottom: 1px solid var(--border-color);
    padding: 12px 15px;
}

.binance-ticket-table td {
    color: var(--text-main);
    font-size: 0.85rem;
    padding: 12px 15px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    vertical-align: middle;
    cursor: pointer;
}

/* Hover Effect na Linha */
.binance-ticket-table tr:hover td {
    background-color: rgba(252, 213, 53, 0.05); /* Amarelo muito suave */
    color: #fff;
}

@keyframes blink {
    0%, 96%, 100% { opacity: 1; }
    98% { opacity: 0.1; }
}

/* Piscar de olhos (Triste) */
@keyframes mascotSadBlink {
    0%, 90%, 100% { opacity: 1; }
    95% { opacity: 0.3; }
}

/* Flutuar do Zzz (Dormindo) */
@keyframes zzz-drift {
    0% { transform: translate(0, 0) scale(0.8); opacity: 0; }
    30% { transform: translate(5px, -15px) scale(1.1); opacity: 1; }
    100% { transform: translate(10px, -30px) scale(1); opacity: 0; }
}

/* Pop-in dos balões */
@keyframes popIn {
    from { opacity: 0; transform: scale(0.8) translateY(10px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

/* Efeito de Scanline (Linhas descendo - opcional, bem sutil) */
@keyframes scanline-scroll {
    0% { background-position: 0 0; }
    100% { background-position: 0 100%; }
}

/* Cores de status */
.text-success { color: #10b981 !important; }
.text-success.background { background: #10b9811f;  }
.text-success:hover { background: #10b9813b; }

.text-danger {
    color: #ef4444 !important;
    background: #ff00001f;
}
 .text-danger:hover { 
    color: #ff4d45 !important; 
}
 
#hud-search-btn:hover {
    background: rgba(59, 130, 246, 0.2);
    color: #fff;
}

.hud-search-results {
    position: absolute;
    top: calc(100% + 12px); /* Deslocado para baixo para não cobrir o HUD */
    left: -15px; /* Alinha com o início do container arredondado */
    width: calc(100% + 30px);
    background: #0f1118;
    border: 1px solid #3b82f6;
    border-radius: 8px;
    max-height: 300px;
    overflow-y: auto;
    display: none;
    flex-direction: column;
    z-index: 2147483660;
    box-shadow: 0 10px 20px rgba(0,0,0,0.5);
}

/* Correção da Badge de Filtro para não empurrar o layout */
#filter-counter {
    position: relative;
    top: 0;
    right: 0;
    pointer-events: none;
}

.search-result-item {
padding: 10px 15px;
color: #cbd5e1;
font-size: 13px;
cursor: pointer !important;
border-bottom: 1px solid rgba(255,255,255,0.05);
display: flex;
justify-content: space-between;
align-items: center;
transition: background 0.2s;
}

.search-result-item:last-child { border-bottom: none; }
.search-result-item:hover { background: rgba(59, 130, 246, 0.1); color: #fff; }

.search-result-name { font-weight: 700; color: #fff; }
.search-result-info { font-size: 11px; color: #64748b; }
.search-result-highlight { color: #3b82f6; } /* Texto coincidente */

/* Adicione ao final do galaxy.css */
.planet-green {
background-color: #2ecc71 !important; /* Verde */
box-shadow: 0 0 10px #2ecc71, 0 0 20px #2ecc71; /* Brilho */
}

.planet-orange {
background-color: #f1c40f !important; /* Laranja */
box-shadow: 0 0 10px #f1c40f, 0 0 20px #f1c40f;
    background-color: #f1c40f !important; /* Laranja */
    box-shadow: 0 0 10px #f1c40f, 0 0 20px #f1c40f;
}

.planet-red {
    background-color: #e74c3c !important; /* Vermelho */
    box-shadow: 0 0 10px #e74c3c, 0 0 20px #e74c3c;
}

/* Brilho especial para o HUD quando estiver focado em um Buraco Negro */
.search-result-name i.fa-circle-notch {
    color: #fff;
    text-shadow: 0 0 10px #3b82f6;
}
/*ok*/

/* Estilo específico para o menu de filtros */
/* --- HUD FILTER MENU (CLEAN & COMPACT) --- */
#hud-filter-menu {
    position: absolute;
    top: 52px; /* Ajuste fino da distância do botão */
    left: 50%;
    transform: translateX(-50%);
    width: 200px; /* Largura levemente reduzida para ficar mais elegante */
    padding: 4px 0; /* Padding vertical mínimo no container */
    
    background: #0f1118;
    border: 1px solid #3b82f6;
    border-radius: var(--radius-std);
    box-shadow: 0 10px 25px rgba(0,0,0,0.7); /* Sombra mais forte para destaque */
    
    z-index: 2147483660;
    display: none;
    flex-direction: column;
}

/* --- SETA (ARROW) NO TOPO --- */
#hud-filter-menu::before, 
#hud-filter-menu::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-style: solid;
    pointer-events: none; /* Garante que o clique passe */
}

/* Parte de trás da seta (Borda Azul) */
#hud-filter-menu::before {
    top: -7px;
    border-width: 0 7px 7px 7px; /* Triângulo apontando pra cima */
    border-color: transparent transparent #3b82f6 transparent;
    z-index: 1;
}

/* Parte da frente da seta (Fundo Preto - Cobre a borda do menu) */
#hud-filter-menu::after {
    top: -6px; /* 1px abaixo para criar a espessura da borda */
    border-width: 0 6px 6px 6px;
    border-color: transparent transparent #0f1118 transparent;
    z-index: 2;
}

/* --- ITENS DO MENU (ESPAÇAMENTO REDUZIDO) --- */
#hud-filter-menu .search-result-item {
    padding: 6px 12px; /* Reduzido de 10px 15px */
    font-size: 12px;   /* Fonte um pouco menor */
    border-bottom: 1px solid rgba(255,255,255,0.03); /* Divisor mais sutil */
    min-height: 28px;
    transition: background 0.15s ease;
}

#hud-filter-menu .search-result-item:last-child {
    border-bottom: none;
}

#hud-filter-menu .search-result-item:hover {
    background: rgba(59, 130, 246, 0.15);
}

/* Ajuste dos Ícones e Texto */
#hud-filter-menu .search-result-name {
    display: flex;
    align-items: center;
    gap: 8px; /* Espaço consistente entre checkbox/radio e texto */
    font-weight: 600;
}

/* Ícones (Checkboxes/Radios) */
#hud-filter-menu i {
    width: 14px; /* Largura fixa para alinhar texto verticalmente */
    text-align: center;
}

/* Separador (Linha horizontal dentro do menu) */
#hud-filter-menu div[style*="border-top"] {
    margin: 4px 0 !important; /* Reduz a margem do separador */
    border-color: rgba(255,255,255,0.1) !important;
}

#location-hud-panel {
    position: fixed;
    bottom: 30px;
    left: 30px;
    width: 280px;
    background: rgb(9 12 22 / 47%);
    /* backdrop-filter: blur(10px); */
    border: 1px solid rgba(0, 210, 255, 0.3); /* Borda azul tech */
    border-left: 4px solid #00d2ff; /* Detalhe lateral */
    padding: 15px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #fff;
    z-index: 2147483647 !important; /* Fica acima do canvas */
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
    border-radius: 0 10px 0 0; /* Canto cortado estilo sci-fi */
    animation: slideIn 1s ease-out;
    pointer-events: none; /* Deixa clicar através dele se necessário */
    display: none;
}

.hud-header {
    font-size: 10px;
    color: #00d2ff;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 10px;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 8px;
}

.hud-header i { animation: pulse 2s infinite; }

.hud-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    margin-bottom: 2px !important;
}

.hud-label { color: #8899aa; text-transform: uppercase; font-size: 10px; }
.hud-value { font-weight: 600; text-align: right; }
.hud-value.text-blue { color: #00d2ff; }
.hud-value.text-yellow { color: #fbbf24; font-size: 15px; }
.hud-value.big { font-size: 14px; color: #fff; }

.hud-flag {
    width: 20px;
    height: auto;
    margin-right: 8px;
    border-radius: 2px;
}

.hud-row.highlight {
    justify-content: flex-end; /* Alinha cidade à direita */
    margin-top: 5px;
}

.hud-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    margin: 8px 0;
}

@keyframes slideIn {
    from { transform: translateX(50px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}
@keyframes pulse {
    0% { opacity: 0.5; } 50% { opacity: 1; } 100% { opacity: 0.5; }
}

/* =======================================================
   REGISTER PAGE - FINAL SCI-FI REDESIGN (FIXED)
   ======================================================= */

/* --- 1. ESTRUTURA E FUNDO --- */
.register-card {
    background: var(--bg-card) !important; /* #25282D para dark, #FFFFFF para light */
    border: 1px solid var(--border-color) !important; /* #2D333B para dark, #E2E8F0 para light */
    box-shadow: none !important; /* Sem shadow pesado - estilo minimalista */
    border-radius: 10px !important; /* Cantos arredondados modernos */
    position: relative !important;
    overflow: visible !important; 
    z-index: 10;
}

/* Remover linha de luz decorativa - estilo mais limpo */
.register-card::before {
    display: none;
}


/* --- 2. INPUTS --- */
.register-input, 
.form-control, 
select.register-input,
textarea.form-control {
    text-align: left;
    background-color: var(--bg-card-transparent) !important;
    color: var(--accent-white) !important; /* #F2F5F7 para dark, #0F172A para light */
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important; /* Fonte sem serifa */
    font-size: 0.875rem !important;
    padding: 8px 12px;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

/* Foco - Verde esmeralda */
.register-input:focus, 
.form-control:focus {
    background-color: var(--bg-card-transparent) !important;
    color: var(--accent-white) !important;
    outline: none !important;
}

/* Select (Dropdown) Customizado - Verde esmeralda */
select.register-input {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%232ECC71'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 1rem center !important;
    background-size: 1.2em !important;
    padding-right: 2.5rem !important;
} 


.error-side-mascot {
    position: absolute !important;
    top: 150px; /* Fixa a altura em relação ao topo do card */
    left: -140px; /* Puxa para a esquerda (fora do card) */
    width: 120px;
    height: auto;
    z-index: 5; /* Atrás do card (que é 10), mas visível */
    
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: none; /* Deixa clicar através se necessário, mas ativamos nos filhos */
    
    opacity: 0;
    transform: translateX(30px); /* Começa um pouco "dentro" para animar pra fora */
    /* transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); */
}

/* Estado Visível */
.error-side-mascot.show {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
}

/* O Balão de Fala do Erro */
.error-side-mascot .mascot-bubble {
    position: relative !important; /* Relativo ao container do mascote */
    top: auto !important; 
    right: auto !important;
    left: auto !important;
    bottom: 10px !important; /* Espaço entre balão e cabeça */
    
    background: rgba(40, 10, 10, 0.95) !important; /* Fundo avermelhado escuro */
    border: 1px solid #ef4444 !important;
    color: #fca5a5 !important;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 0.8rem;
    box-shadow: 0 5px 15px rgba(239, 68, 68, 0.2);
    min-width: 180px;
    text-align: center;
    margin-bottom: 5px;
}

/* Seta do Balão */
.error-side-mascot .mascot-bubble::after {
    content: '';
    position: absolute;
    bottom: -6px; /* Seta para baixo */
    left: 50%;
    transform: translateX(-50%);
    border-width: 6px 6px 0;
    border-style: solid;
    border-color: #ef4444 transparent transparent transparent !important;
}

/* O Corpo do Mascote */
.error-side-mascot .mascot-body {
    position: relative !important;
    left: 0 !important;
    right: auto !important;
    width: 80px;
    height: 80px;
    filter: drop-shadow(0 0 10px rgba(239, 68, 68, 0.3)); /* Glow vermelho de erro */
}

/* Esconder elementos desnecessários no modo erro */
.error-side-mascot .mascot-connector-line { display: none !important; }

/* Responsividade: No mobile, esconde o mascote lateral para não quebrar a tela */
@media (max-width: 992px) {
    .error-side-mascot { display: none !important; }
}

/* --- 4. DEMAIS ESTILOS --- */
.register-label { 
    color: var(--text-secondary) !important; /* #94A3B8 para dark, #64748B para light */
    font-weight: 600; 
    font-size: 0.875rem; 
    letter-spacing: 0.3px; 
}
.register-label i { 
    color: var(--text-secondary) !important; /* Ícones minimalistas */
    transition: color 0.2s ease;
}
.register-label.input-focused i {
    color: var(--accent-color) !important; /* Verde esmeralda no foco */
}
.btn-register-server { 
    width: 100%; 
    font-weight: 600; 
    text-transform: none; /* Sem uppercase */
    letter-spacing: 0.3px; 
    padding: 12px; 
    background: var(--palette-primary-transparent) !important; /* Background transparente */
    border: 1px solid var(--accent-color) !important; /* Borda verde esmeralda */
    color: var(--accent-color) !important; /* Texto verde esmeralda */
    border-radius: 10px !important;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    box-shadow: none !important; /* Sem shadow */
    transform: none !important; /* Sem transform */
}
.btn-register-server:hover:not(:disabled) {
    background: var(--palette-primary-semi-transparent) !important; /* Background mais opaco */
    border-color: var(--accent-color) !important;
    color: var(--accent-color) !important;
    box-shadow: none !important; /* Sem shadow */
    transform: none !important; /* Sem transform */
}

/* ============================================================================
   HERO MODERN - Hero Section Extraordinário
   ============================================================================ */

/* Hero Section com Galaxy */
.hero-section {
    position: relative;
    min-height: 600px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 100px 20px 80px;
    overflow: hidden;
    background: linear-gradient(180deg, var(--bg-darker) 0%, var(--bg-primary) 100%);
}

/* Galaxy Background */
.hero-galaxy-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

#mini-galaxy-container {
    position: absolute;
    right: 7%;
    pointer-events: auto;
    transition: opacity var(--transition-normal);
}


/* Canvas da Galaxy - Nítido e Centralizado com Brilho */
#mini-galaxy-container canvas,
#mini-galaxy-canvas {
    width: 100% !important;
    height: 100% !important;
    animation: galaxy-breathe 4s ease-in-out infinite, galaxy-glow 6s ease-in-out infinite;
    display: block !important;
    border: none !important;
    background: transparent !important;
    image-rendering: -webkit-optimize-contrast !important;
    image-rendering: crisp-edges !important;
    filter: contrast(1.6) brightness(1.4) saturate(1.6) drop-shadow(0 0 20px rgba(252, 213, 53, 0.4)) drop-shadow(0 0 40px rgba(14, 203, 129, 0.3)) !important;
    -webkit-filter: contrast(1.6) brightness(1.4) saturate(1.6) drop-shadow(0 0 20px rgba(252, 213, 53, 0.4)) drop-shadow(0 0 40px rgba(14, 203, 129, 0.3)) !important;
    position: relative;
    opacity: 1 !important;
}

/* Animação de Respiração (Pulsação) - No Container */
@keyframes galaxy-breathe {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

/* Animação de Brilho Pulsante - No Canvas - Binance Colors */
@keyframes galaxy-glow {
    0%, 100% {
        filter: contrast(1.6) brightness(1.4) saturate(1.6) drop-shadow(0 0 20px rgba(252, 213, 53, 0.4)) drop-shadow(0 0 40px rgba(14, 203, 129, 0.3));
    }
    50% {
        filter: contrast(1.7) brightness(1.5) saturate(1.7) drop-shadow(0 0 30px rgba(252, 213, 53, 0.6)) drop-shadow(0 0 60px rgba(14, 203, 129, 0.5));
    }
}


#mini-galaxy-container:hover {
    /*transform: scale(1.3);*/
}

.hero-galaxy-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(
        ellipse at center,
        transparent 0%,
        rgba(30, 31, 34, 0.6) 100%
    );
    z-index: 1;
}

/* Content */
.hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 1200px;
    width: 100%;
}

/* Title com Gradiente */
.hero-title {
    font-size: 4rem;
    font-weight: 900;
    line-height: 1.1;
    margin-bottom: 24px;
    background: linear-gradient(135deg, #f2f3f5 0%, #10b981 50%, #22d3ee 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 0 80px rgba(16, 185, 129, 0.3);
    letter-spacing: -0.03em;
}

/* Subtitle */
.hero-subtitle {
    font-size: 1.4rem;
    color: var(--text-secondary);
    margin-bottom: 60px;
    font-weight: 400;
}

/* Browse Text */
.browse-text {
    font-size: 1.2rem;
    color: var(--text-secondary);
    margin-top: 20px;
}

/* Animated Gradient Line */
.hero-divider {
    width: 100%;
    max-width: 600px;
    height: 1px;
    margin: 40px auto 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--accent-color) 25%,
        var(--color-cyan-400) 50%,
        var(--accent-color) 75%,
        transparent 100%
    );
    background-size: 200% 100%;
    animation: shimmer 3s linear infinite;
}

@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* Responsive */
@media (max-width: 992px) {
    .hero-title {
        font-size: 3rem;
    }
    
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
    
    #mini-galaxy-container {
        width: 600px;
        height: 400px;
    }
}

@media (max-width: 768px) {
    .hero-section {
        min-height: 500px;
        padding: 80px 20px 60px;
    }
    
    .hero-title {
        font-size: 2.2rem;
    }
    
    .hero-subtitle {
        font-size: 1.1rem;
        margin-bottom: 40px;
    }
    
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
    
    .stat-card {
        padding: 24px 16px;
    }
    
    .stat-icon {
        width: 36px;
        height: 36px;
    }
    
    .stat-label {
        font-size: 0.75rem;
    }
    
    #mini-galaxy-container {
        width: 400px;
        height: 300px;
    }
}

/* Container da Galáxia (O que recebe o hover) */
.galaxy-container {
    /* Tamanho mais compacto */
    width: 200px; /* Reduzido de tamanhos maiores */
    height: 200px;
    position: relative;
    /* Transição SUAVE para o hover (Importante: requisito 2) */
    transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Hover lento que você pediu */
.galaxy-container:hover {
    transform: scale(1.15); /* Amplia lentamente */
}

/* O Sol Central */
.galaxy-sun {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* Sol menor e mais compacto (Requisito 1) */
    width: 40px;
    height: 40px;
    border-radius: 50%;
    /* Brilho intenso e compacto, sem "muito shadow" espalhado */
    background: radial-gradient(circle at center, #ffffff, #fbbf24);
    box-shadow: 
        0 0 10px 2px rgba(251, 191, 36, 0.8), /* Brilho interno forte */
        0 0 20px 5px rgba(245, 158, 11, 0.4); /* Brilho externo contido */
    z-index: 10;
}

/* Partículas/Orbitas */
.galaxy-particle {
    /* ... animações de órbita ... */

    /* Deixar as partículas mais nítidas com shadow (Requisito 1) */
    box-shadow: 0 0 4px 1px rgba(255, 255, 255, 0.6);
    background-color: #fff; /* Garante que o núcleo é branco nítido */
}

/* O Container das Barrinhas */
.loader-bars {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 30px;
}

/* As Barrinhas Amarelas */
.bar {
    width: 4px;
    height: 12px;
    background-color: var(--accent-primary, #FCD535);
    animation: binance-pulse 0.8s ease-in-out infinite;
    border-radius: 2px;
}

/* Delays para criar a "onda" */
.bar:nth-child(1) { animation-delay: 0.0s; }
.bar:nth-child(2) { animation-delay: 0.15s; }
.bar:nth-child(3) { animation-delay: 0.3s; }

/* Animação de Crescer/Encolher */
@keyframes binance-pulse {
    0%, 100% {
        height: 12px;
        opacity: 0.6;
        transform: scaleY(1);
    }
    50% {
        height: 24px;
        opacity: 1;
        transform: scaleY(1.2);
        box-shadow: 0 0 10px rgba(252, 213, 53, 0.4);
    }
}

/* Texto opcional abaixo (Loading...) */
.loader-text {
    margin-top: 20px;
    color: var(--text-secondary, #848e9c);
    font-family: 'Inter', sans-serif;
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    animation: fade-text 1.5s infinite;
}

@keyframes fade-text {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}


/* --- Feature Toggles (Step 3) --- */
.feature-toggle-wrapper {
    display: block;
    cursor: pointer;
    user-select: none;
    position: relative;
}

/* Esconde o checkbox real */
.feature-toggle-wrapper input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.feature-toggle-content {
    background: var(--bg-card-transparent);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-std);
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.2s ease;
    height: 42px; /* Mesma altura dos inputs padrão */
}

.feature-toggle-wrapper:hover .feature-toggle-content {
    border-color: var(--accent-hover);
}

/* Ícone na esquerda */
.feature-icon {
    color: var(--text-muted);
    font-size: 1rem;
    transition: color 0.2s;
}

/* Texto central */
.feature-info {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    line-height: 1;
    justify-content: center;
}

.feature-title {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--accent-white);
}

.feature-status {
    font-size: 0.6rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    font-weight: 700;
    margin-top: 2px;
}

/* O Switch Visual (Bolinha) */
.feature-switch {
    width: 32px;
    height: 18px;
    background: #333;
    border-radius: 20px;
    position: relative;
    transition: background 0.3s;
}

.feature-switch::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.3s;
}

/* --- ESTADOS ATIVOS (CHECKED) --- */
.feature-toggle-wrapper input:checked ~ .feature-toggle-content {
    background: rgba(16, 185, 129, 0.1); /* Fundo verde bem suave */
    border-color: #10b981;
}

.feature-toggle-wrapper input:checked ~ .feature-toggle-content .feature-icon {
    color: #10b981;
}

.feature-toggle-wrapper input:checked ~ .feature-toggle-content .feature-switch {
    background: #10b981;
}

.feature-toggle-wrapper input:checked ~ .feature-toggle-content .feature-switch::after {
    transform: translateX(14px);
}

/* Lógica para mudar o texto de Illegal para Allowed via CSS p/ performance */
.feature-toggle-wrapper input:checked ~ .feature-toggle-content .feature-status {
    color: #10b981;
}
.feature-toggle-wrapper input:checked ~ .feature-toggle-content .feature-status::before {
    content: attr(data-on);
}
.feature-toggle-wrapper input:not(:checked) ~ .feature-toggle-content .feature-status::before {
    content: attr(data-off);
}
/* Esconde o texto original para usar o ::before */
.feature-status {
    font-size: 0; 
}
.feature-status::before {
    font-size: 0.6rem;
}

#default-sort-btn:hover i {
    fill: #fa791a;
    color: #fa791a;
}
#default-sort-btn:hover {
    border-color: #fa791a !important;
}
#default-sort-btn { 
}
#default-sort-btn:hover i {
    fill: #fa791a;
    color: #fa791a;
}
#reset-btn.active:hover svg {
   fill: inherit;
}






.chat-footer-wrapper {
    background-color: #16191f; /* Um pouco mais claro que o fundo do chat */
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding: 15px 20px;
    flex-shrink: 0; /* Impede que seja esmagado */
}

.chat-input-container {
    display: flex;
    align-items: center;
    background-color: #0b0e11; /* Fundo do input bem escuro */
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 30px; /* Redondo estilo cápsula */
    padding: 4px 6px 4px 20px; /* Padding para o texto */
    transition: border-color 0.2s, box-shadow 0.2s;
}

.chat-input-container:focus-within {
    border-color: var(--accent-primary); /* Amarelo ao focar */
    box-shadow: 0 0 0 2px rgba(252, 213, 53, 0.1);
}

.chat-input-field {
    flex: 1;
    background: transparent !important;
    border: none !important;
    color: #fff !important;
    font-size: 0.95rem;
    padding: 8px 0;
    outline: none !important;
    box-shadow: none !important;
}

.chat-input-field::placeholder {
    color: #5e6673;
}

.chat-send-btn {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background-color: var(--accent-primary); /* Amarelo */
    color: #000;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.2s, background-color 0.2s;
    margin-left: 10px;
}

.chat-send-btn:hover {
    background-color: var(--accent-hover);
    transform: scale(1.05);
}

.chat-send-btn:active {
    transform: scale(0.95);
}

.chat-send-btn i {
    font-size: 1rem;
    margin-right: 2px; /* Ajuste ótico para o ícone do avião */
    margin-top: 2px;
}


/* Área de mensagens */
#modalChatMessages {
    background-color: #0b0e11 !important; /* Fundo bem escuro */
    background-image: radial-gradient(#151920 1px, transparent 1px);
    background-size: 20px 20px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-bottom: 20px;
    overflow-y: auto;
}
/* Avatar no Chat */
.chat-avatar-circle {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background-color: rgba(0,0,0,0.3);
    border: 1px solid rgba(255,255,255,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 4px; /* Alinha levemente com o topo do balão */
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

.chat-avatar-circle i {
    font-size: 1rem;
}

/* Seta do balão (opcional, mas fica legal) */
.bubble-user::after {
    content: '';
    position: absolute;
    top: 12px;
    right: -6px;
    width: 0; 
    height: 0; 
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 6px solid rgba(252, 213, 53, 0.3); /* Cor da borda do user */
}

.bubble-staff::after {
    content: '';
    position: absolute;
    top: 12px;
    left: -6px;
    width: 0; 
    height: 0; 
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-right: 6px solid rgba(0, 229, 255, 0.2); /* Cor da borda do staff */
}
/* Balão Genérico */
.ticket-bubble {
    position: relative;
    padding: 12px 16px;
    border-radius: 12px;
    font-size: 0.9rem;
    line-height: 1.5;
    position: relative;
    word-wrap: break-word;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

/* Balão do USUÁRIO (Direita - Amarelo/Dourado) */
.bubble-user {
    align-self: flex-end;
    background: linear-gradient(135deg, rgba(252, 213, 53, 0.1) 0%, rgba(252, 213, 53, 0.05) 100%);
    border: 1px solid rgba(252, 213, 53, 0.3);
    color: #fff;
    border-bottom-right-radius: 2px;
}
.bubble-user .bubble-header {
    color: #FCD535; /* Amarelo */
    text-align: right;
}

/* Balão do SUPORTE (Esquerda - Ciano/Azul ou Cinza Profissional) */
.bubble-staff {
    align-self: flex-start;
    background: linear-gradient(135deg, rgba(32, 34, 37, 0.9) 0%, rgba(40, 44, 52, 0.9) 100%);
    border: 1px solid rgba(0, 229, 255, 0.2); /* Borda Cyan */
    color: #e6edf3;
    border-bottom-left-radius: 2px;
}
.bubble-staff .bubble-header {
    color: #00E5FF; /* Cyan */
    text-align: left;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Cabeçalho do Balão (Nome e Data) */
.bubble-header {
    font-size: 0.7rem;
    font-weight: 700;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.9;
}
.bubble-time {
    font-size: 0.65rem;
    color: #848E9C;
    font-weight: 400;
    margin-left: 8px;
    text-transform: none;
}

/* Badge de Staff no balão */
.staff-badge-icon {
    background: rgba(0, 229, 255, 0.1);
    color: #00E5FF;
    border-radius: 4px;
    padding: 1px 4px;
    font-size: 0.6rem;
    border: 1px solid rgba(0, 229, 255, 0.3);
}

/* Tabela de Tickets Admin */
.admin-ticket-row:hover {
    background-color: rgba(255, 255, 255, 0.03);
    cursor: pointer;
}
.admin-ticket-row.status-open {
    border-left: 3px solid #0ECB81; /* Verde para novos */
}
.admin-ticket-row.status-answered {
    border-left: 3px solid #FCD535; /* Amarelo para respondidos (aguardando user) */
}
.admin-ticket-row.status-closed {
    border-left: 3px solid #333;
    opacity: 0.6;
}
#admin-ticket-badge {
    background-color: #F6465D !important; /* Vermelho Binance */
    color: #fff;
    box-shadow: 0 0 8px rgba(246, 70, 93, 0.4);
    transition: all 0.3s ease;
    min-width: 20px; /* Garante que fique redondo mesmo com 1 dígito */
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
    animation: pulse-badge 2s infinite;
}

@keyframes pulse-badge {
    0% { box-shadow: 0 0 0 0 rgba(246, 70, 93, 0.4); }
    70% { box-shadow: 0 0 0 6px rgba(246, 70, 93, 0); }
    100% { box-shadow: 0 0 0 0 rgba(246, 70, 93, 0); }
}
/* tickets end */


.info-grid-modern {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}


/* Removemos o fundo e bordas pesadas no hover */
.stat-card {
    background: rgba(255, 255, 255, 0.02);
    backdrop-filter: blur(8px);
    /* background: var(--bg-card); */
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

/* Ajuste para o texto não ficar colado na linha */
.stat-card .value-md {
    position: relative;
    display: inline-block;
    width: fit-content;
    padding-bottom: 4px;
    transition: color 0.3s ease;
}

/* O Sublinhado Moderno (Direita para Esquerda) */
.stat-card .value-md::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0; /* Começa da direita */
    width: 0;
    height: 2px;
    background-color: #FCD535; /* Cor amarela padrão, pode ser var(--accent-blue) */
    transition: width 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Estado de Hover */
.stat-card:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.25);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
}

.stat-card:hover .value-md::after {
    width: 100%;
    left: 0; 
    right: auto;
}

.stat-card:has(#info-ping-status.online) .value-md::after { background-color: var(--status-up); }
.stat-card:has(#info-ping-status.warning) .value-md::after { background-color: #f59e0b; }
.stat-card:has(#info-ping-status.offline) .value-md::after { background-color: var(--status-down); }

.icon-normal,
.icon-slash {
    position: relative;
    top: -3px;
}
.vote-count-mini {
    font-size: 0.8rem;
    font-family: 'Rajdhani', sans-serif;
}

.favorite-btn.active {
    background: #3e3336 !important; /* Bordô discreto */
    color: #ff5a5a !important;
}

.favorite-btn.active:hover {
    background: #4a3d40 !important;
    filter: brightness(1.1);
}


.server-details-button i, 
.server-details-button svg {
    opacity: 0.7;
    transition: transform 0.2s;
}

.server-details-button:hover i,
.server-details-button:hover svg {
    opacity: 1;
    transform: scale(1.1);
}

.label-tiny {
    font-size: 0.7rem;
    text-transform: uppercase;
    color: var(--text-secondary);
    font-weight: 600;
    margin-bottom: 4px;
}

.value-md {
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
}

.t-segment { height: 35px; cursor: pointer; }
.bg-on { background: var(--success); }
.bg-off { background: var(--danger); }

.desc-btn {
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--border-color);
    color: #fff;
    padding: 4px 12px;
    border-radius: 6px;
    font-size: 0.75rem;
    transition: 0.2s;
}
.desc-btn:hover { background: rgba(255,255,255,0.1); }

.top-stats-container {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 0px 0px;
    backdrop-filter: blur(4px);
    position: relative;
    top: -4px;
}

/* Item individual */
.top-meta-item {
    width: 110px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 8px;
    border-radius: 8px;
    transition: background 0.3s ease;
}

/* Estado base dos ícones */
.top-meta-item i, 
.top-meta-svg {
    color: #888; /* Cinza médio para não sumir no fundo */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.top-meta-svg {
    width: 14px;
    height: 14px;
}

/* Efeito ao passar o mouse no item (Acende ícone e dá brilho leve) */
.top-meta-item:hover {
   /* background: rgba(255, 255, 255, 0.05);*/
}

.top-meta-item:hover i.fa-server {
    color: #06b6d4;     
    filter: drop-shadow(0 0 5px color-mix(in oklab, #06b6d4, transparent 60%));
}
.top-meta-item:hover i.fa-users { color: #2ecc71; filter: drop-shadow(0 0 5px rgba(46, 204, 113, 0.4)); }
.top-meta-item:hover i.fa-chart-line { color: #3498db; filter: drop-shadow(0 0 5px rgba(52, 152, 219, 0.4)); }
.top-meta-item:hover i.fa-globe { color: #e600ff; filter: drop-shadow(0 0 5px rgba(230, 0, 255, 0.4)); }
/* informations.php end */


.btn-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin: 0 2px;
    background-color: #383c41;
    border: 1px solid rgba(255, 255, 255, 0.05); /* Borda quase invisível */
    border-radius: 8px;
    color: #94A3B8; /* Cor neutra para o ícone */
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
}

.btn-action:hover {
    background-color: #373D44;
    color: #FFFFFF; /* Ícone acende no hover */
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

/* Opcional: Feedback visual de perigo no delete */
.btn-action[title="Delete"]:hover {
    background-color: rgba(239, 68, 68, 0.1);
    color: #EF4444;
    border-color: rgba(239, 68, 68, 0.2);
}

/* ============================================================================
   EXCLUSIVE FOOTER FEATURES & ECOSYSTEM (SEU CÓDIGO ORIGINAL)
   ============================================================================ */

/* Grid de Funcionalidades */
.footer-features-grid {
    gap: 0;
}

.footer-feature-item {
    padding: 20px;
    border-right: 1px solid rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    transition: background 0.3s ease;
}

.footer-feature-item:hover {
    background: rgba(255, 255, 255, 0.01);
}

.feature-icon-mini {
    color: var(--tibialist-cyan);
    font-size: 1.2rem;
    margin-bottom: 15px;
    filter: drop-shadow(0 0 5px rgba(0, 229, 255, 0.3));
}

.feature-title-mini {
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
}

.feature-text-mini {
    color: #848e9c;
    font-size: 12px;
    line-height: 1.5;
    margin: 0;
}

/* Botões de Ação */
.footer-action-buttons {
    display: flex;
    gap: 15px;
    padding-left: 20px;
}

.btn-footer-outline {
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    padding: 10px 20px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-decoration: none !important;
    transition: all 0.2s;
}

.btn-footer-outline:hover {
    color: white;
    border-color: #fff;
    background: rgba(255, 255, 255, 0.05);
}

.btn-footer-gold {
    background: var(--accent-primary);
    color: #000 !important;
    padding: 10px 25px;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-decoration: none !important;
    transition: transform 0.2s;
}

.btn-footer-gold:hover {
    filter: brightness(1.1);
}

/* Seção Ecossistema */
.footer-ecosystem-section {
    margin-top: 50px;
    padding: 30px;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.03);
    border-radius: 4px;
}

.ecosystem-heading {
    color: var(--tibialist-cyan);
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.ecosystem-desc {
    color: #5e6673;
    font-size: 12px;
    margin-bottom: 0;
}

.badge-tech {
    display: inline-block;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    color: #848e9c;
    font-size: 10px;
    font-weight: 700;
    padding: 5px 12px;
    margin-left: 5px;
    margin-bottom: 5px;
    border-radius: 2px;
    letter-spacing: 0.5px;
}

.badge-tech:hover {
    color: #fff;
    border-color: var(--tibialist-cyan);
}

@media (max-width: 768px) {
    .footer-feature-item { border-right: none; }
    .footer-action-buttons { flex-direction: column; padding-left: 0; }
    .footer-ecosystem-section { text-align: center; }
}

/* ============================================================================
   ADIÇÕES PARA WATERMARK E LEGAL BAR (NOVO)
   ============================================================================ */
/* Ajuste específico para o Footer que adicionamos */
.site-footer {
    position: relative;
    overflow: hidden; /* Garante que a watermark gigante não "empurre" as bordas */
    width: 100%;
}

.footer-bottom-container {
    position: relative;
    margin-top: 60px;
    padding-bottom: 20px;
    min-height: 220px; /* Altura para a Watermark respirar */
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.footer-bg-text {
    position: absolute;
    bottom: 40px;
    left: -10px;
    width: 100%;
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    font-size: clamp(6rem, 15vw, 15rem);
    line-height: 0.8;
    letter-spacing: -0.05em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.02) !important; /* 2% opacidade */
    user-select: none;
    pointer-events: none;
    z-index: 1;
    white-space: nowrap;
}

.footer-bg-text span {
    color: rgba(0, 229, 255, 0.03) !important; /* Toque Cyan na Watermark */
}

.footer-legal-row {
    position: relative;
    z-index: 5;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.legal-left {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 11px;
    color: #5e6673;
    font-weight: 600;
}

.copyright-tag, .brand-slug {
    border: 1px solid #2d3238;
    padding: 4px 10px;
    border-radius: 4px;
}

.est-tag {
    background: var(--tibialist-cyan);
    color: black;
    padding: 4px 10px;
    border-radius: 4px;
    font-weight: 800;
}

.sql-query-dev {
    font-family: 'JetBrains Mono', monospace;
    color: #0ECB81;
    opacity: 0.6;
    margin-left: 10px;
    font-style: italic;
    font-size: 9px;
}

.legal-right a {
    color: #5e6673;
    text-decoration: none;
    font-size: 11px;
    font-weight: 700;
    margin-left: 20px;
    transition: color 0.2s;
}

.legal-right a:hover { color: #fff; }


/* Ajuste na seção de Ecossistema para ficar na base */
.footer-ecosystem-section {
    margin-top: 50px;
    padding: 30px;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.03);
    border-radius: 4px;
}

/* Nova query SQL personalizada */
.sql-query-dev {
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    color: #0ECB81; /* Verde esmeralda */
    font-size: 10px;
    letter-spacing: 0.5px;
    opacity: 0.8;
    margin-left: 15px;
}

/* Ajuste da Watermark para não conflitar com a barra legal */
.footer-bottom-container {
    margin-top: 40px; /* Reduzido pois agora o ecossistema está acima dela */
}

/* Deixa os badges um pouco mais discretos para o layout de base */
.badge-tech {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.2s ease;
}

.badge-tech:hover {
    border-color: var(--tibialist-cyan);
    background: rgba(0, 229, 255, 0.05);
    color: #fff;
}
.footer-description {
    font-size: 14px;
    color: #848e9c;
    line-height: 1.6;
    max-width: 300px;
    margin-bottom: 25px;
}
.footer-socials {
    display: flex;
    gap: 10px;
}
.footer-socials a {
    color: var(--text-muted);
}
.social-btn:hover {
    color: var(--accent-white);
}

/* FOOTER end */

/* Títulos */
.wu-title {
    font-size: 2rem;
    font-weight: 800;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: -0.5px;
    margin-bottom: 0.5rem;
}
.text-gradient-cyan {
    background: linear-gradient(90deg, #22d3ee 0%, #0ea5e9 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.wu-subtitle {
    color: var(--wu-text-muted);
    font-size: 1rem;
    max-width: 700px;
}

/* Section Headers */
.wu-section-title {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--wu-text-muted);
    letter-spacing: 1px;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 10px;
}
.wu-section-title::after {
    content: '';
    height: 1px;
    background: var(--wu-border);
    flex-grow: 1;
    opacity: 0.5;
}
/* Cards Estilo Why Us (Atualizado com efeito de sublinhado) */
.wu-card {
    border-radius: var(--radius-std); 
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 10px;
    height: 100%;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    display: flex;
    flex-direction: column;
}

.wu-card:hover {
    border-color: var(--card-color, var(--wu-text-muted));
}

.wu-card-title {
    color: var(--wu-text-main);
    font-size: 1.1rem;
    font-weight: 600;
    left: 85px;
    top: 36px;
    margin-bottom: 1px;
    position: absolute;
    display: inline-block;
    align-self: flex-start;
}

.wu-card-title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 0;
    height: 2px;
    background-color: var(--card-color, var(--wu-accent-cyan));
    transition: width 0.3s ease;
    border-radius: 2px;
}

.wu-card:hover .wu-card-title::after,
.wu-card.active .wu-card-title::after {
    width: 100%;
}
.wu-card.disabled::before {
    content: 'DISABLED';
    position: absolute;
    top: 25px;
    right: 23px;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    padding: 4px 8px;
    border-radius: 4px;
    letter-spacing: 1px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(4px);
    z-index: 10;
}

/* Ajuste no título para não sublinhar quando desativado */
.wu-card.disabled:hover .wu-card-title::after {
    width: 0;
}
.wu-card.disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Ícone usando a variável de cor */
.wu-icon-box {
    font-size: 1.5rem;
    margin-bottom: 16px;
    color: var(--card-color);
}

.wu-card:hover .wu-icon-box {
}

/* Estado Ativo Otimizado */
.wu-card.active {
    border-color: var(--card-color);
    box-shadow: 0 0 15px -5px var(--card-color);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(0, 0, 0, 0) 100%);
}

/* Icon Box (Quadrado colorido no topo) */
.wu-icon-box {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    margin-bottom: 10px;
}

/* Cores Específicas dos Ícones */
.icon-pix { background: rgba(46, 160, 67, 0.15); color: #3fb950; } /* Verde GitHub */
.icon-stripe { background: rgba(56, 139, 253, 0.15); color: #58a6ff; } /* Azul GitHub */
.icon-paypal { background: rgba(219, 97, 162, 0.15); color: #f778ba; } /* Rosa/Roxo leve */

.wu-detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85rem;
    padding: 3px 0;
    border-bottom: 1px solid rgba(48, 54, 61, 0.5);
}
.wu-detail-row:last-child { border-bottom: none; }

.wu-label { color: var(--wu-text-muted); }

.wu-badge {
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 600;
    border: 1px solid transparent;
}
.badge-success { color: #3fb950; border-color: rgba(46, 160, 67, 0.4); background: rgba(46, 160, 67, 0.1); }
.badge-info { color: #58a6ff; border-color: rgba(56, 139, 253, 0.4); background: rgba(56, 139, 253, 0.1); }

/* Pacotes de Créditos (Simplificado) */
.wu-coin-icon {
    font-size: 2rem;
    margin-bottom: 10px;
    color: #e3b341; /* Amarelo ouro */
    filter: drop-shadow(0 0 10px rgba(227, 179, 65, 0.3));
}

.wu-price-tag {
    background: var(--bs-border-color-translucent);
    border: 1px solid var(--wu-border);
    color: var(--wu-text-main);
    padding: 6px 12px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.9rem;
    margin-top: auto;
}

/* tibialist.css */

/* Removemos o travamento do body pois o footer não é mais fixo */
body:has(.wu-floating-footer) {
    padding-bottom: 0 !important;
}

.wu-floating-footer {
    /* Transformado em um painel estático de Checkout */
    position: relative;
    bottom: auto;
    left: auto;
    transform: none;
    width: 100%;
    max-width: 100%;
    background: rgba(255, 255, 255, 0.02);
    backdrop-filter: none; /* Blur não é necessário em elemento estático */
    border: 1px solid var(--wu-border);
    border-radius: 12px;
    padding: 25px;
    margin-top: 30px;
    margin-bottom: 40px;
    display: flex;
    align-items: center;
    gap: 20px;
    box-shadow: none;
}

@media (max-width: 768px) {
    .wu-floating-footer {
        flex-direction: column;
        align-items: stretch;
        padding: 20px;
    }
}

.wu-input {
    background: #1a1f2591 !important;
    border: 1px solid var(--wu-border);
    color: #fff;
    border-radius: 0px 10px 10px 0px;
    padding: 10px 12px !important;
}
.wu-input:focus {
    border-color: var(--accent-color);
    outline: none;
    box-shadow: 0 0 0 2px rgba(34, 211, 238, 0.2);
}

.wu-btn-pay {
    background: var(--accent-color);
    color: #0d1117;
    border: none;
    font-weight: 700;
    border-radius: 6px;
    padding: 8px 24px;
    text-transform: uppercase;
    font-size: 0.9rem;
    transition: all 0.2s;
}
.wu-btn-pay:hover:not(:disabled) {
    background: var(--accent-hover);
    transform: scale(1.02);
}
.wu-btn-pay:disabled {
    background: #30363d;
    color: #8b949e;
    cursor: not-allowed;
}

/* Checkmark de seleção */
.card-check {
    position: absolute;
    top: 15px;
    right: 15px;
    color: var(--wu-accent-cyan);
    display: none;
    font-size: 1.2rem;
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .wu-floating-footer {
        flex-direction: column;
        bottom: 0;
        width: 100%;
        border-radius: 12px 12px 0 0;
        padding: 20px;
    }
    .wu-floating-footer > div { width: 100%; }
}
/* Títulos com Gradiente (Igual Why Us) */
.general-pages-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    font-size: 2rem;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: -1px;
    display: flex;
    align-items: center;
    gap: 15px;
}
.text-cyan-gradient {
    background: linear-gradient(135deg, #22d3ee 0%, #0ea5e9 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.pay-page-subtitle {
    color: var(--text-muted);
    font-size: 0.9rem;
    max-width: 600px;
}

.dark-transparent {
        background: var(--bs-border-color-translucent);
}
/* PAYMENT END */



.auth-page-layout {
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Ocupa a altura total da tela */
}

.auth-content-container {
    flex: 1 0 auto; /* Empurra o footer para baixo */
    display: flex;
    flex-direction: column;
}

.auth-copyright {
    flex-shrink: 0;
    width: 100%;
    
    /* Configuração de Altura Fixa */
    height: 60px;      /* Altura fixa */
    min-height: 60px;  /* Garante que não diminua */
    padding: 0;        /* Remove padding para o alinhamento ser exato pela altura */
    
    margin-top: auto;  /* Mágica do Flexbox: Empurra o footer para o final da página */
    
    display: flex;
    align-items: center; /* Centraliza o conteúdo verticalmente na altura fixa */
    justify-content: center;
    gap: 12px;
    
    color: #666;
    font-size: 0.82rem;
    
    /* Linha fina sutil */
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.auth-language-divider {
    opacity: 0.3;
    font-weight: 300;
}

.auth-language-btn {
    background: none;
    border: none;
    color: inherit;
    padding: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: color 0.2s;
}

.auth-language-btn:hover { color: #00E5FF; }





/* =========================================================================
   SEARCH ANIMATION: SCANNER ALIGNMENT
   ========================================================================= */
/* 1. ANIMAÇÃO DA BORDA */
@keyframes neonSolidOverride {
    0% { border-color: rgba(0, 229, 255, 0.3) !important; box-shadow: 0 0 0 0 rgba(0, 229, 255, 0); }
    50% { border-color: #00E5FF !important; box-shadow: 0 0 10px rgba(0, 229, 255, 0.5), inset 0 0 5px rgba(0, 229, 255, 0.2); }
    100% { border-color: rgba(0, 229, 255, 0.3) !important; box-shadow: 0 0 0 0 rgba(0, 229, 255, 0); }
}

.search-input-wrapper.pulsing-border {
    position: relative;
    border: 1px solid #00E5FF !important; 
    background-color: var(--bg-card-secondary) !important;
    /*animation: neonSolidOverride 3s infinite ease-in-out !important;*/
}

/* 2. TEXTO "SCAN_" AGORA NA DIREITA */
.search-try-prefix {
    position: absolute;
    left: auto !important;  /* Anula qualquer left anterior */
    right: 15px !important; /* Fixa na direita */
    top: 50%;
    transform: translateY(-50%);
    color: #00E5FF !important;
    font-weight: 700;
    font-size: 0.75rem; /* Um pouco menor para ficar elegante como status */
    font-family: 'Rajdhani', sans-serif;
    letter-spacing: 1px;
    pointer-events: none;
    z-index: 10;
    display: none;
    text-shadow: 0 0 10px rgba(0, 229, 255, 0.4);
    opacity: 0.8;
}

/* 3. LUPA ACESA (MANTÉM POSIÇÃO ORIGINAL) */
.search-input-wrapper.pulsing-border .search-icon {
    color: #00E5FF !important;
    filter: drop-shadow(0 0 5px rgba(0, 229, 255, 0.6));
    transform: scale(1.1);
    /* left: 12px; -> Removemos o left forçado para usar o padrão do site */
    z-index: 11;
    transition: all 0.3s ease;
}

/* 4. AJUSTE DO INPUT (AGORA COM PADDING NA DIREITA) */
.search-input-wrapper.pulsing-border #search-input,
.search-input-wrapper.pulsing-border input.search-input-field {
    /* Padding Left normal (para a lupa) */
    padding-left: 40px !important; 
    
    /* Padding Right Grande (para não escrever em cima do Scan na direita) */
    padding-right: 70px !important; 
    
    transition: padding 0.2s ease;
}

.search-input-wrapper input.search-input-field {
    transition: padding 0.2s ease;
}
 
/* Layout da Header da Sidebar para comportar o Breadcrumb à direita */
.sidebar-header-flex {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
    width: 100%;
}

.breadcrumb-sidebar-inline {
    flex: 1;
    margin-bottom: 0 !important;
}

.breadcrumb-sidebar-inline .breadcrumb-clean-wrapper {
    margin-bottom: 0 !important;
}

.breadcrumb-sidebar-inline .breadcrumb-divider-line {
    display: none; /* Remove a linha decorativa para caber no box */
}

.submenu-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    color: var(--text-secondary);
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 12px 15px 5px 15px;
    border-top: 1px solid rgba(255,255,255,0.03);
    margin-top: 5px;
}

/* SERVER DETAILS END */


/* --- SERVER DETAILS INTEGRATED HEADER --- */

.server-info-integrated-header {
    /* Ajuste de margens negativas para anular o padding do container pai (.tab-content-section) */
    margin: -20px -20px 20px -20px;
    background: var(--header-primary);
    padding: 15px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    /* Garante que o fundo acompanhe o arredondamento do card pai */
    border-radius: calc(var(--radius-big) - 1px) calc(var(--radius-big) - 1px) 0 0;
    width: auto; /* Permite que as margens negativas funcionem corretamente */
}

.header-icon-box {
    width: 36px;
    height: 36px;
    background: var(--btn-secondary-border);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    font-size: 1rem;
}

.title-main { font-size: 1.1rem; font-weight: 700; color: #fff; }
.subtitle-tiny { font-size: 0.75rem; opacity: 0.5; }

/* Grid integrada que cola nas laterais */
.info-grid-integrated {
    margin: 0 -20px 0 -20px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.stat-card-clean {
    padding: 15px;
    border-right: 1px solid rgba(255, 255, 255, 0.05);
    position: relative;
    overflow: hidden;
}

.stat-card-clean:last-child { border-right: none; }

/* Botão discreto de descrição */
.btn-description-discreet {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    padding: 4px 8px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-subscriptions:hover {
    opacity: 1 !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
}

.stat-card-clean::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background-color: var(--card-accent, transparent);
    opacity: 0.8;
}

.btn-description-minimal {
    background: #2b3139;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #848e9c;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    transition: all 0.2s;
}

.btn-description-minimal:hover {
    background: #333b47;
    color: #fff;
    border-color: var(--accent-primary);
}


/* INFORMATIONS.PHP START */

.info-section {
    background: rgba(255,255,255,0.02);
    border-radius: 8px;
    padding: 20px;
    border: 1px solid rgba(255,255,255,0.05);
}


.section-mini-title {
    font-weight: 600;
    margin-bottom: 8px;
    color: rgba(255, 255, 255, 0.7);
    transition: color 0.3s ease;
    position: relative;
    display: inline-block;
}

.section-mini-title:hover {
    color: rgba(255, 255, 255, 1);
}

.section-mini-title::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, #8b5cf6, #a78bfa);
    transition: width 0.6s ease;
}

.section-mini-title:hover::after {
    width: 100%;
}

.section-divider {
    height: 1px;
    background: linear-gradient(90deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%);
    width: 100%;
}

.info-grid-detailed {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 15px;
}

.info-item {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    padding: 15px;
    transition: all 0.2s ease;
}

.info-item:hover {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.15);
}

.info-label {
    font-size: 0.7rem;
    color: rgba(255,255,255,0.5);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

.info-value {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 500;
}

.header-action-icon {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    padding: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.header-action-icon:hover {
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.2);
    transform: translateY(-2px);
}

.header-action-icon svg {
    color: rgba(255,255,255,0.7);
    transition: color 0.3s ease;
}

.header-action-icon:hover svg {
    color: rgba(255,255,255,1);
}

.rates-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 15px;
}

.rate-item {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.rate-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--rate-color);
    opacity: 0.8;
}

.rate-item:hover {
    background: rgba(255,255,255,0.06);
    border-color: var(--rate-color);
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

.rate-icon {
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rate-icon svg {
    color: var(--rate-color);
    width: 20px;
    height: 20px;
}

.rate-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.rate-label-small {
    font-size: 0.7rem;
    color: rgba(255,255,255,0.6);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

.rate-value-large {
    font-size: 1.8rem;
    font-weight: 700;
    color: rgba(255,255,255,0.9);
}

.motd-box {
    background: rgba(255,255,255,0.03);
    border-radius: 6px;
    padding: 15px;
    border-left: 3px solid var(--accent-primary);
}

.motd-text {
    margin: 0;
    line-height: 1.6;
    font-size: 0.9rem;
    color: #FFEB3B !important;
}

.description-trigger {
    display: flex;
    justify-content: center;
    padding: 10px 0;
}

.btn-description-trigger {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.1) 0%, rgba(139, 92, 246, 0.05) 100%);
    border: 1px solid rgba(139, 92, 246, 0.2);
    border-radius: 6px;
    padding: 10px 20px;
    color: #8b5cf6;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    text-decoration: none;
}

.btn-description-trigger:hover {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.2) 0%, rgba(139, 92, 246, 0.1) 100%);
    border-color: rgba(139, 92, 246, 0.4);
    color: #a78bfa;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.1);
}

.bg-danger {
    background-color: #ff6b6b !important;
    color: white;
}

.bg-primary {
    background-color: #4a90e2 !important;
    color: white;
}

.bg-secondary {
    background-color: #f6465d33 !important;
    color: var(--status-down) !important;
    border: solid 1px var(--status-down) !important;
}
.bg-red {
    background-color: #ff00001a !important;
    color: #ff878796 !important;
    border: solid 1px #ff878796;
}

/* Modal Styles */
.description-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 0;
    animation: fadeIn 0.3s ease forwards;
}

.description-modal {
    background: #1a1a1a;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    max-width: 600px;
    width: 90%;
    max-height: 80vh;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    transform: scale(0.9);
    animation: scaleIn 0.3s ease forwards;
}

.description-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.02);
}

.description-modal-header h5 {
    color: #fff;
    font-weight: 600;
    margin: 0;
}

.btn-close-modal {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    font-size: 1.2rem;
    cursor: pointer;
    padding: 5px;
    border-radius: 4px;
    transition: all 0.2s;
}

.btn-close-modal:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.description-modal-body {
    padding: 20px;
    max-height: 60vh;
    overflow-y: auto;
}

.description-modal-text {
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.6;
    margin: 0;
    white-space: pre-wrap;
}

/* Scrollbar for modal */