body {
    font-family: 'Inter', sans-serif;
}

.alert-stitch {
    display: flex;
    align-items: center;
    gap: 10px;
    background-color: #fef2f2;
    color: #b91c1c;
    padding: 12px 16px;
    border-radius: 0.75rem;
    border: 1px solid #fecaca;
    font-size: 0.875rem;
    font-weight: 600;
    animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both;
}

.alert-stitch .material-symbols-outlined {
    font-size: 1.125rem;
    color: #ef4444;
    flex-shrink: 0;
}

.input-password-wrapper {
    position: relative;
}

.input-password-wrapper input {
    padding-right: 3rem;
}

.toggle-password {
    position: absolute;
    right: 0.875rem;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: #717c82;
    font-size: 1.25rem;
    user-select: none;
    transition: color 0.2s;
}

.toggle-password:hover {
    color: #006c49;
}

@keyframes shake {
    10%, 90%  { transform: translate3d(-1px, 0, 0); }
    20%, 80%  { transform: translate3d(2px, 0, 0); }
    30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
    40%, 60%  { transform: translate3d(4px, 0, 0); }
}

@keyframes slideUp {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}

main > section:first-child {
    animation: slideUp 0.45s ease-out both;
}

@media (max-width: 480px) {
    footer .flex.gap-8 {
        flex-wrap: wrap;
        justify-content: center;
        gap: 1rem;
    }
}