/* ===== MILIGOL — login + panel background ===== */
.login{position:relative;min-height:100vh;display:grid;place-items:center;
  overflow:hidden;perspective:900px;background:#1F2736}
.login::before{content:"";position:absolute;inset:-20% -60% -55%;z-index:0;
  background-size:70px 70px;transform:rotateX(74deg);transform-origin:50% 100%;
  -webkit-mask-image:linear-gradient(to top,#000 5%,transparent 65%);
  mask-image:linear-gradient(to top,#000 5%,transparent 65%);
  animation:gridrun 12s linear infinite}
@keyframes gridrun{to{background-position:0 70px,0 0}}
.login::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  animation:aura 14s ease-in-out infinite alternate}
@keyframes aura{from{transform:translate3d(0,0,0) scale(1)}
  to{transform:translate3d(0,-26px,0) scale(1.08)}}
.login .box{position:relative;z-index:2;width:100%;max-width:400px;
  padding:38px 30px 30px;border-radius:22px;
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  backdrop-filter:blur(18px) saturate(140%);
  animation:cardin .7s cubic-bezier(.2,.8,.25,1) both}
@keyframes cardin{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.brand{display:grid;place-items:center;margin:0 0 20px}
.brand img{width:96px;height:96px;display:block;animation:levitate 5.5s ease-in-out infinite}
@keyframes levitate{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.login .box h2{display:block;text-align:center;font-size:1.06rem;font-weight:700;margin:0 0 4px}
.login .box p.s{text-align:center;font-size:.82rem;margin:0 0 22px}
html[data-theme="dark"] .login{background:radial-gradient(1200px 700px at 50% -10%,#2A3A57 0%,#1F2736 45%,#141922 100%)}
html[data-theme="dark"] .login::before{background-image:linear-gradient(rgba(96,165,250,.16) 1px,transparent 1px),linear-gradient(90deg,rgba(96,165,250,.16) 1px,transparent 1px)}
html[data-theme="dark"] .login::after{background:radial-gradient(520px 520px at 16% 22%,rgba(56,189,248,.22),transparent 62%),radial-gradient(560px 560px at 84% 74%,rgba(168,85,247,.18),transparent 62%)}
html[data-theme="dark"] .login .box{background:rgba(31,39,54,.72)!important;border:1px solid rgba(255,255,255,.10)!important;box-shadow:0 30px 70px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.08)}
html[data-theme="dark"] .login .box h2{color:#E8EEF9}
html[data-theme="dark"] .login .box p.s{color:#9AA7BD}
html[data-theme="dark"] .login .box label{color:#C3CEE0}
html[data-theme="dark"] .brand img{filter:drop-shadow(0 14px 30px rgba(56,189,248,.45))}
html[data-theme="light"] .login{background:radial-gradient(1200px 700px at 50% -10%,#FFFFFF 0%,#EDF2FA 45%,#D9E3F2 100%)}
html[data-theme="light"] .login::before{background-image:linear-gradient(rgba(37,99,235,.14) 1px,transparent 1px),linear-gradient(90deg,rgba(37,99,235,.14) 1px,transparent 1px)}
html[data-theme="light"] .login::after{background:radial-gradient(520px 520px at 16% 22%,rgba(56,189,248,.20),transparent 62%),radial-gradient(560px 560px at 84% 74%,rgba(168,85,247,.14),transparent 62%)}
html[data-theme="light"] .login .box{background:rgba(255,255,255,.82)!important;border:1px solid rgba(15,23,42,.08)!important;box-shadow:0 26px 60px rgba(15,23,42,.18),inset 0 1px 0 #fff}
html[data-theme="light"] .login .box h2{color:#0F172A}
html[data-theme="light"] .login .box p.s{color:#51607A}
html[data-theme="light"] .login .box label{color:#1E293B}
html[data-theme="light"] .login .box input{background:#fff!important;color:#0F172A!important;border:1px solid #CBD5E1!important}
html[data-theme="light"] .login .box input::placeholder{color:#94A3B8}
html[data-theme="light"] .brand img{filter:drop-shadow(0 12px 26px rgba(37,99,235,.28))}
body{background:transparent!important}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none}
html[data-theme="dark"]{background:#141922}
html[data-theme="dark"] body::before{background:radial-gradient(1100px 650px at 78% -8%,#2A3A57 0%,#1F2736 42%,#141922 100%),radial-gradient(700px 700px at 10% 100%,rgba(56,189,248,.10),transparent 60%)}
html[data-theme="light"]{background:#EDF2FA}
html[data-theme="light"] body::before{background:radial-gradient(1100px 650px at 78% -8%,#FFFFFF 0%,#EDF2FA 42%,#DCE5F2 100%),radial-gradient(700px 700px at 10% 100%,rgba(56,189,248,.12),transparent 60%)}
@media (prefers-reduced-motion:reduce){.login::before,.login::after,.brand img,.login .box{animation:none}}