.login{position:fixed;inset:0;display:grid;grid-template-columns:1fr minmax(360px,440px)}
.art{position:relative;overflow:hidden;border-inline-end:1px solid var(--line);background:#000}
.art img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 35%;filter:grayscale(1) contrast(1.08);animation:drift 30s ease-in-out infinite alternate}
.art::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 40% 40%,transparent 40%,rgba(0,0,0,.75)),linear-gradient(to top,rgba(0,0,0,.7),transparent 35%)}
@keyframes drift{from{transform:scale(1.04)}to{transform:scale(1.12) translate(-1.5%,-1%)}}
.cap{position:absolute;z-index:1;left:28px;right:28px;bottom:calc(24px + env(safe-area-inset-bottom,0px));display:flex;justify-content:space-between;gap:16px;color:rgba(255,255,255,.8)}
.cap b{font-weight:500;font-size:11px;letter-spacing:.08em}
.cap b:first-child{font-size:15px;letter-spacing:.02em;color:#fff}
.side{display:flex;flex-direction:column;overflow:auto;padding-block:calc(28px + env(safe-area-inset-top,0px)) calc(24px + env(safe-area-inset-bottom,0px));padding-inline:max(32px,env(safe-area-inset-left,0px)) max(32px,env(safe-area-inset-right,0px))}
.body{margin-block:auto;padding-block:40px}
h1{font-size:32px;font-weight:600;letter-spacing:-.025em;line-height:1.12;margin:0 0 10px;text-wrap:balance}
html[lang="ar"] h1{letter-spacing:0;line-height:1.35}
.body p{color:var(--fg2);font-size:14px;margin:0 0 28px;max-width:36ch}
.dc{width:100%;height:46px;font-size:14px;gap:10px;text-decoration:none}
.dc svg{width:20px;height:20px}
.err{border:1px solid #5a2a2a;background:#1a0c0c;color:#f3b0b0;border-radius:var(--r);padding:10px 12px;margin-bottom:14px;font-size:12.5px}
.scope{margin-top:22px;border-top:1px solid var(--line);padding-top:16px;display:grid;gap:8px}
.scope div{display:flex;justify-content:space-between;gap:12px;color:var(--fg2);font-size:12.5px}
.scope code{font-family:var(--f-ui);font-size:12px;color:var(--fg3);text-align:end}
.foot{display:flex;justify-content:space-between;align-items:center;gap:12px;color:var(--fg3);font-size:11.5px}
@media (max-width:820px){.login{position:static;min-height:100%;grid-template-columns:1fr;grid-template-rows:40vh auto}.art{border:0;border-bottom:1px solid var(--line)}}
@media (prefers-reduced-motion:reduce){.art img{animation:none}}