body.auth-body{
  margin:0; min-height:100vh; display:flex; background:var(--bg); font-family:'Inter',sans-serif; color:var(--text);
}
.auth-wrap{display:flex; width:100%; min-height:100vh}
.auth-hero{
  flex:1.1; background:
    linear-gradient(160deg, rgba(26,25,23,.55), rgba(37,99,73,.75)),
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="800" height="800"><defs><pattern id="p" width="80" height="80" patternUnits="userSpaceOnUse"><path d="M0 40 Q20 0 40 40 T80 40" stroke="%23ffffff" stroke-opacity="0.06" fill="none" stroke-width="2"/></pattern></defs><rect width="800" height="800" fill="%231c4c39"/><rect width="800" height="800" fill="url(%23p)"/></svg>');
  background-size:cover; color:#fff; display:flex; flex-direction:column; justify-content:space-between; padding:48px;
  position:relative; overflow:hidden;
}
@media (max-width:900px){ .auth-hero{display:none} }
.auth-hero .brand{display:flex; align-items:center; gap:12px; animation:heroFade .6s var(--ease) both}
.auth-hero .brand .mark{width:44px; height:44px; border-radius:12px; background:linear-gradient(135deg,#c8952f,#2f7d5c); display:flex; align-items:center; justify-content:center; font-weight:800}
.auth-hero .brand strong{font-size:18px}
.auth-hero .brand small{display:block; opacity:.75; font-size:11.5px; letter-spacing:.04em}
.auth-hero .headline{max-width:440px; animation:heroFade .7s .1s var(--ease) both}
.auth-hero .headline h1{font-size:34px; line-height:1.2; margin-bottom:12px; font-weight:700}
.auth-hero .headline p{opacity:.85; font-size:14.5px; line-height:1.6}
.auth-hero .modules{display:flex; gap:10px; flex-wrap:wrap; margin-top:28px; animation:heroFade .8s .2s var(--ease) both}
.auth-hero .modules span{background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.2); padding:6px 12px; border-radius:20px; font-size:11.5px}
.auth-hero .foot{font-size:11px; opacity:.6; animation:heroFade .9s .3s var(--ease) both}
@keyframes heroFade{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:translateY(0)}}

.auth-form-panel{flex:1; display:flex; align-items:center; justify-content:center; padding:32px}
.auth-form{width:100%; max-width:380px; animation:formIn .5s var(--ease) both}
@keyframes formIn{from{opacity:0; transform:translateY(18px) scale(.98)} to{opacity:1; transform:translateY(0) scale(1)}}
.auth-form .mobile-brand{display:none; margin-bottom:24px; align-items:center; gap:10px}
@media (max-width:900px){ .auth-form .mobile-brand{display:flex} }
.auth-form .mobile-brand .mark{width:38px; height:38px; border-radius:10px; background:linear-gradient(135deg,#c8952f,#2f7d5c); display:flex; align-items:center; justify-content:center; font-weight:800; color:#1a1917}
.auth-form h2{font-size:22px; margin-bottom:4px}
.auth-form .sub{color:var(--text-muted); font-size:13px; margin-bottom:26px}
.auth-alert{
  background:var(--sg-red-50); color:var(--sg-red-600); border:1px solid #f1c9c9; padding:10px 14px; border-radius:8px;
  font-size:12.5px; margin-bottom:16px; display:flex; gap:8px; align-items:flex-start; animation:fadeSlideUp .25s var(--ease) both;
}
.auth-form label{font-size:12.5px}
.auth-form .form-control{padding:11px 13px}
.auth-form .btn-block{margin-top:6px; padding:11px}
.auth-demo{margin-top:26px; padding:14px; border-radius:10px; background:var(--surface-2); border:1px dashed var(--border); font-size:11.5px; color:var(--text-muted)}
.auth-demo strong{color:var(--text); display:block; margin-bottom:6px; font-size:12px}
.auth-demo code{background:var(--surface); padding:1px 6px; border-radius:4px; border:1px solid var(--border)}
.auth-lang{position:absolute; top:20px; right:20px}