:root{
  --portal-navy:#07172f;
  --portal-navy-deep:#041023;
  --portal-navy-soft:#10284a;
  --portal-purple:#7656d8;
  --portal-purple-strong:#6244c3;
  --portal-blue:#1976d2;
  --portal-cyan:#2bb6c8;
  --portal-ink:#14213a;
  --portal-muted:#5d6b82;
  --portal-line:#d9e0ea;
  --portal-surface:#f7f9fc;
  --portal-white:#ffffff;
  --portal-danger:#b4233a;
  --portal-danger-soft:#fff1f3;
  --portal-focus:rgba(98,68,195,.22);
}

*{box-sizing:border-box}
html{min-width:320px;min-height:100%;background:var(--portal-navy)}
body{margin:0;min-width:320px;min-height:100vh;min-height:100svh;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;letter-spacing:0}
button,input{font:inherit;letter-spacing:0}
button,a,input{-webkit-tap-highlight-color:transparent}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}

.portal-login{color:var(--portal-ink);background:var(--portal-navy);overflow-x:hidden}
.portal-login__layout{min-height:100vh;min-height:100svh;display:grid;grid-template-columns:minmax(0,55fr) minmax(430px,45fr);isolation:isolate}

.portal-network{
  position:relative;
  min-width:0;
  min-height:100vh;
  min-height:100svh;
  overflow:hidden;
  color:#f7faff;
  background:
    linear-gradient(138deg,rgba(43,182,200,.13),transparent 30%),
    linear-gradient(35deg,transparent 42%,rgba(118,86,216,.18) 78%,transparent),
    linear-gradient(155deg,var(--portal-navy-soft),var(--portal-navy) 52%,var(--portal-navy-deep));
}
.portal-network::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(90deg,transparent 70%,rgba(247,249,252,.05));
}
.portal-network__field{
  position:absolute;
  inset:0;
  opacity:.56;
  background-image:
    linear-gradient(rgba(166,187,220,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(166,187,220,.055) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:linear-gradient(125deg,rgba(0,0,0,.84),rgba(0,0,0,.22) 78%,transparent);
}
.portal-network__topline{position:absolute;top:34px;left:clamp(30px,4vw,66px);z-index:3;display:flex;align-items:center;gap:7px}
.portal-network__topline span{display:block;width:6px;height:6px;border-radius:50%;background:#51698e}
.portal-network__topline span:nth-child(2){background:var(--portal-purple)}
.portal-network__topline span:nth-child(3){width:34px;border-radius:2px;background:linear-gradient(90deg,var(--portal-cyan),transparent)}

.portal-network__scene{position:absolute;inset:5% 2% 22%;min-height:430px;transform:translateZ(0)}
.portal-network__routes{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.portal-network__route,.portal-network__pulse{fill:none;stroke-linecap:round;vector-effect:non-scaling-stroke}
.portal-network__route{stroke:url(#portalRoute);stroke-width:1.4;opacity:.74}
.portal-network__pulse{stroke:#6ae2ee;stroke-width:2.4;stroke-dasharray:10 560;filter:drop-shadow(0 0 7px rgba(84,214,227,.7));animation:portalRoutePulse 5.4s linear infinite}
.portal-network__pulse--two{animation-delay:-1.1s}
.portal-network__pulse--three{animation-delay:-2.2s}
.portal-network__pulse--four{animation-delay:-3.3s}
.portal-network__pulse--five{animation-delay:-4.4s}

.portal-network__core{
  position:absolute;
  top:49%;
  left:50%;
  width:clamp(250px,27vw,390px);
  aspect-ratio:12/5;
  display:grid;
  place-items:center;
  transform:translate(-50%,-50%);
  animation:portalCoreIn .72s cubic-bezier(.2,.78,.2,1) both;
}
.portal-network__core-ring{
  position:absolute;
  inset:-36% -14%;
  border:1px solid rgba(125,104,224,.26);
  clip-path:polygon(13% 0,87% 0,100% 50%,87% 100%,13% 100%,0 50%);
  box-shadow:inset 0 0 42px rgba(52,183,202,.07);
}
.portal-network__core-ring::before,.portal-network__core-ring::after{content:"";position:absolute;inset:12%;border:1px solid rgba(69,198,213,.15);clip-path:inherit}
.portal-network__core-ring::after{inset:25%;border-color:rgba(141,112,230,.19)}
.portal-network__logo-reveal{position:relative;z-index:2;display:block;width:92%;overflow:hidden;clip-path:inset(0 100% 0 0);animation:portalLogoReveal .82s cubic-bezier(.2,.72,.2,1) .18s forwards}
.portal-network__logo-reveal img{display:block;width:100%;height:auto;filter:drop-shadow(0 18px 32px rgba(0,0,0,.32))}
.portal-network__beam{position:absolute;z-index:3;left:2%;width:96%;height:2px;opacity:0;background:linear-gradient(90deg,transparent,var(--portal-cyan) 38%,#bdaaf5 62%,transparent);box-shadow:0 0 15px rgba(72,210,224,.55);animation:portalBeam 1s ease-out .34s both}

.portal-node{position:absolute;z-index:2;min-width:112px;display:grid;grid-template-columns:12px auto;column-gap:9px;align-items:center;color:#f6f9ff;transition:transform .45s cubic-bezier(.2,.72,.2,1),opacity .35s ease;animation:portalNodeIn .5s ease-out both}
.portal-node__signal{grid-row:1 / span 2;width:9px;height:9px;border:2px solid #77dce6;border-radius:50%;box-shadow:0 0 0 5px rgba(43,182,200,.08),0 0 16px rgba(43,182,200,.35)}
.portal-node strong{font-size:13px;line-height:1.2;font-weight:760}
.portal-node small{color:#9fb0c9;font-size:10px;line-height:1.2;font-weight:680;text-transform:uppercase}
.portal-node--products{top:17%;left:11%;animation-delay:.36s}
.portal-node--sales{top:48%;left:7%;animation-delay:.44s}
.portal-node--service{left:14%;bottom:12%;animation-delay:.52s}
.portal-node--finance{top:18%;right:7%;animation-delay:.60s}
.portal-node--suppliers{right:6%;bottom:13%;animation-delay:.68s}

.portal-network__copy{position:absolute;left:clamp(30px,5vw,82px);right:clamp(30px,5vw,82px);bottom:clamp(34px,5vh,64px);z-index:4;max-width:600px}
.portal-network__eyebrow{display:inline-flex;align-items:center;gap:9px;margin-bottom:14px;color:#8adbe4;font-size:11px;font-weight:780;text-transform:uppercase}
.portal-network__eyebrow::before{content:"";width:22px;height:2px;background:linear-gradient(90deg,var(--portal-cyan),var(--portal-purple))}
.portal-network__copy h2{margin:0;color:#fff;font-size:clamp(29px,3.2vw,50px);font-weight:650;line-height:1.03}
.portal-network__copy h2 em{color:#baa7f2;font-style:normal;font-weight:720}
.portal-network__copy p{max-width:520px;margin:14px 0 0;color:#b6c4d9;font-size:clamp(13px,1.15vw,16px);font-weight:520;line-height:1.55}

.portal-access{
  position:relative;
  z-index:5;
  min-width:0;
  min-height:100vh;
  min-height:100svh;
  display:grid;
  place-items:center;
  overflow-y:auto;
  background:
    linear-gradient(155deg,rgba(118,86,216,.035),transparent 34%),
    var(--portal-surface);
  box-shadow:-18px 0 52px rgba(2,12,28,.24);
}
.portal-access::before{content:"";position:absolute;inset:0 auto 0 0;width:1px;background:linear-gradient(transparent,rgba(88,72,177,.42) 24%,rgba(43,182,200,.42) 70%,transparent)}
.portal-access__inner{width:min(440px,calc(100% - 72px));padding:clamp(28px,5vh,58px) 0;animation:portalFormIn .48s cubic-bezier(.2,.72,.2,1) .06s both}
.portal-access__brand{width:max-content;display:inline-flex;align-items:center;gap:10px;color:var(--portal-ink);text-decoration:none}
.portal-access__brand img{width:34px;height:34px;object-fit:contain;filter:drop-shadow(0 8px 14px rgba(51,42,110,.16))}
.portal-access__brand span{font-size:19px;font-weight:760;line-height:1}
.portal-access__brand strong{color:var(--portal-purple-strong)}
.portal-access__brand:focus-visible{outline:3px solid var(--portal-focus);outline-offset:4px;border-radius:4px}

.portal-access__header{margin-top:clamp(26px,4vh,44px)}
.portal-access__mode{display:inline-flex;align-items:center;min-height:26px;padding:4px 10px;border:1px solid #d7d1f2;border-radius:4px;color:#5d45ae;background:#f0edfb;font-size:11px;font-weight:780;text-transform:uppercase}
.portal-access__header h1{margin:13px 0 7px;color:var(--portal-ink);font-size:clamp(30px,2.5vw,40px);font-weight:760;line-height:1.06}
.portal-access__header p{margin:0;color:var(--portal-muted);font-size:14px;font-weight:520;line-height:1.5}

.portal-auth-messages{min-height:58px;padding-top:12px}
.portal-auth-alert{min-height:46px;display:grid;grid-template-columns:20px minmax(0,1fr);gap:10px;align-items:center;padding:10px 12px;border:1px solid #f2b8c1;border-radius:6px;color:#8f1d31;background:var(--portal-danger-soft);font-size:13px;font-weight:650;line-height:1.35}
.portal-auth-alert svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

.portal-form{display:grid;gap:14px}
.portal-form--operator{gap:11px}
.portal-field{display:grid;gap:7px;min-width:0}
.portal-field label{color:#2f3d54;font-size:12px;font-weight:720;line-height:1.3}
.portal-control{position:relative;height:52px;display:grid;grid-template-columns:22px minmax(0,1fr);align-items:center;gap:10px;padding:0 14px;border:1px solid #cfd7e3;border-radius:7px;background:#fff;box-shadow:0 1px 2px rgba(13,31,59,.035);transition:border-color .16s ease,box-shadow .16s ease,background-color .16s ease}
.portal-control--password{grid-template-columns:22px minmax(0,1fr) 40px;padding-right:6px}
.portal-control:focus-within{border-color:var(--portal-purple-strong);box-shadow:0 0 0 4px var(--portal-focus),0 8px 22px rgba(34,37,96,.06);background:#fff}
.portal-control:has(input[aria-invalid="true"]){border-color:#d45b70}
.portal-control__icon{width:20px;height:20px;fill:none;stroke:#77869b;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:stroke .16s ease,transform .16s ease}
.portal-control:focus-within .portal-control__icon{stroke:var(--portal-purple-strong);transform:translateY(-1px)}
.portal-control input{width:100%;min-width:0;height:100%;padding:0;border:0;outline:0;color:var(--portal-ink);background:transparent;font-size:15px;font-weight:580;caret-color:var(--portal-purple-strong)}
.portal-control input::placeholder{color:#8a96a8}
.portal-control input:-webkit-autofill{-webkit-text-fill-color:var(--portal-ink);-webkit-box-shadow:0 0 0 1000px #fff inset;transition:background-color 9999s ease-out}
.portal-password-toggle{width:40px;height:40px;display:grid;place-items:center;padding:0;border:0;border-radius:5px;color:#65748b;background:transparent;cursor:pointer;transition:color .16s ease,background-color .16s ease}
.portal-password-toggle:hover{color:var(--portal-purple-strong);background:#f1eefb}
.portal-password-toggle:focus-visible{outline:3px solid var(--portal-focus);outline-offset:0}
.portal-password-toggle svg{grid-area:1/1;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:opacity .16s ease,transform .16s ease}
.portal-password-toggle__hide{opacity:0;transform:scale(.82)}
.portal-password-toggle[data-state="visible"] .portal-password-toggle__show{opacity:0;transform:scale(.82)}
.portal-password-toggle[data-state="visible"] .portal-password-toggle__hide{opacity:1;transform:scale(1)}
.portal-caps-lock{width:max-content;max-width:100%;margin-top:-1px;padding:4px 7px;border-radius:3px;color:#7a4c00;background:#fff4d8;font-size:11px;font-weight:700}

.portal-form__options{min-height:24px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.portal-check{display:inline-grid;grid-template-columns:18px auto;gap:9px;align-items:center;position:relative;color:#536178;font-size:13px;cursor:pointer}
.portal-check input{position:absolute;width:1px;height:1px;opacity:0}
.portal-check > span{width:18px;height:18px;display:grid;place-items:center;border:1px solid #bbc6d5;border-radius:4px;background:#fff;transition:border-color .16s ease,background-color .16s ease,box-shadow .16s ease}
.portal-check > span::after{content:"";width:8px;height:4px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:translateY(-1px) rotate(-45deg) scale(0);transition:transform .14s ease}
.portal-check input:checked + span{border-color:var(--portal-purple-strong);background:var(--portal-purple-strong)}
.portal-check input:checked + span::after{transform:translateY(-1px) rotate(-45deg) scale(1)}
.portal-check input:focus-visible + span{box-shadow:0 0 0 4px var(--portal-focus)}
.portal-check b{font-weight:600}

.portal-submit{width:100%;height:52px;display:flex;align-items:center;justify-content:center;gap:10px;padding:0 18px;border:0;border-radius:7px;color:#fff;background:linear-gradient(105deg,var(--portal-purple-strong),#6d58d5 46%,var(--portal-blue));box-shadow:0 12px 28px rgba(87,67,181,.22);font-size:15px;font-weight:760;cursor:pointer;transform:translateZ(0);transition:transform .16s ease,box-shadow .16s ease,filter .16s ease}
.portal-submit svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .16s ease}
.portal-submit:hover{transform:translateY(-1px);box-shadow:0 15px 32px rgba(77,57,175,.28);filter:saturate(1.06)}
.portal-submit:hover svg{transform:translateX(2px)}
.portal-submit:active{transform:translateY(1px);box-shadow:0 7px 18px rgba(77,57,175,.22)}
.portal-submit:focus-visible{outline:3px solid rgba(25,118,210,.28);outline-offset:3px}
.portal-submit:disabled{cursor:wait;opacity:1;background:linear-gradient(105deg,#5a48ae,#586ac8);box-shadow:0 8px 20px rgba(77,57,175,.16)}
.portal-submit:disabled svg{animation:portalSubmitArrow .7s ease-in-out infinite alternate}

.portal-access__alternate{min-height:28px;display:flex;align-items:center;justify-content:center;gap:6px;padding-top:2px;color:#6b778b;font-size:12px;line-height:1.4;text-align:center}
.portal-access__alternate a{color:#5d45ae;font-weight:720;text-decoration:none}
.portal-access__alternate a:hover{text-decoration:underline}
.portal-access__alternate a:focus-visible{outline:3px solid var(--portal-focus);outline-offset:3px;border-radius:3px}

.is-validating-access .portal-network__pulse{animation-duration:.7s;animation-direction:reverse}
.is-validating-access .portal-network__core{filter:brightness(1.1);transform:translate(-50%,-50%) scale(1.025)}
.is-validating-access .portal-network__core-ring{border-color:rgba(101,218,228,.58);box-shadow:inset 0 0 44px rgba(90,76,194,.16),0 0 36px rgba(43,182,200,.12)}
.is-validating-access .portal-node--products{transform:translate(78%,72%) scale(.82);opacity:.18}
.is-validating-access .portal-node--sales{transform:translate(100%,0) scale(.82);opacity:.18}
.is-validating-access .portal-node--service{transform:translate(75%,-70%) scale(.82);opacity:.18}
.is-validating-access .portal-node--finance{transform:translate(-78%,68%) scale(.82);opacity:.18}
.is-validating-access .portal-node--suppliers{transform:translate(-78%,-68%) scale(.82);opacity:.18}
.portal-form.is-error-visible{animation:portalAuthError .24s ease-out both}

@keyframes portalRoutePulse{to{stroke-dashoffset:-570}}
@keyframes portalCoreIn{from{opacity:0;transform:translate(-50%,-50%) scale(.94)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes portalLogoReveal{0%{opacity:0;clip-path:inset(0 100% 0 0)}14%{opacity:1}100%{opacity:1;clip-path:inset(0 0 0 0)}}
@keyframes portalBeam{0%{opacity:0;transform:translateX(-42%)}38%{opacity:1}100%{opacity:0;transform:translateX(42%)}}
@keyframes portalNodeIn{from{opacity:0;filter:blur(2px)}to{opacity:1;filter:blur(0)}}
@keyframes portalFormIn{from{opacity:0;transform:translate3d(0,12px,0)}to{opacity:1;transform:translate3d(0,0,0)}}
@keyframes portalSubmitArrow{from{transform:translateX(-2px);opacity:.58}to{transform:translateX(3px);opacity:1}}
@keyframes portalAuthError{0%,100%{transform:translateX(0)}30%{transform:translateX(-4px)}65%{transform:translateX(3px)}}

@media(max-width:1120px){
  .portal-login__layout{grid-template-columns:minmax(0,52fr) minmax(420px,48fr)}
  .portal-node--products{left:7%}.portal-node--sales{left:3%}.portal-node--service{left:9%}.portal-node--finance{right:3%}.portal-node--suppliers{right:2%}
}

@media(max-width:900px){
  .portal-login{overflow-x:hidden;overflow-y:auto}
  .portal-login__layout{min-height:100svh;display:grid;grid-template-columns:1fr;grid-template-rows:220px minmax(0,1fr)}
  .portal-network{min-height:220px;height:220px}
  .portal-network__topline{top:20px;left:22px}
  .portal-network__scene{inset:0 4% 0 44%;min-height:0}
  .portal-network__core{top:49%;width:min(310px,49vw)}
  .portal-network__core-ring{inset:-25% -10%}
  .portal-network__routes{opacity:.74}
  .portal-node{display:none}
  .portal-network__copy{left:24px;right:52%;bottom:24px;max-width:none}
  .portal-network__eyebrow{margin-bottom:8px;font-size:10px}
  .portal-network__copy h2{font-size:clamp(24px,4.8vw,34px)}
  .portal-network__copy p{display:none}
  .portal-access{min-height:calc(100svh - 220px);place-items:start center;overflow:visible;box-shadow:0 -14px 38px rgba(2,12,28,.18)}
  .portal-access::before{inset:0 0 auto;width:auto;height:1px;background:linear-gradient(90deg,transparent,rgba(88,72,177,.42),rgba(43,182,200,.42),transparent)}
  .portal-access__inner{width:min(480px,calc(100% - 48px));padding:34px 0 38px}
  .portal-access__header{margin-top:24px}
}

@media(max-width:560px){
  .portal-login__layout{grid-template-rows:184px minmax(0,1fr)}
  .portal-network{min-height:184px;height:184px}
  .portal-network__scene{inset:10px -8% 4px 34%}
  .portal-network__core{width:min(270px,64vw)}
  .portal-network__copy{left:20px;right:46%;bottom:20px}
  .portal-network__eyebrow{max-width:160px;line-height:1.3}
  .portal-network__copy h2{font-size:23px;line-height:1.08}
  .portal-access{min-height:calc(100svh - 184px)}
  .portal-access__inner{width:calc(100% - 36px);padding:26px 0 34px}
  .portal-access__brand img{width:30px;height:30px}
  .portal-access__brand span{font-size:18px}
  .portal-access__header{margin-top:20px}
  .portal-access__header h1{margin-top:11px;font-size:29px}
  .portal-auth-messages{min-height:54px;padding-top:10px}
  .portal-form{gap:12px}
  .portal-form--operator{gap:10px}
  .portal-control,.portal-submit{height:50px}
  .portal-access__alternate{flex-wrap:wrap}
}

@media(max-height:760px) and (min-width:901px){
  .portal-access__inner{padding:22px 0}
  .portal-access__header{margin-top:20px}
  .portal-access__header h1{font-size:31px;margin-top:10px}
  .portal-auth-messages{min-height:50px;padding-top:8px}
  .portal-form{gap:10px}
  .portal-form--operator{gap:8px}
  .portal-control,.portal-submit{height:48px}
  .portal-network__scene{inset:2% 1% 22%}
  .portal-network__copy{bottom:28px}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .portal-network__pulse{display:none}
  .portal-network__logo-reveal{clip-path:none;opacity:1}
  .portal-network__beam{display:none}
  .is-validating-access .portal-node{transform:none;opacity:.48}
  .portal-submit:disabled svg{animation:none}
}
