.actions { display: flex; gap: 3rem; justify-content: center; margin-top: 0.5rem; } .actions button { padding: 1rem 2.2rem; border-radius: 12px; border: 0; cursor: pointer; font-weight: 700; font-size: 1.25rem; transition: background 0.18s; min-width: 120px; } /* Unified error style */ .error { color: var(--error); margin-top: 0.7rem; text-align: center; background: var(--error-bg); border-radius: 8px; padding: 1rem; } @media (max-width: 480px) { .actions { gap: 1.2rem; } .actions button { padding: 0.8rem 1.2rem; font-size: 1.05rem; min-width: 90px; } } /* Error message */ .error-message { color: var(--error, #e53e3e); font-size: 0.98rem; margin-top: 0.4rem; display: block; } /* Success message */ .success-message { color: var(--success, #16a34a); font-size: 1rem; } /* Input error */ .input-error { border-color: var(--error, #e53e3e); }