/* ========================================================== */
/* --- 1. VARIÁVEIS E CONFIGURAÇÕES GLOBAIS --- */
/* ========================================================== */
:root {
    --primary-blue: #ff9500; /* Dourado Brilhante (Novo toque moderno) */
    --primary-orange: #ff8c00; /* Laranja (Sua cor original) */
    --bg-dark: #0b0e14;
    --card-bg: rgba(15, 15, 15, 0.85);
    --text-color: #e0e0e0;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body { 
    font-family: 'Orbitron', sans-serif;
    background-color: var(--bg-dark); 
    background-image: url('../images/bg.webp'); 
    background-size: cover; 
    background-position: center top; 
    background-attachment: fixed; 
    background-repeat: no-repeat; 
    color: var(--text-color); 
    line-height: 1.6; 
    overflow-x: hidden; /* Evita rolagem lateral indesejada */
}
/* Mantém a fonte Gamer apenas nos Títulos e Botões */
h1, h2, h3, h4, h5, h6, .btn-gamer, .nav-item, .glitch-text {
    font-family: 'sans-serif', sans-serif;
    letter-spacing: 1px;
}

.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

/* ========================================================== */
/* --- 2. CABEÇALHO GAMER CENTRALIZADO (SEM LOGO) --- */
/* ========================================================== */

.main-header {
    height: 80px;
    background: linear-gradient(180deg, rgba(10, 10, 10, 0.98) 0%, rgba(20, 20, 20, 0.95) 100%);
    border-bottom: 1px solid rgba(255, 140, 0, 0.2);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.8);
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 2000;
    backdrop-filter: blur(10px);
}

.navbar {
    display: flex;
    justify-content: center; /* CENTRALIZA O MENU */
    align-items: center;
    height: 100%;
    position: relative;
}

/* Oculta a logo para centralizar apenas o menu */
.logo-container {
    display: none !important;
}

/* --- LINKS ESTILO HUD (INCLINADOS) --- */
.nav-links {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 10px; /* Espaço entre os botões */
    padding: 0;
    height: 100%;
}

.nav-links li {
    height: 100%;
    display: flex;
    align-items: center;
}

/* O Estilo do Botão do Menu */
.nav-links a {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 45px; /* Altura do botão */
    padding: 0 30px; /* Largura interna */
    
    color: #aaa;
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 1px;
    
    /* O EFEITO GAMER INCLINADO */
    transform: skewX(-20deg); 
    background: rgba(255, 255, 255, 0.03); 
    border: 1px solid rgba(255, 255, 255, 0.05); 
    transition: all 0.3s ease;
}

/* Desentorta o texto dentro do botão torto */
.nav-links a span, 
.nav-links a i { 
    transform: skewX(20deg); 
    display: inline-block;
}

/* --- EFEITOS DE HOVER --- */
.nav-links a:hover, 
.nav-links a.active {
    background: rgba(255, 140, 0, 0.1); 
    border-color: var(--primary-orange); 
    color: #fff;
    box-shadow: 0 0 15px rgba(255, 140, 0, 0.2);
    text-shadow: 0 0 5px rgba(255, 140, 0, 0.8);
}

/* --- BOTÃO DE LOGIN --- */
.btn-login-glow {
    /* Mantém o estilo inclinado, mas com destaque */
    border: 1px solid var(--primary-orange) !important;
    color: var(--primary-orange) !important;
    background: rgba(0,0,0,0.5) !important;
    margin-left: 10px;
}

.btn-login-glow:hover {
    background: var(--primary-orange) !important;
    color: #000 !important;
    box-shadow: 0 0 20px var(--primary-orange) !important;
}

/* --- BOTÃO SAIR --- */
.btn-logout {
    border-color: rgba(255, 77, 77, 0.3) !important;
    color: #ff4d4d !important;
}
.btn-logout:hover {
    background: rgba(255, 77, 77, 0.15) !important;
    border-color: #ff4d4d !important;
    color: #fff !important;
    box-shadow: 0 0 15px rgba(255, 77, 77, 0.3) !important;
}

/* Responsivo */
@media (max-width: 900px) {
    .nav-links { display: none; }
    .navbar { justify-content: flex-end; padding-right: 20px; }
}

/* ========================================================== */
/* --- 3. NOVA HERO SECTION (BANNER ANIMADO) --- */
/* ========================================================== */
/* Esta seção substitui o padding antigo e cria o impacto visual */

.main-content {
    /* Removido o padding de 200px para o banner funcionar bem */
    padding-top: 0; 
    padding-bottom: 60px;
    width: 100%;
}

.hero-section {
    position: relative;
    height: 75vh; /* Ocupa 75% da altura da tela */
    display: flex;
    align-items: center;
    justify-content: center;
    /* Imagem de destaque diferente do background do corpo se quiser */
    background: url('../assets/images/bg-hero.jpg') no-repeat center center; 
    background-size: cover;
    text-align: center;
    margin-bottom: 0;
    margin-top: -20px; /* Ajuste fino para colar no header se precisar */
}

/* Camada escura sobre o banner para o texto brilhar */
.hero-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(to bottom, rgba(11,14,20,0.4) 0%, rgba(11,14,20,0.9) 90%, var(--bg-dark) 100%);
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2;
    padding: 20px;
}

.glitch-text {
    font-size: 4rem;
    font-weight: 800;
    color: #fff;
    text-transform: uppercase;
    text-shadow: 0 0 20px var(--primary-blue), 0 0 40px var(--primary-blue);
    margin-bottom: 10px;
    letter-spacing: 3px;
}

.hero-content p {
    font-size: 1.4rem;
    color: #ccc;
    margin-bottom: 40px;
    font-weight: bold;
    text-shadow: 0 2px 4px rgba(0,0,0,0.8);
}

.hero-buttons {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
}

/* Botões do Hero */
.btn-hero {
    padding: 15px 40px;
    text-decoration: none;
    font-weight: bold;
    text-transform: uppercase;
    transition: all 0.3s ease;
    clip-path: polygon(10% 0, 100% 0, 100% 70%, 90% 100%, 0 100%, 0 30%);
    display: inline-block;
    letter-spacing: 1px;
}

.btn-glow {
    background: var(--primary-orange);
    color: #000;
    border: none;
    box-shadow: 0 0 20px rgba(255, 140, 0, 0.4);
}

.btn-glow:hover {
    background: #fff;
    box-shadow: 0 0 30px rgba(255, 140, 0, 0.8);
    transform: translateY(-3px);
}

.btn-outline {
    background: rgba(0,0,0,0.6);
    border: 2px solid rgba(255,255,255,0.3);
    color: #fff;
}

.btn-outline:hover {
    border-color: var(--primary-blue);
    color: var(--primary-blue);
    box-shadow: 0 0 15px rgba(0, 210, 255, 0.3);
}

/* ========================================================== */
/* --- 4. BARRA DE RATES (DESTAQUE) --- */
/* ========================================================== */
.server-rates-bar {
    background: linear-gradient(90deg, rgba(16,20,29,0.9) 0%, rgba(28,35,51,0.95) 50%, rgba(16,20,29,0.9) 100%);
    border-top: 1px solid rgba(255,255,255,0.05);
    border-bottom: 1px solid rgba(255,255,255,0.05);
    padding: 25px 0;
    margin-bottom: 60px;
    position: relative;
    z-index: 5;
    margin-top: -60px; /* Sobe para ficar em cima do final do banner */
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    backdrop-filter: blur(5px);
}

.rates-grid {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    align-items: center;
}

.rate-item {
    display: flex;
    align-items: center;
    gap: 15px;
    color: #fff;
    padding: 10px;
}

.rate-item i {
    font-size: 2.2rem;
    color: var(--primary-blue);
    text-shadow: 0 0 10px rgba(0, 210, 255, 0.4);
}

.rate-info {
    display: flex;
    flex-direction: column;
}

