* { box-sizing: border-box; }
body {
    margin: 0; min-height: 100vh; display: grid; place-items: center; padding: 16px;
    font-family: Inter, system-ui, sans-serif; color: #e7ecf5;
    background:
        radial-gradient(800px 400px at 80% -10%, rgba(124, 92, 255, .22), transparent 60%),
        radial-gradient(700px 400px at 0% 110%, rgba(56, 189, 248, .12), transparent 60%),
        #0b0f17;
}
.login {
    width: min(380px, 100%); text-align: center; padding: 34px 28px 26px; border-radius: 20px;
    background: rgba(19, 26, 40, .85); border: 1px solid rgba(148, 163, 184, .16);
    box-shadow: 0 30px 80px rgba(0, 0, 0, .5); backdrop-filter: blur(10px);
}
.logo {
    width: 58px; height: 58px; margin: 0 auto 16px; border-radius: 16px; display: grid; place-items: center; color: #fff;
    background: linear-gradient(135deg, #7c5cff, #4f46e5); box-shadow: 0 10px 30px rgba(124, 92, 255, .4);
}
.logo svg { width: 32px; height: 32px; }
h1 { margin: 0 0 6px; font-size: 24px; font-weight: 800; letter-spacing: -.02em; }
.muted { color: #8b97ab; margin: 0 0 22px; font-size: 14.5px; line-height: 1.45; }
form { display: flex; flex-direction: column; gap: 12px; }
.campo { position: relative; }
input {
    width: 100%; height: 48px; padding: 0 48px 0 16px; border-radius: 12px; font: inherit; font-size: 16px; color: inherit;
    background: #0f1521; border: 1px solid rgba(148, 163, 184, .22); outline: none; transition: border-color .15s, box-shadow .15s;
}
input:focus { border-color: #7c5cff; box-shadow: 0 0 0 3px rgba(124, 92, 255, .25); }
#ver { position: absolute; right: 6px; top: 6px; width: 36px; height: 36px; border: 0; border-radius: 9px; background: none; cursor: pointer; opacity: .6; font-size: 16px; }
#ver:hover { opacity: 1; background: rgba(148, 163, 184, .12); }
.entrar {
    height: 48px; border: 0; border-radius: 12px; font: inherit; font-weight: 700; font-size: 16px; color: #fff; cursor: pointer;
    background: linear-gradient(135deg, #7c5cff, #5b3df5); box-shadow: 0 8px 24px rgba(124, 92, 255, .35); transition: filter .15s, transform .05s;
}
.entrar:hover { filter: brightness(1.1); }
.entrar:active { transform: translateY(1px); }
.error { color: #fca5a5; min-height: 20px; margin: 14px 0 0; font-size: 14px; font-weight: 600; }
.sacudir { animation: sacudir .4s ease; }
@keyframes sacudir { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }