* { box-sizing: border-box; }

body {
    min-height: 100vh;
    margin: 0;
    padding: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: Arial, sans-serif;
    color: #1f2937;
    background:
        linear-gradient(135deg, rgba(18, 48, 71, .96), rgba(23, 63, 53, .92)),
        url('../images/home-cover.jpg') center / cover fixed;
}

.auth-card {
    width: 100%;
    max-width: 440px;
    padding: 30px;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 18px 45px rgba(0, 0, 0, .22);
}

.brand {
    margin: 0 0 8px;
    color: #166534;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

h1 { margin: 0 0 8px; font-size: 30px; }
.intro { margin: 0 0 24px; color: #64748b; line-height: 1.5; }
.field { margin-bottom: 16px; }

label {
    display: block;
    margin-bottom: 7px;
    font-size: 14px;
    font-weight: 700;
}

input {
    width: 100%;
    min-height: 48px;
    padding: 11px 13px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font: inherit;
}

input:focus {
    outline: 3px solid rgba(250, 204, 21, .32);
    border-color: #ca8a04;
}

.button {
    width: 100%;
    min-height: 50px;
    border: 0;
    border-radius: 8px;
    background: #facc15;
    color: #1f2937;
    cursor: pointer;
    font: inherit;
    font-weight: 700;
}

.button:hover { background: #eab308; }
.switch { margin: 20px 0 0; text-align: center; color: #64748b; }
.switch a, .back { color: #166534; font-weight: 700; }
.back { display: inline-block; margin-top: 18px; font-size: 14px; }

.alert, .validation-errors {
    margin-bottom: 18px;
    padding: 12px 14px;
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.5;
}

.alert-error, .validation-errors { color: #991b1b; background: #fee2e2; }
.alert-success { color: #166534; background: #dcfce7; }
.validation-errors p { margin: 0 0 4px; }
.validation-errors p:last-child { margin-bottom: 0; }
.hint { margin: 6px 0 0; color: #64748b; font-size: 12px; }

@media (max-width: 520px) {
    body { padding: 16px; align-items: flex-start; }
    .auth-card { margin-top: 16px; padding: 22px 18px; }
    h1 { font-size: 27px; }
}