* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  min-height: 100vh; display: grid; place-items: center; padding: 24px 16px;
  background: #04050b; color: #eef0ff; font-family: "Space Grotesk", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.sky { position: fixed; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 60% 45% at 75% 10%, rgba(120, 80, 255, .25), transparent 70%),
    radial-gradient(ellipse 50% 40% at 10% 80%, rgba(0, 200, 255, .14), transparent 70%),
    radial-gradient(1px 1px at 20% 30%, #fff9, transparent), radial-gradient(1px 1px at 70% 60%, #fff7, transparent),
    radial-gradient(1.5px 1.5px at 40% 85%, #fffa, transparent), radial-gradient(1px 1px at 85% 25%, #fff8, transparent);
}
.box {
  position: relative; width: 100%; max-width: 380px; text-align: center;
  background: linear-gradient(180deg, rgba(28, 32, 62, .65), rgba(14, 16, 34, .65));
  border: 1px solid rgba(160, 170, 255, .14); border-radius: 26px; padding: 34px 28px 26px;
  backdrop-filter: blur(14px); box-shadow: 0 40px 80px -40px rgba(120, 80, 255, .5);
}
.logo { width: 92px; height: 92px; margin: -6px auto 8px; display: block; overflow: visible; }
.o1 { transform-origin: 60px 60px; animation: spin 14s linear infinite; }
.o2 { transform-origin: 60px 60px; animation: spin 22s linear infinite reverse; }
@keyframes spin { to { transform: rotate(360deg); } }
h1 { font-size: 26px; letter-spacing: -.02em; }
.sub { color: #a3a8c7; font-size: 14px; margin: 6px 0 22px; }
.msg { font-size: 13.5px; border-radius: 12px; padding: 10px 12px; margin-bottom: 16px; background: rgba(255, 255, 255, .05); color: #a3a8c7; }
.msg.err { background: rgba(255, 84, 112, .12); border: 1px solid rgba(255, 84, 112, .4); color: #ff9aac; }
form { text-align: left; }
label { display: block; font: 500 11px "JetBrains Mono", monospace; letter-spacing: .14em; text-transform: uppercase; color: #8f95bd; margin: 14px 0 7px; }
input {
  width: 100%; min-height: 46px; padding: 0 14px; border-radius: 12px; font: inherit; font-size: 16px; color: #eef0ff;
  background: rgba(4, 5, 11, .6); border: 1px solid rgba(160, 170, 255, .18); outline: none; transition: border-color .2s, box-shadow .2s;
}
input:focus { border-color: #9a7cff; box-shadow: 0 0 0 4px rgba(154, 124, 255, .18); }
button {
  width: 100%; min-height: 48px; margin-top: 22px; border: 0; border-radius: 14px; cursor: pointer;
  font: 700 15px "Space Grotesk", sans-serif; color: #0b0c18;
  background: linear-gradient(100deg, #7cf6ff, #a78bff 50%, #ff7ab8); transition: filter .2s, transform .2s;
}
button:hover { filter: brightness(1.08); transform: translateY(-1px); }
button:focus-visible, input:focus-visible { outline: 2px solid #b9a6ff; outline-offset: 3px; }
.foot { color: #5d6286; font-size: 12px; margin-top: 16px; }
@media (prefers-reduced-motion: reduce) { .o1, .o2 { animation: none; } button { transition: none; } }