:root {
    /* ... (suas variáveis não mudam) ... */
    --bg-dark: #0a080c;
    --surface-1: #131118;
    --surface-2: #1d1a24;
    --border-color: #383344;
    --text-light: #e8e8e8;
    --text-muted: #8b8599;
    --text-dark: #7f1d1d;
    --primary: #ff335e;
    --primary-hover: #d42a4d;
    --secondary: #8a2be2;
    --secondary-hover: #6a19b4;
    --accent: #4dffff;
    --accent-glow: rgba(77, 255, 255, 0.5);
    --success: #2ed573;
    --warning: #ffe450;
    --danger: #ff6b6b;
    --info: #1e90ff;
    --button-green: #64987b;
    --button-green-hover: #345148;
    --button-clear-bg: #383344;
    --button-clear-hover: #2b2632;
    --radius-lg: 1.5rem;
    --radius-md: 0.75rem;
    --radius-sm: 0.5rem;
}

/* === ESTILOS BASE (MOBILE-FIRST) === */

body {
    background: var(--bg-dark);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-family: 'Poppins', sans-serif;
    color: var(--text-light);
    margin: 0;
    padding: 1rem;
}

.container {
    background: var(--surface-1);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    width: 100%;
    max-width: 1100px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.container:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3);
}

.logo {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1.5rem;
    text-align: center;
}

.logo img {
    max-width: 250px;
    width: 65%;
    height: auto;
}

h1.text-3xl { font-size: 1.5rem; line-height: 2rem; }
h2.text-2xl { font-size: 1.25rem; line-height: 1.75rem; text-align: center; }
p { font-size: 0.9rem; }

a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease-in-out;
}

a:hover {
    color: var(--accent);
}

/* --- Componentes de Card --- */
.info-section, .generator-section, .result {
    background: var(--surface-2);
    border-radius: 1rem;
    border: 1px solid var(--border-color);
    padding: 1.5rem;
    margin-top: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.section-divider {
    border: none;
    height: 1px;
    background-color: var(--border-color);
    width: 100%;
    margin: 0.5rem 0;
}

.tool-card {
    display: block;
    background: var(--surface-1);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 1.5rem;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.tool-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.25);
    border-color: var(--primary);
}

.tool-card:hover h4 {
    color: var(--primary);
}

/* --- Componentes de Formulário e Botões --- */
.input-style {
    background: var(--surface-1);
    color: var(--text-light);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 1rem 1.25rem;
    font-size: 1rem;
    transition: all 0.2s ease-in-out;
    width: 100%;
}

.input-style:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-glow);
    outline: none;
}

#centralized-input {
    display: flex;
    justify-content: center;
}

.password-input-container {
    position: relative;
    width: 100%;
    max-width: 400px;
}

.password-input-container .input-style {
    padding-right: 3.5rem; 
}

.toggle-password {
    position: absolute;
    right: 1.25rem;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: var(--text-muted);
    font-size: 1.25rem;
    transition: color 0.2s ease-in-out;
}

.toggle-password:hover {
    color: var(--text-light);
}

