/* Sign-in page. Self-contained: everything outside /public needs a session, so this cannot load css/app.css. Same tokens, light and dark (the theme is set on by /public/theme.js). */ :root { color-scheme: light; --page: #f4f6f9; --surface: #ffffff; --ink: #0b0b0b; --muted: #6f6d67; --hair: #e4e6ea; --accent: #2a78d6; --accent-strong: #1c5cab; --critical-text: #b42318; --critical-wash: #fdeeee; --radius: 12px; --shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.05); --field-line: #c9ccd3; --button: #1c5cab; --button-hover: #174d90; --brand-ink: #10325f; --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } :root[data-theme="dark"] { color-scheme: dark; --page: #0d0d0d; --surface: #1a1a19; --ink: #ffffff; --muted: #9b998f; --hair: #2c2c2a; --accent: #3987e5; --accent-strong: #86b6ef; --critical-text: #f08a8a; --critical-wash: #3a1818; --shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.4); --field-line: #4a4944; --button: #2a78d6; --button-hover: #3987e5; --brand-ink: #e8f0fb; } * { box-sizing: border-box; } [hidden] { display: none !important; } html, body { margin: 0; } body { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; background: var(--page); color: var(--ink); font: 14px/1.45 var(--font); -webkit-font-smoothing: antialiased; } h1, p { margin: 0; } .muted { color: var(--muted); } .card { width: 100%; max-width: 380px; padding: 28px 28px 24px; background: var(--surface); border: 1px solid var(--hair); border-radius: var(--radius); box-shadow: var(--shadow); } .brand { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; } .brand-mark { width: 40px; height: 28px; flex: none; display: block; } .brand-text { display: flex; flex-direction: column; line-height: 1.15; } .brand-text strong { font-size: 19px; letter-spacing: -0.01em; color: var(--brand-ink); } .brand-text small { font-size: 11px; color: var(--accent-strong); } h1 { font-size: 20px; letter-spacing: -0.01em; margin-bottom: 6px; } form { display: flex; flex-direction: column; margin-top: 20px; } label { font-weight: 600; font-size: 13px; margin: 12px 0 6px; } label:first-child { margin-top: 0; } input { height: 42px; padding: 0 12px; font: inherit; font-size: 16px; /* 16px stops iOS zooming into the field */ color: var(--ink); background: var(--surface); border: 1px solid var(--field-line); border-radius: 8px; } input:focus-visible, button:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .banner { margin-top: 14px; padding: 10px 12px; border-radius: 8px; background: var(--critical-wash); color: var(--critical-text); font-weight: 500; } button { height: 44px; margin-top: 18px; font: inherit; font-weight: 600; color: #fff; background: var(--button); border: 0; border-radius: 8px; cursor: pointer; } button:hover { background: var(--button-hover); } button[disabled] { opacity: 0.6; cursor: progress; } .foot { margin-top: 18px; font-size: 13px; } a { color: var(--accent-strong); }