/* ========== Variáveis ========== */
:root {
    --primary-500:#00B3FF;
    --primary-600:#0094d9;
    --bg-900:#0d0f1a;
    --bg-800:#161925;
    --white:#ffffff;
    --error:#ff5555;
}

/* ========== Reset / base ========== */
*,
*::before,
*::after{box-sizing:border-box;margin:0;padding:0;}

html,body{
    height:100%;
    font-family:'Poppins',sans-serif;
    background:var(--bg-900);
    color:var(--white);
    -webkit-font-smoothing:antialiased;
}

img{display:block;max-width:100%;}
button{border:none;cursor:pointer;background:none;}
input,button{font:inherit;}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0;}

/* ========== Header ========== */
.header{
    height:72px;                       /* altura fixa da barra */
    width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(22,25,37,.7);
    backdrop-filter:blur(14px) saturate(140%);
    box-shadow:0 2px 6px rgba(0,0,0,.4);
    z-index:10;
}

.logo{
    width:clamp(130px,28vw,190px);     /* responsivo */
}

/* ========== Layout principal ========== */
.wrapper{
    min-height:calc(100% - 72px);      /* espaço abaixo do header */
    display:flex;
    align-items:center;
    justify-content:center;
    padding:2rem 1rem;
    background:radial-gradient(circle at 20% 30%,rgba(0,179,255,.12),transparent 40%),
               radial-gradient(circle at 80% 70%,rgba(0,179,255,.08),transparent 40%),
               var(--bg-900);
    overflow:hidden;
}

.login-card{
    width:100%;
    max-width:380px;
    padding:2.5rem 2rem 3rem;
    border-radius:1.2rem;
    background:rgba(22,25,37,.6);
    backdrop-filter:blur(18px) saturate(140%);
    box-shadow:0 8px 24px rgba(0,0,0,.35),
               0 0 12px rgba(0,179,255,.18);
    animation:floatIn .8s cubic-bezier(.22,1,.36,1) both;
}

@keyframes floatIn{
    0%{transform:translateY(30px) scale(.96);opacity:0;}
    100%{transform:translateY(0) scale(1);opacity:1;}
}

/* ========== Elementos do cartão ========== */
.title{
    text-align:center;
    font-size:1.5rem;
    font-weight:600;
    margin-bottom:2rem;
}

.label{
    display:block;
    font-size:.9rem;
    margin-bottom:.4rem;
    opacity:.85;
}

.input{
    width:100%;
    padding:.85rem 1rem;
    border-radius:.7rem;
    background:var(--bg-800);
    border:2px solid transparent;
    color:var(--white);
    font-size:.95rem;
    transition:border .2s;
}
.input:focus{
    outline:none;
    border-color:var(--primary-500);
    box-shadow:0 0 0 3px rgba(0,179,255,.25);
}

/* ---------- Botão ---------- */
.btn-entrar{
    width:100%;
    margin-top:1.6rem;
    padding:.9rem 1rem;
    border-radius:.9rem;
    background:linear-gradient(135deg,var(--primary-500),var(--primary-600));
    color:var(--white);
    font-size:1.05rem;
    font-weight:600;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:.55rem;
    transition:transform .18s,box-shadow .18s;
}
.btn-entrar:hover{
    transform:translateY(-2px);
    box-shadow:0 6px 18px rgba(0,179,255,.32),
               0 0 8px rgba(0,179,255,.28) inset;
}
.btn-entrar:active{transform:translateY(0);}

/* ---------- Erro ---------- */
.error{
    margin-top:1.2rem;
    text-align:center;
    font-size:.9rem;
    color:var(--error);
}

/* ========== Responsivo extra ========== */
@media(max-width:420px){
    .login-card{padding:2rem 1.6rem 2.5rem;}
    .title{font-size:1.35rem;}
}