* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; font-family: Arial, sans-serif; background: #111827; color: #FFFFFF; }
.login { max-width: 840px; margin: 2rem auto; padding: 2rem 1.5rem; }
.login__title { text-align: center; margin: 0 0 1rem; }
.login__form { display: flex; flex-direction: column; gap: 1rem; }
.field { display: flex; flex-direction: column; gap: 0.4rem; }
.field__label { font-weight: 600; }
.field__input { padding: 0.8rem 1rem; border: 1px solid #374151; border-radius: 8px; background: transparent; color: #FFFFFF; }
.field__input:focus { outline: 2px solid #8B5CF6; border-color: #8B5CF6; }
.btn { padding: 0.8rem 1.2rem; border: 1px solid transparent; border-radius: 8px; text-decoration: none; color: #FFFFFF; background: transparent; cursor: pointer; }
.btn--primary { background-color: #8B5CF6; border-color: #8B5CF6; color: #FFFFFF; }
.btn--primary:hover { filter: brightness(1.05); }
.form-error { color: #f55; margin-top: 0.5rem; }
.meta { margin-top: 0.75rem; color: #d1d5db; }
.meta a { color: #8B5CF6; text-decoration: none; }
.header { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; border-bottom: 1px solid #2a3243; background: #111827; }
.brand { font-weight: 800; letter-spacing: 0.4px; color: #FFFFFF; text-decoration: none; }
.nav a { margin-left: 1rem; color: #FFFFFF; text-decoration: none; font-weight: 600; }
.nav a:hover { color: #8B5CF6; }