.mx-body{margin:0;min-height:100vh;display:flex;align-items:center;justify-content:center;background:#f4f4f5;color:#18181b;font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif}
.mx-wrap{width:100%;padding:1.5rem;display:flex;justify-content:center}
.mx-card{width:100%;max-width:380px;background:#fff;border:1px solid #e4e4e7;border-radius:14px;padding:2rem 1.5rem;text-align:center;box-shadow:0 10px 30px -15px rgba(0,0,0,.2)}
.mx-icon{width:48px;height:48px;color:#3f3f46;margin:0 auto 1rem;display:block}
.mx-title{font-size:1.25rem;font-weight:600;margin:0 0 1.5rem;line-height:1.35}
.mx-form{display:grid;gap:.75rem}
.mx-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.mx-input{font:inherit;font-size:1rem;padding:.8rem 1rem;border:1px solid #a1a1aa;border-radius:10px;width:100%;box-sizing:border-box;background:#fff;color:#18181b}
.mx-input:focus-visible,.mx-btn:focus-visible{outline:3px solid #2563eb;outline-offset:2px}
.mx-btn{font:inherit;font-size:1rem;font-weight:600;padding:.8rem 1rem;border:0;border-radius:10px;background:#27272a;color:#fff;cursor:pointer;min-height:48px}
.mx-btn:hover{background:#18181b}
.mx-btn:disabled{opacity:.6;cursor:wait}
.mx-error{color:#b91c1c;font-size:.95rem;margin:.25rem 0 0}
.mx-shake{animation:mx-shake .4s ease}
@keyframes mx-shake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}
@media (prefers-reduced-motion:reduce){.mx-shake{animation:none}}