@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700&family=IBM+Plex+Sans:wght@400;500&family=IBM+Plex+Mono&display=swap');
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: grid; place-items: center; font-family: 'IBM Plex Sans', 'Helvetica Neue', sans-serif; color: #f1f3fa;
  background: #050811;
  background-image:
    radial-gradient(ellipse at center, rgba(20, 30, 55, 0) 0%, rgba(5, 8, 17, .7) 100%),
    radial-gradient(900px 500px at 20% -10%, rgba(70, 40, 110, .45), transparent 60%),
    linear-gradient(135deg, rgba(40, 50, 90, .25) 0%, rgba(70, 40, 110, .18) 100%); }
.wrap { width: min(400px, 92vw); }
.card { background: rgba(20, 26, 50, .45); backdrop-filter: blur(22px) saturate(1.4); border: 1px solid rgba(255, 255, 255, .12); border-radius: 16px; padding: 28px 30px 26px; display: grid; gap: 10px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .1); }
.brand { display: flex; align-items: baseline; gap: 8px; }
.brand b { font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif; font-size: 30px; text-transform: uppercase; letter-spacing: .04em; background: linear-gradient(135deg, #a8b5ff 0%, #d0a8ff 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.brand span { font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: #6e7691; }
.lead { margin: 0 0 6px; color: #b8c0d8; font-size: 13.5px; }
label { font-family: 'Barlow Condensed', sans-serif; text-transform: uppercase; letter-spacing: .08em; font-size: 13px; color: #b8c0d8; }
input { width: 100%; padding: 10px 12px; border: 1px solid rgba(255, 255, 255, .18); border-radius: 6px; font: inherit; font-size: 15px; background: #0b1020; color: #f1f3fa; color-scheme: dark; }
input:focus { outline: none; border-color: #a8b5ff; box-shadow: 0 0 0 3px rgba(168, 181, 255, .15); }
button { margin-top: 6px; padding: 10px; border: none; border-radius: 6px; background: #f0a500; color: #120c00; font: inherit; font-weight: 600; cursor: pointer; box-shadow: 0 0 24px rgba(240, 165, 0, .25); }
button:hover { background: #ffb81f; }
button[disabled] { opacity: .6; }
.err { margin: 4px 0 0; color: #ff6b6b; font-size: 13px; }