.rate-info span { font-size: 0.8rem; color: #888; text-transform: uppercase; letter-spacing: 1px; }
.rate-info strong { font-size: 1.6rem; color: #fff; font-weight: 800; line-height: 1; }


/* ========================================================== */
/* --- 5. LAYOUT PRINCIPAL E COLUNAS --- */
/* ========================================================== */
.main-container {
    /* Container específico para o corpo pós-hero */
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.main-layout { 
    display: grid; 
    grid-template-columns: 1fr 340px; /* Esquerda fluido, Direita fixo */
    gap: 40px; 
}

.section-title {
    margin-bottom: 30px;
    border-left: 5px solid var(--primary-orange);
    padding-left: 15px;
    display: flex;
    align-items: center;
}
.section-title h2 { 
    margin: 0; color: #fff; 
    text-transform: uppercase; 
    font-size: 1.8rem;
    text-shadow: 0 0 10px rgba(0,0,0,0.5);
}

/* --- NOTÍCIAS (CARD NOVO) --- */
.news-list {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.news-card {
    background-color: var(--card-bg);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 4px;
    display: flex;
    flex-direction: row; /* Imagem ao lado do texto */
    transition: all 0.3s ease;
    overflow: hidden;
    position: relative;
    min-height: 220px;
}

.news-card:hover {
    transform: translateY(-5px);
    border-color: var(--primary-blue);
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

.news-img-wrapper {
    width: 280px;
    position: relative;
    flex-shrink: 0;
    overflow: hidden;
}

.news-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.news-card:hover .news-img-wrapper img {
    transform: scale(1.1);
}

.news-date-badge {
    position: absolute;
    top: 10px; left: 10px;
    background: var(--primary-orange);
    color: #000;
    padding: 5px 12px;
    font-weight: bold;
    text-align: center;
    border-radius: 3px;
    display: flex;
    flex-direction: column;
    line-height: 1;
    box-shadow: 0 2px 5px rgba(0,0,0,0.5);
    z-index: 2;
}
.news-date-badge span { font-size: 0.75rem; text-transform: uppercase; margin-top: 2px;}

.news-card-content {
    padding: 25px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex-grow: 1;
}

.news-card-content h3 { margin: 0 0 15px 0; line-height: 1.2; }
.news-card-content h3 a {
    color: #fff;
    text-decoration: none;
    font-size: 1.4rem;
    transition: color 0.3s;
}
.news-card-content h3 a:hover { color: var(--primary-orange); }

.news-card-content p {
    color: #aaa;
    font-family: Arial, sans-serif;
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 15px;
}

.read-more-btn {
    align-self: flex-start;
    color: var(--primary-blue);
    text-decoration: none;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 0.9rem;
    border: 1px solid var(--primary-blue);
    padding: 5px 15px;
    border-radius: 3px;
    transition: all 0.3s;
}
.read-more-btn:hover {
    background: var(--primary-blue);
    color: #000;
}
.read-more-btn i { margin-left: 5px; }

/* Fallback se não tiver imagem (estilo antigo) */
.news-card.no-image { flex-direction: column; }
.no-news {
    background-color: var(--card-bg);
    border: 1px solid #333;
    padding: 30px;
    text-align: center;
    border-radius: 5px;
    color: #888;
}

/* ========================================================== */
/* --- 6. SIDEBAR E WIDGETS --- */
/* ========================================================== */
.sidebar-widget { 
    background-color: var(--card-bg); 
    border: 1px solid rgba(255,255,255,0.08); 
    border-radius: 4px; 
    margin-bottom: 30px; 
    overflow: hidden;
}

.widget-header {
    background: rgba(0,0,0,0.3);
    padding: 15px 20px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.sidebar-widget h3 { 
    color: var(--primary-orange); 
    text-transform: uppercase; 
    font-size: 1rem; 
    margin: 0; 
    display: flex; 
    align-items: center; 
    gap: 10px; 
}

.widget-body { padding: 20px; }

/* Info do Servidor (Sidebar) */
.server-info-list div {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px dashed #333;
    font-size: 0.9rem;
}
.server-info-list div:last-child { border-bottom: none; }
.server-info-list span { color: #aaa; }
.server-info-list strong { color: var(--primary-blue); }

/* --- CANAIS E BARRAS DE PROGRESSO --- */
.channel-ul { list-style: none; padding: 0; margin: 0; }
.channel-ul li { margin-bottom: 18px; }

.chan-info {
    display: flex;
    justify-content: space-between;
    margin-bottom: 6px;
    font-size: 0.85rem;
    font-weight: bold;
    color: #ccc;
}

.channel-bar-bg {
    height: 10px;
    background: #000;
    border-radius: 5px;
    border: 1px solid #333;
    overflow: hidden;
    position: relative;
}

.channel-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #2ecc71, #27ae60);
    border-radius: 5px;
    width: 0%;
    transition: width 1s ease-in-out;
    box-shadow: 0 0 10px rgba(46, 204, 113, 0.4);
}

/* Cores específicas para canais */
.premium-fill { 
    background: linear-gradient(90deg, #f1c40f, #f39c12); /* Dourado */
    box-shadow: 0 0 10px rgba(241, 196, 15, 0.4);
} 
.war-fill { 
    background: linear-gradient(90deg, #e74c3c, #c0392b); /* Vermelho */
    box-shadow: 0 0 10px rgba(231, 76, 60, 0.4);
}

.premium-channel .chan-info span i { margin-left: 5px; font-size: 0.8rem; }
.text-gold { color: #f1c40f; }

/* Status Offline */
.offline-widget { text-align: center; border-color: #ff4d4d; }
.offline-widget h3 { color: #ff4d4d; justify-content: center; }
.offline-widget p { color: #ffcccc; margin-top: 10px; }


/* ========================================================== */
/* --- 7. ESTILOS ANTIGOS MANTIDOS (FORMS, MODAIS, LOJA, ETC) --- */
/* ========================================================== */

/* --- BOTÕES GENÉRICOS --- */
.btn-gamer { display: inline-block; background-color: transparent; border: 2px solid var(--primary-orange); color: var(--primary-orange); padding: 10px 20px; text-decoration: none; text-transform: uppercase; font-weight: bold; border-radius: 4px; transition: all 0.3s ease; cursor: pointer; text-align: center; }
.btn-gamer:hover { background-color: var(--primary-orange); color: #0a0a0a; box-shadow: 0 0 20px var(--primary-orange); }
.btn-gamer.btn-secondary { border-color: #999; color: #999; }
.btn-gamer.btn-secondary:hover { background-color: #999; color: #0a0a0a; box-shadow: 0 0 20px #999; }

/* --- PÁGINA NOTÍCIA COMPLETA --- */
.news-full-article { background-color: var(--card-bg); border: 1px solid var(--primary-orange); border-radius: 5px; padding: 30px 40px; box-shadow: 0 0 25px rgba(0, 170, 255, 0.1); }
.news-full-title { font-size: 2.5rem; color: #ffffff; text-shadow: 0 0 15px var(--primary-orange); margin-bottom: 10px; }
.news-full-date { color: #888; margin-bottom: 30px; border-bottom: 1px solid #444; padding-bottom: 15px; }
.news-full-content { font-family: Arial, Helvetica, sans-serif; color: #e0e0e0; line-height: 1.8; font-size: 1.1rem; }
.news-full-image { max-width: 100%; height: auto; max-height: 500px; object-fit: cover; border-radius: 5px; margin-bottom: 25px; display: block; margin-left: auto; margin-right: auto; }

/* --- FORMULÁRIOS --- */
.form-container { position: relative; max-width: 500px; margin: 40px auto; background-color: var(--card-bg); border: 1px solid var(--primary-orange); padding: 30px 40px; border-radius: 5px; box-shadow: 0 0 25px rgba(0, 170, 255, 0.2); max-height: 85vh; overflow-y: auto; }
.form-title { text-align: center; font-size: 2rem; color: #ffffff; text-transform: uppercase; margin-bottom: 30px; text-shadow: 0 0 15px var(--primary-orange); }
.form-group { margin-bottom: 20px; }
.form-group label { display: block; margin-bottom: 8px; color: #c0c0c0; text-transform: uppercase; font-size: 0.9rem; }
.form-group input { width: 100%; padding: 12px; background-color: #0a0a0a; border: 1px solid #444; border-radius: 4px; color: #e0e0e0; font-family: 'Orbitron', sans-serif; font-size: 1rem; transition: all 0.3s ease; }
.form-group input:focus { outline: none; border-color: var(--primary-orange); box-shadow: 0 0 10px rgba(0, 170, 255, 0.5); }
.gamer-form .btn-gamer { width: 100%; margin-top: 10px; font-size: 1.1rem; }
.form-extras { display: flex; justify-content: space-between; align-items: center; font-size: 0.9rem; margin-bottom: 20px; color: #888; }
.form-checkbox { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.dark-link { color: var(--primary-orange); text-decoration: none; }
.dark-link:hover { text-decoration: underline; }
.form-messages { padding: 15px; margin-bottom: 20px; border-radius: 4px; text-align: center; }
.form-messages p { margin: 0; }
.form-messages.error { background-color: rgba(255, 50, 50, 0.2); border: 1px solid #ff3232; color: #ffc8c8; }
.form-messages.success { background-color: rgba(50, 255, 50, 0.2); border: 1px solid #32ff32; color: #c8ffc8; }
.form-messages.info { background-color: rgba(50, 150, 255, 0.2); border: 1px solid #3296ff; color: #c8e0ff; }

/* --- MODAL --- */
.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); z-index: 1001; display: none; opacity: 0; transition: opacity 0.3s ease; }
.modal-overlay.active { display: block; opacity: 1; }
.modal { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1002; display: none; opacity: 0; transition: opacity 0.3s ease, transform 0.3s ease; }
.modal.active { display: block; opacity: 1; transform: translate(-50%, -50%) scale(1); }
.modal-close { position: absolute; top: 10px; right: 15px; font-size: 2rem; color: #888; background: none; border: none; cursor: pointer; transition: all 0.3s ease; }
.modal-close:hover { color: var(--primary-orange); transform: rotate(90deg); }

/* --- RANKING --- */
.page-main-title { text-align: center; font-size: 2.8rem; text-transform: uppercase; margin-bottom: 40px; color: #ffffff; text-shadow: 0 0 15px var(--primary-orange), 0 0 25px rgba(0, 170, 255, 0.5); }
.ranking-table-container { background-color: var(--card-bg); border: 1px solid var(--primary-orange); border-radius: 5px; padding: 20px; box-shadow: 0 0 25px rgba(0, 170, 255, 0.3); overflow-x: auto; }
.ranking-table-container table { width: 100%; border-collapse: collapse; }
.ranking-table-container th, .ranking-table-container td { padding: 15px; text-align: left; border-bottom: 1px solid #2a2a2a; }
.ranking-table-container thead th { color: var(--primary-orange); text-transform: uppercase; font-size: 1.1rem; border-bottom-width: 2px; border-bottom-color: var(--primary-orange); }
.ranking-table-container tbody tr { transition: background-color 0.3s ease; }
.ranking-table-container tbody tr:hover { background-color: rgba(0, 170, 255, 0.1); }
.rank-position { font-weight: bold; font-size: 1.2rem; color: #e0e0e0; text-align: center; width: 80px; }
.nation-capella { color: #c37cff; font-weight: bold; }
.nation-procyon { color: #6cbfff; font-weight: bold; }
.nation-neutral { color: #6cff8d; font-weight: bold; }
.status-online { color: #32ff32; font-weight: bold; text-shadow: 0 0 5px currentColor; }
.status-offline { color: #ff4d4d; font-weight: bold; text-shadow: 0 0 5px currentColor; }

/* --- DASHBOARD / PAINEL USUÁRIO --- */
.dashboard-container { display: flex; flex-wrap: wrap; gap: 30px; }
.dashboard-sidebar { flex: 1; min-width: 250px; }
.dashboard-main { flex: 3; min-width: 300px; }
.user-info-box, .user-actions-box, .dashboard-main { background-color: var(--card-bg); border: 1px solid var(--primary-orange); border-radius: 5px; padding: 25px; box-shadow: 0 0 15px rgba(0, 170, 255, 0.2); }
.user-info-box { margin-bottom: 30px; }
.user-info-box h3, .user-actions-box h3, .dashboard-main h2 { color: var(--primary-orange); text-transform: uppercase; border-bottom: 1px solid #444; padding-bottom: 10px; margin-bottom: 20px; margin-top: 0; }
.user-info-box .username { font-size: 1.5rem; font-weight: bold; color: #ffffff; }
.user-info-box .real-name { color: #aaa; }
.user-actions-box ul { list-style: none; padding: 0; }
.user-actions-box ul li a { display: block; padding: 10px 0; color: #e0e0e0; text-decoration: none; transition: all 0.3s ease; }
.user-actions-box ul li a:hover { color: var(--primary-orange); padding-left: 5px; }
.user-actions-box .logout-link { color: #ff4d4d; }
.character-list { display: grid; gap: 20px; }
.character-card { background-color: #0a0a0a; border: 1px solid #333; border-radius: 4px; padding: 20px; display: flex; justify-content: space-between; align-items: center; transition: all 0.3s ease; }
.character-card:hover { border-color: var(--primary-orange); transform: translateX(5px); }
.char-name { font-size: 1.2rem; font-weight: bold; color: #ffffff; }
.char-details { color: #aaa; font-size: 0.9rem; }
.char-actions .btn-gamer { padding: 8px 15px; font-size: 0.9rem; }

/* --- ADICIONAR PONTOS --- */
.add-points-container { max-width: 600px; margin: 0 auto; }
.character-header { text-align: center; border-bottom: 1px solid #444; padding-bottom: 20px; margin-bottom: 20px; }
.character-header h2 { font-size: 2rem; color: #ffffff; margin: 0; }
.character-header p { color: #aaa; }
.points-display { text-align: center; font-size: 1.2rem; margin-bottom: 30px; }
.points-display span { color: var(--primary-orange); font-weight: bold; font-size: 1.8rem; }
.points-group { display: flex; justify-content: space-between; align-items: center; }
.points-group label { flex-basis: 30%; margin: 0; }
.points-control { display: flex; align-items: center; flex-basis: 40%; }
.points-control input { text-align: center; border-left: none; border-right: none; border-radius: 0; }
.btn-point { background-color: #0a0a0a; border: 1px solid #444; color: #e0e0e0; font-size: 1.5rem; width: 40px; height: 44px; cursor: pointer; transition: all 0.2s ease; }
.btn-point:hover { background-color: var(--primary-orange); color: #0a0a0a; border-color: var(--primary-orange); }
.btn-point.minus { border-radius: 4px 0 0 4px; }
.btn-point.plus { border-radius: 0 4px 4px 0; }
.current-stat { flex-basis: 30%; text-align: right; color: #888; }

/* --- PÁGINA DE DOWNLOAD --- */
.download-section { margin-bottom: 40px; }
.download-card { background-color: var(--card-bg); border: 1px solid var(--primary-orange); border-radius: 5px; padding: 30px; box-shadow: 0 0 25px rgba(0, 170, 255, 0.3); }
.download-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; border-bottom: 1px solid #444; padding-bottom: 15px; margin-bottom: 20px; }
.download-header h2 { color: #ffffff; font-size: 1.8rem; margin: 0; display: flex; align-items: center; gap: 15px; }
.version-tag { background-color: rgba(0, 170, 255, 0.2); color: var(--primary-orange); font-size: 0.9rem; padding: 5px 10px; border-radius: 4px; font-weight: bold; }
.download-body p { color: #c0c0c0; margin-bottom: 10px; }
.download-body .file-size { font-weight: bold; color: #e0e0e0; }
.download-links { margin-top: 25px; display: flex; flex-wrap: wrap; gap: 15px; }
.download-btn { display: flex; align-items: center; justify-content: center; gap: 10px; flex-grow: 1; }
.drivers-list { display: flex; flex-direction: column; gap: 1px; background-color: #333; }
.driver-item { display: flex; justify-content: space-between; align-items: center; padding: 15px; background-color: #0a0a0a; color: #e0e0e0; text-decoration: none; transition: all 0.3s ease; }
.driver-item:hover { background-color: rgba(255, 140, 0, 0.1); color: var(--primary-orange); }
.driver-item i { opacity: 0.5; }
.requirements-table { overflow-x: auto; }
.requirements-table table { width: 100%; border-collapse: collapse; margin-top: 15px; }
.requirements-table th, .requirements-table td { padding: 12px 15px; border: 1px solid #2a2a2a; text-align: left; }
.requirements-table thead th { background-color: #0a0a0a; color: var(--primary-orange); font-size: 1rem; }
.requirements-table tbody td:first-child { font-weight: bold; color: #fff; width: 15%; }

/* --- ADMIN PANEL --- */
.admin-menu { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin-top: 20px; }
.admin-menu-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 15px; padding: 30px; background-color: #0a0a0a; border: 1px solid #333; border-radius: 5px; color: #e0e0e0; text-decoration: none; text-align: center; transition: all 0.3s ease; }
.admin-menu-item:hover { border-color: var(--primary-orange); color: var(--primary-orange); transform: translateY(-5px); box-shadow: 0 5px 15px rgba(0, 170, 255, 0.2); }
.admin-menu-item i { font-size: 3rem; }
.admin-menu-item span { font-size: 1.1rem; font-weight: bold; }
.admin-message { max-width: 100%; margin-bottom: 30px; }
.admin-grid { display: grid; grid-template-columns: 1fr 1.5fr; gap: 30px; }
.admin-form-container, .admin-list-container { background-color: var(--card-bg); border: 1px solid var(--primary-orange); padding: 30px; border-radius: 5px; }
.admin-form-container h3, .admin-list-container h3 { color: var(--primary-orange); text-transform: uppercase; border-bottom: 1px solid #444; padding-bottom: 10px; margin-bottom: 20px; margin-top: 0; }
.admin-form-container textarea { width: 100%; padding: 12px; background-color: #0a0a0a; border: 1px solid #444; border-radius: 4px; color: #e0e0e0; font-family: Arial, sans-serif; font-size: 1rem; resize: vertical; }
.admin-form-container small { display: block; margin-top: 8px; font-size: 0.8rem; color: #888; }
.admin-actions { display: flex; gap: 10px; }
.btn-action { padding: 5px 10px; border: 1px solid; border-radius: 3px; color: #fff; text-decoration: none; font-size: 0.8rem; cursor: pointer; background: none; font-family: 'Orbitron', sans-serif; text-transform: uppercase; }
.btn-action.edit { border-color: #ffab40; color: #ffab40; }
.btn-action.edit:hover { background-color: #ffab40; color: #0a0a0a; }
.btn-action.delete { border-color: #ff4d4d; color: #ff4d4d; }
.btn-action.delete:hover { background-color: #ff4d4d; color: #fff; }
.admin-search-form { display: flex; gap: 15px; margin-bottom: 20px; }
.admin-search-form input { flex-grow: 1; padding: 12px; background-color: #0a0a0a; border: 1px solid #444; border-radius: 4px; color: #e0e0e0; font-family: 'Orbitron', sans-serif; font-size: 1rem; }
.char-edit-form { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.char-edit-form div { display: flex; flex-direction: column; }
.char-edit-form label { margin-bottom: 5px; font-size: 0.9rem; color: #aaa; }
.char-edit-form input { width: 100%; padding: 10px; background-color: #0a0a0a; border: 1px solid #444; border-radius: 4px; color: #e0e0e0; font-family: 'Orbitron', sans-serif; }
.char-edit-form button, .char-edit-form a { grid-column: 1 / -1; }

/* --- CHOICES.JS --- */
.choices { margin-bottom: 0 !important; }
.choices__inner { background-color: #0a0a0a; border: 1px solid #444; border-radius: 4px; padding: 7px 12px !important; font-size: 1rem; color: #e0e0e0; font-family: 'Orbitron', sans-serif; min-height: 44px; }
.is-open .choices__inner { border-color: var(--primary-orange); border-radius: 4px 4px 0 0; }
.choices__list--dropdown, .choices__list[aria-expanded] { background-color: #0a0a0a !important; border: 1px solid var(--primary-orange); border-top: none; border-radius: 0 0 4px 4px; }
.choices__item--choice { padding: 10px 12px !important; font-family: Arial, sans-serif; color: #c0c0c0 !important; }
.choices__item--choice.is-highlighted { background-color: rgba(0, 170, 255, 0.2) !important; color: #ffffff !important; }
.choices__input { background-color: #0a0a0a !important; color: #e0e0e0; }
.choices__item--selectable { color: #c0c0c0; }
.choices__list--dropdown .choices__list::-webkit-scrollbar { width: 8px; background-color: #0a0a0a; }
.choices__list--dropdown .choices__list::-webkit-scrollbar-thumb { background-color: #444; border-radius: 4px; }

/* --- PÁGINA DE DOAÇÕES --- */
.donation-container { display: grid; grid-template-columns: 1fr 2fr; gap: 30px; }
.donation-packages h3, .donation-form-area h3 { color: var(--primary-orange); border-bottom: 1px solid #444; padding-bottom: 10px; margin-top: 0; }
.package-card { background-color: #0a0a0a; border: 1px solid #333; padding: 20px; border-radius: 5px; cursor: pointer; transition: all 0.3s ease; margin-bottom: 15px; }
.package-card:hover { border-color: var(--primary-orange); transform: translateX(5px); }
.package-card.active { border-color: var(--primary-orange); box-shadow: 0 0 15px rgba(0, 170, 255, 0.3); }
.package-card h4 { margin: 0 0 5px 0; color: #fff; }
.package-value { font-size: 1.2rem; font-weight: bold; color: var(--primary-orange); }
.package-bonus { color: #aaa; }
#donation-instructions { text-align: center; padding: 50px 20px; color: #888; }
.qr-code-container { text-align: center; margin: 20px 0; }
#qr-code-image { max-width: 200px; border: 5px solid #333; border-radius: 5px; }
input[type="file"] { background-color: #0a0a0a; border: 1px solid #444; padding: 10px; border-radius: 4px; color: #e0e0e0; }

/* --- DROPDOWN MENU --- */
.dropdown { position: relative; display: inline-block; }
.dropdown-content { display: none; position: absolute; background-color: rgba(10, 10, 10, 0.95); min-width: 220px; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); z-index: 1; border: 1px solid var(--primary-orange); border-top: none; border-radius: 0 0 5px 5px; }
.dropdown-content a { color: #e0e0e0; padding: 12px 16px; text-decoration: none; display: block; text-align: left; border-bottom: none !important; }
.dropdown-content a:hover { background-color: rgba(255, 140, 0, 0.2); color: #fff !important; }
.dropdown:hover .dropdown-content { display: block; }
.dropbtn::after { content: ' \25BC'; font-size: 0.7em; }

/* --- LOJA E RECARGA --- */
.loja-container { max-width: 1200px; margin: 20px auto; padding: 30px; background-color: var(--card-bg); border-radius: 5px; border: 1px solid var(--primary-orange); box-shadow: 0 0 25px rgba(0, 170, 255, 0.3); }
.loja-container .saldo-info { text-align: center; margin-bottom: 40px; font-size: 1.5rem; font-weight: bold; color: #ffffff; }
.loja-container .saldo-info span { color: #6cff8d; text-shadow: 0 0 10px #6cff8d; }
.loja-container .section-title { text-align: center; font-size: 2.2rem; margin-bottom: 30px; color: #ffffff; text-transform: uppercase; text-shadow: 0 0 15px var(--primary-orange); display: block; border-left: none; }
.shop-grid, .recarga-grid { display: flex; flex-wrap: wrap; gap: 25px; justify-content: center; margin-bottom: 40px; }
.shop-card, .recarga-card { background-color: #0a0a0a; border: 1px solid #333; border-radius: 5px; width: 280px; padding: 20px; text-align: center; transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s; }
.shop-card:hover, .recarga-card:hover { transform: translateY(-5px); border-color: var(--primary-orange); box-shadow: 0 0 20px rgba(255, 140, 0, 0.4); }
.shop-card img { max-width: 150px; height: auto; margin-bottom: 15px; }
.shop-card h4, .recarga-card h4 { font-size: 1.1rem; margin-bottom: 10px; color: #ffffff; min-height: 40px; }
.shop-card .item-price { font-size: 1.2rem; font-weight: bold; color: var(--primary-orange); margin-bottom: 20px; }
.recarga-card img { max-width: 80px; margin-bottom: 15px; }
.recarga-card .price { font-size: 1.1rem; color: #c0c0c0; margin: 5px 0; }
.recarga-card .coins { font-weight: bold; color: #6cff8d; margin-bottom: 20px; font-size: 1.1rem; }
.shop-card .btn-gamer, .recarga-card .btn-gamer { width: 100%; }
.quantity-control input { background: #111; border: 1px solid #333; color: #fff; text-align: center; border-radius: 8px; }
.quantity-control label { color: #bbb; font-size: 0.85rem; margin-right: 4px; }

/* --- RODAPÉ --- */
.main-footer { background-color: rgba(10, 10, 10, 0.8); border-top: 1px solid #222; padding: 20px 0; text-align: center; font-size: 0.9rem; color: #888; margin-top: 50px; }

/* ========================================================== */
/* --- 8. RESPONSIVIDADE (MEDIA QUERIES) --- */
/* ========================================================== */
@media (max-width: 992px) {
    .main-layout { grid-template-columns: 1fr; }
    .admin-grid { grid-template-columns: 1fr; }
    .page-main-title, .hero-content .glitch-text { font-size: 2.2rem; }
    .shop-grid, .recarga-grid { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
    .news-card { flex-direction: column; }
    .news-img-wrapper { width: 100%; height: 250px; }
}

@media (max-width: 768px) {
    .main-content { padding-top: 0; }
    .container { padding: 0 15px; }
    .hero-section { height: 60vh; }
    .glitch-text { font-size: 2.5rem; }
    .hero-content p { font-size: 1rem; }
    .hero-content .btn-hero { padding: 12px 25px; font-size: 1rem; }
    .rates-grid { gap: 20px; }
    
    /* Menu Mobile */
    .navbar { position: relative; }
    .navbar-toggler { display: block; background: none; border: 2px solid var(--primary-orange); color: var(--primary-orange); font-size: 1.5rem; padding: 5px 10px; border-radius: 5px; cursor: pointer; z-index: 9999; }
    .nav-links { display: none; position: absolute; top: 100%; left: 0; width: 100%; flex-direction: column; background-color: rgba(10, 10, 10, 0.95); padding: 20px 0; z-index: 9998; }
    .nav-links.active { display: flex; position: absolute; top: 70px; right: 10px; flex-direction: column; background: rgba(0, 0, 0, 0.95); padding: 15px; border-radius: 8px; gap: 10px; z-index: 2000; width: auto; min-width: 200px; border: 1px solid #333; }
    .nav-links li { width: 100%; text-align: center; }
    .nav-links a { padding: 10px 20px; width: 100%; display: block; }
    
    .logo-container img { position: relative; z-index: 1000; }
    .donation-container { grid-template-columns: 1fr; }
    .shop-card, .recarga-card { width: 100%; max-width: 320px; margin-left: auto; margin-right: auto; }
    .points-group { flex-direction: column; align-items: flex-start; gap: 10px; }
    .points-control { width: 100%; }
}

/* Navbar Toggler oculta em Desktop */
@media (min-width: 769px) {
    .navbar-toggler { display: none; }
}

/* Mensagens Modal Change Password */
#changePasswordModal .form-messages p { padding: 12px 14px; border-radius: 6px; margin-bottom: 12px; font-size: 14px; text-align: center; font-weight: bold; }
#changePasswordModal .form-messages .success-message { background: rgba(0, 255, 100, 0.15); border: 1px solid #00ff85; color: #00ff85; }
#changePasswordModal .form-messages .error-message { background: rgba(255, 60, 60, 0.15); border: 1px solid #ff3c3c; color: #ff3c3c; }
#changePasswordModal .form-messages .info-message { background: rgba(0, 140, 255, 0.15); border: 1px solid #009dff; color: #009dff; }

.dropdown.mobile-active .dropdown-content {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        position: relative !important;
        top: 0 !important;
        transform: none !important;
        animation: fadeIn 0.3s ease;
    }
    
    /* Pinta o texto de Laranja para indicar que está aberto */
    .dropdown.mobile-active .dropbtn {
        color: var(--primary-orange) !important;
        background: rgba(255, 140, 0, 0.1);
    }
/* ========================================================== */
/* --- ESTILO DO LOGO NO BANNER (HERO) --- */
/* ========================================================== */

.hero-logo {
    max-width: 700px; /* Tamanho máximo no Desktop */
    width: 100%;      /* Responsivo */
    height: auto;
    margin-bottom: 20px;
    
    /* Efeito de brilho atrás do logo (opcional) */
    filter: drop-shadow(0 0 20px rgba(222, 129, 7, 0.4)); 
    
    /* Animação suave ao passar o mouse */
    transition: transform 0.3s ease, filter 0.3s ease;
}

.hero-logo:hover {
    transform: scale(1.02); /* Leve zoom ao passar o mouse */
    filter: drop-shadow(0 0 30px rgba(234, 145, 20, 0.7)); /* Aumenta o brilho */
}

/* Ajuste para Celulares */
@media (max-width: 768px) {
    .hero-logo {
        max-width: 300px; /* Logo menor no celular para não quebrar a tela */
        margin-bottom: 10px;
    }
}

/* ========================================================== */
/* --- PAINEL ADMINISTRATIVO PROFISSIONAL --- */
/* ========================================================== */

/* Cabeçalho do Admin */
.admin-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(90deg, rgba(20,20,20,0.9) 0%, rgba(40,40,40,0.8) 100%);
    padding: 30px;
    border-radius: 8px;
    border-left: 5px solid var(--primary-orange);
    margin-bottom: 40px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    border: 1px solid rgba(255,255,255,0.05);
}

.admin-title h1 {
    font-size: 2rem;
    color: #fff;
    margin: 0 0 5px 0;
    text-transform: uppercase;
}

.admin-title h1 i { color: var(--primary-orange); margin-right: 10px; }
.admin-title p { margin: 0; color: #aaa; }

.badge-admin {
    background: var(--primary-orange);
    color: #000;
    padding: 5px 15px;
    border-radius: 20px;
    font-weight: bold;
    text-transform: uppercase;
    box-shadow: 0 0 15px var(--primary-orange);
}

.badge-staff {
    background: #00d2ff;
    color: #000;
    padding: 5px 15px;
    border-radius: 20px;
    font-weight: bold;
    text-transform: uppercase;
    box-shadow: 0 0 15px #00d2ff;
}

/* Grid Layout */
.admin-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Responsivo automático */
    gap: 25px;
    margin-bottom: 40px;
}

/* Cartões (Cards) */
.admin-card {
    background: rgba(20, 20, 20, 0.8);
    border: 1px solid #333;
    border-radius: 8px;
    padding: 25px;
    display: flex;
    align-items: center;
    text-decoration: none;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Efeito elástico */
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(5px);
}

.admin-card:before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(45deg, transparent, rgba(255, 140, 0, 0.05), transparent);
    transform: translateX(-100%);
    transition: 0.5s;
}

.admin-card:hover:not(.locked) {
    transform: translateY(-10px);
    border-color: var(--primary-orange);
    box-shadow: 0 10px 25px rgba(255, 140, 0, 0.15);
}

.admin-card:hover:not(.locked):before {
    transform: translateX(100%);
}

/* Ícones e Texto */
.card-icon {
    font-size: 2.5rem;
    color: var(--primary-orange);
    margin-right: 20px;
    width: 60px;
    text-align: center;
    transition: transform 0.3s;
}

.admin-card:hover:not(.locked) .card-icon {
    transform: scale(1.2) rotate(5deg);
}

.card-info h3 {
    margin: 0;
    color: #fff;
    font-size: 1.2rem;
    text-transform: uppercase;
}

.card-info span {
    font-size: 0.85rem;
    color: #777;
    display: block;
    margin-top: 3px;
}

.card-arrow {
    margin-left: auto;
    color: #444;
    transition: all 0.3s;
}

.admin-card:hover:not(.locked) .card-arrow {
    color: #fff;
    transform: translateX(5px);
}

/* Estado Bloqueado (Locked) */
.admin-card.locked {
    background: #111;
    border-color: #222;
    cursor: not-allowed;
    opacity: 0.6;
}

.admin-card.locked .card-icon { color: #444; }
.admin-card.locked h3 { color: #555; }
.lock-icon {
    margin-left: auto;
    color: #ff4d4d;
    font-size: 1.2rem;
}

/* Rodapé do Admin */
.admin-footer {
    text-align: center;
    margin-top: 30px;
    border-top: 1px solid #222;
    padding-top: 20px;
}

.back-link {
    color: #888;
    text-decoration: none;
    font-size: 1rem;
    transition: color 0.3s;
}
.back-link:hover { color: #fff; }

/* Responsivo para celular */
@media (max-width: 768px) {
    .admin-header {
        flex-direction: column;
        text-align: center;
        gap: 15px;
    }
    .admin-grid {
        grid-template-columns: 1fr;
    }
}
/* ========================================================== */
/* --- HEADER PROFISSIONAL ANIMADO --- */
/* ========================================================== */
body {
    /* Adiciona espaço no topo pq o header agora é fixo e flutua por cima */
    padding-top: 85px; 
}

.main-header {
    background-color: rgba(10, 10, 10, 0.6);
    border-bottom: 1px solid rgba(255, 140, 0, 0.3);
    padding: 15px 0;
    
    /* MUDANÇA AQUI: De sticky para fixed */
    position: fixed; 
    width: 100%;
    top: 0;
    left: 0;
    
    z-index: 2000;
    backdrop-filter: blur(5px);
    transition: all 0.4s ease;
}

/* Quando rolar para baixo (controlado pelo JS) */
.main-header.scrolled {
    background-color: rgba(5, 5, 5, 0.98); /* Quase sólido */
    padding: 8px 0; /* Mais fino */
    border-bottom: 2px solid var(--primary-orange);
    box-shadow: 0 5px 20px rgba(0,0,0,0.9);
}

/* --- LINKS DO MENU (Efeito Glitch/Futurista no Hover) --- */
.nav-links {
    gap: 30px;
}

.nav-item {
    position: relative;
    color: #ccc;
    font-size: 0.95rem;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 1px;
    padding: 5px 0;
    transition: color 0.3s;
    overflow: hidden;
}

/* Efeito Active/Hover */
.nav-item:hover, .nav-item.active {
    color: var(--primary-orange);
    text-shadow: 0 0 10px rgba(255, 140, 0, 0.6);
}

/* Linha animada embaixo do link */
.nav-item::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background: var(--primary-orange);
    transition: all 0.3s ease-out;
    transform: translateX(-50%);
    box-shadow: 0 0 10px var(--primary-orange);
}

.nav-item:hover::after, .nav-item.active::after {
    width: 100%;
}

/* --- CORREÇÃO DEFINITIVA BOTÃO LOGIN (SEM CORTES) --- */
.btn-login-glow {
    /* Define como caixa flexível */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    
    /* Tamanho e Ajustes */
    height: 38px; /* Reduzi levemente de 40 para 38 para caber melhor */
    padding: 0 25px;
    box-sizing: border-box;
    
    /* CORREÇÃO DO CORTE NA BORDA INFERIOR: */
    vertical-align: middle; 
    margin-bottom: 2px; /* Dá um leve respiro na parte de baixo */
    
    /* Visual */
    background: transparent;
    border: 2px solid var(--primary-orange);
    color: var(--primary-orange) !important;
    border-radius: 4px;
    
    /* Texto */
    font-weight: 800;
    text-transform: uppercase;
    text-decoration: none;
    font-size: 0.9rem;
    line-height: 1;
    
    /* Garante que nada corte */
    overflow: visible;
    
    transition: all 0.3s ease;
}

/* Hover */
.btn-login-glow:hover {
    background-color: var(--primary-orange);
    color: #000 !important;
    box-shadow: 0 0 20px var(--primary-orange);
    transform: translateY(-2px);
    border-color: var(--primary-orange);
}

.btn-login-glow:hover i {
    color: #000 !important;
}

/* --- DROPDOWN ANIMADO --- */
.dropdown-content {
    display: block; /* Mudança para permitir animação */
    opacity: 0;
    visibility: hidden;
    transform: translateY(15px);
    transition: all 0.3s ease;
    background-color: rgba(10, 10, 10, 0.95);
    border: 1px solid var(--primary-orange);
    border-top: 3px solid var(--primary-orange);
    border-radius: 0 0 5px 5px;
    min-width: 180px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.8);
}

.dropdown:hover .dropdown-content {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-content a {
    padding: 12px 20px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    transition: 0.2s;
    color: #ccc;
    font-size: 0.9rem;
}

.dropdown-content a:hover {
    background: rgba(255, 140, 0, 0.15);
    color: #fff;
    padding-left: 25px; /* Move levemente para a direita */
}

/* --- BOTÃO MOBILE (HAMBURGUER ANIMADO) --- */
.navbar-toggler {
    background: none;
    border: none;
    cursor: pointer;
    display: none; /* Só aparece no mobile */
    flex-direction: column;
    gap: 5px;
}

.navbar-toggler .bar {
    width: 30px;
    height: 3px;
    background-color: var(--primary-orange);
    transition: 0.3s;
}

/* Responsivo Header */
@media (max-width: 900px) {
    .navbar-toggler { display: flex; }
    
    .nav-links {
        display: none; /* Escondido por padrão no mobile */
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: rgba(5, 5, 5, 0.98);
        flex-direction: column;
        padding: 20px 0;
        border-bottom: 2px solid var(--primary-orange);
        gap: 0;
    }
    
    .nav-links.active { display: flex; }
    
    .nav-links li { width: 100%; text-align: center; }
    
    .nav-item, .btn-login-glow, .dropdown-content a {
        display: block;
        padding: 15px;
        width: 100%;
        border-bottom: 1px solid rgba(255,255,255,0.05);
    }
    
    /* Remove efeitos complexos no mobile para performance */
    .nav-item::after { display: none; }
    
    .dropdown:hover .dropdown-content {
        position: relative;
        box-shadow: none;
        background: transparent;
        border: none;
        padding-left: 0;
    }
}
/* ========================================================== */
/* --- CORREÇÃO DE Z-INDEX (MODAL SEMPRE NA FRENTE) --- */
/* ========================================================== */

/* Fundo escuro do modal */
.modal-overlay {
    z-index: 9998 !important; /* Maior que o header (2000) */
}

/* A caixa do modal em si */
.modal {
    z-index: 9999 !important; /* O elemento mais alto da página */
}

/* Ajuste fino para garantir que o header não atrapalhe */
.main-header {
    z-index: 2000; 
}
/* ========================================================== */
/* --- ESTILIZAÇÃO COMPLETA DOS MODAIS (LOGIN E REGISTRO) --- */
/* ========================================================== */

/* --- 1. ESTRUTURA DOS MODAIS --- */
.login-modal-content {
    background: linear-gradient(145deg, rgba(15,15,15,0.95) 0%, rgba(5,5,5,0.98) 100%);
    border: 1px solid var(--primary-orange);
    width: 100%;
    max-width: 450px; /* Login compacto */
    padding: 40px;
    border-radius: 10px;
    box-shadow: 0 0 40px rgba(0,0,0,0.8);
    position: relative;
}

.register-modal-content {
    background-color: var(--bg-dark);
    border: 1px solid var(--primary-orange);
    width: 95%;
    max-width: 800px; /* Registro largo para 2 colunas */
    padding: 30px;
    border-radius: 8px;
    max-height: 90vh;
    overflow-y: auto;
}

/* --- 2. CABEÇALHO DO MODAL --- */
.login-header-area, .modal-header {
    text-align: center;
    margin-bottom: 25px;
}

.glitch-title, .modal-header h2 {
    font-size: 2.2rem;
    color: #fff;
    margin: 0;
    text-transform: uppercase;
    font-weight: 800;
    text-shadow: 0 0 10px var(--primary-orange);
    letter-spacing: 2px;
}

.login-header-area p, .modal-header p {
    color: #888;
    margin-top: 5px;
    font-size: 0.9rem;
    text-transform: uppercase;
}

/* --- 3. INPUTS MODERNOS (O QUE ESTÁ FALTANDO NA FOTO) --- */
.input-group-modern {
    position: relative;
    margin-bottom: 20px;
}

/* O ícone dentro do input */
.input-group-modern i {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #666;
    z-index: 2;
    transition: color 0.3s;
}

/* A caixa de texto em si */
.input-group-modern input {
    width: 100%;
    padding: 12px 12px 12px 45px; /* Espaço na esquerda para o ícone não ficar em cima do texto */
    background-color: #080808 !important; /* Força o fundo preto */
    border: 1px solid #333;
    border-radius: 4px;
    color: #fff;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.95rem;
    transition: all 0.3s;
}

/* Efeito ao clicar no input */
.input-group-modern input:focus {
    border-color: var(--primary-orange);
    box-shadow: 0 0 15px rgba(255, 140, 0, 0.2);
    outline: none;
    background-color: #000 !important;
}

.input-group-modern input:focus + i,
.input-group-modern input:focus ~ i { 
    color: var(--primary-orange); /* Ícone fica laranja */
}

/* --- 4. GRID DE DUAS COLUNAS (PARA O REGISTRO) --- */
.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin-bottom: 20px;
}

.col-title {
    color: var(--primary-orange);
    font-size: 0.9rem;
    text-transform: uppercase;
    margin-bottom: 15px;
    border-left: 3px solid var(--primary-orange);
    padding-left: 10px;
}

/* --- 5. CHECKBOX PERSONALIZADO (Tirar o quadrado branco) --- */
.form-extras-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    font-size: 0.9rem;
}

.custom-checkbox {
    display: flex;
    align-items: center;
    position: relative;
    padding-left: 30px;
    cursor: pointer;
    color: #ccc;
    user-select: none;
}

.custom-checkbox input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 20px;
    width: 20px;
    background-color: #111;
    border: 1px solid #555;
    border-radius: 3px;
    transition: all 0.2s;
}

.custom-checkbox input:checked ~ .checkmark {
    background-color: var(--primary-orange);
    border-color: var(--primary-orange);
}

.checkmark:after {
    content: "";
    position: absolute;
    display: none;
    left: 7px;
    top: 3px;
    width: 5px;
    height: 10px;
    border: solid #000;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.custom-checkbox input:checked ~ .checkmark:after {
    display: block;
}

/* --- 6. RODAPÉ E BOTÕES --- */
.login-footer {
    text-align: center;
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid rgba(255,255,255,0.05);
    color: #666;
    font-size: 0.9rem;
}

.forgot-link {
    color: #888;
    text-decoration: none;
}
.forgot-link:hover { color: var(--primary-orange); }

.register-link-action {
    color: #fff;
    font-weight: bold;
    text-decoration: none;
    border-bottom: 1px dashed var(--primary-orange);
}

.form-footer-area {
    border-top: 1px solid rgba(255,255,255,0.1);
    padding-top: 20px;
}

.terms-check {
    margin-bottom: 15px;
    display: flex;
    justify-content: center;
    color: #888;
    font-size: 0.85rem;
}

.full-width { width: 100%; }
.full-width-btn { width: 100%; padding: 15px; font-size: 1.1rem; }

/* --- 7. RESPONSIVO (CELULAR) --- */
@media (max-width: 768px) {
    .form-grid { grid-template-columns: 1fr; gap: 10px; }
    .register-modal-content { padding: 20px; width: 95%; }
}
/* ========================================================== */
/* --- PÁGINA DE NOTÍCIAS (GRID E ARTIGO) --- */
/* ========================================================== */

/* --- HEADER DA PÁGINA (LISTAGEM) --- */
.page-header {
    text-align: center;
    margin: 40px 0 60px 0;
}

.page-main-title {
    font-size: 2.5rem;
    color: #fff;
    text-transform: uppercase;
    text-shadow: 0 0 15px var(--primary-orange);
    margin-bottom: 10px;
}

.page-header p {
    color: #888;
    font-size: 1.1rem;
}

.title-line-center {
    width: 80px;
    height: 4px;
    background: var(--primary-orange);
    margin: 20px auto;
    border-radius: 2px;
    box-shadow: 0 0 10px var(--primary-orange);
}

/* --- GRID DE NOTÍCIAS (CARTÕES LADO A LADO) --- */
.news-page-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); /* Responsivo Automático */
    gap: 30px;
    margin-bottom: 60px;
}

.news-grid-card {
    background-color: rgba(15, 15, 15, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.4s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.news-grid-card:hover {
    transform: translateY(-10px);
    border-color: var(--primary-orange);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.card-image-box {
    position: relative;
    height: 200px;
    overflow: hidden;
}

.card-image-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.news-grid-card:hover .card-image-box img {
    transform: scale(1.1);
}

.card-date {
    position: absolute;
    top: 15px;
    right: 15px;
    background: var(--primary-orange);
    color: #000;
    padding: 5px 10px;
    border-radius: 4px;
    text-align: center;
    font-weight: bold;
    display: flex;
    flex-direction: column;
    line-height: 1;
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
}

.card-date .day { font-size: 1.2rem; }
.card-date .month { font-size: 0.7rem; text-transform: uppercase; }

.card-details {
    padding: 25px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.card-details h3 { margin-top: 0; margin-bottom: 15px; line-height: 1.4; }
.card-details h3 a {
    color: #fff;
    text-decoration: none;
    font-size: 1.3rem;
    transition: color 0.3s;
}
.card-details h3 a:hover { color: var(--primary-orange); }

.card-details p {
    color: #aaa;
    font-size: 0.95rem;
    flex-grow: 1;
    margin-bottom: 20px;
}

/* --- LEITURA DE ARTIGO (SINGLE NEWS) --- */
.article-hero {
    position: relative;
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
    margin-bottom: -60px; /* Sobrepõe o container levemente */
    margin-top: -20px;
}

.article-bg {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-size: cover;
    background-position: center;
    filter: blur(4px) brightness(0.6); /* Desfoque e escurecimento na imagem de fundo */
    transform: scale(1.1);
}

.article-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to bottom, rgba(0,0,0,0.3) 0%, rgba(11,14,20,1) 100%);
}

.article-header-content {
    position: relative;
    z-index: 2;
    padding: 20px;
}

.article-header-content h1 {
    font-size: 3rem;
    color: #fff;
    text-shadow: 0 0 20px rgba(255, 140, 0, 0.6);
    margin: 15px 0;
}

.article-date {
    color: var(--primary-orange);
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.back-btn {
    display: inline-block;
    color: #ccc;
    text-decoration: none;
    margin-bottom: 20px;
    transition: color 0.3s;
    font-size: 0.9rem;
    text-transform: uppercase;
}
.back-btn:hover { color: #fff; }

.article-body-container {
    position: relative;
    z-index: 5;
    background: rgba(20, 20, 20, 0.95);
    border: 1px solid rgba(255,255,255,0.05);
    border-top: 3px solid var(--primary-orange);
    padding: 50px;
    border-radius: 8px;
    box-shadow: 0 0 50px rgba(0,0,0,0.5);
    margin-bottom: 60px;
}

.article-content {
    color: #e0e0e0;
    font-size: 1.1rem;
    line-height: 1.8;
    font-family: Arial, sans-serif; /* Melhor leitura */
}

/* Imagens dentro do corpo da notícia */
.article-content img {
    max-width: 100%;
    height: auto;
    border-radius: 5px;
    margin: 20px 0;
    border: 1px solid #333;
}

.article-footer {
    margin-top: 50px;
    padding-top: 30px;
    border-top: 1px solid #333;
    text-align: center;
}

.article-footer p { color: #888; margin-bottom: 20px; }

/* Mensagem de Sem Notícias */
.no-news-container {
    text-align: center;
    padding: 80px 0;
    color: #666;
}
.no-news-container i { font-size: 4rem; margin-bottom: 20px; opacity: 0.5; }

/* Responsivo */
@media (max-width: 768px) {
    .article-header-content h1 { font-size: 1.8rem; }
    .article-body-container { padding: 25px; }
    .news-page-grid { grid-template-columns: 1fr; }
}
/* --- CORREÇÃO DEFINITIVA DA IMAGEM --- */

.article-hero {
    position: relative;
    height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
    margin-top: -85px; 
    padding-top: 85px;
    background-color: #000;
}

.article-bg {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

/* Faz a tag IMG agir como background */
.article-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* ISSO É MÁGICA: Corta a imagem para caber sem distorcer */
    object-position: center;
    filter: brightness(0.9); /* Escurece para o texto aparecer */
}

.article-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to bottom, rgba(0,0,0,0.05) 0%, rgba(11,14,20,0.6) 100%);
    z-index: 1; /* Fica acima da imagem */
}

.article-header-content {
    position: relative;
    z-index: 10;
    margin-top: 40px;
}

/* ========================================================== */
/* --- PÁGINA DE RANKING (PÓDIO E TABELA) --- */
/* ========================================================== */

/* Cabeçalho */
.ranking-header {
    text-align: center;
    margin-bottom: 50px;
}
.glitch-text-rank {
    font-size: 3rem;
    color: #fff;
    text-transform: uppercase;
    text-shadow: 0 0 15px var(--primary-orange);
    margin-bottom: 5px;
}
.ranking-header p { color: #888; text-transform: uppercase; letter-spacing: 2px; }

/* --- PÓDIO (TOP 3) - VERSÃO ÍCONES --- */
.ranking-podium {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 20px;
    margin-bottom: 60px;
    padding-bottom: 20px;
}

.rank-card {
    background: rgba(20, 20, 20, 0.8);
    border: 1px solid #333;
    border-radius: 10px;
    padding: 30px 20px;
    text-align: center;
    position: relative;
    width: 260px;
    transition: transform 0.3s;
    backdrop-filter: blur(5px);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.rank-card:hover { transform: translateY(-10px); }

/* Cores e Tamanhos */
.rank-1 {
    width: 300px; /* Maior */
    padding: 40px 20px;
    border-color: #ffd700;
    background: linear-gradient(to bottom, rgba(255, 215, 0, 0.1), rgba(10, 10, 10, 0.95));
    z-index: 2;
    box-shadow: 0 0 40px rgba(255, 215, 0, 0.15);
}

.rank-2 {
    border-color: #c0c0c0;
    background: linear-gradient(to bottom, rgba(192, 192, 192, 0.1), rgba(10, 10, 10, 0.9));
}

.rank-3 {
    border-color: #cd7f32;
    background: linear-gradient(to bottom, rgba(205, 127, 50, 0.1), rgba(10, 10, 10, 0.9));
}

/* Ícones Grandes */
.crown-icon { font-size: 3.5rem; color: #ffd700; margin-bottom: 15px; animation: float 3s ease-in-out infinite; }
.medal-icon { font-size: 2.5rem; margin-bottom: 15px; }
.medal-icon.silver { color: #c0c0c0; }
.medal-icon.bronze { color: #cd7f32; }

@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* Texto */
.char-name { font-size: 1.4rem; color: #fff; margin: 0 0 10px 0; font-weight: bold; }
.rank-1 .char-name { font-size: 1.8rem; color: #ffd700; text-shadow: 0 0 10px rgba(255, 215, 0, 0.5); }

/* Stats (Level e Nação) */
.podium-stats {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-bottom: 15px;
    font-size: 0.9rem;
}

.lvl-tag {
    background: #333;
    padding: 2px 8px;
    border-radius: 4px;
    color: var(--primary-orange);
    font-weight: bold;
}

/* Status Online/Offline no Pódio */
.podium-status {
    font-size: 0.85rem;
    font-weight: bold;
    padding: 5px 15px;
    border-radius: 20px;
    background: rgba(0,0,0,0.5);
    border: 1px solid #333;
}
.podium-status.status-online { color: #2ecc71; border-color: #2ecc71; }
.podium-status.status-offline { color: #666; border-color: #444; }

/* Número de Fundo */
.rank-number {
    font-size: 5rem;
    font-weight: 900;
    opacity: 0.05;
    position: absolute;
    bottom: -10px; right: 10px;
    line-height: 1;
    pointer-events: none;
}

/* --- TABELA MODERNA (LISTA) --- */
.ranking-list-wrapper {
    background: rgba(15, 15, 15, 0.9);
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.05);
    padding: 10px;
    box-shadow: 0 0 30px rgba(0,0,0,0.5);
    overflow-x: auto;
}

.ranking-table-modern {
    width: 100%;
    border-collapse: separate; /* Permite espaçamento entre linhas */
    border-spacing: 0 5px; /* Espaço vertical entre linhas */
}

.ranking-table-modern thead th {
    text-align: left;
    padding: 15px;
    color: #888;
    text-transform: uppercase;
    font-size: 0.85rem;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.ranking-table-modern tbody tr {
    background-color: rgba(255,255,255,0.02);
    transition: all 0.2s;
}

.ranking-table-modern tbody tr:hover {
    background-color: rgba(255, 140, 0, 0.1);
    transform: scale(1.01);
}

.ranking-table-modern td {
    padding: 15px;
    color: #e0e0e0;
    vertical-align: middle;
}

.td-rank .rank-circle {
    display: inline-block;
    width: 30px; height: 30px;
    background: #111;
    color: #fff;
    text-align: center;
    line-height: 30px;
    border-radius: 50%;
    font-weight: bold;
    border: 1px solid #333;
}

.td-name strong { color: #fff; font-size: 1rem; }
.td-lvl { color: var(--primary-orange); font-weight: bold; }

.status-online i { color: #2ecc71; font-size: 0.7rem; margin-right: 5px; }
.status-online { color: #2ecc71; font-weight: bold; }

.status-offline i { color: #e74c3c; font-size: 0.7rem; margin-right: 5px; }
.status-offline { color: #666; }

/* Mensagem Sem Dados */
.no-data-box { text-align: center; padding: 50px; color: #666; }
.no-data-box i { font-size: 3rem; margin-bottom: 15px; opacity: 0.5; }

/* Responsivo */
@media (max-width: 900px) {
    .ranking-podium { flex-direction: column; align-items: center; }
    /* Reordena para o #1 ficar em cima no mobile */
    .rank-1 { order: 1; margin-bottom: 20px; }
    .rank-2 { order: 2; }
    .rank-3 { order: 3; }
    .rank-card { width: 100%; max-width: 300px; }
}

/* ========================================================== */
/* --- ESTILOS ESPECÍFICOS RANKING DE GUILDAS --- */
/* ========================================================== */

/* Caixa do Emblema (Substitui Avatar) */
.guild-emblem-box {
    width: 80px; 
    height: 80px; 
    margin: 0 auto 15px auto;
    background: linear-gradient(135deg, #222, #111);
    border: 2px solid #444;
    border-radius: 10px; /* Quadrado arredondado em vez de círculo */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    color: #666;
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
}

/* Emblema do Top 1 (Dourado) */
.rank-1 .guild-emblem-box.emblem-gold {
    width: 100px; 
    height: 100px;
    border-color: #ffd700;
    color: #ffd700;
    background: linear-gradient(135deg, #333, #1a1a1a);
    font-size: 3.5rem;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.3);
}

/* Tag de Pontos */
.points-tag {
    font-size: 0.85rem;
    color: #ccc;
    background: rgba(255, 255, 255, 0.1);
    padding: 2px 8px;
    border-radius: 4px;
}

.td-points {
    color: #fff;
    font-weight: bold;
}

/* --- EXTRA: TAG DE PONTOS DA GUILDA --- */

.points-tag {
    font-size: 0.85rem;
    color: #fff;
    background: rgba(255, 215, 0, 0.15); /* Fundo dourado transparente */
    border: 1px solid rgba(255, 215, 0, 0.3);
    padding: 2px 10px;
    border-radius: 4px;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 5px;
}

.points-tag i {
    color: #ffd700;
    font-size: 0.8rem;
}

/* Cor do texto de pontos na tabela */
.td-points {
    color: #ffd700; /* Dourado */
    font-weight: bold;
    font-family: 'Orbitron', sans-serif;
}

/* ========================================================== */
/* --- PÁGINA DE DOWNLOADS (MODERNA) --- */
/* ========================================================== */

/* Header */
.download-page-header { text-align: center; margin-bottom: 50px; }
.glitch-text-dl { font-size: 3rem; color: #fff; text-transform: uppercase; text-shadow: 0 0 15px var(--primary-orange); margin-bottom: 5px; }
.download-page-header p { color: #888; font-size: 1.1rem; }

/* --- 1. CLIENT HERO CARD (DESTAQUE) --- */
.client-hero-card {
    background: linear-gradient(135deg, #151515, #0a0a0a);
    border: 1px solid var(--primary-orange);
    border-radius: 10px;
    padding: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 50px;
    box-shadow: 0 0 40px rgba(255, 140, 0, 0.15);
    position: relative;
    overflow: hidden;
}

/* Efeito de fundo */
.client-hero-card::before {
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: radial-gradient(circle at 80% 50%, rgba(255, 140, 0, 0.1), transparent 50%);
    pointer-events: none;
}

.client-info { flex: 1; z-index: 2; }
.client-art { flex: 0 0 300px; text-align: center; z-index: 2; }
.client-art img { max-width: 100%; height: auto; filter: drop-shadow(0 0 20px rgba(255,140,0,0.3)); }

.client-badge {
    display: inline-block; background: var(--primary-orange); color: #000;
    font-weight: bold; font-size: 0.8rem; padding: 3px 8px; border-radius: 4px;
    margin-bottom: 10px;
}

.client-info h2 { font-size: 2.5rem; margin: 0 0 10px 0; color: #fff; text-transform: uppercase; }

.client-meta { display: flex; gap: 20px; color: #aaa; margin-bottom: 30px; font-size: 1.1rem; }
.client-meta span i { color: var(--primary-orange); margin-right: 5px; }

/* Botões de Provedor (Drive, Mega...) */
.client-buttons { display: flex; gap: 15px; flex-wrap: wrap; }

.dl-btn-provider {
    background: #222;
    border: 1px solid #444;
    color: #fff;
    padding: 12px 25px;
    border-radius: 5px;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: bold;
    transition: all 0.3s;
    position: relative;
    overflow: hidden;
}

.dl-btn-provider i { font-size: 1.2rem; }

/* Efeito de cor específica no hover (definido no HTML) */
.dl-btn-provider:hover {
    background: var(--hover-color, #fff);
    border-color: var(--hover-color, #fff);
    color: #fff;
    box-shadow: 0 0 20px var(--hover-color, rgba(255,255,255,0.5));
    transform: translateY(-3px);
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

/* --- 2. GRID LAYOUT (UTILITIES & REQUISITOS) --- */
.download-grid-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

.grid-column-left { display: flex; flex-direction: column; gap: 30px; }

/* Card Utilitário (Patch/Drivers) */
.util-card, .req-card {
    background: rgba(20, 20, 20, 0.8);
    border: 1px solid #333;
    border-radius: 8px;
    padding: 25px;
    backdrop-filter: blur(5px);
}

.util-header { display: flex; gap: 15px; align-items: flex-start; margin-bottom: 20px; }
.util-header i { font-size: 2rem; color: var(--primary-orange); }
.util-header h3 { margin: 0; color: #fff; font-size: 1.3rem; }
.util-header small { color: #888; }

.btn-sm { padding: 8px 15px; font-size: 0.9rem; }
.full-width { width: 100%; text-align: center; }

/* Grid de Drivers */
.drivers-card h3 { margin-top: 0; margin-bottom: 20px; color: #fff; font-size: 1.2rem; border-bottom: 1px solid #333; padding-bottom: 10px; }
.drivers-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; }

.driver-btn {
    background: #111;
    border: 1px solid #333;
    color: #ccc;
    padding: 10px;
    border-radius: 4px;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: 0.3s;
    font-size: 0.9rem;
}
.driver-btn:hover { border-color: var(--primary-orange); color: #fff; background: #222; }

/* --- 3. REQUISITOS (TABELA TECH) --- */
.req-header h3 { margin: 0 0 20px 0; color: #fff; font-size: 1.2rem; border-bottom: 1px solid #333; padding-bottom: 10px; }

.req-row {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.req-row:last-child { border-bottom: none; }

.req-icon {
    width: 40px; height: 40px;
    background: #111;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: var(--primary-orange);
    border: 1px solid #333;
    flex-shrink: 0;
}

.req-details { flex: 1; }
.req-label { display: block; color: #888; font-size: 0.8rem; text-transform: uppercase; margin-bottom: 5px; }
.req-values { display: flex; justify-content: space-between; color: #ddd; font-size: 0.95rem; }
.req-values strong { color: var(--primary-orange); }

/* Responsividade */
@media (max-width: 900px) {
    .client-hero-card { flex-direction: column; text-align: center; }
    .client-art { margin-top: 30px; }
    .client-buttons { justify-content: center; }
    .download-grid-layout { grid-template-columns: 1fr; }
    .drivers-grid { grid-template-columns: 1fr; }
}

/* ========================================================== */
/* --- DASHBOARD DO USUÁRIO (ESTILO NOVO) --- */
/* ========================================================== */

/* Header do Dashboard */
.dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    padding-bottom: 20px;
}

.user-welcome h1 { margin: 0; font-size: 2rem; color: #fff; }
.user-welcome h1 span { color: var(--primary-orange); }
.user-welcome p { color: #888; margin: 5px 0 0 0; }

.account-actions { display: flex; gap: 15px; }
.btn-sm { padding: 8px 15px; font-size: 0.9rem; }
.btn-admin { border-color: #ff4d4d; color: #ff4d4d; }
.btn-admin:hover { background: #ff4d4d; color: #fff; }

/* Grid Principal */
.dashboard-grid {
    display: grid;
    grid-template-columns: 2fr 1fr; /* Esquerda larga, direita estreita */
    gap: 30px;
}

.section-title-dash {
    color: #fff;
    font-size: 1.5rem;
    margin-bottom: 20px;
    border-left: 4px solid var(--primary-orange);
    padding-left: 10px;
}

/* --- CARD DO PERSONAGEM --- */
.char-cards-list { display: flex; flex-direction: column; gap: 15px; }

.dash-char-card {
    background: rgba(20, 20, 20, 0.8);
    border: 1px solid #333;
    border-radius: 8px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 20px;
    transition: all 0.3s;
}

.dash-char-card:hover {
    border-color: var(--primary-orange);
    transform: translateX(5px);
    background: rgba(30, 30, 30, 0.9);
}

/* Ícone da Classe */
.char-icon-box {
    width: 50px; height: 50px;
    background: #111;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem;
    color: #666;
    border: 1px solid #333;
}

/* Info Principal */
.char-info-col { flex: 1; }
.char-info-col h3 { margin: 0 0 5px 0; color: #fff; font-size: 1.2rem; }

.char-meta { display: flex; gap: 10px; align-items: center; }

.lvl-badge {
    background: #333;
    color: #fff;
    font-size: 0.8rem;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: bold;
}

/* --- CORES DAS NAÇÕES --- */
.nation-tag { font-size: 0.85rem; font-weight: bold; display: flex; align-items: center; gap: 5px; }
.nation-tag i { font-size: 0.8rem; }

.nation-capella { color: #c37cff; text-shadow: 0 0 5px rgba(195, 124, 255, 0.3); }
.nation-procyon { color: #ff6b6b; text-shadow: 0 0 5px rgba(255, 107, 107, 0.3); }
.nation-neutral { color: #88ff88; }
.nation-gm { color: #ffd700; }

/* Status e Alz */
.char-status-col {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
    font-size: 0.9rem;
}

.status-indicator i { font-size: 0.6rem; vertical-align: middle; }
.status-online { color: #2ecc71; }
.status-offline { color: #666; }

.alz-text { color: #ffd700; font-weight: bold; }

/* Botões de Ação (Destravar) */
.btn-icon {
    background: none; border: 1px solid #444; color: #888;
    width: 35px; height: 35px; border-radius: 4px; cursor: pointer;
    transition: 0.3s;
}
.btn-icon:hover { border-color: var(--primary-orange); color: var(--primary-orange); }

/* --- SIDEBAR WIDGETS --- */
.dash-widget {
    background: rgba(20, 20, 20, 0.6);
    border: 1px solid rgba(255,255,255,0.05);
    padding: 25px;
    border-radius: 8px;
    margin-bottom: 20px;
    text-align: center;
}
.dash-widget h3 { color: var(--primary-orange); margin-top: 0; }
.dash-widget p { color: #aaa; font-size: 0.9rem; margin-bottom: 20px; }

/* Responsivo */
@media (max-width: 900px) {
    .dashboard-grid { grid-template-columns: 1fr; }
    .dash-char-card { flex-direction: column; align-items: flex-start; text-align: left; }
    .char-status-col { align-items: flex-start; margin-top: 10px; }
    .char-actions-col { position: absolute; top: 20px; right: 20px; }
}

/* ========================================================== */
/* --- LOJA DE ITENS (ITEM SHOP) --- */
/* ========================================================== */

/* Header da Loja */
.shop-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 50px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    padding-bottom: 20px;
}

.shop-header h1 { margin: 0; font-size: 2rem; color: #fff; text-transform: uppercase; }

.balance-box {
    background: rgba(0,0,0,0.5);
    border: 1px solid var(--primary-orange);
    padding: 10px 20px;
    border-radius: 30px;
    display: flex;
    align-items: center;
    margin-top: 50px; 
    gap: 15px;
    box-shadow: 0 0 15px rgba(255, 140, 0, 0.2);
}

.balance-box .label { font-size: 0.9rem; color: #aaa; text-transform: uppercase; }
.balance-box .value { font-size: 1.2rem; font-weight: bold; color: #fff; }
.balance-box .value i { color: #ffd700; margin-right: 5px; }

.btn-add-cash {
    background: var(--primary-orange);
    color: #000;
    width: 25px; height: 25px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    text-decoration: none;
    font-size: 0.8rem;
    transition: 0.3s;
}
.btn-add-cash:hover { transform: scale(1.1); box-shadow: 0 0 10px var(--primary-orange); }

/* Grid de Produtos */
.shop-section { margin-bottom: 60px; }
.section-title-shop {
    color: #fff; 
    font-size: 1.8rem; 
    margin-bottom: 40px;
    margin-top: 20px;
    
    /* Centraliza o texto */
    text-align: center; 
    
    /* Remove a barra lateral antiga */
    border-left: none; 
    padding-left: 0;
    
    /* Adiciona um estilo mais premium */
    text-transform: uppercase;
    text-shadow: 0 0 15px var(--primary-orange);
}

.store-grid {
    display: flex; /* Mudamos de Grid para Flex para facilitar a centralização de itens quebrados */
    flex-wrap: wrap; /* Permite quebrar linha */
    justify-content: center; /* CENTRALIZA OS ITENS */
    gap: 30px;
}

/* Ajuste para garantir que o card tenha tamanho fixo no flex */
.store-card {
    width: 280px; /* Tamanho fixo para alinhar bonito */
    /* ... o resto das propriedades do .store-card continuam iguais ... */
    background: rgba(20, 20, 20, 0.8);
    border: 1px solid #333;
    border-radius: 10px;
    overflow: hidden;
    transition: all 0.3s;
    position: relative;
    display: flex;
    flex-direction: column;
}

/* Card do Produto */
.store-card {
    background: rgba(20, 20, 20, 0.8);
    border: 1px solid #333;
    border-radius: 10px;
    overflow: hidden;
    transition: all 0.3s;
    position: relative;
    display: flex;
    flex-direction: column;
}

.store-card:hover {
    border-color: var(--primary-orange);
    transform: translateY(-10px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

.card-img-box {
    background: radial-gradient(circle, #2a2a2a 0%, #111 100%);
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    border-bottom: 1px solid #333;
}

.card-img-box img {
    max-width: 100%;
    max-height: 100%;
    filter: drop-shadow(0 0 10px rgba(255,255,255,0.1));
    transition: 0.3s;
}

.store-card:hover .card-img-box img { transform: scale(1.1); }

.card-body { padding: 20px; text-align: center; flex-grow: 1; display: flex; flex-direction: column; }

.store-card h4 { margin: 0 0 10px 0; color: #fff; font-size: 1.1rem; height: 40px; display: flex; align-items: center; justify-content: center; }

.price-tag {
    font-size: 1.2rem;
    font-weight: bold;
    color: #ffd700;
    margin-bottom: 15px;
}
.price-tag.premium { color: var(--primary-orange); text-shadow: 0 0 10px rgba(255,140,0,0.3); }

/* Controle de Quantidade Moderno */
.quantity-control-modern {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
    background: #111;
    border-radius: 20px;
    border: 1px solid #333;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

.quantity-control-modern button {
    background: none; border: none; color: #888;
    width: 30px; height: 30px; cursor: pointer;
    font-weight: bold; font-size: 1.1rem;
}
.quantity-control-modern button:hover { color: #fff; }

.quantity-control-modern input {
    width: 40px; text-align: center; background: none; border: none; color: #fff; font-weight: bold;
    -moz-appearance: textfield;
    appearance: textfield;
}
.quantity-control-modern input::-webkit-outer-spin-button,
.quantity-control-modern input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Botão Info (i) */
.btn-info-icon {
    position: absolute; top: 10px; right: 10px;
    background: rgba(0,0,0,0.6); color: #fff;
    border: 1px solid #555; width: 30px; height: 30px; border-radius: 50%;
    cursor: pointer; transition: 0.3s; z-index: 5;
    display: flex; align-items: center; justify-content: center;
}
.btn-info-icon:hover { background: var(--primary-orange); border-color: var(--primary-orange); color: #000; }

/* Lista de Recompensas no Modal */
.rewards-box { background: #111; padding: 20px; border-radius: 8px; border: 1px solid #333; margin-top: 15px; }
.rewards-list-modern { list-style: none; padding: 0; margin: 0; text-align: left; }
.rewards-list-modern li { padding: 8px 0; border-bottom: 1px dashed #333; color: #ccc; display: flex; align-items: center; gap: 10px; }
.rewards-list-modern li:last-child { border: none; }
.rewards-list-modern i { color: #2ecc71; }

/* Mensagem de Alerta */
.shop-alert { padding: 15px; border-radius: 5px; margin-bottom: 30px; text-align: center; font-weight: bold; }
.shop-alert.success { background: rgba(46, 204, 113, 0.2); border: 1px solid #2ecc71; color: #2ecc71; }
.shop-alert.error { background: rgba(231, 76, 60, 0.2); border: 1px solid #e74c3c; color: #e74c3c; }

/* Responsivo */
@media (max-width: 768px) {
    .shop-header { flex-direction: column; gap: 20px; }
    .store-grid { grid-template-columns: 1fr; }
}

/* ========================================================== */
/* --- PÁGINA DE RECARGA DE CASH --- */
/* ========================================================== */

/* Alerta de Aviso */
.payment-alert {
    background: rgba(255, 140, 0, 0.1);
    border: 1px solid var(--primary-orange);
    border-left: 5px solid var(--primary-orange);
    padding: 20px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 20px;
    max-width: 800px;
    margin: 0 auto 40px auto;
    color: #fff;
}

.payment-alert i { font-size: 2rem; color: var(--primary-orange); }
.alert-content { font-size: 0.95rem; line-height: 1.5; }

/* Grid de Pacotes */
.recarga-grid-modern {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
    margin-bottom: 50px;
}

.recarga-card-modern {
    width: 260px;
    /* Herda o estilo .store-card do arquivo anterior, 
       mas adicionamos transição suave de escala */
    transition: transform 0.3s, box-shadow 0.3s;
}

.recarga-card-modern:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 15px 30px rgba(0,0,0,0.6);
}

.coin-img {
    max-width: 80%;
    height: auto;
    filter: drop-shadow(0 0 15px rgba(255, 215, 0, 0.3));
    transition: 0.5s;
}

.recarga-card-modern:hover .coin-img {
    transform: scale(1.1) rotate(10deg);
}

.coin-amount {
    font-size: 1.1rem;
    color: #fff;
    margin-bottom: 10px;
    font-weight: bold;
}
.coin-amount i { color: #ffd700; }

/* --- ÁREA DE PAGAMENTO PIX --- */
.pix-area-modern {
    background: #111;
    border: 2px solid #32bcad; /* Cor do PIX */
    border-radius: 15px;
    padding: 40px;
    max-width: 500px;
    margin: 40px auto;
    text-align: center;
    box-shadow: 0 0 50px rgba(50, 188, 173, 0.2);
    animation: slideUp 0.5s ease-out;
}

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

.pix-header { margin-bottom: 30px; }
.pix-header i { font-size: 3rem; color: #32bcad; margin-bottom: 10px; }
.pix-header h3 { margin: 0; color: #fff; text-transform: uppercase; }
.pix-header p { color: #888; margin: 5px 0 0 0; }

.qr-box {
    background: #fff;
    padding: 15px;
    border-radius: 10px;
    display: inline-block;
    margin-bottom: 30px;
}
.qr-box img { max-width: 200px; display: block; }

.copy-paste-box label { display: block; color: #aaa; margin-bottom: 10px; font-size: 0.9rem; }

.input-copy-group {
    display: flex;
    background: #222;
    border: 1px solid #444;
    border-radius: 5px;
    overflow: hidden;
}

.input-copy-group input {
    flex: 1;
    background: none;
    border: none;
    color: #fff;
    padding: 10px 15px;
    font-family: monospace;
}

.input-copy-group button {
    background: #333;
    border: none;
    border-left: 1px solid #444;
    color: #fff;
    padding: 0 15px;
    cursor: pointer;
    transition: 0.3s;
}
.input-copy-group button:hover { background: #32bcad; color: #000; }

.payment-status { margin-top: 30px; color: #32bcad; font-weight: bold; display: flex; flex-direction: column; align-items: center; gap: 10px; }

/* Spinner de Carregamento Simples */
.spinner {
    width: 30px; height: 30px;
    border: 3px solid rgba(50, 188, 173, 0.3);
    border-top: 3px solid #32bcad;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* Botão voltar centralizado */
.center-link { display: table; margin: 30px auto 0 auto; }

/* ========================================================== */
/* --- CORREÇÃO DO BOTÃO FECHAR (X) --- */
/* ========================================================== */

/* Garante que o container do modal seja a referência para o botão absoluto */
.modal-content {
    position: relative; 
}

.modal-close {
    position: absolute;
    top: 15px;   /* Empurra para baixo (estava muito colado) */
    right: 20px; /* Empurra para a esquerda */
    
    background: transparent;
    border: none;
    font-size: 2rem;
    line-height: 1;
    color: #666;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 100; /* Garante que fique acima do titulo */
}

.modal-close:hover {
    color: var(--primary-orange); /* Fica laranja ao passar o mouse */
    transform: rotate(90deg); /* Gira levemente */
}

/* Ajuste específico para celular para não ficar em cima do texto */
@media (max-width: 768px) {
    .modal-close {
        top: 10px;
        right: 15px;
        font-size: 1.8rem;
    }
}

/* ========================================================== */
/* --- CORES DAS MENSAGENS (GLOBAL) --- */
/* ========================================================== */

.form-messages {
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 5px;
    text-align: left;
    font-size: 0.9rem;
    display: none; /* Escondido por padrão, o JS mostra */
}

/* Quando tiver conteúdo, o JS adiciona display: block */
.form-messages:not(:empty) {
    display: block;
}

.form-messages p {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* VERMELHO (ERRO) */
.form-messages.error {
    background-color: rgba(255, 50, 50, 0.15);
    border: 1px solid #ff3232;
    color: #ff9999;
}

/* VERDE (SUCESSO) */
.form-messages.success {
    background-color: rgba(50, 255, 50, 0.15);
    border: 1px solid #32ff32;
    color: #99ff99;
}

/* AZUL (INFO/CARREGANDO) */
.form-messages.info {
    background-color: rgba(50, 150, 255, 0.15);
    border: 1px solid #3296ff;
    color: #c8e0ff;
}

/* ========================================================== */
/* --- CORREÇÃO DE SOBREPOSIÇÃO NO BANNER (ZOOM) --- */
/* ========================================================== */

.hero-section {
    /* MUDANÇA 1: De 'height' para 'min-height'. 
       Isso permite que o banner cresça se o conteúdo precisar de espaço. */
    min-height: 85vh; 
    height: auto;
    
    /* MUDANÇA 2: Adiciona espaço embaixo para os botões não encostarem na barra */
    padding-bottom: 120px; 
    padding-top: 100px; /* Compensa o header fixo */
    
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-content {
    /* MUDANÇA 3: Garante que os botões fiquem NA FRENTE da barra se encostarem */
    position: relative;
    z-index: 10; 
    width: 100%;
}

.server-rates-bar {
    position: relative;
    z-index: 5; /* Fica atrás dos botões */
    
    /* Mantém o efeito de subir um pouquinho */
    margin-top: -100px; 
}

/* --- AJUSTE PARA TELAS PEQUENAS OU MUITO ZOOM --- */
@media (max-width: 992px) {
    .hero-section {
        min-height: 100vh; /* Ocupa a tela toda no celular */
        padding-bottom: 50px;
    }
    
    .server-rates-bar {
        /* No celular/tablet, removemos o efeito de sobreposição para não quebrar */
        margin-top: 0; 
        border-top: 1px solid rgba(255,255,255,0.1);
    }
}

/* ========================================================== */
/* --- LISTA DE KITS DUPLA COLUNA (CLEAN) --- */
/* ========================================================== */

.kits-grid-clean {
    display: grid;
    /* FORÇA 2 COLUNAS IGUAIS */
    grid-template-columns: 1fr 1fr; 
    gap: 10px 30px; /* 10px altura, 30px largura entre colunas */
    
    margin-top: 20px;
    width: 100%;
    overflow: visible;
}

.clean-item {
    background-color: rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding: 10px 15px;
    border-radius: 4px;
    
    display: flex;
    align-items: center;
    gap: 12px;
    
    color: #ccc;
    font-size: 0.8rem; /* Fonte levemente menor para caber melhor */
    white-space: normal; /* Tenta não quebrar linha se possível */
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis; /* ... se o nome for muito grande */
    
    /* Animação */
    opacity: 0;
    animation: fadeUpItem 0.4s forwards ease-out;
}

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

.clean-item:hover {
    background-color: rgba(255, 140, 0, 0.1);
    color: #fff;
    padding-left: 20px;
    border-bottom-color: var(--primary-orange);
}

.clean-item i {
    color: var(--primary-orange);
    font-size: 0.8rem;
    flex-shrink: 0; /* Ícone não esmaga */
}

/* RESPONSIVO: CELULAR */
@media (max-width: 768px) {
    .kits-grid-clean {
        /* No celular volta para 1 coluna para não ficar apertado */
        grid-template-columns: 1fr; 
    }
    .clean-item {
        white-space: normal; /* No celular pode quebrar linha */
    }
}
/* ========================================================== */
/* --- CENTRAL DE SUPORTE (TICKETS) --- */
/* ========================================================== */

/* Header da Página de Tickets */
.tickets-page-header {
    text-align: center;
    margin-bottom: 40px;
}
.tickets-page-header p { color: #888; margin-bottom: 20px; }

/* Tabela de Tickets */
.ticket-list-card {
    background: rgba(20, 20, 20, 0.8);
    border: 1px solid #333;
    border-radius: 8px;
    padding: 20px;
    overflow-x: auto;
}

.modern-table { width: 100%; border-collapse: collapse; min-width: 600px; }
.modern-table th { text-align: left; padding: 15px; border-bottom: 2px solid #333; color: var(--primary-orange); text-transform: uppercase; font-size: 0.9rem; }
.modern-table td { padding: 15px; border-bottom: 1px solid rgba(255,255,255,0.05); color: #ccc; }
.modern-table tr:last-child td { border: none; }
.modern-table tr:hover { background: rgba(255,255,255,0.02); }

.id-col { font-family: monospace; color: #888; }
.subject-col { font-weight: bold; color: #fff; font-size: 1rem; }
.date-col { font-size: 0.9rem; color: #888; }

.btn-view {
    background: #111; border: 1px solid #444; color: #ccc;
    width: 35px; height: 35px; display: inline-flex; align-items: center; justify-content: center;
    border-radius: 5px; transition: 0.3s;
}
.btn-view:hover { border-color: var(--primary-orange); color: var(--primary-orange); }

/* Badges de Status */
.status-badge { padding: 3px 10px; border-radius: 15px; font-size: 0.8rem; font-weight: bold; text-transform: uppercase; }
.status-badge.pending { background: rgba(255, 193, 7, 0.15); color: #ffc107; border: 1px solid #ffc107; }
.status-badge.answered { background: rgba(46, 204, 113, 0.15); color: #2ecc71; border: 1px solid #2ecc71; }
.status-badge.closed { background: rgba(255, 255, 255, 0.1); color: #888; border: 1px solid #666; }

/* --- VISUALIZAÇÃO DE CHAT (TICKET VIEW) --- */
.ticket-title-row { display: flex; align-items: center; gap: 15px; margin: 20px 0; flex-wrap: wrap; }
.ticket-title-row h1 { margin: 0; font-size: 1.8rem; color: #fff; }

.ticket-chat-container {
    display: flex; flex-direction: column; gap: 20px;
    margin-bottom: 30px;
    padding: 20px;
    /* max-height: 600px; overflow-y: auto;  Opcional: se quiser scroll interno */
}

/* Balões */
.chat-row { display: flex; width: 100%; }
.row-right { justify-content: flex-end; } /* Você */
.row-left { justify-content: flex-start; } /* Suporte */

.chat-bubble {
    max-width: 80%;
    padding: 20px;
    border-radius: 10px;
    position: relative;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

.msg-user {
    background: linear-gradient(135deg, #1a1a1a, #111);
    border: 1px solid #444;
    border-right: 3px solid var(--primary-orange);
    border-radius: 10px 10px 0 10px;
}

.msg-admin {
    background: linear-gradient(135deg, #0d1e30, #08121f);
    border: 1px solid #1a3a5c;
    border-left: 3px solid #3498db;
    border-radius: 10px 10px 10px 0;
}

.msg-header { display: flex; justify-content: space-between; margin-bottom: 10px; font-size: 0.9rem; color: #aaa; border-bottom: 1px solid rgba(255,255,255,0.05); padding-bottom: 5px; }
.msg-header strong { color: #fff; }
.msg-content { color: #e0e0e0; line-height: 1.6; }

/* Anexos no Chat */
.msg-attachment { margin-top: 15px; }
.msg-attachment a { display: inline-block; position: relative; border-radius: 5px; overflow: hidden; border: 1px solid #444; transition: 0.3s; }
.msg-attachment img { max-width: 200px; display: block; opacity: 0.7; transition: 0.3s; }
.msg-attachment span { position: absolute; bottom: 0; left: 0; width: 100%; background: rgba(0,0,0,0.7); color: #fff; font-size: 0.8rem; padding: 5px; text-align: center; }
.msg-attachment a:hover img { opacity: 1; transform: scale(1.05); }

/* Área de Resposta */
.ticket-reply-area {
    background: #111;
    border: 1px solid #333;
    border-radius: 8px;
    padding: 20px;
}

.reply-box textarea {
    width: 100%;
    background: #0a0a0a;
    border: 1px solid #333;
    color: #fff;
    padding: 15px;
    border-radius: 5px;
    font-family: inherit;
    resize: vertical;
    margin-bottom: 15px;
}
.reply-box textarea:focus { border-color: var(--primary-orange); outline: none; }

.reply-tools { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 15px; }

/* Input de Arquivo Customizado */
.file-input-wrapper input { display: none; }
.btn-attach {
    background: #222; border: 1px solid #444; color: #ccc;
    padding: 8px 15px; border-radius: 4px; cursor: pointer; transition: 0.3s; font-size: 0.9rem;
}
.btn-attach:hover { background: #333; color: #fff; }
.file-name { margin-left: 10px; font-size: 0.85rem; color: #888; font-style: italic; }

.ticket-closed-msg { text-align: center; background: rgba(255, 50, 50, 0.1); padding: 20px; border-radius: 8px; color: #ff6b6b; font-weight: bold; border: 1px solid rgba(255, 50, 50, 0.2); }

/* Textarea Moderna (Modal) */
.modern-textarea {
    width: 100%; background: #080808; border: 1px solid #333; color: #fff;
    padding: 15px; border-radius: 4px; font-family: inherit;
}
.modern-textarea:focus { border-color: var(--primary-orange); outline: none; }

/* Mensagem Sem Tickets */
.no-tickets { text-align: center; padding: 40px; color: #666; }
.no-tickets i { font-size: 3rem; margin-bottom: 15px; opacity: 0.5; }

/* Responsivo */
@media (max-width: 768px) {
    .reply-tools { flex-direction: column; align-items: stretch; }
    .chat-bubble { max-width: 100%; }
}

/* ========================================================== */
/* --- AJUSTES DO MODAL DE TICKET (CRIAÇÃO) --- */
/* ========================================================== */

/* Força o Textarea a ter altura fixa e sem redimensionar */
#createTicketModal .modern-textarea {
    height: 180px !important;
    resize: none !important; /* Impede puxar o cantinho */
    margin-bottom: 20px; /* Espaço para baixo */
}

/* Garante espaço para o botão de upload */
#createTicketModal .file-upload-box {
    margin-top: 15px;
    margin-bottom: 25px; /* Espaço antes do botão de enviar */
    padding: 15px;
    background: rgba(255,255,255,0.02);
    border: 1px dashed #444;
    border-radius: 5px;
}

#createTicketModal label {
    display: block;
    margin-bottom: 10px;
    font-weight: bold;
    color: #ccc;
    font-size: 0.9rem;
}

/* Estilo do botão de anexo para ficar bonito */
#createTicketModal .btn-attach {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #151515;
    border: 1px solid #444;
    color: #bbb;
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
    transition: 0.3s;
    width: auto; /* Não ocupa a largura toda por padrão */
}

#createTicketModal .btn-attach:hover {
    border-color: var(--primary-orange);
    color: #fff;
    background: #222;
}

#createTicketModal .file-name {
    display: block;
    margin-top: 8px;
    font-size: 0.85rem;
    color: #888;
    font-style: italic;
}
/* ========================================================== */
/* --- CORREÇÃO DO DROPDOWN (RANKINGS) --- */
/* ========================================================== */

/* 1. Ajuste do Container do Dropdown */
.dropdown-content {
    /* Posicionamento exato abaixo do header */
    top: 80px; /* Mesma altura do header para não cortar */
    left: 50%;
    transform: translateX(-50%); /* Centraliza em relação ao botão pai */
    
    /* Visual: Caixa Reta e Limpa */
    background-color: rgba(10, 10, 10, 0.95);
    border: 1px solid var(--primary-orange);
    border-top: 3px solid var(--primary-orange); /* Destaque no topo */
    border-radius: 0 0 5px 5px;
    min-width: 220px;
    padding: 0;
    
    /* Garante que apareça sobre tudo */
    z-index: 2100;
    box-shadow: 0 10px 30px rgba(0,0,0,0.8);
    
    /* Animação */
    display: block;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

/* Mostra ao passar o mouse */
.dropdown:hover .dropdown-content {
    opacity: 1;
    visibility: visible;
    top: 80px; /* Mantém posição fixa */
}

/* 2. Reset dos Links dentro do Dropdown */
/* O segredo: usamos !important para forçar que esses links sejam RETOS */
.dropdown-content a {
    /* Remove a inclinação (Skew) herdada do menu principal */
    transform: none !important; 
    
    /* Remove bordas e estilos de botão do menu principal */
    border: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    background: transparent !important;
    height: auto !important; /* Altura automática */
    padding: 12px 20px !important;
    
    /* Alinhamento de texto normal */
    justify-content: flex-start !important; 
    text-align: left;
    color: #ccc !important;
    font-size: 0.9rem;
    box-shadow: none !important;
}

/* Reset do texto interno (span) */
.dropdown-content a span, 
.dropdown-content a i {
    transform: none !important; /* Texto fica reto */
}

/* 3. Hover nos itens do Dropdown */
.dropdown-content a:hover {
    background: rgba(255, 140, 0, 0.15) !important;
    color: #fff !important;
    padding-left: 25px !important; /* Pequeno movimento para direita */
    text-shadow: none !important;
}

/* Remove a linha decorativa inferior */
.dropdown-content a::after {
    display: none !important;
}
/* ========================================================== */
/* --- CORREÇÃO DO MENU MOBILE (HAMBÚRGUER) --- */
/* ========================================================== */

@media (max-width: 992px) {
    
    /* 1. Mostra o botão Hambúrguer */
    .navbar-toggler {
        display: flex;
        /* Removemos absolute para ele respeitar o fluxo do container flex */
        position: static; 
        margin-left: auto; /* Empurra para a direita usando Flexbox */
        margin-right: 0;   /* Garante que não tenha margem extra */
        z-index: 2005;
        padding: 10px; /* Aumenta a área de toque */
    }
    
    /* Garante que o container do header não vaze */
    .navbar {
        width: 100%;
        padding-right: 15px; /* Margem de segurança na direita */
        box-sizing: border-box;
    }

    /* 2. Configuração do Menu (Gaveta) */
    .nav-links {
        display: none; /* Escondido por padrão */
        position: fixed;
        top: 80px; /* Altura do seu header */
        left: 0;
        width: 100%;
        height: auto;
        background-color: #0b0e14; /* Fundo PRETO Sólido */
        border-bottom: 2px solid var(--primary-orange);
        flex-direction: column;
        padding: 20px 0;
        gap: 10px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.9);
        z-index: 2000;
    }

    /* 3. Quando o Javascript adiciona a classe 'active' */
    .nav-links.active {
        display: flex;
        animation: slideDown 0.3s ease-out;
    }

    /* 4. Reseta o estilo "Gamer Torto" para ficar normal no celular */
    .nav-links a {
        transform: none !important; /* Tira a inclinação */
        border: none !important;    /* Tira bordas laterais */
        background: transparent !important;
        width: 100%;
        text-align: center;
        padding: 15px 0;
        border-bottom: 1px solid rgba(255,255,255,0.05) !important;
        justify-content: center;
    }

    /* Reseta o texto interno também */
    .nav-links a span, 
    .nav-links a i {
        transform: none !important;
    }

    /* Ajuste do botão de Login no mobile */
    .btn-login-glow {
        margin: 20px auto !important; /* Centraliza */
        width: 80% !important;        /* Ocupa largura */
        transform: none !important;   /* Tira inclinação */
        background: rgba(255, 140, 0, 0.1) !important;
    }
    
    .btn-login-glow > * { transform: none !important; }

    /* Animação de descida */
    @keyframes slideDown {
        from { opacity: 0; transform: translateY(-20px); }
        to { opacity: 1; transform: translateY(0); }
    }
}
/* ========================================================== */
/* --- CORREÇÃO DEFINITIVA MENU MOBILE (BOTÃO FIXO NA TELA) --- */
/* ========================================================== */

/* TRAVA A LARGURA DO SITE PARA NÃO ROLAR PARA O LADO */
html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    width: 100% !important;
    position: relative;
}

@media (max-width: 992px) {
    
    /* 1. BOTÃO HAMBÚRGUER (FIXO NA TELA) */
    .navbar-toggler {
        display: flex;
        /* ISSO É O SEGREDO: Cola o botão no vidro do celular */
        position: fixed !important; 
        top: 25px; 
        right: 20px; 
        
        /* Garante que fique acima de tudo, até do header */
        z-index: 9999; 
        
        background: rgba(0,0,0,0.5); /* Fundo escurinho pra garantir leitura */
        padding: 8px;
        border-radius: 5px;
        border: 1px solid rgba(255, 140, 0, 0.3);
    }

    /* 2. Menu Gaveta */
    .nav-links {
        display: none; 
        position: fixed;
        top: 0; /* Começa do topo absoluto */
        left: 0;
        width: 100%;
        height: 70vh; /* Ocupa a altura toda */
        background-color: #0b0e14; 
        flex-direction: column;
        justify-content: center; /* Centraliza itens na tela */
        padding: 0;
        gap: 20px;
        z-index: 9998; /* Fica logo abaixo do botão */
    }

    /* 3. Animação de Abrir */
    .nav-links.active {
        display: flex;
        animation: fadeInMenu 0.3s ease-out;
    }

    /* 4. Reseta estilo dos links */
    .nav-links a {
        transform: none !important;
        border: none !important;
        background: transparent !important;
        width: 100%;
        text-align: center;
        padding: 15px 0;
        font-size: 1.2rem; /* Letra maior no celular */
        border-bottom: 1px solid rgba(255,255,255,0.05) !important;
    }

    .nav-links a span, .nav-links a i { transform: none !important; }

    /* Botão Login */
    .btn-login-glow {
        margin: 0 auto !important; 
        width: 80% !important;
        transform: none !important;
    }
    .btn-login-glow > * { transform: none !important; }

    @keyframes fadeInMenu {
        from { opacity: 0; }
        to { opacity: 1; }
    }
}

/* Quando o JS adicionar 'mobile-active', forçamos o menu a aparecer */
.dropdown.mobile-active .dropdown-content {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    
    /* Garante que fique posicionado corretamente no fluxo */
    position: static !important;
    top: 0 !important;
    left: 0 !important;
    transform: none !important;
    
    /* Animação suave */
    animation: slideDownSubmenu 0.3s ease-out;
}

/* Pinta o texto de Rankings de laranja quando estiver aberto */
.dropdown.mobile-active .dropbtn {
    color: var(--primary-orange) !important;
    background: rgba(255, 140, 0, 0.1) !important;
}

@keyframes slideDownSubmenu {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 992px) {

    /* Reseta para não aparecer ativo sozinho */
    .dropdown .dropbtn {
        color: #fff !important;
        background: transparent !important;
    }

    /* Quando realmente estiver aberto */
    .dropdown.mobile-active .dropbtn {
        color: var(--primary-orange) !important;
        background: rgba(255, 140, 0, 0.15) !important;
    }
}