* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  background: #0E1013; color: #F2F2F0;
  font-family: -apple-system, system-ui, sans-serif;
  display: flex; align-items: center; justify-content: center;
  min-height: 100dvh; padding: 24px;
}
.login { width: 100%; max-width: 340px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.login img { border-radius: 22px; }
h1 { margin: 0 0 8px; font-size: 30px; }
form { width: 100%; display: flex; flex-direction: column; gap: 10px; }
label { font-size: 15px; color: #9AA0A8; }
input[type="password"] {
  height: 52px; padding: 0 16px; border-radius: 14px; border: 2px solid #2A2F37;
  background: #181B20; color: #F2F2F0; font-size: 18px;
}
input[type="password"]:focus { outline: none; border-color: #FF7A1A; }
button {
  height: 54px; border: 0; border-radius: 14px; background: #FF7A1A; color: #14100C;
  font-size: 18px; font-weight: 700; margin-top: 6px;
}
.error { margin: 0; color: #FF8A80; font-weight: 600; }
.faceid { width: 100%; display: flex; flex-direction: column; gap: 10px; }
.faceid button {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  background: transparent; color: #F2F2F0; border: 2px solid #FF7A1A;
}
.faceid button.primary { background: #FF7A1A; color: #14100C; }
.faceid svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.or { display: flex; align-items: center; gap: 10px; color: #9AA0A8; font-size: 14px; margin: 6px 0 0; }
.or::before, .or::after { content: ''; flex: 1; height: 1px; background: #2A2F37; }
.small { color: #9AA0A8; font-size: 14px; margin: 8px 0 0; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
[hidden] { display: none !important; }