Spaces:
Sleeping
Sleeping
| @import "../shared.css"; | |
| .auth-shell { | |
| min-height: 100dvh; | |
| display: grid; | |
| place-items: center; | |
| background: var(--page-bg); | |
| padding: 24px; | |
| } | |
| .auth-card { | |
| width: 100%; | |
| max-width: 400px; | |
| background: var(--surface); | |
| border: 1px solid var(--border); | |
| border-radius: 20px; | |
| padding: 2.5rem; | |
| box-shadow: var(--shadow-md); | |
| } | |
| .auth-header { | |
| text-align: center; | |
| margin-bottom: 28px; | |
| } | |
| .auth-header h1 { | |
| margin: 0 0 8px; | |
| font-size: 24px; | |
| font-weight: 700; | |
| color: var(--pesu-blue); | |
| } | |
| .auth-subtitle { | |
| margin: 0; | |
| color: var(--muted); | |
| font-size: 14px; | |
| } | |
| .auth-form { | |
| display: grid; | |
| gap: 18px; | |
| } | |
| .form-group { | |
| display: grid; | |
| gap: 6px; | |
| } | |
| .form-group label { | |
| font-size: 13px; | |
| font-weight: 600; | |
| color: var(--text); | |
| } | |
| .form-group input { | |
| width: 100%; | |
| box-sizing: border-box; | |
| } | |
| .password-wrapper { | |
| position: relative; | |
| } | |
| .password-wrapper input { | |
| padding-right: 48px; | |
| } | |
| .toggle-password { | |
| position: absolute; | |
| right: 10px; | |
| top: 50%; | |
| transform: translateY(-50%); | |
| background: transparent; | |
| border: none; | |
| padding: 4px; | |
| color: var(--muted); | |
| cursor: pointer; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .toggle-password:hover { | |
| color: var(--pesu-blue); | |
| } | |
| .toggle-password .eye-closed { | |
| display: none; | |
| } | |
| .toggle-password.active .eye-open { | |
| display: none; | |
| } | |
| .toggle-password.active .eye-closed { | |
| display: block; | |
| } | |
| .auth-error { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| padding: 12px 14px; | |
| border: 1px solid var(--error); | |
| border-radius: 8px; | |
| background: var(--error-bg); | |
| color: var(--error); | |
| font-size: 13px; | |
| } | |
| .auth-error:empty { | |
| display: none; | |
| } | |
| .btn-primary { | |
| border: none; | |
| background: var(--pesu-orange); | |
| color: #fff; | |
| border-radius: 10px; | |
| transition: background 0.15s, border-color 0.15s; | |
| } | |
| .btn-primary:hover { | |
| border-color: color-mix(in srgb, var(--pesu-orange) 80%, black); | |
| } | |
| .btn-block { | |
| width: 100%; | |
| } |