/* Same brand as the app (temp/brandguidelines): Deep Navy page like the app's sidebar, so the white SIFTT AI logo reads,
   a Mist/white card, Montserrat for headings and labels, Inter for body, magenta → violet gradient on the primary action. */
:root {
  --page: #0F122A; --page-glow: rgba(124, 58, 237, .28); --page-ink: #E6E8F2; --page-ink-2: #9A9DB5;
  --surface: #FFFFFF; --ink: #0F122A; --ink-2: #3F4155; --ink-3: #6F717F; --line: #E2E5EE; --line-2: #CDD1DE;
  --accent: #7C3AED; --grad: linear-gradient(90deg, #FF2D8B, #7C3AED); --err: #B42318;
  --f-display: "Montserrat", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --f-body: "Inter", "Helvetica Neue", "Segoe UI", system-ui, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --page: #080A18; --page-glow: rgba(124, 58, 237, .22);
    --surface: #13162E; --ink: #ECEDF5; --ink-2: #B3B5CA; --ink-3: #83869E; --line: #252945; --line-2: #32375A;
    --accent: #B58CFA; --err: #F97066;
    color-scheme: dark;
  }
}
* { box-sizing: border-box; }
body {
  margin: 0; min-height: 100vh; display: grid; place-items: center; padding: 32px 16px;
  background: radial-gradient(900px 520px at 50% -10%, var(--page-glow), transparent 70%), var(--page);
  color: var(--ink); font: 14px/1.5 var(--f-body); -webkit-font-smoothing: antialiased;
}
main { width: 100%; max-width: 400px; display: grid; gap: 22px; }

.brand { display: grid; gap: 8px; justify-items: center; }
.brand-name { font-family: var(--f-display); font-weight: 700; font-size: 32px; letter-spacing: -.02em; line-height: 1; color: #fff; }
.brand-name span { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.brand-by { display: flex; align-items: center; gap: 7px; font-family: var(--f-display); font-weight: 500; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--page-ink-2); }
.brand-by img { height: 12px; width: auto; }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 30px 28px; display: grid; gap: 14px; box-shadow: 0 1px 2px rgba(0,0,0,.2), 0 24px 60px rgba(0,0,0,.35); }
.eyebrow { font-family: var(--f-display); font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
h1 { font-family: var(--f-display); font-size: 24px; font-weight: 700; letter-spacing: -.01em; margin: -6px 0 0; }
.lead { margin: -6px 0 2px; color: var(--ink-2); }

form { display: grid; gap: 6px; }
label { font-family: var(--f-display); font-size: 12px; font-weight: 600; color: var(--ink-2); }
input { width: 100%; padding: 10px 12px; margin-bottom: 8px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); font: 14px var(--f-body); }
input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }

button { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 11px 14px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); font: 600 14px var(--f-body); cursor: pointer; }
button:hover { border-color: var(--ink-3); }
button:disabled { opacity: .55; cursor: default; }
button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
button.primary { margin-top: 2px; background: var(--grad); border-color: transparent; color: #fff; }
button.primary:hover { filter: brightness(1.07); }

.or { display: flex; align-items: center; gap: 10px; color: var(--ink-3); font-size: 12px; }
.or::before, .or::after { content: ""; flex: 1; border-top: 1px solid var(--line); }
.msg { margin: 0; font-size: 13px; color: var(--ink-2); }
.msg.error { color: var(--err); }
.foot { margin: 0; text-align: center; font-size: 12.5px; color: var(--page-ink-2); }
[hidden] { display: none !important; }