*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{--r1:#C0200A;--r2:#D42B10;--rg:linear-gradient(135deg,#C0200A,#E83D1E);--rs:#FEF0ED;--rb:#F5C4BB;--rt:#A81C08;--rsm:8px;--rxl:20px;--shr:0 4px 20px rgba(192,32,10,.22);--shrl:0 8px 32px rgba(192,32,10,.32);--f:'Open Sans',sans-serif;--m:'JetBrains Mono',monospace;--dk:#111827;--t2:#6B7280;--br2:#D1D5DB;--br:#E5E7EB;--bg:#F0F2F5;--s2:#F9FAFB;}
body{font-family:var(--f);background:var(--rg);display:flex;align-items:center;justify-content:center;min-height:100vh;padding:20px;position:relative}
body::before{content:'';position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='30' cy='30' r='2' fill='white' fill-opacity='0.05'/%3E%3C/svg%3E")}
body::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 50% at 25% 15%,rgba(255,255,255,.1),transparent 60%)}
.lc{position:relative;z-index:1;background:#fff;border-radius:var(--rxl);padding:44px 40px;width:100%;max-width:400px;box-shadow:0 32px 80px rgba(0,0,0,.22);animation:fup .5s cubic-bezier(.22,1,.36,1) both}
@keyframes fup{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.lt{text-align:center;margin-bottom:30px}
.li{width:68px;height:68px;border-radius:16px;background:var(--rg);display:flex;align-items:center;justify-content:center;font-size:32px;margin:0 auto 14px;box-shadow:var(--shr)}
.lt h1{font-size:21px;font-weight:800;color:var(--dk)}.lt p{color:var(--t2);font-size:13px;margin-top:3px}
.lerr{background:var(--rs);color:var(--rt);font-size:13px;font-weight:600;padding:10px 13px;border-radius:var(--rsm);margin-bottom:12px;border:1px solid var(--rb)}
.lf{margin-bottom:14px}
.lf label{display:block;font-size:11.5px;font-weight:700;color:var(--t2);margin-bottom:5px;text-transform:uppercase;letter-spacing:.3px}
.lf input{width:100%;padding:11px 13px;border:1.5px solid var(--br2);border-radius:var(--rsm);font-family:var(--f);font-size:14px;color:var(--dk);background:var(--bg);outline:none;transition:all .18s}
.lf input:focus{border-color:var(--r2);background:#fff;box-shadow:0 0 0 3px var(--rs)}
.lbtn{width:100%;padding:12px;border:none;border-radius:var(--rsm);font-family:var(--f);font-size:14px;font-weight:700;background:var(--rg);color:white;cursor:pointer;transition:all .2s;box-shadow:var(--shr);margin-top:4px}
.lbtn:hover{box-shadow:var(--shrl);transform:translateY(-1px)}
.ldm{margin-top:18px;padding:11px 13px;background:var(--s2);border:1px solid var(--br);border-radius:var(--rsm);font-size:11.5px;color:var(--t2);line-height:1.9}
.ldm strong{color:var(--dk);font-weight:700}.ldm code{font-family:var(--m);background:var(--br);padding:1px 5px;border-radius:4px;font-size:10.5px;color:var(--rt)}
@media(max-width:480px){.lc{padding:28px 20px}}