*{margin:0;padding:0;box-sizing:border-box;font-family:Arial,Helvetica,sans-serif}
:root{
  --bg:#07060b;
  --panel:#0f0d17;
  --text:#fff;
  --muted:#bdb7d6;
  --line:rgba(255,255,255,.10);
  --glow:#b14cff;
  --glow2:#7a1cff;
  --danger:#ff3b5c;
}
body{
  min-height:100vh;
  background:var(--bg);
  color:var(--text);
  display:grid;
  place-items:center;
  overflow-x:hidden;
}
.bg-glow{
  position:fixed;inset:-200px;
  background:
    radial-gradient(900px 500px at 15% 10%, rgba(177,76,255,.22), transparent 55%),
    radial-gradient(800px 500px at 85% 25%, rgba(122,28,255,.18), transparent 55%),
    radial-gradient(700px 500px at 50% 80%, rgba(177,76,255,.12), transparent 60%);
  pointer-events:none;
  filter:blur(0px);
}
.wrap{width:min(520px, 92vw); padding:26px; position:relative; z-index:2;}
.card{
  border:1px solid rgba(177,76,255,.25);
  border-radius:18px;
  padding:18px;
  background:linear-gradient(135deg, rgba(15,13,23,.92), rgba(7,6,11,.92));
  box-shadow:0 0 40px rgba(177,76,255,.18);
}
.brand{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.logo{
  width:48px;
  height:48px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg, rgba(177,76,255,.35), rgba(122,28,255,.12));
  border:1px solid rgba(177,76,255,.35);
  box-shadow:0 0 18px rgba(177,76,255,.35), inset 0 0 18px rgba(177,76,255,.18);
  overflow:hidden;
}

.logo img{
  width:80%;
  height:80%;
  object-fit:contain;
  filter:
    drop-shadow(0 0 6px rgba(177,76,255,.7))
    drop-shadow(0 0 14px rgba(177,76,255,.4));
}
.name{font-weight:900;letter-spacing:.3px}
.sub{color:var(--muted);font-size:12px;margin-top:2px}

.form{display:grid;gap:12px;margin-top:10px}
.field{display:grid;gap:6px}
.field span{color:var(--muted);font-size:12px}
.field input{
  width:100%;
  padding:12px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
  color:var(--text);
  outline:none;
}
.field input:focus{
  border-color:rgba(177,76,255,.35);
  box-shadow:0 0 18px rgba(177,76,255,.15);
}
.pw{display:flex;gap:10px;align-items:center}
.eye{
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  background:transparent;
  color:var(--text);
  cursor:pointer;
}
.row{display:flex;justify-content:space-between;align-items:center;margin-top:2px}
.remember{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:12px}
.link{color:rgba(255,255,255,.85);text-decoration:none;font-size:12px}
.link:hover{color:#fff;text-decoration:underline}

.btn{
  border:none;cursor:pointer;border-radius:12px;
  padding:12px 14px;font-weight:800;
  transition:.2s transform, .2s opacity, .2s box-shadow;
}
.btn:active{transform:scale(.98)}
.primary{
  color:#0c0716;
  background:linear-gradient(135deg, #c36bff, #7a1cff);
  box-shadow:0 10px 30px rgba(177,76,255,.25);
}
.outline{
  background:transparent;color:var(--text);
  border:1px solid rgba(255,255,255,.14);
}

.hint{color:var(--muted);font-size:12px;line-height:1.4}
.mono{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace}
.error{color:#ffd2dc;background:rgba(255,59,92,.12);border:1px solid rgba(255,59,92,.25);
  padding:10px 12px;border-radius:12px;display:none}

.footer{
  display:flex;justify-content:center;align-items:center;gap:10px;
  margin-top:14px;color:var(--muted);font-size:12px
}
.footer .dot{opacity:.5}