.input-wrap{box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
.input-wrap:hover{border-color:#31516a;background:rgba(16,36,58,.68)}
.input-wrap:focus-within{transform:translateY(-1px);box-shadow:0 0 0 3px rgba(25,195,230,.12),0 8px 20px rgba(0,0,0,.12)}
.input-wrap input:-webkit-autofill{-webkit-text-fill-color:var(--white);-webkit-box-shadow:0 0 0 1000px var(--surface-2) inset;transition:background-color 9999s ease-in-out 0s}
.input-wrap.invalid input::placeholder{color:rgba(245,140,156,.65)}
.demo-credentials{display:flex;align-items:flex-start;gap:10px;margin-top:18px;padding:11px 13px;border:1px solid rgba(25,195,230,.16);border-radius:8px;color:var(--muted);background:rgba(25,195,230,.05);font-size:11px}.demo-credentials>i{padding-top:2px;color:var(--primary);font-size:16px}.demo-credentials span{display:grid;gap:2px}.demo-credentials strong{color:var(--text);font-size:11px}.demo-credentials small{color:var(--muted);font-size:10px}