:root { --night: #030a17; --deep: #061a33; --glow: #3aa0ff; --ink: #d6e4ff; --dim: #5f7697; --bad: #ff4d6d; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: grid; place-items: center; padding: 16px; color: var(--ink);
  background: radial-gradient(ellipse at 50% 40%, #0a2547 0%, var(--night) 65%);
  font: 16px/1.5 "Saira Semi Condensed", system-ui, sans-serif; }
form { width: 100%; max-width: 360px; }
.logo { width: 14px; height: 14px; border-radius: 50%; background: var(--glow); box-shadow: 0 0 24px var(--glow); margin-bottom: 22px; font-size: 0; }
h1 { margin: 0; font-size: 28px; font-weight: 600; }
p { margin: 2px 0 28px; color: var(--dim); }
label { display: block; font-size: 14px; color: var(--dim); margin-bottom: 6px; }
input[type=password] { width: 100%; padding: 12px 14px; font: inherit; color: var(--ink); background: rgba(6, 26, 51, 0.7);
  border: 1px solid rgba(58, 160, 255, 0.35); border-radius: 8px; }
input[type=password]:focus { outline: 2px solid var(--glow); outline-offset: 2px; }
.row { display: flex; gap: 8px; align-items: center; margin-top: 14px; color: var(--ink); }
button { margin-top: 22px; width: 100%; padding: 12px; font: inherit; font-weight: 600; border: 0; border-radius: 8px;
  background: var(--glow); color: var(--night); cursor: pointer; }
button:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.err { color: var(--bad); margin: 14px 0 0; }