/* --- START OF NEW style.css --- */

/* 🛠️ Reset e Box Model */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* 🎨 Variáveis de Cor (Dracula Inspired Palette) */
:root {
    --background-start: #1a1a2e; /* Gradiente escuro início */
    --background-end: #16213e; /* Gradiente escuro fim */
    --container-bg: rgba(40, 42, 54, 0.85); /* #282a36 com transparência */
    --current-line: #44475a; /* Cinza escuro para bordas, fundos sutis */
    --foreground: #e0e0ff; /* Texto padrão claro com matiz azul/roxo */
    --comment: #6272a4; /* Cinza azulado para texto secundário, placeholders */
    --cyan: #8be9fd; /* Ciano (não na paleta original, mas útil) */
    --green: #50fa7b; /* Verde neon */
    --orange: #ffb86c; /* Laranja */
    --pink: #ff79c6; /* Rosa neon */
    --purple: #bd93f9; /* Roxo claro */
    --red: #ff5555; /* Vermelho */
    --yellow: #f1fa8c; /* Amarelo claro */
    --white: #f8f8f2; /* Branco puro Dracula */

    --font-primary: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --font-title: 'Orbitron', sans-serif;
    --font-mono: 'Consolas', 'Monaco', 'Courier New', monospace;
}

/* 📐 Layout Responsivo com Flexbox */
body {
    font-family: var(--font-primary);
    line-height: 1.6;
    background: linear-gradient(135deg, var(--background-start), var(--background-end));
    color: var(--foreground);
    padding: 20px;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    overflow-x: hidden; /* Evitar scroll horizontal desnecessário */
}

/* 🔲 Container Principal */
.container {
    max-width: 850px;
    width: 100%; /* Garante que ocupe o espaço disponível até o max-width */
    margin: 20px auto; /* Centraliza horizontalmente */
    background-color: var(--container-bg);
    padding: 30px;
    border-radius: 12px; /* Bordas mais arredondadas */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4), 0 0 0 1px var(--current-line); /* Sombra mais pronunciada e borda sutil */
    flex-grow: 1; /* Faz o container crescer para empurrar o rodapé */
}

/* 🏁 Cabeçalho */
h1 {
    font-family: var(--font-title);
    color: var(--pink); /* Rosa neon para o título */
    text-align: center;
    margin-bottom: 30px;
    font-size: 2.2em; /* Um pouco maior */
    text-shadow: 0 0 5px rgba(255, 121, 198, 0.5); /* Leve brilho rosa */
}

/* Aviso Legal */
.disclaimer {
    background-color: rgba(241, 250, 140, 0.1); /* Fundo amarelo bem sutil */
    color: var(--yellow); /* Texto amarelo */
    border: 1px solid var(--yellow);
    padding: 15px;
    border-radius: 6px;
    margin-bottom: 20px;
    font-size: 0.9em;
}

.disclaimer strong {
    color: var(--orange); /* Laranja para destaque no aviso */
    font-weight: 600;
}

/* Checkbox de Consentimento */
.consent-check-container {
    margin-top: -10px;
    margin-bottom: 30px;
    padding: 12px 15px;
    background-color: rgba(189, 147, 249, 0.1); /* Fundo roxo sutil */
    border: 1px solid var(--purple);
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 10px;
}

#consent-checkbox {
    cursor: pointer;
    width: 18px;
    height: 18px;
    accent-color: var(--purple); /* Roxo no check */
    flex-shrink: 0;
    background-color: var(--current-line); /* Fundo quando não marcado */
    border: 1px solid var(--purple);
    appearance: none; /* Resetar aparência padrão */
    border-radius: 3px;
    position: relative;
}

#consent-checkbox:checked {
    background-color: var(--purple);
}

/* Estilo para o "check" visual (compatibilidade) */
#consent-checkbox:checked::before {
    content: '\f00c'; /* Código do ícone de check do Font Awesome */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    color: var(--background-start); /* Cor do check */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 12px;
}


.consent-check-container label {
    font-size: 0.9em;
    color: var(--foreground);
    cursor: pointer;
    line-height: 1.4;
}

.consent-check-container label strong {
    color: var(--purple); /* Roxo para destaque */
    font-weight: 600;
}

/* Controles de Geração */
.controls {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 35px;
}

.control-group {
    display: flex;
    flex-wrap: wrap;
    gap: 15px 20px;
    align-items: center;
    padding: 20px;
    border: 1px solid var(--current-line);
    border-radius: 8px;
    background-color: rgba(68, 71, 90, 0.3); /* Fundo cinza escuro mais sutil */
}

.generation-options label {
    font-weight: 500;
    color: var(--foreground); /* Cor padrão de texto */
    margin-right: 5px;
}

