:root {
  --auth-canvas: #FAFAF9;
  --auth-surface: #FFFFFF;
  --auth-ink: #0A0A0A;
  --auth-muted: #5C5C5C;
  --auth-border: rgba(10, 10, 10, 0.12);
  --auth-accent: #FF7A59;
  --auth-shadow: rgba(10, 10, 10, 0.16);
  --font-display: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --font-body: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body { margin: 0; background: var(--auth-canvas); color: var(--auth-ink); font-family: var(--font-body); }
a { color: inherit; }
button { font: inherit; }

/* === Authentication page === */
.auth-shell { display: grid; grid-template-columns: minmax(0, 1fr) clamp(420px, 34vw, 640px); min-height: 100vh; }
.auth-main { position: relative; display: grid; place-items: center; min-height: 100vh; padding: 72px 32px; }
.auth-brand { position: absolute; top: 34px; left: 40px; color: var(--auth-ink); font-family: var(--font-display); font-size: 17px; font-weight: 500; letter-spacing: .02em; text-decoration: none; }
.auth-brand span { color: var(--auth-accent); }
.auth-card { width: min(100%, 432px); text-align: center; }
.auth-mark { display: grid; width: 46px; height: 46px; margin: 0 auto 28px; place-items: center; color: var(--auth-accent); }
.auth-mark svg { width: 100%; height: 100%; stroke: currentColor; stroke-width: 1.8; }
.auth-eyebrow { margin: 0 0 12px; color: var(--auth-muted); font-family: var(--font-display); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.auth-card h1 { margin: 0; color: var(--auth-ink); font-family: var(--font-display); font-size: clamp(30px, 3vw, 40px); font-weight: 500; letter-spacing: -.04em; line-height: 1.1; }
.auth-copy { margin: 18px auto 30px; color: var(--auth-muted); font-size: 16px; line-height: 1.5; max-width: 38ch; }
.auth-providers { display: grid; gap: 12px; }
.auth-provider { display: flex; min-height: 56px; align-items: center; justify-content: center; gap: 14px; padding: 14px 22px; border: 1px solid var(--auth-border); border-radius: 999px; background: var(--auth-surface); color: var(--auth-ink); font-weight: 500; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.auth-provider:hover { border-color: var(--auth-ink); box-shadow: 0 8px 24px -14px var(--auth-shadow); transform: translateY(-1px); }
.auth-provider:focus-visible, .auth-switch a:focus-visible, .auth-brand:focus-visible { outline: 2px solid var(--auth-accent); outline-offset: 4px; }
.provider-icon { display: grid; width: 20px; height: 20px; flex: none; place-items: center; }
.provider-icon--google { color: var(--auth-accent); font-size: 22px; font-weight: 600; line-height: 1; }
.provider-icon--microsoft { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 2px; }
.provider-icon--microsoft i { display: block; width: 100%; height: 100%; background: var(--auth-ink); }
.auth-legal { margin: 24px auto 0; color: var(--auth-muted); font-size: 13px; line-height: 1.5; }
.auth-legal a, .auth-switch a { text-underline-offset: 3px; }
.auth-switch { margin: 26px 0 0; color: var(--auth-muted); font-size: 14px; }
.auth-switch a { color: var(--auth-ink); font-weight: 500; }
.auth-visual { position: relative; min-height: 100vh; overflow: hidden; background: var(--auth-ink); }
.auth-visual img { width: 100%; height: 100%; object-fit: cover; }
.auth-visual::after { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, var(--auth-ink)); content: ''; }
.auth-visual-copy { position: absolute; z-index: 1; right: 40px; bottom: 36px; left: 40px; color: var(--auth-surface); }
.auth-visual-kicker { display: block; margin-bottom: 10px; color: var(--auth-accent); font-family: var(--font-display); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.auth-visual-copy p { max-width: 13ch; margin: 0; font-family: var(--font-display); font-size: clamp(24px, 2.2vw, 34px); letter-spacing: -.04em; line-height: 1.12; }

@media (max-width: 760px) {
  .auth-shell { display: block; }
  .auth-main { min-height: 100vh; padding: 100px 24px 48px; }
  .auth-brand { top: 28px; left: 24px; }
  .auth-visual { display: none; }
}