body{
  min-height:100vh;
  background:
    radial-gradient(circle at 50% 30%, var(--bg-vignette-1) 0%, var(--bg-vignette-2) 55%, var(--bg-0) 100%);
  display:flex; align-items:center; justify-content:center;
  padding:24px;
}
.card{
  width:100%; max-width:400px;
  background:var(--card-bg);
  border:1px solid var(--card-border);
  border-radius:16px;
  padding:36px 32px 32px;
  box-shadow:0 20px 60px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.02);
  animation:fadeUp .5s ease;
}
@keyframes fadeUp{ from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:translateY(0);} }

.brand{display:flex; align-items:center; gap:12px; margin-bottom:28px;}
.brand .logo{width:40px; height:40px;}
.brand-text .name{font-size:15px; font-weight:700; letter-spacing:.2px;}
.brand-text .name span{color:var(--accent-2); font-weight:700;}
.brand-text .tagline{font-size:10px; letter-spacing:1.2px; color:var(--text-muted); text-transform:uppercase; margin-top:2px;}

h1{font-size:20px; font-weight:700; margin-bottom:4px;}
.subtitle{font-size:13px; color:var(--text-secondary); margin-bottom:22px; padding-bottom:20px; border-bottom:1px solid var(--card-border);}

label{display:block; font-size:10.5px; font-weight:700; letter-spacing:1px; color:var(--text-muted); text-transform:uppercase; margin-bottom:7px;}
.field{margin-bottom:16px;}
input{
  width:100%; padding:12px 14px; border-radius:9px; border:1.5px solid transparent;
  background:var(--input-bg); color:var(--input-text); font-size:14px;
  outline:none; transition:box-shadow .15s ease, border-color .15s ease, background .15s ease;
}
input::placeholder{color:#8886a3;}
input:focus{background:var(--input-bg-focus); border-color:var(--accent); box-shadow:0 0 0 4px rgba(108,92,231,0.18);}

.row-between{display:flex; align-items:center; justify-content:space-between; margin:2px 0 22px;}
.remember{display:flex; align-items:center; gap:7px; font-size:12.5px; color:var(--text-secondary);}
.remember input[type=checkbox]{width:14px; height:14px; accent-color:var(--accent); background:transparent;}
.forgot{font-size:12.5px; color:var(--accent-2); text-decoration:none;}
.forgot:hover{text-decoration:underline;}

button.submit{
  width:100%; padding:13px; border:none; border-radius:9px; cursor:pointer;
  background:linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
  color:#fff; font-size:14px; font-weight:700; letter-spacing:.2px;
  box-shadow:0 8px 24px rgba(108,92,231,0.35);
  transition:transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
button.submit:hover{filter:brightness(1.06); box-shadow:0 10px 28px rgba(108,92,231,0.45);}
button.submit:active{transform:translateY(1px);}

.error{
  background:rgba(241,106,106,0.1); border:1px solid rgba(241,106,106,0.35);
  color:var(--danger); font-size:12.5px; padding:10px 12px; border-radius:8px; margin-bottom:16px;
}

.footer-note{text-align:center; font-size:11.5px; color:var(--text-muted); margin-top:24px;}
.footer-note b{color:var(--text-secondary);}

@media (prefers-reduced-motion: reduce){ .card{animation:none;} }