/* style.css (VERSÃO WYDCI - PRETO TOTAL) */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');

:root {
    --background-color: #000000; /* Preto Total */
    --surface-color: #1A1A1A; /* Cinza super escuro para contraste */
    --primary-text-color: #E0E0E0;
    --secondary-text-color: #A0A0A0;
    --accent-color-blue: #00529B; /* Azul Escuro */
    --border-color: #222;
}

/* ... (resto do CSS base, sem alterações) ... */
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Montserrat', sans-serif; background-color: var(--background-color); color: var(--primary-text-color); line-height: 1.6; padding: 20px; }
.container { max-width: 800px; margin: auto; padding: 20px; background-color: var(--surface-color); border-radius: 12px; border: 1px solid var(--border-color); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4); }
header { text-align: center; margin-bottom: 30px; border-bottom: 1px solid var(--border-color); padding-bottom: 20px; }
header h1 { font-size: 2.5em; font-weight: 700; margin-bottom: 5px; }

/* --- EFEITO DE GRADIENTE DA LOGO ATUALIZADO --- */
header h1 span {
    background: linear-gradient(90deg, #FFFFFF, var(--accent-color-blue));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
}

header p.slogan { font-size: 1.1em; color: var(--secondary-text-color); letter-spacing: 2px; text-transform: uppercase; }
.header-links { margin-top: 15px; }
a { color: var(--accent-color-blue); text-decoration: none; transition: color 0.3s ease; }
a:hover { color: #FFFFFF; }
.settings, .generator, .result-section { background-color: var(--background-color); padding: 25px; border-radius: 8px; margin-bottom: 20px; border: 1px solid var(--border-color); }
input[type="text"], input[type="password"], textarea, select { width: 100%; padding: 12px; border-radius: 6px; border: 1px solid var(--border-color); background-color: #2C2C2C; color: var(--primary-text-color); font-family: 'Montserrat', sans-serif; font-size: 1em; margin-bottom: 15px; transition: border-color 0.3s ease, box-shadow 0.3s ease; }
textarea { min-height: 150px; resize: vertical; }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--accent-color-blue); box-shadow: 0 0 0 3px rgba(0, 82, 155, 0.3); }
button { width: 100%; background-color: var(--accent-color-blue); color: #fff; border: none; padding: 15px; border-radius: 6px; cursor: pointer; font-weight: bold; font-size: 1.1em; transition: background-color 0.3s ease, transform 0.2s ease; }
button:hover:not(:disabled) { background-color: #003D73; transform: translateY(-2px); }
button:disabled { background-color: #444; cursor: not-allowed; }
.hidden { display: none; }
#loader { text-align: center; padding: 40px; }
.spinner { border: 4px solid #333; border-top: 4px solid var(--accent-color-blue); border-radius: 50%; width: 50px; height: 50px; animation: spin 1s linear infinite; margin: 0 auto 15px auto; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
.result-section h3 { color: #fff; border-bottom: 1px solid var(--accent-color-blue); padding-bottom: 10px; margin-bottom: 15px; }
.result-section ul { list-style-position: inside; padding-left: 0; }
.result-section li, .result-section p { margin-bottom: 10px; }
code { background-color: var(--background-color); padding: 15px; display: block; border-radius: 4px; font-family: monospace; white-space: pre-wrap; word-wrap: break-word; border: 1px solid var(--border-color); }
@media (max-width: 600px) { body { padding: 10px; } .container { padding: 15px; } header h1 { font-size: 2em; } }

/* --- ESTILOS PARA DEIXAR O PAINEL DO ADMIN BONITO --- */
.navbar-inverse {
    background-color: var(--surface-color) !important;
    border-bottom: 1px solid var(--border-color) !important;
}
.navbar-inverse .navbar-brand {
    color: #fff !important;
}
.navbar-inverse .navbar-nav > li > a {
    color: var(--primary-text-color) !important;
}
.navbar-inverse .navbar-nav > li > a:hover {
    background-color: var(--accent-color-blue) !important;
}
body.admin {
    background-color: var(--background-color) !important;
    color: var(--primary-text-color) !important;
}
.content {
    background-color: var(--surface-color) !important;
}
.admin-form table, .admin-form .well {
    background-color: var(--background-color) !important;
    color: var(--primary-text-color) !important;
}
.admin-form table th, .admin-form table td {
    border-color: var(--border-color) !important;
}