:root {
    color-scheme: light;
    --navy: #073b66;
    --blue: #0867b2;
    --safe: #16834b;
    --danger: #c62834;
    --ink: #17212b;
    --muted: #637180;
    --line: #d7e0e7;
    --bg: #eaf1f5;
}

* { box-sizing: border-box; }

html,
body {
    margin: 0;
    min-height: 100%;
    background: var(--bg);
    color: var(--ink);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body {
    display: grid;
    min-height: 100vh;
    place-items: center;
    padding: max(14px, env(safe-area-inset-top)) 14px max(14px, env(safe-area-inset-bottom));
}

.auth-card {
    width: min(100%, 420px);
    overflow: hidden;
    border: 1px solid rgba(7, 59, 102, .12);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 12px 38px rgba(11, 44, 68, .16);
}

.auth-brand {
    padding: 18px 20px;
    background: var(--navy);
    color: #fff;
}
.auth-brand h1 { margin: 0; font-size: 1.25rem; }
.auth-brand h1 span { color: #66d2e5; }
.auth-brand p { margin: 4px 0 0; color: #d9e9f3; font-size: .72rem; }

.auth-body { padding: 20px; }
.auth-body h2 { margin: 0 0 4px; color: var(--navy); font-size: 1.05rem; }
.intro { margin: 0 0 15px; color: var(--muted); font-size: .74rem; line-height: 1.45; }

.field { display: grid; gap: 4px; margin-bottom: 11px; }
.field label { color: #465562; font-size: .67rem; font-weight: 750; }
.field input {
    width: 100%;
    height: 42px;
    padding: 0 11px;
    border: 1px solid #bdcad3;
    border-radius: 7px;
    background: #fbfcfd;
    color: var(--ink);
    font: inherit;
    font-size: .82rem;
}
.field input:focus { border-color: var(--blue); outline: 3px solid rgba(8, 103, 178, .14); }
.field small { color: var(--muted); font-size: .6rem; line-height: 1.35; }

.primary-button {
    width: 100%;
    height: 42px;
    border: 0;
    border-radius: 7px;
    background: var(--safe);
    color: #fff;
    font: inherit;
    font-size: .75rem;
    font-weight: 850;
    cursor: pointer;
}

.auth-links { margin: 14px 0 0; color: var(--muted); font-size: .68rem; text-align: center; }
.auth-links a { color: var(--blue); font-weight: 750; }

.message {
    margin: 0 0 13px;
    padding: 9px 10px;
    border-radius: 7px;
    font-size: .68rem;
    line-height: 1.4;
}
.message.error { border: 1px solid #efb6ba; background: #fff0f1; color: #9d1d28; }
.message.success { border: 1px solid #9ed4b8; background: #eaf8f0; color: #126d3e; }

.privacy-note {
    margin: 13px 0 0;
    padding-top: 11px;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: .58rem;
    line-height: 1.45;
}

@media (max-width: 430px) {
    body { padding: 6px; }
    .auth-card { border-radius: 11px; }
    .auth-brand { padding: 14px 16px; }
    .auth-body { padding: 16px; }
}