@font-face { font-family: 'Inter'; src: url('/pub/fonts/inter-var.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'JBM'; src: url('/pub/fonts/jbm-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: #07090d; color: #e6ebf5; font: 400 13px/1.5 Inter, system-ui, sans-serif; -webkit-font-smoothing: antialiased; overflow: hidden; }
.bg { position: fixed; inset: 0; background:
  radial-gradient(900px 500px at 20% 10%, rgba(166,133,255,0.14), transparent 60%),
  radial-gradient(800px 500px at 85% 90%, rgba(47,212,245,0.10), transparent 60%),
  linear-gradient(180deg, #0a0d13, #07090d); }
.bg::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(148,163,194,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(148,163,194,0.04) 1px, transparent 1px);
  background-size: 40px 40px; mask-image: radial-gradient(ellipse at 50% 50%, black 20%, transparent 75%); }
.lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.l1 { stroke-dasharray: 2600; stroke-dashoffset: 2600; animation: draw 3.2s ease forwards; }
.l2 { stroke-dasharray: 2600; stroke-dashoffset: 2600; animation: draw 4s .4s ease forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.wrap { position: relative; height: 100%; display: grid; place-items: center; padding: 20px; }
.card { width: 380px; max-width: 100%; padding: 30px 30px 22px; border-radius: 12px; position: relative;
  background: linear-gradient(180deg, rgba(22,27,38,0.88), rgba(13,16,24,0.92)); border: 1px solid rgba(148,163,194,0.14);
  box-shadow: 0 40px 100px rgba(0,0,0,0.6), 0 0 0 1px rgba(166,133,255,0.08), inset 0 1px 0 rgba(255,255,255,0.04); backdrop-filter: blur(14px); }
.card::before { content: ''; position: absolute; left: 30px; right: 30px; top: -1px; height: 1px; background: linear-gradient(90deg, transparent, #a685ff, #2fd4f5, transparent); }
.logo { width: 56px; height: 56px; border-radius: 14px; display: grid; place-items: center; margin-bottom: 16px; background: rgba(166,133,255,0.08); border: 1px solid rgba(166,133,255,0.25); box-shadow: 0 0 30px rgba(166,133,255,0.2); }
h1 { margin: 0; font-size: 14px; letter-spacing: 0.16em; font-weight: 700; white-space: nowrap; }
h1 b { background: linear-gradient(90deg, #c4b2ff, #7fe6ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
h1 i { font-style: normal; color: #6b7489; margin: 0 6px; font-weight: 500; }
h1 span { color: #a5afc3; }
.sub { color: #6b7489; margin: 6px 0 22px; font-size: 12px; }
form { display: flex; flex-direction: column; gap: 14px; }
label { display: flex; flex-direction: column; gap: 6px; font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #6b7489; }
input { height: 40px; border-radius: 7px; border: 1px solid rgba(148,163,194,0.18); background: rgba(7,9,13,0.7); color: #e6ebf5; padding: 0 12px; font: 500 13px JBM, ui-monospace, monospace; outline: none; transition: border-color .15s, box-shadow .15s; }
input:focus { border-color: rgba(166,133,255,0.6); box-shadow: 0 0 0 3px rgba(166,133,255,0.14); }
button { margin-top: 4px; height: 42px; border-radius: 7px; border: 1px solid rgba(166,133,255,0.5); cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px;
  font: 700 12px Inter, sans-serif; letter-spacing: 0.12em; text-transform: uppercase; color: #fff;
  background: linear-gradient(180deg, rgba(166,133,255,0.42), rgba(109,79,214,0.42)); box-shadow: 0 8px 24px -8px rgba(166,133,255,0.6); transition: filter .15s, transform .1s; }
button:hover { filter: brightness(1.12); }
button:active { transform: translateY(1px); }
button:disabled { opacity: 0.6; cursor: wait; }
.err { min-height: 0; margin: -4px 0; font-size: 12px; color: #ff8fa3; }
.foot { margin-top: 20px; padding-top: 14px; border-top: 1px solid rgba(148,163,194,0.1); color: #464e60; font-size: 10.5px; display: flex; align-items: center; gap: 8px; letter-spacing: 0.02em; }
.dot { width: 6px; height: 6px; border-radius: 50%; background: #14e0a1; box-shadow: 0 0 8px #14e0a1; }
.shake { animation: shake .35s; }
@keyframes shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }