/* ========== Reset + Vars ========== */
:root {
    --brand: #f83435;
    --brand-dark: #d12c2c;
    --ink: #0a0a0a;
    --bg-deep: #040443;
    --bg-panel: rgba(255, 255, 255, .1);
    --panel-blur: blur(15px);
    --text: #ffffff;
    --muted: #c7c7c7;
    --error: #ff6b6b;
    --border: rgba(255, 255, 255, .18);
    --font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: var(--font-family);
}

/* CHAVE PARA A CENTRALIZAÇÃO */
body {
    display: flex;
    justify-content: center; /* Centraliza horizontalmente */
    align-items: center;    /* Centraliza verticalmente */
    min-height: 100vh;        /* Garante que o body ocupe toda a altura da tela */
    padding: 20px;            /* Adiciona um respiro em telas muito pequenas */
    overflow: hidden;         /* Esconde qualquer overflow do body */
}

/* ========== Background Animado ========== */
.background {
    position: fixed; /* Fixo para não rolar com o conteúdo */
    inset: 0;
    z-index: -1; /* Coloca o fundo atrás de todo o conteúdo */
    background: linear-gradient(to right, var(--brand), var(--bg-deep));
}

.layer {
    position: absolute;
    width: 140vw;
    height: 140vh;
    top: -20vh;
    left: -30vw;
    clip-path: polygon(0 0, 50% 0, 30% 100%, 0 100%);
    will-change: transform, opacity;
}

.layer1 { background: #ffffff; opacity: .15; animation: float1 5s infinite ease-in-out alternate; }
.layer2 { background: #070707; opacity: .35; animation: float2 6s infinite ease-in-out alternate; }
.layer3 { background: var(--bg-deep); opacity: .55; animation: float3 7s infinite ease-in-out alternate; }
.layer4 { background: var(--brand); opacity: .75; animation: float4 8s infinite ease-in-out alternate; }

/* ========== Modal ========== */
.login-modal {
    /* AJUSTE: Removemos o posicionamento absoluto para funcionar com o Flexbox do body */
    position: relative;
    width: 680px;
    max-width: 100%; /* Garante que não ultrapasse a largura da tela */
    min-height: 440px;
    display: flex;
    background: var(--bg-panel);
    backdrop-filter: var(--panel-blur);
    -webkit-backdrop-filter: var(--panel-blur);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .35);
    overflow: hidden;
    animation: fadeIn .5s ease-out;
}

/* ========== Painel Esquerdo (Formulário) ========== */
.login-content {
    width: 50%;
    padding: 32px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: rgba(0, 0, 0, .55);
    color: var(--text);
}

.login-content h2 {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 8px;
}

.login-content p {
    font-size: 14px;
    color: var(--muted);
    margin-bottom: 16px;
}

.error-feedback {
    color: var(--error);
    background-color: rgba(255, 107, 107, 0.1);
    border: 1px solid var(--error);
    border-radius: 6px;
    padding: 10px;
    margin-bottom: 16px;
    font-size: 13px;
    text-align: center;
}

/* ========== Elementos do Formulário ========== */
form { display: flex; flex-direction: column; }
.input-group { margin-bottom: 12px; }
label { font-size: 13px; font-weight: 500; display: block; margin-bottom: 6px; }

input[type="email"],
input[type="password"] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid rgba(255, 255, 255, .2);
    background: rgba(255, 255, 255, .08);
    color: var(--text);
    border-radius: 6px;
    outline: none;
    font-size: 14px;
    transition: all .2s ease;
}
input::placeholder { color: rgba(255, 255, 255, .6); }
input:focus {
    border-color: var(--brand);
    background: rgba(255, 255, 255, .12);
    box-shadow: 0 0 0 3px rgba(248, 52, 53, .25);
}

.forgot-password {
    font-size: 12px;
    color: #ffd1d1;
    text-decoration: none;
    margin-top: 4px;
    margin-bottom: 16px;
    align-self: flex-end;
    transition: color .2s ease;
}
.forgot-password:hover { color: white; text-decoration: underline; }

/* ========== Botões ========== */
button, .btn {
    padding: 11px 12px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    transition: all .2s ease;
    border: none;
}
button:active, .btn:active { transform: translateY(1px); }
button:disabled { opacity: .7; cursor: not-allowed; }

button[type="submit"] { background: var(--brand); color: white; }
button[type="submit"]:hover:not(:disabled) { background: var(--brand-dark); }

/* Estilo Moderno para o Botão do Google */

