html,body{margin:0;height:100%;background:#04050a;overflow:hidden;font-family:Tahoma,sans-serif;color:#fff}
.scene{position:fixed;inset:0;perspective:1400px;overflow:hidden}
.orb{position:absolute;border-radius:50%;filter:blur(60px);opacity:.6;animation:drift 18s ease-in-out infinite alternate}
.orb.a{width:50vw;height:50vw;background:#7c3aed;top:-15vw;left:-10vw}
.orb.b{width:45vw;height:45vw;background:#ff2d55;bottom:-18vw;right:-12vw;animation-delay:-8s}
.grid{position:absolute;left:-50%;right:-50%;bottom:-10%;height:60%;background-image:linear-gradient(rgba(168,85,247,.35) 1px,transparent 1px),linear-gradient(90deg,rgba(168,85,247,.35) 1px,transparent 1px);background-size:70px 70px;transform:rotateX(70deg);transform-origin:center bottom;animation:grid 12s linear infinite;opacity:.5}
@keyframes grid{from{background-position:0 0}to{background-position:0 70px}}
@keyframes drift{from{transform:translate(0,0)}to{transform:translate(50px,-30px)}}
.wrap{position:relative;min-height:100vh;display:flex;align-items:center;justify-content:center;transform-style:preserve-3d}
.card{width:380px;padding:36px 30px;border-radius:26px;background:linear-gradient(160deg,rgba(45,30,80,.6),rgba(8,8,18,.75));border:1px solid rgba(168,85,247,.5);backdrop-filter:blur(22px);box-shadow:0 50px 100px rgba(0,0,0,.8),0 0 70px rgba(139,92,246,.35),inset 0 1px 0 rgba(255,255,255,.1);text-align:center;transform:rotateY(var(--ry,0deg)) rotateX(var(--rx,0deg));transition:transform .15s ease-out;transform-style:preserve-3d}
.logo{width:190px;display:block;margin:0 auto 8px;filter:drop-shadow(0 0 24px rgba(168,85,247,.9));transform:translateZ(60px);animation:float 4s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateZ(60px) translateY(0)}50%{transform:translateZ(60px) translateY(-10px)}}
h3{margin:6px 0 18px;letter-spacing:.5px;transform:translateZ(30px)}
input{display:block;width:100%;margin:10px 0;padding:13px;background:rgba(0,0,0,.55);color:#fff;border:1px solid rgba(168,85,247,.45);border-radius:14px;transition:.25s;transform:translateZ(20px)}
input:focus{outline:none;border-color:#c084fc;box-shadow:0 0 0 4px rgba(168,85,247,.3)}
.btn-login{width:100%;margin-top:14px;padding:14px;border:0;border-radius:14px;color:#fff;font-weight:800;font-size:15px;background:linear-gradient(135deg,#7c3aed,#ff2d55);background-size:200% 200%;box-shadow:0 14px 34px rgba(168,85,247,.55);cursor:pointer;transition:.3s;transform:translateZ(30px)}
.btn-login:hover{background-position:100% 50%;transform:translateZ(40px) translateY(-2px)}
.err{color:#fca5a5;min-height:20px;margin:6px 0}
.scene{pointer-events:none;z-index:0}
.wrap{position:relative;z-index:1}
.card{transform:none!important;transform-style:flat!important}
.card *{transform:none!important}
.card input,.card button{position:relative;z-index:2;pointer-events:auto}
.scene{pointer-events:none;z-index:0}
.wrap{position:relative;z-index:1}
.card{transform:none!important;transform-style:flat!important}
.card *{transform:none!important}
.card input,.card button{position:relative;z-index:2;pointer-events:auto}