:root{
--bg:#0b0f14;--card:#0f172a;--text:#e2e8f0;--muted:#94a3b8;
--accent:#D89F1F;--accent-2:#F1B434;--success:#10b981;--danger:#ef4444
}
*{box-sizing:border-box}
body{margin:0;height:100vh;background:linear-gradient(180deg,var(--bg),#0a0e17);
font-family:'Inter',sans-serif;color:var(--text);
display:flex;align-items:center;justify-content:center;padding:20px}
.card{
width:100%;max-width:420px;background:var(--card);border-radius:20px;padding:24px 36px;
box-shadow:0 25px 60px rgba(0,0,0,0.7);border:1px solid rgba(139,92,246,0.15);
backdrop-filter:blur(12px);text-align:center;position:relative;overflow:hidden
}
.card::before{
content:'';position:absolute;top:0;left:0;right:0;height:5px;
background:linear-gradient(90deg,var(--accent),var(--accent-2));border-radius:20px 20px 0 0
}
.logo img{
width:88px;height:88px;margin-bottom:12px
}
h2{
margin:0 0 30px;font-size:2rem;font-weight:900;
background:linear-gradient(135deg,var(--accent),var(--accent-2));
-webkit-background-clip:text;-webkit-text-fill-color:transparent;letter-spacing:-0.5px
}

/* INPUTS MODERNOS */

.input-box{
position:relative;margin:20px 0
}
.input-box input{
width:100%;padding:15px 20px 15px 15px;background:rgba(255,255,255,0.05);
border:1.5px solid rgba(255,255,255,0.12);border-radius:16px;color:white;
font-size:1.05rem;transition:all .3s;caret-color:var(--accent); 
letter-spacing: 1px; 
}
.input-box input::placeholder{color:var(--muted);opacity:0.9}
.input-box input:focus{
background:rgba(255,255,255,0.1);border-color:var(--accent);
box-shadow:0 0 0 5px rgba(212,175,55,0.2);outline:none
}
.input-icon{
position:absolute;left:18px;top:50%;transform:translateY(-50%);
color:var(--muted);font-size:22px;pointer-events:none
}

/* BOTÃO PREMIUM */

button[type="submit"]{
width:100%;padding:12px;margin:20px 0 12px;
background:linear-gradient(135deg,var(--accent),var(--accent-2));
color:white;font-size:1rem;font-weight:800;border:none;text-shadow: 1px 1px 2px #000, 0 0 0.5em #000;
border-radius:16px;cursor:pointer;transition:all .35s;letter-spacing:0.5px;
}
button[type="submit"]:hover{
transform:translateY(-4px);box-shadow:0 18px 50px rgba(212,175,55,0.2)
}
button[type="submit"]:active{transform:translateY(-1px)}

/* OLHO DA SENHA */

.eye-btn{
position:absolute;right:16px;top:50%;transform:translateY(-50%);
background:none;border:none;color:var(--muted);cursor:pointer;padding:6px;border-radius:50%
}
.eye-btn:hover{color:var(--accent)}

/* MENSAGENS */

.msg{
padding:16px 20px;border-radius:14px;margin:18px 0;font-weight:600;
font-size:0.98rem;background:rgba(239,68,68,0.12);color:var(--danger);
border:1px solid rgba(239,68,68,0.25)
}
.erro{background:rgba(239,68,68,0.12);color:var(--danger);
border:1px solid rgba(239,68,68,0.25);
width:100%;padding:12px;margin:20px 0 12px; font-size:1rem;
font-weight:800;border:none;text-shadow: 1px 1px 2px #000, 0 0 0.5em #000;
border-radius:16px;letter-spacing:0.5px;

}
.sucesso{background:rgba(16,185,129,0.15);color:var(--success);
border:1px solid rgba(16,185,129,0.3)}

.footer{margin-top:36px;color:var(--muted);font-size:0.95rem}
.acesso{font-size:17px;color:var(--accent-2);cursor:pointer;text-decoration:none;
font-weight:600;transition:color .2s}
.acesso:hover{color:white}
.btn-novo{background:rgba(255,255,255,0.1);color:white;padding:14px;
border-radius:12px;border:none;cursor:pointer;font-weight:600}


@media only screen and (max-width: 728px) and (min-width: 360px)  {
body{height:auto;}
}