:root{
    --cor-primaria:   #0b1f3a;
    --cor-secundaria: #0ea5e9;
    --cor-destaque:   #38bdf8;
    --cor-fundo:      #f0f9ff;
    --cor-texto:      #1e293b;
    --cor-btn-texto:  #ffffff;
    --radius:    8px;
    --shadow-lg: 0 8px 40px rgba(0,0,0,.16);
    --trans:     .25s ease;
}

*{ box-sizing: border-box; }

body.auth{
    margin:0;
    font-family:'Roboto', sans-serif;
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:1.5rem;
    background:
        radial-gradient(1200px 600px at 50% -10%, color-mix(in srgb, var(--cor-secundaria) 18%, transparent), transparent),
        var(--cor-fundo);
}

.auth-card{
    width:100%;
    max-width:400px;
    background:#fff;
    border-radius:16px;
    box-shadow:var(--shadow-lg);
    padding:2.5rem 2rem 2rem;
}

.auth-brand{
    text-align:center;
    margin-bottom:1.75rem;
}
.auth-brand .brand-icon{
    font-size:48px;
    color:var(--cor-primaria);
}
.auth-brand h1{
    font-size:1.5rem;
    color:var(--cor-primaria);
    margin:.25rem 0 0;
}
.auth-brand .sub{ color:#64748b; font-size:.88rem; margin-top:.3rem; }

.field{ margin-bottom:1.1rem; }
.field label{ display:block; font-size:.8rem; font-weight:600; color:var(--cor-primaria); margin-bottom:.4rem; }
.field input{
    width:100%;
    padding:.72rem .9rem;
    border:1.5px solid #e2e8f0;
    border-radius:var(--radius);
    font-size:.95rem;
    background:#f8fafc;
    color:var(--cor-texto);
    font-family:inherit;
    transition:border-color var(--trans), box-shadow var(--trans), background var(--trans);
}
.field input:focus{
    outline:none;
    border-color:var(--cor-secundaria);
    background:#fff;
    box-shadow:0 0 0 3px color-mix(in srgb, var(--cor-secundaria) 22%, transparent);
}

.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:.75rem 1.2rem;
    border:none;
    border-radius:var(--radius);
    font-size:.95rem;
    font-weight:600;
    font-family:inherit;
    cursor:pointer;
}
.btn-primary{ background:var(--cor-primaria); color:var(--cor-btn-texto); }
.btn-primary:hover{ filter:brightness(1.12); }
.btn-full{ width:100%; margin-top:.4rem; }

.erro{
    background:#fef2f2;
    border:1px solid #fecaca;
    color:#b91c1c;
    padding:.7rem .9rem;
    border-radius:var(--radius);
    font-size:.85rem;
    margin-bottom:1.25rem;
    text-align:center;
}

.senha-wrap{ position:relative; }
.senha-wrap input{ padding-right:42px; }
.olho{
    position:absolute;
    right:8px;
    top:50%;
    transform:translateY(-50%);
    background:none;
    border:0;
    padding:4px;
    cursor:pointer;
    font-size:1.1rem;
    line-height:1;
    color:#94a3b8;
}