.btn-google {
    /* Layout e Espaçamento */
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px; /* Espaço entre o ícone e o texto */
    padding: 10px 20px;

    /* Cores e Borda */
    background-color: #ffffff;
    border: 1px solid #dadedf;
    color: #3c4043; /* Cor de texto padrão do Google */

    /* Forma e Sombra */
    border-radius: 8px; /* Cantos mais arredondados */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); /* Sombra sutil para dar profundidade */
    
    /* Tipografia e Decoração */
    text-decoration: none;
    font-size: 14px;
    font-weight: 500; /* Medium weight */
    font-family: 'Roboto', sans-serif; /* Fonte padrão do Google */

    /* Animação */
    transition: all 0.2s ease-in-out;
}

/* Efeito ao passar o mouse */
.btn-google:hover {
    border-color: #cdd1d3;
    background-color: #f8f9fa; /* Leve mudança de cor de fundo */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); /* Sombra mais pronunciada */
    transform: translateY(-1px); /* Leve elevação */
}

/* Efeito ao clicar */
.btn-google:active {
    background-color: #f1f3f4;
    transform: translateY(0) scale(0.98); /* Remove a elevação e encolhe um pouco */
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Garante que o ícone e o texto se alinhem bem */
.btn-google svg,
.btn-google span {
    display: block;
}

/* ========== Separador "ou" ========== */
.separator {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin: 16px 0;
    color: var(--muted);
    font-size: .85rem;
}
.separator hr { flex: 1; border: none; border-top: 1px solid rgba(255, 255, 255, .2); }

/* ========== Painel Direito (Imagem) ========== */
.login-image {
    width: 50%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 10px;
    background: #010740;
    position: relative;
    overflow: hidden;
}
.login-image img { max-width: 95%; height: auto; object-fit: contain; position: relative; bottom: -10px; z-index: 1; filter: drop-shadow(0 10px 24px rgba(0, 0, 0, .35)); border-radius: 10px; }

/* ... (demais estilos para .square e animações mantidos como estão) ... */

.login-image::before, .login-image::after, .login-image .square { position: absolute; border: 2px solid white; opacity: .14; }
.login-image::before, .login-image::after { content: ""; width: 60px; height: 60px; }
.login-image .square { width: 80px; height: 80px; }
.login-image::before { top: 10%; left: 20%; transform: rotate(15deg); }
.login-image::after  { bottom: 15%; right: 25%; transform: rotate(-10deg); }
.square-1 { top: 5%; left: 5%; transform: rotate(10deg); }
.square-2 { bottom: 10%; right: 10%; transform: rotate(-5deg); }
.square-3 { top: 45%; left: 15%; transform: rotate(20deg); }
.square-4 { bottom: 30%; right: 35%; transform: rotate(-15deg); }
.square-5 { top: 60%; left: 50%; transform: rotate(25deg); }
.square-6 { bottom: 50%; right: 5%; transform: rotate(-10deg); }
.square-7 { top: 75%; left: 30%; transform: rotate(5deg); }

@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to   { opacity: 1; transform: translateY(0); } }
@keyframes float1 { 0% { transform: translate(0,0) scale(1) rotate(0deg); } 50%{ transform: translate(10px,30px) scale(1.05) rotate(2deg); } 100%{transform: translate(0,0) scale(1) rotate(0deg); } }
@keyframes float2 { 0% { transform: translate(0,0) scale(1) rotate(0deg); } 50%{ transform: translate(-10px,40px) scale(1.06) rotate(-2deg); } 100%{transform: translate(0,0) scale(1) rotate(0deg); } }
@keyframes float3 { 0% { transform: translate(0,0) scale(1) rotate(0deg); } 50%{ transform: translate(15px,20px) scale(1.03) rotate(1deg); } 100%{transform: translate(0,0) scale(1) rotate(0deg); } }
@keyframes float4 { 0% { transform: translate(0,0) scale(1) rotate(0deg); } 50%{ transform: translate(-15px,50px) scale(1.07) rotate(-1.5deg); } 100%{transform: translate(0,0) scale(1) rotate(0deg); } }

/* ========== Acessibilidade & Mobile ========== */
@media (prefers-reduced-motion: reduce) {
    .layer, .login-modal { animation: none !important; }
}

@media (max-width: 680px) {
    .login-modal { flex-direction: column; width: auto; max-width: 400px; }
    .login-content { width: 100%; }
    .login-image { display: none; }
}

@media (max-width: 480px) {
    body { align-items: flex-start; /* Alinha no topo em telas muito pequenas */ }
    .layer { display: none; }
}