:root { color-scheme: dark; background: #0d1016; color: #f4f5f8; font: 16px Inter, system-ui, sans-serif; }
body { margin: 0; min-height: 100vh; min-height: 100dvh; display: grid; place-items: center;
  background: radial-gradient(ellipse at 50% 38%, #1e3432, transparent 65%); }
main { box-sizing: border-box; background: #141922; border: 1px solid #34454a; border-radius: 18px;
  width: min(420px, calc(100% - 36px)); padding: 32px; box-shadow: 0 30px 85px #05070b75; }
.brand { display: flex; align-items: center; gap: 9px; color: #9ef0ca; font-size: 14px; font-weight: 700; }
h1 { margin: 14px 0 26px; font-size: 31px; letter-spacing: -.04em; }
label { display: block; margin: 14px 0; color: #d9e2ea; font-size: 14px; }
input, button { box-sizing: border-box; font: inherit; display: block; width: 100%; margin-top: 6px;
  padding: 12px; border: 1px solid #3b4657; border-radius: 8px; }
input { background: #0d1016; color: #f4f5f8; }
button { margin-top: 21px; background: #9ef0ca; color: #0c2720; border-color: #9ef0ca; font-weight: 750; cursor: pointer; }
button:hover { background: #c5fbe0; }
:focus-visible { outline: 2px solid #9ef0ca; outline-offset: 3px; }
[role="alert"] { color: #ffadb3; font-size: 13px; margin: 12px 0 0; }