/* ── Compartilhado: login.html e cadastro.html ── */

* { margin:0; padding:0; box-sizing:border-box; }

body {
    font-family:'Segoe UI',Tahoma,sans-serif;
    background:linear-gradient(135deg,#1a1a2e,#16213e,#0f3460);
    min-height:100vh;
    display:flex; align-items:center; justify-content:center;
    color:#fff;
}

.card {
    background:rgba(255,255,255,0.06);
    border:1px solid rgba(255,255,255,0.1);
    border-radius:20px;
    padding:2.5rem 2rem;
    width:min(420px,92vw);
    box-shadow:0 24px 60px rgba(0,0,0,0.5);
}
.logo { text-align:center; font-size:3rem; margin-bottom:.5rem; }
h1 { text-align:center; font-size:1.6rem; color:#e94560; margin-bottom:.3rem; }
.subtitulo { text-align:center; color:rgba(255,255,255,0.45); font-size:.88rem; margin-bottom:1.8rem; }

.campo { margin-bottom:1.1rem; }
label { display:block; font-size:.82rem; color:#a8dadc; margin-bottom:.4rem; }
input {
    width:100%; padding:.7rem 1rem;
    background:rgba(0,0,0,0.3);
    border:1px solid rgba(255,255,255,0.12);
    border-radius:9px; color:#fff;
    font-size:.95rem; outline:none;
    transition:border-color .2s;
}
input:focus { border-color:#e94560; }

.dica { font-size:.78rem; color:rgba(255,255,255,.3); margin-top:.3rem; }

/* ── Botão entrar (login) ── */
.btn-entrar {
    width:100%; padding:.78rem;
    background:#e94560; color:#fff; border:none;
    border-radius:9px; font-size:1rem; font-weight:bold;
    cursor:pointer; margin-top:.5rem;
    box-shadow:0 4px 16px rgba(233,69,96,0.4);
    transition:transform .15s, box-shadow .15s;
}
.btn-entrar:hover { transform:translateY(-2px); box-shadow:0 6px 24px rgba(233,69,96,0.6); }

/* ── Botão criar conta (cadastro) ── */
.btn-criar {
    width:100%; padding:.78rem;
    background:#4caf50; color:#fff; border:none;
    border-radius:9px; font-size:1rem; font-weight:bold;
    cursor:pointer; margin-top:.5rem;
    box-shadow:0 4px 16px rgba(76,175,80,0.35);
    transition:transform .15s, box-shadow .15s;
}
.btn-criar:hover { transform:translateY(-2px); box-shadow:0 6px 24px rgba(76,175,80,0.55); }

/* ── Alertas ── */
.alertas { margin-bottom:1rem; }
.alerta {
    background:rgba(233,69,96,0.15);
    border:1px solid rgba(233,69,96,0.4);
    color:#ef9a9a; border-radius:8px;
    padding:.55rem .9rem; font-size:.86rem;
    margin-bottom:.5rem;
}

.rodape { text-align:center; margin-top:1.4rem; font-size:.88rem; color:rgba(255,255,255,.4); }
.rodape a { color:#a8dadc; text-decoration:none; transition:color .2s; }
.rodape a:hover { color:#fff; }

/* ── Divisor e campo opcional (cadastro) ── */
.divisor {
    display:flex; align-items:center; gap:.7rem;
    margin:1.2rem 0 .8rem; color:rgba(255,255,255,.2); font-size:.78rem;
}
.divisor::before, .divisor::after {
    content:''; flex:1; height:1px; background:rgba(255,255,255,.1);
}
.campo-opcional {
    background:rgba(255,193,7,0.05);
    border:1px solid rgba(255,193,7,0.2);
    border-radius:10px; padding:.9rem 1rem 1rem;
}
.campo-opcional label { color:#ffd166; }
.campo-opcional input:focus { border-color:#ffd166; }
.campo-opcional .dica { color:rgba(255,193,7,.45); }