body.login{background:radial-gradient(circle at 20% 20%,#7a1a3d,#2a0714 70%);color:#f5e9d2;overflow-x:hidden}
.login-wrap{min-height:100vh;display:grid;grid-template-columns:1.1fr 1fr;position:relative;z-index:1}
.hero{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:40px;gap:18px}
.hero h1{font-size:clamp(34px,5vw,60px);line-height:1.1}
.hero p{max-width:440px;opacity:.85}
.envelope{position:relative;width:260px;height:170px;margin:70px 0 40px;perspective:800px}
.env-body{position:absolute;inset:0;background:linear-gradient(135deg,#f6ead0,#e4cf9b);border-radius:6px;box-shadow:0 20px 40px rgba(0,0,0,.5);z-index:3;clip-path:polygon(0 0,50% 55%,100% 0,100% 100%,0 100%)}
.env-flap{position:absolute;top:0;left:0;width:100%;height:85px;background:linear-gradient(#f0dfb4,#d9c186);clip-path:polygon(0 0,100% 0,50% 100%);transform-origin:top;z-index:4;animation:flapOpen 1.6s 1s forwards}
.env-card{position:absolute;left:12%;right:12%;top:6px;bottom:10px;background:var(--cream);border:2px solid var(--gold);border-radius:6px;z-index:2;display:grid;place-items:center;color:var(--maroon);font-family:'Playfair Display';font-size:15px;animation:letterRise 1.4s 2s forwards;opacity:0}
.seal{position:absolute;left:50%;top:70px;width:34px;height:34px;margin-left:-17px;border-radius:50%;background:radial-gradient(circle at 30% 30%,#ff7a9a,#a3264f);z-index:5;display:grid;place-items:center;animation:sealPulse 2s infinite;font-size:16px;transition:opacity .4s}
.gem3d{width:90px;height:90px;animation:gemSpin 6s linear infinite}.gem3d .gem{width:100%;height:100%}.qbtn>span:last-child{min-width:0}.qbtn .em{flex:none}
.login-card{align-self:center;justify-self:center;width:min(460px,92%);background:rgba(255,253,248,.97);color:var(--ink);border-radius:24px;padding:32px;border:2px solid var(--gold);box-shadow:0 30px 70px rgba(0,0,0,.5);animation:popIn .8s .3s both;margin:30px 0}
.login-card h2{color:var(--maroon);font-size:28px}
.login-card .sub{color:var(--muted);margin-bottom:18px}
.login-card form{display:grid;gap:14px}
.err{color:var(--red);font-size:12px;min-height:16px}
.divider{display:flex;align-items:center;gap:10px;margin:20px 0 12px;color:var(--gold-d);font-size:11px;letter-spacing:2px;text-transform:uppercase}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--gold)}
.quick{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.qbtn{display:flex;align-items:center;gap:10px;padding:10px;border:1px solid var(--line);background:#fff;border-radius:14px;cursor:pointer;text-align:left;transition:.3s;animation:fadeUp .5s both;animation-delay:calc(var(--i)*80ms + .8s)}
.qbtn:hover{transform:translateY(-4px) scale(1.03);border-color:var(--gold);box-shadow:0 10px 22px rgba(201,162,74,.35);background:#fff8e0}
.qbtn .em{font-size:22px;width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(135deg,var(--maroon),var(--maroon-m))}
.qbtn b{display:block;font-size:13px;color:var(--maroon);line-height:1.2}.qbtn small{font-size:10px;color:var(--muted)}
@media(max-width:900px){.login-wrap{grid-template-columns:1fr}.hero{padding:30px 20px 0}.envelope{transform:scale(.8);margin:10px 0 20px}.quick{grid-template-columns:1fr}}