| /* Authentication specific styles - Light Mode */ | |
| .auth-wrapper { | |
| min-height: 100vh; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| padding: 20px; | |
| } | |
| .auth-card { | |
| width: 100%; | |
| max-width: 460px; | |
| padding: 50px; | |
| border: 4px solid var(--border-glass); | |
| } | |
| .auth-brand { | |
| text-align: center; | |
| margin-bottom: 40px; | |
| } | |
| .auth-logo { | |
| font-family: 'Syne', sans-serif; | |
| font-size: 3rem; | |
| font-weight: 800; | |
| letter-spacing: -2px; | |
| color: var(--text-main); | |
| } | |
| .auth-header { | |
| margin-bottom: 30px; | |
| text-align: center; | |
| } | |
| .auth-title { | |
| font-size: 24px; | |
| font-weight: 700; | |
| color: var(--text-main); | |
| margin-bottom: 8px; | |
| } | |
| .auth-subtitle { | |
| font-size: 14px; | |
| color: var(--text-dim); | |
| } | |
| /* Form */ | |
| .form-input { | |
| width: 100%; | |
| padding: 16px; | |
| background: #f8fafc; | |
| border: 2px solid #e2e8f0; | |
| border-radius: 12px; | |
| color: var(--text-main); | |
| font-size: 15px; | |
| transition: var(--transition); | |
| outline: none; | |
| margin-bottom: 20px; | |
| } | |
| .form-input:focus { | |
| border-color: var(--primary); | |
| background: #fff; | |
| box-shadow: 0 0 0 4px var(--primary-glow); | |
| } | |
| .btn-submit { | |
| width: 100%; | |
| padding: 16px; | |
| background: var(--primary); | |
| color: #fff; | |
| border: none; | |
| border-radius: 12px; | |
| font-size: 16px; | |
| font-weight: 800; | |
| cursor: pointer; | |
| transition: var(--transition); | |
| box-shadow: 0 4px 20px var(--primary-glow); | |
| margin-top: 10px; | |
| } | |
| .btn-submit:hover { | |
| background: var(--primary-dark); | |
| transform: translateY(-2px); | |
| box-shadow: 0 8px 25px var(--primary-glow); | |
| } | |
| .auth-footer { | |
| margin-top: 30px; | |
| text-align: center; | |
| font-size: 14px; | |
| color: var(--text-dim); | |
| } | |
| .auth-link { | |
| color: var(--primary-dark); | |
| font-weight: 700; | |
| text-decoration: none; | |
| cursor: pointer; | |
| } | |
| .auth-link:hover { | |
| text-decoration: underline; | |
| } | |
| /* Role Toggle */ | |
| .role-toggle { | |
| display: flex; | |
| gap: 10px; | |
| margin-bottom: 20px; | |
| } | |
| .role-btn { | |
| flex: 1; | |
| padding: 12px; | |
| background: #f8fafc; | |
| border: 2px solid #e2e8f0; | |
| border-radius: 8px; | |
| color: var(--text-dim); | |
| font-size: 13px; | |
| font-weight: 600; | |
| cursor: pointer; | |
| text-align: center; | |
| transition: var(--transition); | |
| } | |
| .role-btn.active { | |
| border-color: var(--primary); | |
| background: var(--primary-glow); | |
| color: var(--primary-dark); | |
| } | |
| .role-btn:hover:not(.active) { | |
| border-color: #cbd5e1; | |
| } |