body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: linear-gradient(to bottom right, #6ee7b7, #3b82f6); min-height: 100vh; margin: 0; display: flex; justify-content: center; align-items: center; padding: 20px; position: relative; }
.form-container { background: white; padding: 30px 40px; border-radius: 20px; box-shadow: 0 8px 20px rgba(0,0,0,0.15); max-width: 500px; width: 100%; text-align: center; }
label { font-weight: bold; display: block; margin-top: 15px; margin-bottom: 5px; color: #555; text-align: left; }
input, select, button { width: 100%; padding: 10px; margin-bottom: 4px; border-radius: 10px; border: 1px solid #ccc; font-size: 14px; }
button { background-color: #3b82f6; color: white; border: none; margin-top: 20px; font-weight: bold; cursor: pointer; transition: background-color 0.3s ease; }
button:hover { background-color: #2563eb; }
small { display: block; text-align: left; color: #6b7280; margin-bottom: 10px; }
.error-message { color: red; font-size: 12px; text-align: left; display: none; }
input.error { border: 2px solid #ef4444; animation: shake 0.3s; }
input.success { border: 2px solid #10b981; }
@keyframes shake { 0% { transform: translateX(0); } 25% { transform: translateX(-5px); } 50% { transform: translateX(5px); } 75% { transform: translateX(-5px); } 100% { transform: translateX(0); } }
.button-spinner { display: inline-block; width: 16px; height: 16px; border: 2px solid #fff; border-top: 2px solid #3b82f6; border-radius: 50%; animation: spin 0.6s linear infinite; vertical-align: middle; margin-right: 8px; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
.fade-out { opacity: 1; transition: opacity 0.5s ease-out; }
.fade-out.fade { opacity: 0; }
.fade-in { opacity: 0; transition: opacity 0.5s ease-in; }
.fade-in.show { opacity: 1; }