/* ADI Network Mapper — sign-in (Nocturne "split" design) */
:root{
  --bg:#0d0e1a; --text:#e9e9ed;
  --acc-300:#d2cefd; --acc-400:#b5abfc; --acc-500:#968ae0; --acc-600:#796cbf; --acc-700:#5d5294; --acc-800:#423a6a; --acc-900:#2b2741;
  --ok:#3ecf8e; --warn:#f5a524; --off:#f2555a;
  --t-gateway:#f5a524; --t-switch:#a855f7; --t-firewall:#f2555a; --t-server:#818cf8; --t-host:#2dd4bf; --t-pc:#3ecf8e;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--bg);color:var(--text);font-family:Inter,system-ui,Segoe UI,sans-serif;-webkit-font-smoothing:antialiased;overflow:hidden}
a{color:var(--acc-300);text-decoration:none}
a:hover{color:var(--acc-400)}
.hidden{display:none!important}
.msg{min-height:0;font-size:12.5px;margin:0;color:var(--acc-300)}
.msg:empty{display:none}
.msg.error{color:#ff9ba0}
.msg.success{color:#7ee2b4}
code{background:rgba(16,17,32,.7);padding:.1rem .35rem;border-radius:5px;font-size:11px}

.login-split{display:flex;height:100vh;width:100%}

/* ── left ambient topology ── */
.login-left{position:relative;flex:1 1 auto;overflow:hidden;min-width:0}
.ll-ground{position:absolute;inset:0;background:radial-gradient(1000px 660px at 40% 34%,#1f2340 0%,#14162a 55%,#0d0e1a 100%)}
.ll-grid{position:absolute;inset:0;background-image:radial-gradient(rgba(233,233,237,.055) 1px,transparent 1px);background-size:26px 26px;-webkit-mask-image:radial-gradient(70% 60% at 42% 40%,#000,transparent);mask-image:radial-gradient(70% 60% at 42% 40%,#000,transparent)}
.ll-haze{position:absolute;border-radius:50%;filter:blur(50px)}
.haze-a{width:440px;height:440px;left:8%;top:10%;background:rgba(145,132,217,.22);animation:haze 18s ease-in-out infinite}
.haze-b{width:520px;height:520px;right:6%;bottom:4%;background:rgba(45,212,191,.10);animation:haze 24s ease-in-out infinite reverse}
.ll-sweep{position:absolute;left:46%;top:30%;width:1500px;height:1500px;transform:translate(-50%,-50%);border-radius:50%;
  -webkit-mask:radial-gradient(circle,#000 0,#000 49%,transparent 50%);mask:radial-gradient(circle,#000 0,#000 49%,transparent 50%);
  background:conic-gradient(from 0deg,rgba(145,132,217,.14),transparent 22%,transparent 100%);animation:sweep 16s linear infinite;opacity:.6}
.ll-rings{position:absolute;left:42%;top:40%}
.ll-rings span{position:absolute;border:1px solid;border-radius:50%;transform:translate(-50%,-50%)}
.ll-rings span:nth-child(1){width:440px;height:330px;border-color:rgba(145,132,217,.09)}
.ll-rings span:nth-child(2){width:840px;height:630px;border-color:rgba(145,132,217,.06)}
.ll-rings span:nth-child(3){width:1280px;height:960px;border-color:rgba(145,132,217,.045)}
.ll-net{position:absolute;inset:0;width:100%;height:100%}
.ll-net path{vector-effect:non-scaling-stroke;fill:none}   /* keep strokes thin despite the stretched viewBox */
.ll-net .trunk{stroke:rgba(181,171,252,.40);stroke-width:1.1;stroke-dasharray:5 8;animation:dashflow 1.8s linear infinite}
.ll-net .leaf{stroke:rgba(233,233,237,.12);stroke-width:.8}
.ll-net .packet{stroke:var(--acc-300);stroke-width:1.8;stroke-linecap:round;stroke-dasharray:3 900;animation:packet 4s linear infinite}
.ll-nodes{position:absolute;inset:0}
.ll-node{position:absolute;border-radius:9px;transform:translate(-50%,-50%);display:grid;place-items:center;
  background:linear-gradient(160deg,currentColor,color-mix(in srgb,currentColor 62%,#0a0b14));
  box-shadow:0 0 22px color-mix(in srgb,currentColor 45%,transparent),0 4px 12px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.25)}
.ll-node svg{width:56%;height:56%;color:#12131c}
.ll-node.leaf{border-radius:50%;width:9px;height:9px;opacity:.9;box-shadow:0 0 12px color-mix(in srgb,currentColor 55%,transparent)}
.ll-scrim{position:absolute;inset:0;background:linear-gradient(90deg,rgba(13,14,26,.55),transparent 45%,rgba(13,14,26,.75))}

.ll-header{position:absolute;left:36px;right:30px;top:32px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;z-index:3}
.brandrow{display:flex;align-items:center;gap:12px}
.brandmark{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;flex:none;color:var(--acc-400);
  background:linear-gradient(160deg,#2b2741,#191830);border:1px solid var(--acc-700);box-shadow:0 0 18px rgba(145,132,217,.35);position:relative}
.brandmark::after{content:"";position:absolute;inset:0;border-radius:11px;box-shadow:0 0 0 2px rgba(145,132,217,.45);opacity:.5;animation:ringpulse 3s ease-out infinite}
.brandname{font-size:15px;font-weight:500}
.brandname span{opacity:.6}
.statuspill{display:flex;align-items:center;gap:8px;font-size:12px;color:rgba(233,233,237,.7);
  background:rgba(35,37,50,.66);backdrop-filter:blur(8px);border:1px solid rgba(233,233,237,.08);border-radius:9px;padding:6px 11px}
.statuspill .dot{width:6px;height:6px;border-radius:50%;background:var(--ok);animation:breathe 3s ease-in-out infinite}

.ll-market{position:absolute;left:36px;bottom:48px;max-width:460px;display:flex;flex-direction:column;gap:15px;z-index:3}
.ll-market .rule{width:22px;height:2px;background:var(--acc-400);border-radius:2px}
.ll-market .kicker{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--acc-400);font-weight:500}
.ll-market h1{margin:0;font-size:36px;line-height:1.16;letter-spacing:-.025em;font-weight:500}
.ll-market p{margin:0;font-size:13px;line-height:1.65;color:rgba(233,233,237,.5)}

/* ── right sign-in card ── */
.login-right{flex:0 0 452px;display:grid;place-items:center;padding:40px 46px;position:relative;
  background:linear-gradient(180deg,#14162a,#101120);box-shadow:inset 1px 0 0 rgba(233,233,237,.07)}
.login-right::before{content:"";position:absolute;left:0;top:12%;bottom:12%;width:1px;
  background:linear-gradient(to bottom,transparent,rgba(145,132,217,.4),transparent)}
.auth-card{position:relative;width:100%;max-width:328px;padding:28px;border-radius:16px;display:flex;flex-direction:column;gap:15px;
  background:linear-gradient(165deg,rgba(38,40,56,.92),rgba(18,20,34,.94));backdrop-filter:blur(16px);
  box-shadow:0 0 0 1px rgba(145,132,217,.22),0 30px 70px rgba(0,0,0,.6),inset 0 1px 0 rgba(233,233,237,.06);
  animation:fadeup .45s ease;max-height:96vh;overflow:auto}
/* one consistent rhythm inside the form so fields line up evenly */
.auth-form{display:flex;flex-direction:column;gap:15px}
.auth-card h2+.sub{margin-top:-8px}
.auth-card .lit-edge{position:absolute;left:22px;right:22px;top:0;height:1px;background:linear-gradient(to right,transparent,rgba(181,171,252,.75),transparent)}
.card-brand{width:48px;height:48px;border-radius:14px;margin:2px auto 0;display:grid;place-items:center;color:var(--acc-400);
  background:linear-gradient(160deg,#2b2741,#191830);border:1px solid var(--acc-700);box-shadow:0 0 20px rgba(145,132,217,.35);position:relative}
.card-brand::after{content:"";position:absolute;inset:0;border-radius:14px;box-shadow:0 0 0 2px rgba(145,132,217,.45);opacity:.5;animation:ringpulse 3s ease-out infinite}
.auth-card h2{margin:4px 0 0;text-align:center;font-size:21px;font-weight:500;letter-spacing:-.015em}
.auth-card .sub{margin:0;text-align:center;font-size:12.5px;line-height:1.55;color:rgba(233,233,237,.5)}

.fl{font-size:10.5px;font-weight:500;letter-spacing:.09em;text-transform:uppercase;color:rgba(233,233,237,.5);margin-bottom:6px;display:block}
.fl-row{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:6px}
.fl-row .forgot{font-size:11px;color:rgba(233,233,237,.45)}
.fl-row .forgot:hover{color:var(--acc-300)}
.field{margin:0}
.inp{position:relative;display:flex;align-items:center}
.inp .ico{position:absolute;left:11px;color:rgba(233,233,237,.35);display:flex;pointer-events:none}
.inp input{width:100%;padding:10px 34px 10px 33px;border-radius:9px;border:1px solid rgba(233,233,237,.10);
  background:rgba(16,17,32,.7);color:var(--text);font:400 13px Inter,sans-serif;outline:none;transition:box-shadow .18s,border-color .18s}
.inp input::placeholder{color:rgba(233,233,237,.3)}
.inp input:focus{border-color:var(--acc-600);box-shadow:0 0 0 1px var(--acc-600),0 0 22px rgba(145,132,217,.22)}
.inp .ok{position:absolute;right:11px;color:var(--ok);opacity:0;transition:opacity .18s}
.inp.valid .ok{opacity:1}
.inp .reveal{position:absolute;right:8px;width:auto;border:none;background:transparent;color:rgba(233,233,237,.4);cursor:pointer;padding:4px;display:flex}
.inp .reveal:hover{color:var(--text)}

.mfa-boxes{display:flex;gap:7px}
.mfa-boxes input{flex:1;min-width:0;text-align:center;padding:10px 0;border-radius:9px;border:1px solid rgba(233,233,237,.10);
  background:rgba(16,17,32,.7);color:var(--text);font:500 15px ui-monospace,Menlo,monospace;outline:none;transition:box-shadow .18s,border-color .18s}
.mfa-boxes input:focus{border-color:var(--acc-600);box-shadow:0 0 0 1px var(--acc-600)}

.signin{position:relative;overflow:hidden;width:100%;display:flex;align-items:center;justify-content:center;gap:8px;
  padding:11px;border-radius:10px;border:1px solid var(--acc-600);background:rgba(145,132,217,.10);color:var(--acc-300);
  font:500 13px Inter,sans-serif;cursor:pointer;box-shadow:0 0 26px rgba(145,132,217,.2);transition:box-shadow .25s,color .25s,border-color .25s}
.signin:hover{background:rgba(145,132,217,.16)}
.signin::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,transparent 38%,rgba(181,171,252,.22) 50%,transparent 62%);background-size:220% 100%;animation:shimmer 3.4s linear infinite}
.signin.ok{border-color:var(--ok);color:#7ee2b4;box-shadow:0 0 26px rgba(62,207,142,.22)}
.signin.busy{color:rgba(233,233,237,.6)}
.signin .spin{animation:spin 1s linear infinite;display:flex}

.or{display:flex;align-items:center;gap:10px;color:rgba(233,233,237,.35);font-size:11px}
.or span{flex:1;height:1px;background:linear-gradient(to right,transparent,rgba(233,233,237,.14),transparent)}
.secondary{width:100%;display:flex;align-items:center;justify-content:center;gap:8px;padding:10px;border-radius:10px;
  border:1px solid rgba(233,233,237,.12);background:transparent;color:rgba(233,233,237,.7);font:500 12.5px Inter,sans-serif;cursor:pointer;transition:border-color .18s,box-shadow .18s,color .18s}
.secondary:hover{border-color:var(--acc-600);color:var(--acc-300);box-shadow:0 0 18px rgba(145,132,217,.16)}

.keep{display:flex;align-items:center;gap:8px;font-size:12px;color:rgba(233,233,237,.6)}
.keep input{accent-color:var(--acc);accent-color:#9184d9}
.keep .dev{margin-left:auto;font-size:11px;color:rgba(233,233,237,.35)}
.noacct{margin:0;text-align:center;font-size:12px;color:rgba(233,233,237,.45)}
.foot{margin:0;display:flex;align-items:center;justify-content:center;gap:6px;font-size:10px;color:rgba(233,233,237,.26)}

.hr{border:none;border-top:1px solid rgba(233,233,237,.10);margin:4px 0}
.setup-h{margin:0;font-size:14px;font-weight:500}
.muted-note{margin:0;font-size:11.5px;color:rgba(233,233,237,.5);line-height:1.5}
.qr{width:170px;height:170px;background:#fff;padding:8px;border-radius:10px;display:block;margin:8px auto}
#mfaSetup{display:flex;flex-direction:column;gap:12px}
#mfaSetup .field{display:flex;flex-direction:column;gap:0}

@keyframes haze{0%,100%{transform:translate(0,0)}50%{transform:translate(30px,-24px)}}
@keyframes sweep{to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes dashflow{to{stroke-dashoffset:-26}}
@keyframes packet{to{stroke-dashoffset:-903}}
@keyframes ringpulse{0%{transform:scale(1);opacity:.5}100%{transform:scale(1.6);opacity:0}}
@keyframes breathe{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes fadeup{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes shimmer{to{background-position:-220% 0}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes float0{0%,100%{transform:translate(-50%,-50%)}50%{transform:translate(-50%,-58%)}}
@keyframes float1{0%,100%{transform:translate(-50%,-50%)}50%{transform:translate(-42%,-50%)}}
@keyframes float2{0%,100%{transform:translate(-50%,-50%)}50%{transform:translate(-58%,-44%)}}

@media (prefers-reduced-motion: reduce){
  .ll-sweep,.ll-haze,.ll-net .trunk,.ll-net .packet,.brandmark::after,.card-brand::after,.statuspill .dot,.signin::after,.ll-node{animation:none!important}
}
@media (max-width: 900px){
  body{overflow:auto}
  .login-split{flex-direction:column;height:auto;min-height:100vh}
  .login-left{display:none}
  .login-right{flex:1 1 auto;padding:32px 20px}
}

/* ---- "Secured by CrowdSec" badge (login: fixed bottom-centre) ---- */
.cs-badge { display: inline-flex; align-items: center; gap: 7px; text-decoration: none;
  font-family: Inter, sans-serif; font-size: 12px; color: rgba(233,233,237,.55);
  opacity: .85; transition: opacity .15s ease; }
.cs-badge:hover { opacity: 1; }
.cs-badge img { width: 20px; height: 20px; display: block; }
.cs-badge b { font-weight: 600; color: rgba(233,233,237,.78); }
.cs-badge-login { position: fixed; left: 50%; transform: translateX(-50%); bottom: 20px; }