.generation-options select {
    padding: 9px 14px;
    border: 1px solid var(--current-line);
    border-radius: 6px;
    min-width: 150px;
    background-color: var(--current-line); /* Fundo cinza escuro */
    color: var(--foreground); /* Texto claro */
    cursor: pointer;
    font-size: 0.95em;
    appearance: none; /* Remover seta padrão */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23bd93f9'%3E%3Cpath fill-rule='evenodd' d='M8 11.293l-4.146-4.147a.5.5 0 0 1 .708-.708L8 9.879l3.439-3.44a.5.5 0 0 1 .707.708L8 11.293z'/%3E%3C/svg%3E"); /* Seta roxa */
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 16px 16px;
    padding-right: 35px; /* Espaço para a seta */
}

.pj-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 0.95em;
    color: var(--foreground);
    margin-left: auto;
}

#include-pj-checkbox {
    cursor: pointer;
    width: 16px;
    height: 16px;
    accent-color: var(--pink); /* Rosa no check */
    appearance: none; /* Customizar aparência */
    border: 1px solid var(--pink);
    border-radius: 3px;
    position: relative;
    background-color: var(--current-line);
}
#include-pj-checkbox:checked {
    background-color: var(--pink);
}
/* Check visual */
#include-pj-checkbox:checked::before {
    content: '\f00c';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    color: var(--background-start);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 10px;
}

/* Botões de Ação */
.action-buttons {
    justify-content: center;
    border: none;
    background-color: transparent;
    padding: 0;
}

/* Estilo Base dos Botões */
.btn {
    padding: 12px 25px; /* Mais padding */
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1em;
    font-weight: 600; /* Mais forte */
    transition: all 0.2s ease-in-out; /* Transição suave */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-decoration: none;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.3);
    text-transform: uppercase; /* Caixa alta */
    letter-spacing: 0.5px;
}

.btn:hover {
    transform: translateY(-2px); /* Efeito levantar */
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.4);
    filter: brightness(1.1); /* Leve brilho */
}

.btn:active {
    transform: translateY(1px); /* Efeito pressionar */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    filter: brightness(0.95);
}

/* Cores dos Botões (Dracula Palette) */
.btn-primary { /* Gerar */
    background-color: var(--purple); /* Roxo */
    color: var(--white);
}
.btn-primary:hover { background-color: #c7a1ff; }

.btn-secondary { /* Copiar Tudo */
    background-color: var(--comment); /* Cinza azulado */
    color: var(--white);
}
.btn-secondary:hover { background-color: #7a8ac8; }

.btn-accent { /* Exportar JSON */
    background-color: var(--orange); /* Laranja */
    color: var(--background-start); /* Texto escuro para contraste */
}
.btn-accent:hover { background-color: #ffc98a; }

/* Estilo para botão desabilitado */
.btn:disabled,
.btn:disabled:hover,
.btn:disabled:active {
    background-color: var(--current-line);
    color: var(--comment);
    cursor: not-allowed;
    opacity: 0.6;
    box-shadow: none;
    transform: none;
    filter: none;
}

/* Container de Saída */
#output-container {
    margin-top: 20px;
    background-color: var(--background-start); /* Fundo mais escuro para a saída */
    padding: 25px;
    border-radius: 8px;
    border: 1px solid var(--current-line);
    min-height: 100px;
}

.placeholder {
    color: var(--comment); /* Cinza azulado */
    text-align: center;
    font-style: italic;
    padding: 20px 0;
}

/* Estilos para Fieldset e Legend */
#output-container fieldset {
    border: 1px solid var(--current-line);
    border-radius: 8px;
    padding: 30px 20px 15px 20px;
    margin-bottom: 25px;
    background-color: rgba(68, 71, 90, 0.2); /* Fundo interno sutil */
    position: relative; /* Para posicionar a legenda corretamente */
}

#output-container fieldset:last-child {
    margin-bottom: 0;
}

#output-container legend {
    font-size: 1.4em;
    font-weight: 600;
    color: var(--pink); /* Rosa neon para legendas */
    padding: 3px 15px;
    margin-left: 10px;
    background-color: var(--background-start); /* Mesmo fundo da saída */
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    position: absolute; /* Para sobrepor a borda do fieldset */
    top: -18px; /* Puxa para cima */
    border: 1px solid var(--current-line); /* Borda na legenda */
    box-shadow: 0 0 8px rgba(255, 121, 198, 0.3); /* Brilho sutil rosa */
}

/* Itens de Dados Gerados */
.data-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 12px;
    padding: 10px 5px;
    border-bottom: 1px dashed var(--current-line); /* Linha separadora */
    flex-wrap: wrap;
}

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