.button-group, .button-container {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.button-style {
    font-weight: 600;
    border-radius: var(--radius-md);
    padding: 1rem;
    font-size: 1rem;
    transition: all 0.2s ease-in-out;
    width: 100%;
    border: none;
    cursor: pointer;
}

.button-style:hover {
    transform: translateY(-2px);
}

.button-search { background: var(--primary); color: #fff; }
.button-search:hover { background: var(--primary-hover); }
.button-clear { background: var(--button-clear-bg); color: #fff; }
.button-clear:hover { background: var(--button-clear-hover); }
.button-copy { background: var(--secondary); color: #fff; }
.button-copy:hover { background: var(--secondary-hover); }
.button-generate { background: var(--button-green); color: #fff; }
.button-generate:hover { background: var(--button-green-hover); }

/* --- Componentes Específicos (Senhador) --- */
#unified-output-section {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.feedback-area { width: 100%; }
.password-strength-meter { background-color: var(--surface-1); height: 10px; border-radius: 5px; overflow: hidden; border: 1px solid var(--border-color); width: 100%; }
.feedback-text-container { display: flex; justify-content: space-between; align-items: center; margin-top: 0.75rem; min-height: 20px; }
.feedback { font-size: 0.9rem; color: var(--text-light); text-align: left; }
.leak-status { font-size: 0.9rem; font-weight: 600; text-align: right; }
.leak-status.safe { color: var(--success); }
.leak-status.pwned { color: var(--danger); }
.strength-bar { height: 100%; width: 0%; transition: width 0.3s ease-in-out, background-color 0.3s ease-in-out; }
.password-options { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; font-size: 0.9rem; }
.password-options input[type="number"] { width: 60px; background: var(--surface-2); color: var(--text-light); border: 1px solid var(--border-color); border-radius: var(--radius-sm); padding: 0.25rem; }

/* --- Componentes Específicos (IP Rakoon) --- */
.result.error { background: #fecaca; border: 1px solid var(--danger); color: var(--text-dark); }
.spinner { border: 4px solid var(--border-color); border-top: 4px solid var(--primary); border-radius: 50%; width: 32px; height: 32px; animation: spin 1s linear infinite; margin: 0 auto; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

.data-item {
    display: flex;
    flex-direction: row; /* Alterado para row por padrão para melhor alinhamento interno */
    align-items: center; /* Alinha ícone e texto verticalmente */
    padding: 0.75rem 0;
    border-bottom: 1px dashed var(--border-color);
}

.data-item:last-child {
    border-bottom: none;
}

.data-label {
    color: var(--primary);
    font-weight: 500;
    margin-right: 0.5rem;
}

.data-value {
    color: var(--text-light);
    font-weight: 400;
    word-break: break-all;
}

.result-layout { display: flex; flex-direction: column; gap: 1.5rem; }

#map {
    /* --- MELHORIA DE DESIGN: Altura do mapa reduzida no mobile --- */
    height: 250px; 
    width: 100%;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    z-index: 1;
}

.result-data { display: flex; flex-direction: column; }
.result-data .data-item i { margin-right: 0.75rem; width: 20px; text-align: center; color: var(--primary); }
.result { transition: opacity 0.5s ease-in-out, max-height 0.5s ease-in-out; max-height: 0; opacity: 0; overflow: hidden; }
.result.visible {
    /* --- CORREÇÃO IMEDIATA: Aumentado o valor da altura máxima --- */
    max-height: 2000px;
    opacity: 1;
}

.footer {
    margin-top: 2rem;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.875rem;
}

/* ###################################################### */
/* ### AJUSTES PARA DESKTOP (TELAS > 768px) ### */
/* ###################################################### */

@media (min-width: 768px) {
    .container { padding: 3rem; }
    .logo { gap: 1.5rem; margin-bottom: 2rem; }
    .logo img { max-width: 300px; width: 100%; }

    h1.text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
    h2.text-2xl { font-size: 1.5rem; line-height: 2rem; }
    p { font-size: 1rem; }

    .info-section, .generator-section, .result {
        margin-top: 2rem;
        padding: 2rem;
        gap: 2rem;
    }
    
    .info-section p {
        text-align: justify;
    }
    
    .button-group {
        flex-direction: row;
        justify-content: center;
        gap: 1rem;
    }
    
    .button-container {
        display: flex;
        justify-content: center;
        margin-top: 0;
    }

    .button-style {
        width: auto;
    }

    /* --- Senhador (Desktop) --- */
    .generator-mode-selector {
        display: flex;
        background-color: var(--surface-1);
        border-radius: var(--radius-md);
        padding: 0.25rem;
        border: 1px solid var(--border-color);
        width: fit-content;
        margin-left: auto;
        margin-right: auto;
    }

    .mode-button {
        position: relative;
        border: none;
        background: none;
    }
    
    .mode-button span {
        display: block;
        padding: 0.5rem 1.5rem;
        font-weight: 600;
        color: var(--text-muted);
        border-radius: 0.6rem;
        cursor: pointer;
        transition: color 0.3s ease-in-out;
        position: relative;
        z-index: 2;
    }
    
    .mode-button input[type="radio"] {
        display: none;
    }

    .mode-button input[type="radio"]:checked + span {
        color: var(--text-light);
    }
    
    .mode-button input[type="radio"]:checked + span::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: var(--primary);
        border-radius: 0.6rem;
        z-index: -1;
        box-shadow: 0 2px 10px rgba(0,0,0,0.3);
    }

    .mode-button:hover span {
        color: var(--text-light);
    }
    
    .feedback, .leak-status {
        font-size: 1rem;
    }

    /* --- IP Rakoon (Desktop) --- */
    .data-item {
        flex-direction: row;
        align-items: center;
    }

    .data-item .data-value {
        margin-left: auto;
        padding-left: 1rem;
        text-align: right;
    }
    
    .result-layout {
        flex-direction: row;
        align-items: flex-start;
    }

    #map {
        height: 350px; /* Altura do mapa no desktop */
        flex: 1;
    }

    .result-data {
        flex: 1;
    }
}