*{margin:0;padding:0;box-sizing:border-box}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:linear-gradient(135deg,#0f0f1a,#1a1a2e,#16213e);min-height:100vh;color:#fff}
.container{max-width:1400px;margin:0 auto;padding:20px}
header{background:rgba(0,0,0,0.3);padding:20px 0;margin-bottom:30px;border-bottom:1px solid rgba(255,255,255,0.1)}
header .container{display:flex;justify-content:space-between;align-items:center}
.logo{font-size:1.5em;font-weight:700;background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.btn-logout{padding:8px 16px;background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.2);border-radius:6px;color:#fff;cursor:pointer}
.auth-container{max-width:400px;margin:100px auto}
.auth-box{background:rgba(255,255,255,0.05);padding:40px;border-radius:16px;border:1px solid rgba(255,255,255,0.1)}
.auth-box h2{text-align:center;margin-bottom:30px}
.form-group{margin-bottom:20px}
.form-group label{display:block;margin-bottom:8px;color:#888;font-size:14px}
.form-group input{width:100%;padding:12px 15px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);border-radius:8px;color:#fff;font-size:15px}
.form-group input:focus{outline:none;border-color:#667eea}
.btn{padding:12px 24px;border:none;border-radius:8px;cursor:pointer;font-size:15px;font-weight:600;transition:all 0.3s}
.btn-primary{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;width:100%}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 4px 15px rgba(102,126,234,0.4)}
.btn-secondary{background:rgba(255,255,255,0.1);color:#fff;border:1px solid rgba(255,255,255,0.2)}
.btn-danger{background:linear-gradient(135deg,#eb4d4b,#c0392b);color:#fff}
.card{background:rgba(255,255,255,0.05);border-radius:16px;padding:25px;margin-bottom:25px;border:1px solid rgba(255,255,255,0.1)}
.card h2{margin-bottom:20px;font-size:1.3em}
.grid-4{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px}
.stat-card{background:linear-gradient(145deg,rgba(255,255,255,0.08),rgba(255,255,255,0.02));padding:25px;border-radius:12px;text-align:center}
.stat-card .number{font-size:2.5em;font-weight:700;background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.stat-card .label{color:#888;margin-top:5px}
table{width:100%;border-collapse:collapse}
th,td{padding:15px;text-align:left;border-bottom:1px solid rgba(255,255,255,0.1)}
th{color:#888;font-weight:600;font-size:13px;text-transform:uppercase}
.badge{padding:4px 10px;border-radius:20px;font-size:12px;font-weight:600}
.badge-success{background:rgba(76,175,80,0.2);color:#4CAF50}
.badge-warning{background:rgba(255,152,0,0.2);color:#ff9800}
.badge-danger{background:rgba(244,67,54,0.2);color:#f44336}
.modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.8);justify-content:center;align-items:center;z-index:1000}
.modal-content{background:#1a1a2e;padding:30px;border-radius:16px;max-width:600px;width:90%;max-height:90vh;overflow-y:auto}
.modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:25px}
.modal-close{background:none;border:none;color:#888;font-size:28px;cursor:pointer}
.modal-buttons{display:flex;gap:15px;margin-top:25px}
.modal-buttons button{flex:1}
.proxies-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:25px;margin-top:20px}
.proxy-card{background:linear-gradient(145deg,#1e1e2f,#252538);border-radius:16px;overflow:hidden;border:1px solid rgba(255,255,255,0.05);transition:transform 0.3s,box-shadow 0.3s}
.proxy-card:hover{transform:translateY(-5px);box-shadow:0 8px 30px rgba(0,0,0,0.4)}
.proxy-card-header{background:linear-gradient(135deg,#667eea,#764ba2);padding:20px;text-align:center}
.proxy-card-header h3{margin:0;font-size:1.2em;display:flex;align-items:center;justify-content:center;gap:10px}
.proxy-card-header .location{margin-top:5px;font-size:0.9em;opacity:0.85}
.proxy-card-header.offline{background:linear-gradient(135deg,#eb4d4b,#c0392b)}
.proxy-card-header.warning{background:linear-gradient(135deg,#f39c12,#d35400)}
.status-dot{display:inline-block;width:10px;height:10px;border-radius:50%;animation:pulse-dot 2s infinite}
.status-dot.online{background:#2ecc71;box-shadow:0 0 10px #2ecc71}
.status-dot.offline{background:#e74c3c;animation:none}
.status-dot.warning{background:#f39c12}
@keyframes pulse-dot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:0.7;transform:scale(0.9)}}
.proxy-card-body{padding:20px}
.proxy-stats-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;text-align:center;margin-bottom:15px}
.proxy-stat .label{font-size:11px;color:#888;text-transform:uppercase;font-weight:600;margin-bottom:5px}
.proxy-stat .value{font-size:1.1em;font-weight:700}
.proxy-stat .value.small{font-size:0.85em}
.proxy-gauges{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding-top:15px;border-top:1px solid rgba(255,255,255,0.1)}
.gauge-container{text-align:center}
.gauge-container .gauge-label{font-size:11px;color:#888;text-transform:uppercase;font-weight:600;margin-bottom:8px}
.gauge-wrapper{position:relative;width:70px;height:70px;margin:0 auto}
.gauge-svg{width:70px;height:70px;transform:rotate(-90deg)}
.gauge-bg{fill:none;stroke:#3a3a4a;stroke-width:8}
.gauge-fill{fill:none;stroke-width:8;stroke-linecap:round;transition:stroke-dashoffset 0.5s ease}
.gauge-fill.cpu{stroke:#667eea}
.gauge-fill.mem{stroke:#764ba2}
.gauge-fill.disk{stroke:#5f27cd}
.gauge-fill.warning{stroke:#f39c12}
.gauge-fill.danger{stroke:#e74c3c}
.gauge-value{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:1em;font-weight:700;color:#fff}
.proxy-card.offline .proxy-card-body{opacity:0.5}
.proxy-card.offline .gauge-fill{stroke:#555}
.proxy-actions{display:flex;gap:8px;margin-top:15px;padding-top:15px;border-top:1px solid rgba(255,255,255,0.1)}
.proxy-actions button{flex:1;padding:10px;border:none;border-radius:6px;cursor:pointer;font-size:12px;font-weight:600;transition:all 0.2s}
.btn-sync{background:rgba(33,150,243,0.2);color:#2196F3}
.btn-sync:hover{background:rgba(33,150,243,0.4)}
.btn-remove{background:rgba(244,67,54,0.2);color:#f44336}
.btn-remove:hover{background:rgba(244,67,54,0.4)}
.provision-form{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.provision-log{background:#0d0d15;border-radius:10px;padding:15px;max-height:250px;overflow-y:auto;font-family:monospace;font-size:13px;margin-top:15px}
.progress-bar{height:8px;background:rgba(255,255,255,0.1);border-radius:4px;overflow:hidden;margin:15px 0}
.progress-bar-fill{height:100%;background:linear-gradient(90deg,#667eea,#764ba2);transition:width 0.3s}
@media(max-width:768px){.provision-form{grid-template-columns:1fr}.proxies-grid{grid-template-columns:1fr}}

.btn-restart{background:rgba(255,193,7,0.2);color:#ffc107}
.btn-restart:hover{background:rgba(255,193,7,0.4)}
.btn-reboot{background:rgba(255,87,34,0.2);color:#ff5722}
.btn-reboot:hover{background:rgba(255,87,34,0.4)}
.proxy-actions{flex-wrap:wrap}
.proxy-actions button{min-width:60px;padding:8px 10px}

/* Master Card */
.master-card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px}
.master-info{background:rgba(255,255,255,0.05);padding:20px;border-radius:12px}
.master-info h4{color:#888;font-size:12px;text-transform:uppercase;margin-bottom:10px}
.master-services{display:flex;flex-wrap:wrap;gap:10px}
.service-badge{padding:6px 12px;border-radius:20px;font-size:12px;font-weight:600}
.service-badge.active{background:rgba(76,175,80,0.2);color:#4CAF50}
.service-badge.inactive{background:rgba(244,67,54,0.2);color:#f44336}

/* Instructions */
.instructions-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin-top:20px}
.instruction-step{background:rgba(255,255,255,0.03);border-radius:12px;padding:20px;display:flex;gap:15px;border:1px solid rgba(255,255,255,0.05)}
.step-number{width:40px;height:40px;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:18px;flex-shrink:0}
.step-content h4{margin:0 0 10px 0;color:#fff}
.step-content p{color:#aaa;font-size:14px;margin:5px 0}
.step-content ul{color:#aaa;font-size:14px;margin:10px 0;padding-left:20px}
.step-content li{margin:5px 0}

/* Master Card Header */
.master-header{background:linear-gradient(135deg,#11998e,#38ef7d);padding:20px;border-radius:12px 12px 0 0;margin:-25px -25px 20px -25px}
.master-header h3{margin:0;display:flex;align-items:center;gap:10px}
.master-header .subtitle{opacity:0.85;margin-top:5px;font-size:14px}

/* Activity Stats */
.activity-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:10px}
.activity-item{text-align:center;padding:10px;background:rgba(0,0,0,0.2);border-radius:8px}
.activity-value{font-size:1.5em;font-weight:700;color:#667eea}
.activity-label{font-size:11px;color:#888;margin-top:5px;text-transform:uppercase}

/* Conexões Modal */
.conn-tabs{display:flex;gap:10px;margin-bottom:20px;border-bottom:1px solid rgba(255,255,255,0.1);padding-bottom:15px}
.conn-tab{background:rgba(255,255,255,0.05);border:none;padding:10px 20px;border-radius:8px;color:#888;cursor:pointer;font-size:14px;transition:all 0.2s}
.conn-tab:hover{background:rgba(255,255,255,0.1);color:#fff}
.conn-tab.active{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}
.conn-tab-content{display:none}
.conn-tab-content.active{display:block}
.conn-summary{display:flex;gap:20px;margin-bottom:15px;color:#888;font-size:14px}
.conn-summary span{background:rgba(255,255,255,0.05);padding:8px 15px;border-radius:6px}
.conn-table-wrapper{max-height:350px;overflow-y:auto}
.conn-table{width:100%;border-collapse:collapse}
.conn-table th,.conn-table td{padding:12px;text-align:left;border-bottom:1px solid rgba(255,255,255,0.05)}
.conn-table th{color:#888;font-size:12px;text-transform:uppercase;position:sticky;top:0;background:#1a1a2e}
.conn-table td{font-size:13px}
.conn-table tr:hover{background:rgba(255,255,255,0.02)}
.btn-block{background:rgba(244,67,54,0.2);color:#f44336;border:none;padding:6px 12px;border-radius:4px;cursor:pointer;font-size:12px}
.btn-block:hover{background:rgba(244,67,54,0.4)}
.btn-unblock{background:rgba(76,175,80,0.2);color:#4CAF50;border:none;padding:6px 12px;border-radius:4px;cursor:pointer;font-size:12px}
.btn-unblock:hover{background:rgba(76,175,80,0.4)}
.btn-warning{background:rgba(255,152,0,0.2);color:#ff9800;border:1px solid rgba(255,152,0,0.3)}
.btn-warning:hover{background:rgba(255,152,0,0.4)}
.status-2xx{color:#4CAF50}
.status-3xx{color:#2196F3}
.status-4xx{color:#ff9800}
.status-5xx{color:#f44336}
.clickable{cursor:pointer;transition:all 0.2s}
.clickable:hover{color:#667eea;transform:scale(1.05)}

/* Auth Tabs */
.auth-tabs{display:flex;gap:10px;margin-bottom:20px}
.auth-tab{flex:1;padding:12px;background:rgba(255,255,255,0.05);border:none;color:#888;cursor:pointer;border-radius:8px;font-size:14px;transition:all 0.2s}
.auth-tab:hover{background:rgba(255,255,255,0.1);color:#fff}
.auth-tab.active{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}

/* Card Header Flex */
.card-header-flex{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}
.card-header-flex h2{margin:0}

/* Form small text */
.form-group small{display:block;margin-top:5px;font-size:12px}

/* Grid 2 colunas */
.grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(400px,1fr));gap:25px}
.card-header-flex{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}
.card-header-flex h2{margin:0}
.table-scroll{max-height:300px;overflow-y:auto}
.btn-small{padding:5px 10px;font-size:11px;border:none;border-radius:4px;cursor:pointer;margin:0 2px}
.btn-small.btn-success{background:rgba(76,175,80,0.2);color:#4CAF50}
.btn-small.btn-warning{background:rgba(255,152,0,0.2);color:#ff9800}
.btn-small.btn-danger{background:rgba(244,67,54,0.2);color:#f44336}
.btn-small.btn-secondary{background:rgba(255,255,255,0.1);color:#fff}
.btn-small:hover{opacity:0.8}
.badge-info{background:rgba(33,150,243,0.2);color:#2196F3}

/* Subdomínios */
.domain-link{cursor:pointer;color:#667eea;transition:color 0.2s}
.domain-link:hover{color:#764ba2;text-decoration:underline}
.sub-mode-section{margin-bottom:20px}
.mode-options{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.mode-option{cursor:pointer}
.mode-option input{display:none}
.mode-box{padding:15px;border:2px solid rgba(255,255,255,0.1);border-radius:8px;transition:all 0.2s}
.mode-option input:checked + .mode-box{border-color:#667eea;background:rgba(102,126,234,0.1)}
.mode-box strong{display:block;margin-bottom:5px}
.mode-box p{color:#888;font-size:13px;margin:5px 0}
.mode-box code{display:block;margin-top:10px;padding:5px;background:rgba(0,0,0,0.2);border-radius:4px;font-size:12px}
.subdomain-list{max-height:250px;overflow-y:auto}
.subdomain-item{display:flex;align-items:center;gap:15px;padding:10px 15px;background:rgba(255,255,255,0.03);border-radius:6px;margin-bottom:8px}
.subdomain-name{flex:1}
.subdomain-name code{color:#667eea}
.subdomain-ip{color:#888;font-size:13px}

/* Fix subdomain form */
#specific-section .form-group{display:flex;gap:10px;align-items:center}
#specific-section input[type="text"]{padding:10px 12px;font-size:14px}
#new-subdomain{flex:2;min-width:150px}
#new-subdomain-ip{flex:1;min-width:120px}
#specific-section .btn-primary{padding:10px 15px;font-size:14px;white-space:nowrap;flex-shrink:0}

/* ============ LAYOUT MELHORADO ============ */
.section{margin-bottom:30px}
.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}
.section-header h2{margin:0;font-size:1.3em;display:flex;align-items:center;gap:10px}

/* Grid de 2 colunas para secções */
.two-col-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:1024px){.two-col-grid{grid-template-columns:1fr}}

/* Cards uniformes */
.card-equal{background:rgba(255,255,255,0.05);border-radius:16px;padding:20px;border:1px solid rgba(255,255,255,0.1);height:100%}
.card-equal h3{margin:0 0 15px 0;font-size:1.1em;display:flex;align-items:center;gap:8px}

/* Listas de proxies no failover */
.proxy-role-list{max-height:250px;overflow-y:auto}
.proxy-role-item{display:flex;justify-content:space-between;align-items:center;padding:12px;margin-bottom:8px;border-radius:8px;border-left:3px solid}
.proxy-role-item.primary{background:rgba(46,204,113,0.1);border-color:#2ecc71}
.proxy-role-item.standby{background:rgba(243,156,18,0.1);border-color:#f39c12}
.proxy-role-item.standby.active{border-color:#2ecc71}
.proxy-role-item .info strong{color:#fff}
.proxy-role-item .info small{color:#888;font-size:12px}
.proxy-role-item .actions{display:flex;gap:5px;flex-wrap:wrap}

/* Firewall cards */
.firewall-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:20px}
@media(max-width:768px){.firewall-grid{grid-template-columns:1fr}}

/* Botões pequenos */
.btn-small{padding:6px 12px;border:none;border-radius:6px;cursor:pointer;font-size:12px;font-weight:600;transition:all 0.2s}
.btn-small.btn-success{background:rgba(76,175,80,0.2);color:#4CAF50}
.btn-small.btn-success:hover{background:rgba(76,175,80,0.4)}
.btn-small.btn-warning{background:rgba(255,152,0,0.2);color:#ff9800}
.btn-small.btn-warning:hover{background:rgba(255,152,0,0.4)}
.btn-small.btn-danger{background:rgba(244,67,54,0.2);color:#f44336}
.btn-small.btn-danger:hover{background:rgba(244,67,54,0.4)}
.btn-small.btn-info{background:rgba(33,150,243,0.2);color:#2196F3}
.btn-small.btn-info:hover{background:rgba(33,150,243,0.4)}
.btn-small.btn-secondary{background:rgba(255,255,255,0.1);color:#fff}
.btn-small.btn-secondary:hover{background:rgba(255,255,255,0.2)}

/* Info box */
.info-box{padding:12px 15px;background:rgba(255,255,255,0.03);border-radius:8px;border-left:3px solid #667eea}
.info-box p{margin:0;color:#888;font-size:13px}
.info-box strong{color:#fff}

/* IP List no firewall */
.ip-list{max-height:200px;overflow-y:auto}
.ip-item{display:flex;justify-content:space-between;align-items:center;padding:10px;margin-bottom:5px;background:rgba(255,255,255,0.05);border-radius:8px}
.ip-item code{color:#fff;font-family:monospace}

/* Input melhorado */
.input{width:100%;padding:10px 15px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);border-radius:8px;color:#fff;font-size:14px}
.input:focus{outline:none;border-color:#667eea}
.input-group{display:flex;gap:10px}
.input-group .input{flex:1}

/* Badge info */
.badge-info{background:rgba(33,150,243,0.2);color:#2196F3}

/* Secções colapsáveis */
.section-compact{background:rgba(255,255,255,0.03);border-radius:16px;padding:20px;margin-bottom:20px;border:1px solid rgba(255,255,255,0.08)}
/* NS Box - Configuração de Nameservers */
.ns-box{background:rgba(0,0,0,0.2);border-radius:8px;padding:12px;margin-top:10px;width:100%}
.ns-item{display:flex;align-items:center;gap:8px;padding:6px 0}
.ns-item:first-child{padding-top:0}
.ns-item:last-child{padding-bottom:0}
.ns-label{color:#888;font-size:12px;font-weight:600;min-width:35px}
.ns-item code{background:rgba(102,126,234,0.15);color:#667eea;padding:8px 12px;border-radius:6px;font-size:13px;flex:1;text-align:left;display:block}
.btn-copy{background:rgba(102,126,234,0.2);border:none;padding:8px 10px;border-radius:6px;cursor:pointer;color:#667eea;font-size:12px;flex-shrink:0;transition:all 0.2s}
.btn-copy:hover{background:rgba(102,126,234,0.4)}

/* Instruction step fix */
.instruction-step{flex-direction:column;align-items:flex-start}
.instruction-step .step-number{margin-bottom:10px}
.instruction-step .step-content{width:100%}

/* Badge servidor padrão */
.badge-default {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: #fff;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    display: inline-block;
}

/* Badge porta padrão */
.badge-default-port {
    background: linear-gradient(135deg, #11998e, #38ef7d);
    color: #fff;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    display: inline-block;
}

/* Botões das Proxies - Novos */
.proxy-actions {
    display: flex;
    gap: 8px;
    margin-top: 15px;
    flex-wrap: wrap;
    justify-content: center;
}

.btn-proxy {
    padding: 8px 14px;
    border: none;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #fff;
}

.btn-proxy:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.btn-proxy-sync {
    background: linear-gradient(135deg, #667eea, #764ba2);
}

.btn-proxy-sync:hover {
    background: linear-gradient(135deg, #5a6fd6, #6a4190);
}

.btn-proxy-restart {
    background: linear-gradient(135deg, #11998e, #38ef7d);
}

.btn-proxy-restart:hover {
    background: linear-gradient(135deg, #0d7d73, #2ecc71);
}

.btn-proxy-reboot {
    background: linear-gradient(135deg, #f39c12, #e67e22);
}

.btn-proxy-reboot:hover {
    background: linear-gradient(135deg, #d68910, #ca6f1e);
}

.btn-proxy-remove {
    background: linear-gradient(135deg, #e74c3c, #c0392b);
}

.btn-proxy-remove:hover {
    background: linear-gradient(135deg, #cb4335, #a93226);
}

/* Botão Refresh/Atualizar */
.btn-refresh {
    background: linear-gradient(135deg, #4a5568, #2d3748);
    color: #fff;
    padding: 8px 16px;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.btn-refresh:hover {
    background: linear-gradient(135deg, #667eea, #764ba2);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

/* Menu de Navegação Admin */
.admin-nav {
    background: rgba(0,0,0,0.3);
    border-bottom: 1px solid rgba(255,255,255,0.1);
    padding: 10px 0;
    position: sticky;
    top: 0;
    z-index: 100;
    backdrop-filter: blur(10px);
}

.admin-nav .container {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    justify-content: center;
}

.nav-item {
    color: #aaa;
    text-decoration: none;
    padding: 8px 14px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.nav-item:hover {
    background: rgba(102,126,234,0.2);
    color: #fff;
}

.nav-item:active, .nav-item.active {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: #fff;
}

/* Fix select/dropdown cores */
select.input, select {
    background: #1a1a2e !important;
    color: #fff !important;
    border: 1px solid rgba(255,255,255,0.2);
}

select.input option, select option {
    background: #1a1a2e;
    color: #fff;
    padding: 10px;
}

select.input:focus, select:focus {
    border-color: #667eea;
    outline: none;
}

#filter-user {
    background: #1a1a2e !important;
    color: #fff !important;
}

#filter-user option {
    background: #1a1a2e;
    color: #fff;
}

/* Alertas de Username */
.alert-medium { background: rgba(241, 196, 15, 0.1); }
.alert-high { background: rgba(230, 126, 34, 0.15); }
.alert-critical { background: rgba(231, 76, 60, 0.2); }

.badge-alert {
    display: inline-block;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 11px;
    text-align: center;
    min-width: 80px;
}

.badge-alert.alert-medium {
    background: linear-gradient(135deg, #f1c40f, #f39c12);
    color: #000;
}

.badge-alert.alert-high {
    background: linear-gradient(135deg, #e67e22, #d35400);
    color: #fff;
}

.badge-alert.alert-critical {
    background: linear-gradient(135deg, #e74c3c, #c0392b);
    color: #fff;
}

/* Checkbox styling */
.ip-checkbox {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

/* Botão pequeno de bloquear */
.btn-block-ip {
    padding: 4px 8px;
    font-size: 11px;
}

.btn-block-ip:disabled {
    background: #555;
    cursor: not-allowed;
}

/* Firewall tabs */
.fw-tab {
    padding: 10px 20px;
    background: #1a1a2e;
    border: 1px solid #333;
    border-radius: 5px;
    color: #888;
    cursor: pointer;
    transition: all 0.3s;
}

.fw-tab:hover {
    background: #252542;
}

.fw-tab.active {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: #fff;
    border-color: #667eea;
}

.fw-tab-content {
    margin-top: 10px;
}

/* ============ MENU NAVIGATION ============ */
.main-nav {
    background: linear-gradient(135deg, #0f0f1a, #1a1a2e);
    border-bottom: 1px solid #333;
    position: sticky;
    top: 0;
    z-index: 1000;
}
.main-nav .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 60px;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
}
.nav-logo {
    font-size: 20px;
    font-weight: bold;
    color: #fff;
}
.nav-menu {
    display: flex;
    gap: 5px;
}
.nav-link {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    color: #888;
    text-decoration: none;
    border-radius: 8px;
    font-size: 13px;
    transition: all 0.2s;
}
.nav-link:hover {
    background: rgba(102,126,234,0.1);
    color: #fff;
}
.nav-link.active {
    background: rgba(102,126,234,0.2);
    color: #667eea;
}
.nav-icon {
    font-size: 16px;
}
.nav-user {
    display: flex;
    align-items: center;
    gap: 15px;
    color: #888;
}
@media (max-width: 1200px) {
    .nav-link span:not(.nav-icon) { display: none; }
    .nav-link { padding: 10px; }
}