| .authContainer { | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| min-height: 100vh; | |
| background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); | |
| padding: 20px; | |
| } | |
| .authForm { | |
| background: white; | |
| padding: 2rem; | |
| border-radius: 8px; | |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); | |
| width: 100%; | |
| max-width: 400px; | |
| } | |
| .authForm h2 { | |
| text-align: center; | |
| color: #2c3e50; | |
| margin-bottom: 1.5rem; | |
| font-size: 1.8rem; | |
| } | |
| .formGroup { | |
| margin-bottom: 1.2rem; | |
| } | |
| .formGroup label { | |
| display: block; | |
| margin-bottom: 0.5rem; | |
| color: #4a5568; | |
| font-weight: 500; | |
| } | |
| .formGroup input { | |
| width: 100%; | |
| padding: 0.75rem; | |
| border: 1px solid #e2e8f0; | |
| border-radius: 4px; | |
| font-size: 1rem; | |
| transition: all 0.2s ease; | |
| } | |
| .formGroup input:focus { | |
| outline: none; | |
| border-color: #4299e1; | |
| box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.2); | |
| } | |
| .formGroup input:disabled { | |
| background-color: #f7fafc; | |
| cursor: not-allowed; | |
| } | |
| .error { | |
| background-color: #fff5f5; | |
| color: #c53030; | |
| padding: 0.75rem; | |
| border-radius: 4px; | |
| margin-bottom: 1rem; | |
| font-size: 0.875rem; | |
| border: 1px solid #feb2b2; | |
| } | |
| .submitButton { | |
| width: 100%; | |
| padding: 0.75rem; | |
| background-color: #4299e1; | |
| color: white; | |
| border: none; | |
| border-radius: 4px; | |
| font-size: 1rem; | |
| font-weight: 500; | |
| cursor: pointer; | |
| transition: all 0.2s ease; | |
| } | |
| .submitButton:hover:not(:disabled) { | |
| background-color: #3182ce; | |
| } | |
| .submitButton:disabled { | |
| background-color: #a0aec0; | |
| cursor: not-allowed; | |
| } | |
| .submitButton:focus { | |
| outline: none; | |
| box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.2); | |
| } | |
| @media (max-width: 480px) { | |
| .authForm { | |
| padding: 1.5rem; | |
| } | |
| .authForm h2 { | |
| font-size: 1.5rem; | |
| } | |
| .formGroup input { | |
| padding: 0.625rem; | |
| } | |
| .submitButton { | |
| padding: 0.625rem; | |
| } | |
| } | |
| .switchText { | |
| text-align: center; | |
| margin-top: 1.2rem; | |
| color: #6c757d; | |
| } | |
| .switchText a { | |
| color: #007bff; | |
| text-decoration: none; | |
| font-weight: 700; | |
| } | |
| .switchText a:hover { | |
| text-decoration: underline; | |
| } |