:root {
  color-scheme: dark;
  --text-primary: #ededed;
  --text-muted: #888;
  --surface-raised: #111;
  --border: #2a2a2a;
  --border-hover: #777;
  --accent-ring: #ffffff26;
  --danger: #fb7185;
  font-family: system-ui, sans-serif;
  background: #000;
  color: var(--text-primary);
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100svh; display: grid; place-items: center; padding: 24px; background: #000; }
main { width: min(100%, 400px); }
label { display: block; margin-bottom: 8px; font-size: 14px; font-weight: 500; letter-spacing: -.02em; }
.lock-input { position: relative; display: flex; align-items: center; }
input { width: 100%; height: 44px; padding: 0 48px 0 14px; border: 1px solid var(--border); border-radius: 8px; outline: none; background: var(--surface-raised); color: var(--text-primary); font: inherit; transition: border-color 200ms; }
input::placeholder { color: var(--text-muted); }
.focus-ring { position: absolute; inset: 0; pointer-events: none; border-radius: 8px; box-shadow: 0 0 0 2px var(--accent-ring), inset 0 0 0 1px var(--border-hover); opacity: 0; transform: scale(.94); transition: opacity 180ms, transform 240ms cubic-bezier(.2, .9, .3, 1.2); }
.lock-input:focus-within .focus-ring { opacity: 1; transform: scale(1); }
input[aria-invalid="true"] { border-color: var(--danger); }
.lock-input:has(input[aria-invalid="true"]) .focus-ring { box-shadow: 0 0 0 2px #f43f5e73, inset 0 0 0 1px #f43f5e99; }
button { position: absolute; right: 4px; width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: 5px; color: var(--text-muted); background: transparent; cursor: pointer; transition: color 200ms, background 200ms; }
button:hover { color: var(--text-primary); background: #ffffff0a; }
button:focus-visible { outline: 2px solid var(--text-primary); outline-offset: -2px; }
button svg { width: 20px; height: 20px; }
button:disabled, input:disabled { opacity: .3; cursor: not-allowed; }
p { margin: 8px 0 0; font-size: 12px; line-height: 1.5; color: var(--text-muted); }
#username-error { color: var(--danger); animation: reveal 180ms ease-out; }
#lookup-status:empty { display: none; }
details { margin-top: 24px; font-size: 13px; }
summary { cursor: pointer; color: var(--text-muted); }
pre { max-height: 360px; overflow: auto; padding: 14px; background: var(--surface-raised); border: 1px solid var(--border); border-radius: 8px; font-size: 12px; }
@keyframes reveal { from { opacity: 0; transform: translateY(-2px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }