/* Sign-in — Carbon Origins. Tokens ported from the app sheet; kept as its own
   file so the CSP can stay script-src/style-src 'self' with no inline styles. */
@font-face {
  font-family: "CO Display";
  src: local("Atkinson Hyperlegible Next"), local("Atkinson Hyperlegible");
  font-display: swap;
}
@font-face {
  font-family: "CO Mono";
  src: local("Atkinson Hyperlegible Mono");
  font-display: swap;
}
:root {
  --co-bg: #0F1117; --co-text: #C4CAD6; --co-muted: #8D96A8;
  --co-accent: #3A7AB8; --co-danger: #F09595;
  --co-glass: rgba(255,255,255,0.04); --co-glass-border: rgba(255,255,255,0.06);
  --co-line: rgba(196,202,214,0.11);
  --co-font-body: "CO Display", "Atkinson Hyperlegible", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --co-font-mono: "CO Mono", "Atkinson Hyperlegible Mono", ui-monospace, Menlo, monospace;
  --co-transition: 150ms cubic-bezier(0.16, 1, 0.3, 1);
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  color: var(--co-text); font-family: var(--co-font-body);
  display: flex; align-items: center; justify-content: center; padding: 20px;
  text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased;
  background:
    radial-gradient(circle at 12% -10%, rgba(58,122,184,0.12), transparent 34%),
    radial-gradient(circle at 104% 0%, rgba(58,122,184,0.07), transparent 30%),
    linear-gradient(180deg, #0F1117 0%, #12151D 55%, #0F1117 100%);
}
.card {
  width: 100%; max-width: 380px; border-radius: 12px; padding: 28px 26px;
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0) 110px), var(--co-glass);
  border: 1px solid var(--co-glass-border);
  backdrop-filter: blur(24px) saturate(1.04);
  box-shadow: 0 18px 48px rgba(0,0,0,0.34);
}
.brand { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.brand .mark { width: 30px; height: 30px; display: block; opacity: 0.92; }
.brand .words { display: flex; flex-direction: column; line-height: 1.05; }
.brand .name { font-weight: 700; font-size: 16px; letter-spacing: -0.01em; }
.brand .unit {
  font-family: var(--co-font-mono); font-size: 9.5px; text-transform: uppercase;
  letter-spacing: 0.10em; color: var(--co-muted);
}
.sub { color: var(--co-muted); font-size: 12.5px; margin: 2px 0 20px; }
label {
  display: block; font-family: var(--co-font-mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--co-muted); margin: 14px 0 6px;
}
label::before { content: "// "; color: var(--co-accent); }
input {
  width: 100%; background: rgba(255,255,255,0.03); border: 1px solid var(--co-line);
  color: var(--co-text); border-radius: 8px; padding: 11px 12px; font-size: 14px;
  outline: none; min-height: 44px; font-family: var(--co-font-body);
  transition: border-color var(--co-transition), background var(--co-transition);
}
input:hover { background: rgba(255,255,255,0.05); }
input:focus-visible, input:focus { border-color: var(--co-accent); outline: 2px solid var(--co-accent); outline-offset: 1px; }
input.code { letter-spacing: 6px; text-align: center; font-family: var(--co-font-mono); }
button {
  width: 100%; margin-top: 22px; min-height: 44px;
  background: rgba(30,94,158,0.12); color: var(--co-text);
  border: 1px solid rgba(58,122,184,0.55); border-radius: 8px;
  padding: 12px; font-size: 14px; font-weight: 700; cursor: pointer;
  font-family: var(--co-font-body);
  transition: background var(--co-transition), border-color var(--co-transition);
}
button:hover:not(:disabled) { background: rgba(58,122,184,0.22); border-color: var(--co-accent); }
button:active:not(:disabled) { transform: scale(0.98); }
button:disabled { opacity: 0.5; cursor: default; }
.err {
  color: var(--co-danger); font-size: 12.5px; margin-top: 14px; min-height: 16px;
  font-family: var(--co-font-mono);
}
.hint { color: var(--co-muted); font-size: 11px; margin-top: 16px; text-align: center; }
@media (prefers-reduced-motion: reduce) { * { transition-duration: 0.001ms !important; } }