/* ============================================================================
   License Central — professional sign-in experience.
   External stylesheet -> CSP-safe (script-src 'self'; style-src 'self').
   Pairs with login.php — the animated hero is pure CSS (no JavaScript on the auth pages).
   ========================================================================== */
:root{
  --bg-0:#0b1220; --bg-1:#0a0f1a; --bg-2:#070b14;
  --card:rgba(17,24,39,.72); --card-border:rgba(148,163,184,.16);
  --emerald:#34d399; --emerald-2:#10b981; --cyan:#22d3ee; --sky:#38bdf8;
  --text:#e6edf6; --muted:#94a3b8; --muted-2:#64748b;
  --danger:#f87171;
  --ring:0 0 0 3px rgba(52,211,153,.18);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{min-height:100%}
.auth-body{
  min-height:100vh; overflow-x:hidden; position:relative; color:var(--text);
  font-family:"Inter","Segoe UI",system-ui,-apple-system,Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
  background:
    radial-gradient(1200px 700px at 50% -10%, #10203a 0%, transparent 60%),
    linear-gradient(180deg,var(--bg-0) 0%,var(--bg-1) 55%,var(--bg-2) 100%);
}

/* -- Animated background (pure CSS — no JavaScript) ----------------------- */
/* Layer 0a: slow drifting aurora wash behind everything. */
.auth-body::before{
  content:""; position:fixed; inset:-25%; z-index:0; pointer-events:none;
  background:
    radial-gradient(38% 38% at 22% 28%, rgba(16,185,129,.22), transparent 62%),
    radial-gradient(40% 40% at 80% 68%, rgba(34,211,238,.20), transparent 62%),
    radial-gradient(34% 34% at 62% 18%, rgba(56,189,248,.16), transparent 62%);
  animation:auroraShift 22s ease-in-out infinite alternate;
}
/* Layer 0b: very slow rotating light beam (premium ambient motion). */
.auth-body::after{
  content:""; position:fixed; top:50%; left:50%; width:170vmax; height:170vmax;
  margin:-85vmax 0 0 -85vmax; z-index:0; pointer-events:none; opacity:.07;
  background:conic-gradient(from 0deg,
    transparent 0 60deg, rgba(52,211,153,.55) 90deg, transparent 120deg 210deg,
    rgba(34,211,238,.55) 240deg, transparent 270deg 360deg);
  animation:beamSpin 38s linear infinite;
}
@keyframes auroraShift{0%{transform:translate3d(-2%,-1%,0) rotate(0deg)}100%{transform:translate3d(2%,2%,0) rotate(10deg)}}
@keyframes beamSpin{to{transform:rotate(360deg)}}

.bg-grid{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(148,163,184,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148,163,184,.05) 1px, transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(circle at 50% 32%, #000 0%, transparent 78%);
          mask-image:radial-gradient(circle at 50% 32%, #000 0%, transparent 78%);
  animation:gridDrift 16s linear infinite;
}
@keyframes gridDrift{from{background-position:0 0}to{background-position:0 46px}}

.bg-aurora{position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden}
.bg-aurora::before,.bg-aurora::after{content:""; position:absolute; width:600px; height:600px; border-radius:50%; filter:blur(110px); opacity:.42}
.bg-aurora::before{background:radial-gradient(circle,#10b981,transparent 70%); top:-180px; left:-140px; animation:floatA 15s ease-in-out infinite}
.bg-aurora::after{background:radial-gradient(circle,#0ea5e9,transparent 70%); bottom:-200px; right:-140px; animation:floatB 18s ease-in-out infinite}
@keyframes floatA{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(80px,60px) scale(1.1)}}
@keyframes floatB{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-70px,-50px) scale(1.08)}}

/* Layer 1: floating glow particles that rise and fade (no JS, no markup logic). */
.particles{position:fixed; inset:0; z-index:1; pointer-events:none; overflow:hidden}
.particles i{
  position:absolute; bottom:-14px; border-radius:50%;
  background:radial-gradient(circle, rgba(110,231,183,.95), rgba(52,211,153,.25) 60%, transparent 72%);
  opacity:0; animation:floatUp linear infinite;
}
@keyframes floatUp{
  0%{transform:translateY(0) scale(.5); opacity:0}
  12%{opacity:.9}
  88%{opacity:.6}
  100%{transform:translateY(-106vh) scale(1); opacity:0}
}
.particles i:nth-child(1){left:5%;  width:5px;height:5px;  animation-duration:17s; animation-delay:-1s}
.particles i:nth-child(2){left:13%; width:9px;height:9px;  animation-duration:25s; animation-delay:-6s}
.particles i:nth-child(3){left:21%; width:4px;height:4px;  animation-duration:14s; animation-delay:-3s}
.particles i:nth-child(4){left:29%; width:7px;height:7px;  animation-duration:21s; animation-delay:-9s}
.particles i:nth-child(5){left:37%; width:5px;height:5px;  animation-duration:19s; animation-delay:-2s}
.particles i:nth-child(6){left:45%; width:10px;height:10px; animation-duration:27s; animation-delay:-12s}
.particles i:nth-child(7){left:53%; width:4px;height:4px;  animation-duration:15s; animation-delay:-5s}
.particles i:nth-child(8){left:61%; width:7px;height:7px;  animation-duration:23s; animation-delay:-8s}
.particles i:nth-child(9){left:69%; width:5px;height:5px;  animation-duration:18s; animation-delay:-1.5s}
.particles i:nth-child(10){left:77%; width:8px;height:8px; animation-duration:24s; animation-delay:-10s}
.particles i:nth-child(11){left:84%; width:4px;height:4px; animation-duration:16s; animation-delay:-4s}
.particles i:nth-child(12){left:90%; width:9px;height:9px; animation-duration:26s; animation-delay:-7s}
.particles i:nth-child(13){left:95%; width:5px;height:5px; animation-duration:20s; animation-delay:-11s}
.particles i:nth-child(14){left:48%; width:6px;height:6px; animation-duration:22s; animation-delay:-14s}

/* -- Layout --------------------------------------------------------------- */
.login-container{position:relative; z-index:5; min-height:100vh; display:flex; align-items:center; justify-content:center; padding:40px 18px}

/* -- Glass card ----------------------------------------------------------- */
.login-card{
  position:relative; width:100%; max-width:430px;
  background:var(--card); border:1px solid var(--card-border); border-radius:20px;
  padding:38px 34px 26px;
  backdrop-filter:blur(18px) saturate(140%); -webkit-backdrop-filter:blur(18px) saturate(140%);
  box-shadow:0 30px 80px -20px rgba(0,0,0,.7), inset 0 0 0 1px rgba(255,255,255,.02);
  animation:cardIn .6s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes cardIn{from{opacity:0; transform:translateY(16px) scale(.99)}to{opacity:1; transform:none}}
.login-card::before{
  content:""; position:absolute; top:0; left:24px; right:24px; height:1px;
  background:linear-gradient(90deg,transparent,rgba(52,211,153,.7),rgba(34,211,238,.7),transparent);
}

/* -- Brand ---------------------------------------------------------------- */
.brand{text-align:center; margin-bottom:22px}
.brand-mark{width:64px; height:64px; margin:0 auto 16px; display:grid; place-items:center; position:relative}
.brand-mark::after{content:""; position:absolute; inset:-6px; border-radius:20px; background:radial-gradient(circle,rgba(52,211,153,.28),transparent 70%); filter:blur(6px); z-index:-1; animation:markGlow 4s ease-in-out infinite}
@keyframes markGlow{0%,100%{opacity:.5}50%{opacity:1}}
.mark-svg{filter:drop-shadow(0 4px 12px rgba(16,185,129,.3)); animation:markFloat 5s ease-in-out infinite}
@keyframes markFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
/* Orbital ring spins continuously around the mark. */
.mark-orbit{transform-box:fill-box; transform-origin:center; animation:orbitSpin 14s linear infinite}
@keyframes orbitSpin{to{transform:rotate(360deg)}}
/* Frame breathes; the emblem (check / shield / envelope) draws itself on a loop. */
.mark-frame{animation:framePulse 4s ease-in-out infinite}
@keyframes framePulse{0%,100%{opacity:.92}50%{opacity:1}}
.mark-check{stroke-dasharray:100; stroke-dashoffset:100; animation:markDraw 4.5s ease-in-out infinite}
@keyframes markDraw{0%{stroke-dashoffset:100}35%{stroke-dashoffset:0}72%{stroke-dashoffset:0}100%{stroke-dashoffset:100}}
/* Product mark: a license KEY that "issues" itself, then emits an activation pulse. */
.key-bow,.key-blade{stroke-dasharray:100; stroke-dashoffset:100; animation:markDraw 4.5s ease-in-out infinite}
.key-blade{animation-delay:.18s}
.activation-pulse{transform-box:fill-box; transform-origin:center; opacity:0; animation:actPulse 4.5s ease-out infinite}
@keyframes actPulse{0%,52%{transform:scale(.35); opacity:0}60%{opacity:.6}100%{transform:scale(1.65); opacity:0}}
.brand-name{font-size:2rem; font-weight:800; letter-spacing:-.02em; line-height:1; color:#fff}
.brand-name-accent{background:linear-gradient(120deg,var(--emerald),var(--cyan)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}
.brand-tagline{margin-top:10px; font-size:.82rem; color:var(--muted); letter-spacing:.01em}
.console-label{margin-top:13px; display:inline-flex; align-items:center; gap:7px; font-size:.68rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--muted-2); padding:5px 12px; border:1px solid var(--card-border); border-radius:999px; background:rgba(2,6,12,.4)}
.console-label .bi{color:var(--emerald)}

/* -- Trust row ------------------------------------------------------------ */
.trust-row{display:flex; flex-wrap:wrap; gap:8px 16px; justify-content:center; margin-bottom:22px}
.trust{display:inline-flex; align-items:center; gap:6px; font-size:.7rem; color:var(--muted)}
.trust .bi{color:var(--emerald); font-size:.85rem}

/* -- Flash ---------------------------------------------------------------- */
.flash{display:flex; align-items:center; gap:10px; padding:11px 14px; margin-bottom:18px; border-radius:11px; font-size:.86rem; line-height:1.35}
.flash .bi{font-size:1.05rem; flex-shrink:0}
.flash-error{background:rgba(248,113,113,.1); border:1px solid rgba(248,113,113,.35); color:#fca5a5}
.flash-success{background:rgba(52,211,153,.1); border:1px solid rgba(52,211,153,.35); color:#6ee7b7}
.flash-info{background:rgba(56,189,248,.1); border:1px solid rgba(56,189,248,.35); color:#7dd3fc}

/* -- Form ----------------------------------------------------------------- */
.auth-form{margin-top:2px}
.field{margin-bottom:16px}
.field-label{display:block; margin-bottom:8px; font-size:.78rem; font-weight:600; color:#cbd5e1}
.label-hint{color:var(--muted-2); font-weight:400}
.field-hint{margin-top:7px; font-size:.76rem; color:var(--muted); line-height:1.4}
.field-hint .mono{font-family:ui-monospace,Consolas,monospace; color:#cbd5e1}
.input-wrap{position:relative}
.input-code{text-align:center; letter-spacing:.4em; font-size:1.15rem; padding-left:14px; font-family:ui-monospace,Consolas,monospace}
.input-code::placeholder{letter-spacing:.4em}
.input-icon{position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--muted-2); font-size:1rem; pointer-events:none; transition:color .2s; z-index:1}
.input{
  width:100%; padding:13px 14px 13px 42px;
  background:rgba(2,6,12,.55); color:var(--text);
  border:1px solid rgba(148,163,184,.18); border-radius:12px;
  font-size:.95rem; outline:none; transition:border-color .2s,box-shadow .2s,background .2s;
}
.input::placeholder{color:#475569}
.input:focus{border-color:var(--emerald); background:rgba(2,6,12,.75); box-shadow:var(--ring)}
.input:focus ~ .input-icon{color:var(--emerald)}
.pw-toggle{position:absolute; right:8px; top:50%; transform:translateY(-50%); background:none; border:none; color:var(--muted-2); cursor:pointer; padding:6px 9px; border-radius:8px; line-height:0; transition:color .2s,background .2s}
.pw-toggle:hover{color:var(--text); background:rgba(148,163,184,.1)}
.pw-toggle:focus-visible{outline:2px solid var(--emerald); outline-offset:2px}

/* -- Primary button ------------------------------------------------------- */
.btn-primary{
  width:100%; margin-top:8px; position:relative; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:13px 16px; border:none; border-radius:12px; cursor:pointer;
  font-size:.92rem; font-weight:700; color:#04130c;
  background:linear-gradient(120deg,var(--emerald) 0%,#2dd4bf 50%,var(--cyan) 100%);
  box-shadow:0 10px 30px -8px rgba(16,185,129,.6);
  transition:transform .16s ease,box-shadow .2s ease,filter .2s ease;
}
.btn-primary:hover{transform:translateY(-1px); filter:brightness(1.05); box-shadow:0 14px 36px -8px rgba(16,185,129,.7)}
.btn-primary:active{transform:translateY(0)}
.btn-primary:focus-visible{outline:2px solid #fff; outline-offset:2px}
.btn-primary:disabled{cursor:wait; opacity:.85}
.btn-primary [data-btn-text],.btn-primary [data-btn-loading]{display:inline-flex; align-items:center; gap:8px}

/* -- Register row + footer ------------------------------------------------ */
.register-row{margin-top:20px; text-align:center; font-size:.85rem; color:var(--muted)}
.auth-link{color:var(--emerald); font-weight:600; text-decoration:none; transition:color .2s}
.auth-link:hover{color:#6ee7b7; text-decoration:underline}
.auth-footer{margin-top:22px; padding-top:18px; border-top:1px solid rgba(148,163,184,.12); display:flex; justify-content:center}
.footer-brand{display:inline-flex; align-items:center; gap:7px; font-size:.72rem; color:var(--muted-2)}
.footer-brand .bi{color:var(--emerald)}

/* -- Responsive ----------------------------------------------------------- */
@media (max-width:480px){
  .login-card{padding:28px 22px 22px}
  .brand-name{font-size:1.7rem}
  .trust-row{gap:6px 12px}
}

/* -- Alternate sign-in (passwordless + SSO) ------------------------------- */
.divider{display:flex; align-items:center; gap:12px; margin:20px 0; color:var(--muted-2); font-size:.72rem; text-transform:uppercase; letter-spacing:.1em}
.divider::before,.divider::after{content:""; flex:1; height:1px; background:rgba(148,163,184,.16)}
.btn-ghost{
  width:100%; display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:12px 16px; border:1px solid var(--card-border); border-radius:12px; cursor:pointer;
  background:rgba(2,6,12,.4); color:var(--text); font-size:.9rem; font-weight:600; text-decoration:none;
  transition:border-color .2s,background .2s,transform .16s;
}
.btn-ghost:hover{border-color:rgba(52,211,153,.5); background:rgba(2,6,12,.6); transform:translateY(-1px)}
.btn-ghost .bi{color:var(--emerald); font-size:1.05rem}
.sso-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:10px}
.btn-sso{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:11px 12px; border:1px solid var(--card-border); border-radius:12px; cursor:pointer;
  background:#0e1726; color:var(--text); font-size:.84rem; font-weight:600; text-decoration:none;
  transition:border-color .2s,background .2s,transform .16s;
}
.btn-sso:hover{border-color:rgba(148,163,184,.4); background:#121c2e; transform:translateY(-1px)}
.btn-sso svg{flex-shrink:0}
@media (max-width:480px){ .sso-grid{grid-template-columns:1fr} }

/* -- Reduced motion ------------------------------------------------------- */
/* ============================================================================
   Enterprise split-screen sign-in (login.php) — CSS-only 3D, no JavaScript.
   ========================================================================== */
.auth-body--split{overflow:hidden}
.auth-body--split .bg-grid{display:none}   /* the hero has its own perspective grid */
.auth-split{position:relative; z-index:5; min-height:100vh; display:grid; grid-template-columns:1.1fr .9fr}

/* ── Left: 3D brand scene ── */
.auth-hero{position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:flex-end;
  padding:7vh 4.5vw; border-right:1px solid rgba(148,163,184,.08);
  background:linear-gradient(135deg, rgba(10,24,30,.55), rgba(6,12,22,.12))}
.hero-scene{position:absolute; inset:0; perspective:1300px; perspective-origin:50% 36%; transform-style:preserve-3d; pointer-events:none}

.grid-floor{position:absolute; left:-40%; right:-40%; bottom:-14%; height:70%;
  background-image:
    linear-gradient(rgba(52,211,153,.20) 2px, transparent 2px),
    linear-gradient(90deg, rgba(34,211,238,.16) 2px, transparent 2px);
  background-size:64px 64px;
  transform:rotateX(75deg); transform-origin:50% 100%;
  -webkit-mask-image:linear-gradient(to top,#000 0%,transparent 72%); mask-image:linear-gradient(to top,#000 0%,transparent 72%);
  animation:floorRun 5s linear infinite}
@keyframes floorRun{from{background-position:0 0}to{background-position:0 64px}}

.hero-orb{position:absolute; border-radius:50%; filter:blur(80px); opacity:.45}
.hero-orb-a{width:340px;height:340px; background:radial-gradient(circle,#10b981,transparent 70%); top:6%; left:4%; animation:floatA 17s ease-in-out infinite}
.hero-orb-b{width:380px;height:380px; background:radial-gradient(circle,#0ea5e9,transparent 70%); top:16%; right:2%; animation:floatB 21s ease-in-out infinite}

/* 3D rotating "license card" */
.license3d{position:absolute; top:33%; left:50%; width:290px; height:184px; margin:-92px 0 0 -145px; perspective:1200px}
.license3d-inner{position:relative; width:100%; height:100%; transform-style:preserve-3d; animation:cardSpin 18s cubic-bezier(.5,0,.5,1) infinite}
@keyframes cardSpin{0%{transform:rotateX(8deg) rotateY(-24deg)}50%{transform:rotateX(8deg) rotateY(204deg)}100%{transform:rotateX(8deg) rotateY(336deg)}}
.lic-face{position:absolute; inset:0; border-radius:18px; backface-visibility:hidden; overflow:hidden;
  border:1px solid rgba(52,211,153,.35); box-shadow:0 40px 70px -24px rgba(0,0,0,.8), inset 0 0 50px rgba(16,185,129,.12)}
.lic-front{background:linear-gradient(135deg,#0e2b2a 0%,#0b1b30 55%,#0a1422 100%); padding:18px 20px; display:flex; flex-direction:column}
.lic-back{transform:rotateY(180deg); background:linear-gradient(135deg,#0b1b30,#0e2b2a)}
.lic-sheen{position:absolute; inset:0; background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.14) 48%,transparent 62%); transform:translateX(-120%); animation:licSheen 5s ease-in-out infinite}
@keyframes licSheen{0%,100%{transform:translateX(-120%)}55%{transform:translateX(120%)}}
.lic-top{display:flex; align-items:center; justify-content:space-between}
.lic-chip{width:34px; height:26px; border-radius:6px; background:linear-gradient(135deg,#f5d36b,#c79b3a); box-shadow:inset 0 0 0 1px rgba(0,0,0,.2)}
.lic-brand{margin-top:auto; font-weight:800; font-size:1.05rem; color:#fff}
.lic-no{font-family:ui-monospace,Consolas,monospace; font-size:.78rem; letter-spacing:.05em; color:#9fe9cf; margin-top:4px}
.lic-row{display:flex; justify-content:space-between; align-items:center; margin-top:10px; font-size:.6rem; letter-spacing:.14em; color:#8aa0b6; text-transform:uppercase}
.lic-status{display:inline-flex; align-items:center; gap:6px; color:#34d399}
.lic-status i{width:7px;height:7px;border-radius:50%; background:#34d399; box-shadow:0 0 8px #34d399; animation:dotPulse 1.6s ease-in-out infinite; display:inline-block}
@keyframes dotPulse{0%,100%{opacity:1}50%{opacity:.4}}
.lic-stripe{position:absolute; top:26px; left:0; right:0; height:38px; background:#05080d}
.lic-hologram{position:absolute; bottom:20px; right:18px; width:54px; height:34px; border-radius:7px;
  background:linear-gradient(120deg,#34d399,#22d3ee,#a78bfa,#34d399); background-size:200% 200%; opacity:.85; animation:holo 4s linear infinite}
@keyframes holo{to{background-position:200% 0}}

/* depth: secondary floating license cards */
.float-card{position:absolute; border-radius:13px; transform-style:preserve-3d; padding:13px;
  background:linear-gradient(135deg, rgba(16,40,40,.92), rgba(12,26,46,.92)); border:1px solid rgba(52,211,153,.22);
  box-shadow:0 26px 50px -22px rgba(0,0,0,.75); display:flex; flex-direction:column; gap:7px; justify-content:flex-end}
.fc-1{width:150px; height:96px; top:12%; right:12%; opacity:.85; animation:floatCardA 9s ease-in-out infinite}
.fc-2{width:124px; height:80px; top:22%; left:9%; opacity:.6; animation:floatCardB 11s ease-in-out infinite}
@keyframes floatCardA{0%,100%{transform:translateZ(-60px) translateY(0) rotateY(-20deg) rotateX(10deg)}50%{transform:translateZ(-60px) translateY(-15px) rotateY(-13deg) rotateX(10deg)}}
@keyframes floatCardB{0%,100%{transform:translateZ(-95px) translateY(0) rotateY(22deg) rotateX(9deg)}50%{transform:translateZ(-95px) translateY(13px) rotateY(28deg) rotateX(9deg)}}
.fc-key{width:18px; height:18px; border-radius:5px; background:linear-gradient(135deg,#34d399,#22d3ee); opacity:.9}
.fc-line{height:6px; border-radius:4px; background:rgba(148,163,184,.25)}
.fc-line:nth-of-type(2){width:72%}.fc-line:nth-of-type(3){width:48%}

.hero-content{position:relative; z-index:3; max-width:540px}
.hero-eyebrow{font-size:.72rem; font-weight:700; letter-spacing:.26em; text-transform:uppercase; color:var(--emerald); margin-bottom:16px}
.hero-title{font-size:clamp(1.7rem,2.5vw,2.7rem); font-weight:800; line-height:1.12; letter-spacing:-.02em; color:#fff; margin-bottom:26px}
.hero-points{list-style:none; display:flex; flex-direction:column; gap:14px; padding:0; margin:0}
.hero-points li{display:flex; align-items:center; gap:13px; color:#c3d0e0; font-size:.98rem}
.hero-points .bi{color:var(--emerald); font-size:1.2rem}

/* ── Right: sign-in panel ── */
.auth-panel{position:relative; display:flex; align-items:center; justify-content:center; padding:5vh 4vw; overflow-y:auto;
  background:rgba(9,14,24,.55); backdrop-filter:blur(16px) saturate(140%); -webkit-backdrop-filter:blur(16px) saturate(140%)}
.auth-form-wrap{width:100%; max-width:392px; animation:cardIn .6s cubic-bezier(.2,.8,.2,1) both}
.panel-brand{display:flex; align-items:center; gap:13px; margin-bottom:22px}
.brand-mark--sm{width:48px; height:48px; margin:0}
.panel-brand .brand-name{font-size:1.4rem; text-align:left}
.panel-brand .console-label{margin-top:6px}
.panel-heading{margin-bottom:20px}
.panel-heading h2{font-size:1.5rem; font-weight:800; color:#fff; letter-spacing:-.01em}
.panel-heading p{margin-top:5px; font-size:.9rem; color:var(--muted)}

@media (max-width:980px){
  .auth-body--split{overflow:auto}
  .auth-split{grid-template-columns:1fr}
  .auth-hero{display:none}
  .auth-panel{background:transparent; backdrop-filter:none; -webkit-backdrop-filter:none; min-height:100vh; padding:40px 18px}
}

@media (prefers-reduced-motion:reduce){
  .auth-body::before,.auth-body::after,.bg-aurora::before,.bg-aurora::after,
  .brand-mark::after,.login-card,.bg-grid,.particles i,
  .mark-svg,.mark-orbit,.mark-frame,.mark-check,.key-bow,.key-blade,.activation-pulse,
  .grid-floor,.license3d-inner,.lic-sheen,.lic-status i,.lic-hologram,.hero-orb,.float-card{animation:none !important}
  .particles{display:none}
  .mark-check,.key-bow,.key-blade{stroke-dashoffset:0 !important}
  .activation-pulse{display:none}
}