body {
font-family: 'Inter', sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background-color: #f1f5f9;
}
.material-symbols-outlined {
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
vertical-align: middle;
}
.login-card-shadow {
box-shadow: 0px 4px 12px rgba(15, 23, 42, 0.08);
}
@keyframes fadeInUp {
from { opacity: 0; transform: translateY(24px); }
to   { opacity: 1; transform: translateY(0); }
}
@keyframes scaleIn {
from { opacity: 0; transform: scale(0.96); }
to   { opacity: 1; transform: scale(1); }
}
.anim-fade-up { animation: fadeInUp 0.7s cubic-bezier(0.16,1,0.3,1) backwards; }
.anim-scale   { animation: scaleIn 0.5s cubic-bezier(0.34,1.56,0.64,1) backwards; }
@media (prefers-reduced-motion: reduce) { .anim-fade-up, .anim-scale { animation: none; } }
.delay-100 { animation-delay: 100ms; }
.delay-200 { animation-delay: 200ms; }
.nv-input { transition: all 0.2s ease; }
.nv-input:focus {
outline: none;
border-color: #1f5fbf;
box-shadow: 0 0 0 4px rgba(31, 95, 191, 0.1);
}
.nv-input.error { border-color: #dc2626; }
.nv-input.error:focus { box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.1); }
.error-msg {
opacity: 0;
max-height: 0;
overflow: hidden;
transition: all 0.25s ease;
}
.error-msg.show {
opacity: 1;
max-height: 30px;
margin-top: 4px;
}
.step { display: none; }
.step.active { display: flex; }
.strength-seg {
height: 4px;
flex: 1;
border-radius: 9999px;
background: #e2e8f0;
transition: background 0.3s ease;
}