.data-label {
    font-weight: bold;
    color: var(--purple); /* Roxo para os labels */
    min-width: 180px;
    flex-shrink: 0;
    margin-right: 10px;
    padding-top: 2px;
    letter-spacing: 0.3px;
}

.data-value {
    flex-grow: 1;
    word-break: break-all;
    margin-right: 15px;
    font-family: var(--font-mono); /* Fonte monoespaçada */
    background-color: var(--current-line); /* Fundo cinza escuro */
    padding: 5px 8px;
    border-radius: 4px;
    font-size: 0.95em;
    line-height: 1.5;
    color: var(--white); /* Texto branco */
}

/* Botão Copiar Individual */
.copy-btn {
    background-color: var(--green); /* Verde neon */
    color: var(--background-start); /* Texto escuro para contraste */
    border: none;
    border-radius: 5px;
    padding: 5px 10px;
    cursor: pointer;
    font-size: 0.9em;
    transition: all 0.2s ease;
    margin-left: auto;
    flex-shrink: 0;
    align-self: center;
    font-weight: 600;
}

.copy-btn:hover {
    background-color: #8fffaf; /* Verde mais claro */
    transform: scale(1.05);
}
.copy-btn:active {
    transform: scale(0.95);
}

.copy-btn i {
    pointer-events: none;
}

/* Feedback Visual de Cópia/Exportação */
.copied-feedback {
    background-color: var(--green) !important; /* Verde sucesso */
    color: var(--background-start) !important; /* Texto escuro */
}
.copied-feedback i {
    margin-right: 5px;
}

/* 📎 Footer */
footer {
    flex-shrink: 0; /* Garante que o rodapé fique no final */
    text-align: center;
    padding: 25px 15px;
    margin-top: 40px; /* Espaço acima do rodapé */
    border-top: 1px solid var(--current-line);
    background-color: rgba(26, 26, 46, 0.5); /* Fundo sutil para o rodapé */
}

.footer-links {
    margin-bottom: 15px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 15px; /* Espaçamento vertical e horizontal */
}

.footer-links a {
    color: var(--purple); /* Roxo para links */
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease, text-shadow 0.2s ease;
}

.footer-links a:hover {
    color: var(--yellow); /* Amarelo no hover */
    text-decoration: none; /* Mantém sem sublinhado */
    text-shadow: 0 0 5px var(--yellow); /* Brilho amarelo */
}

.footer-links span {
    color: var(--comment); /* Cor do separador */
    margin: 0 5px; /* Espaçamento em volta do separador */
}

.copyright {
    font-size: 0.85em;
    color: var(--comment);
}

/* --- Responsividade --- */

@media (max-width: 880px) {
    .container {
        padding: 25px;
    }
    .control-group {
        gap: 15px;
    }
     h1 { font-size: 2em; }
}

@media (max-width: 768px) {
    h1 { font-size: 1.8em; }

    .consent-check-container {
        margin-top: 15px;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .controls { gap: 15px; }

    .control-group {
        flex-direction: column;
        align-items: stretch;
    }

    .generation-options select, .generation-options label {
        width: 100%;
        margin-right: 0;
    }

    .pj-toggle {
        justify-content: flex-start;
        margin-left: 0;
        padding: 10px 0;
        width: 100%;
    }

    .action-buttons {
        flex-direction: column;
        align-items: stretch;
    }

    .btn {
        width: 100%;
        margin-bottom: 10px;
        padding: 14px 20px; /* Padding maior em mobile */
    }
    .action-buttons .btn:last-child { margin-bottom: 0; }

    .footer-links {
        gap: 8px 12px;
    }
}

@media (max-width: 600px) {
    body { padding: 10px; }
    .container { padding: 20px; }
    h1 { font-size: 1.6em; }

    #output-container { padding: 20px; }

    #output-container legend {
        font-size: 1.2em;
        position: static; /* Volta ao fluxo normal em telas pequenas */
        margin-bottom: 15px; /* Espaço abaixo da legenda */
        margin-left: 0;
        display: flex; /* Garante alinhamento */
        width: fit-content; /* Ajusta à largura do texto */
        border: none; /* Remove borda extra */
        box-shadow: none; /* Remove sombra */
        top: auto; /* Reseta posicionamento */
    }

    #output-container fieldset {
        padding: 20px 15px 10px 15px;
    }

    /* Empilha label, valor e botão */
    .data-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    .data-label {
        min-width: auto;
        margin-bottom: 0;
        padding-top: 0;
    }
    .data-value {
        margin-right: 0;
        width: 100%;
    }
    .copy-btn {
        margin-left: 0;
        align-self: flex-start;
        margin-top: 8px;
        padding: 6px 12px;
    }
}

/* --- END OF NEW style.css --- */