| :root { |
| --bg-main: #171717; |
| --bg-card: #212121; |
| --bg-input: #2f2f2f; |
| --text-primary: #ececf1; |
| --text-secondary: #b4b4b4; |
| --border-color: #2f2f2f; |
| --accent: #10b981; |
| } |
|
|
| * { |
| box-sizing: border-box; |
| margin: 0; |
| padding: 0; |
| } |
|
|
| body { |
| font-family: 'Outfit', sans-serif; |
| background-color: var(--bg-main); |
| color: var(--text-primary); |
| min-height: 100vh; |
| display: flex; |
| justify-content: center; |
| align-items: center; |
| } |
|
|
| .login-card { |
| background-color: var(--bg-card); |
| width: 100%; |
| max-width: 400px; |
| padding: 40px; |
| border-radius: 8px; |
| border: 1px solid var(--border-color); |
| text-align: center; |
| } |
|
|
| .logo { |
| width: 48px; |
| height: 48px; |
| background-color: var(--text-primary); |
| color: var(--bg-card); |
| border-radius: 50%; |
| font-size: 18px; |
| font-weight: 700; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| margin: 0 auto 20px auto; |
| } |
|
|
| h2 { |
| font-size: 20px; |
| font-weight: 600; |
| margin-bottom: 8px; |
| } |
|
|
| .subtitle { |
| color: var(--text-secondary); |
| font-size: 13px; |
| margin-bottom: 24px; |
| } |
|
|
| .form-group { |
| text-align: left; |
| margin-bottom: 16px; |
| } |
|
|
| label { |
| display: block; |
| font-size: 12px; |
| font-weight: 500; |
| color: var(--text-secondary); |
| margin-bottom: 6px; |
| } |
|
|
| input { |
| width: 100%; |
| background-color: var(--bg-input); |
| border: 1px solid var(--border-color); |
| color: var(--text-primary); |
| padding: 10px 14px; |
| border-radius: 6px; |
| outline: none; |
| font-family: inherit; |
| } |
|
|
| input:focus { |
| border-color: #4f4f4f; |
| } |
|
|
| .btn-login { |
| width: 100%; |
| background-color: var(--accent); |
| color: white; |
| border: none; |
| padding: 10px; |
| border-radius: 6px; |
| font-weight: 600; |
| cursor: pointer; |
| font-size: 14px; |
| margin-top: 10px; |
| margin-bottom: 16px; |
| } |
|
|
| .back-link { |
| display: block; |
| font-size: 12px; |
| color: var(--text-secondary); |
| text-decoration: none; |
| } |
|
|
| .back-link:hover { |
| color: var(--text-primary); |
| } |
|
|
| .error-box { |
| background-color: rgba(239, 68, 68, 0.1); |
| border: 1px solid #ef4444; |
| color: #fca5a5; |
| padding: 8px; |
| border-radius: 4px; |
| font-size: 12px; |
| margin-bottom: 16px; |
| } |
|
|
