* { box-sizing: border-box; }
html { color-scheme: dark; }
body {
  margin: 0; min-height: 100vh; display: grid; place-items: center; padding: 20px;
  background: radial-gradient(60% 420px at 50% 30%, rgba(255, 255, 255, .06), transparent 70%), #09090a;
  color: #f4f4f5;
  font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased;
}
.card {
  width: min(400px, 100%); padding: 32px 28px; display: grid; gap: 18px;
  border: 1px solid #2c2c30; border-radius: 26px; background: rgba(17, 17, 18, .9);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
}
.brand { display: flex; align-items: center; gap: 12px; font-size: 26px; font-weight: 800; letter-spacing: -.03em; }
.brand img { border-radius: 11px; }
.brand b { color: #ffd426; font-weight: 800; }
h1 { margin: 6px 0 0; font-size: 20px; font-weight: 600; }
form { display: grid; gap: 14px; }
label { display: grid; gap: 6px; font-size: 13px; color: #a1a1aa; }
input {
  width: 100%; padding: 12px 14px; border: 1px solid #2c2c30; border-radius: 12px;
  background: #1b1b1d; color: #f4f4f5; font: inherit; font-size: 16px;
}
input:focus-visible, button:focus-visible { outline: 2px solid #ffd426; outline-offset: 2px; }
button {
  margin-top: 6px; padding: 13px; border: 0; border-radius: 999px; background: #ffd426; color: #181400;
  font: inherit; font-size: 16px; font-weight: 650; cursor: pointer;
}
button:hover { filter: brightness(1.07); }
.error {
  margin: 0; padding: 10px 14px; border-radius: 12px; font-size: 14px; color: #fca5a5;
  background: rgba(248, 113, 113, .1); border: 1px solid rgba(248, 113, 113, .4);
}