/* FoxIQ sign-in / sign-up pages (server-rendered by app.py). */
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
    font-family: 'Inter', system-ui, sans-serif;
    background: #fff; color: #111827;
    min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr;
    -webkit-font-smoothing: antialiased;
}
.auth-brand {
    background: linear-gradient(135deg, #f0f4ff 0%, #f9e8fe 100%);
    display: flex; flex-direction: column; justify-content: center;
    padding: 64px; gap: 20px;
}
.auth-brand img { height: 64px; width: auto; align-self: flex-start; }
.auth-brand h2 { font-size: 34px; line-height: 1.2; font-weight: 700; color: #0a2b66; max-width: 420px; }
.auth-brand p { font-size: 16px; color: #475569; max-width: 420px; line-height: 1.6; }
.auth-main { display: flex; align-items: center; justify-content: center; padding: 48px 24px; }
.login-card { width: 100%; max-width: 440px; }
.login-card h1 { font-size: 34px; font-weight: 800; letter-spacing: -0.02em; color: #0f172a; }
.login-card .sub { font-size: 16px; color: #64748b; margin: 4px 0 32px; }
.login-card label { display: block; font-size: 13px; font-weight: 600; color: #111827; margin-bottom: 8px; }
.field { position: relative; margin-bottom: 20px; }
.field input {
    width: 100%; height: 44px; padding: 0 44px 0 14px;
    border: 1px solid #e5e7eb; border-radius: 8px; background: #fff;
    font: inherit; font-size: 14px; color: #111827; outline: none;
    transition: border-color .15s, box-shadow .15s;
}
.field input::placeholder { color: #94a3b8; }
.field input:focus { border-color: #0a2b66; box-shadow: 0 0 0 3px rgba(10,43,102,.12); }
.field .toggle {
    position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
    background: none; border: 0; cursor: pointer; padding: 6px; color: #94a3b8; font-size: 12px; font-weight: 600;
}
.hint { font-size: 12px; color: #64748b; margin: -12px 0 20px; }
.login-card button[type=submit] {
    width: 100%; height: 48px; border: 0; border-radius: 10px;
    background: #0a2b66; color: #fff; font: inherit; font-size: 15px; font-weight: 600;
    cursor: pointer; transition: background .15s;
}
.login-card button[type=submit]:hover { background: #08224f; }
.login-error {
    background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c;
    padding: 10px 14px; border-radius: 8px; font-size: 13px; margin-bottom: 20px;
}
.alt { margin-top: 24px; text-align: center; font-size: 14px; color: #64748b; }
.alt a { color: #0a2b66; font-weight: 600; text-decoration: none; }
.alt a:hover { text-decoration: underline; }
@media (max-width: 860px) {
    body { grid-template-columns: 1fr; }
    .auth-brand { display: none; }
}