@property --login-trace-angle{
  syntax:"<angle>";
  inherits:false;
  initial-value:0deg;
}

body.login-bg{
  min-height:100vh;
  position:relative;
  overflow:hidden;
}

body.login-bg::before{
  content:"";
  position:fixed;
  inset:0;
  background:var(--login-bg-image) center / cover no-repeat;
  filter: brightness(0.82) saturate(0.85) contrast(0.95);
  transform: scale(1.03);
  z-index:-4;
}

body.login-bg::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:-3;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 49%, rgba(255,255,255,.05), transparent 18%),
    linear-gradient(90deg, rgba(2, 132, 199, .18), transparent 24%, transparent 76%, rgba(14, 165, 233, .14)),
    linear-gradient(180deg, rgba(15, 23, 42, .06), rgba(15, 23, 42, .28));
}

.dcc-login-effects{
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  overflow:hidden;
}

.dcc-login-canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:.84;
}

.dcc-login-effects.is-paused,
.dcc-login-effects.is-paused *{
  animation-play-state:paused !important;
}

.dcc-login-effects::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 50% 42%, rgba(15, 23, 42, .06), transparent 28%),
    linear-gradient(180deg, rgba(15, 23, 42, .06), rgba(15, 23, 42, .24));
}

.dcc-login-effects::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.08) 0, rgba(255,255,255,.08) 1px, transparent 1px, transparent 7px);
  opacity:.15;
  mix-blend-mode:soft-light;
  animation: loginScanlines 18s linear infinite;
}

.dcc-login-grid{
  position:absolute;
  inset:-12%;
  background:
    linear-gradient(90deg, rgba(255,255,255,.16) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255,255,255,.12) 1px, transparent 1px);
  background-size: 72px 72px;
  opacity:.26;
  transform: perspective(700px) rotateX(58deg) translateY(18%);
  transform-origin:center bottom;
  animation: loginGridDrift 28s linear infinite;
}

.dcc-login-sweep{
  position:absolute;
  inset:-35%;
  background:linear-gradient(112deg, transparent 41%, rgba(34, 211, 238, .34) 48%, rgba(245, 158, 11, .28) 51%, rgba(224, 242, 254, .24) 54%, transparent 61%);
  transform:translateX(-45%);
  filter:blur(.2px);
  animation: loginSweep 9s cubic-bezier(.2,.8,.2,1) infinite;
}

.dcc-login-portal{
  position:absolute;
  left:50%;
  top:50%;
  width:min(760px, 90vw);
  aspect-ratio:1;
  transform:translate(-50%, -50%);
  filter:drop-shadow(0 0 22px rgba(14, 165, 233, .2));
}

.dcc-login-portal-ring,
.dcc-login-portal-core{
  position:absolute;
  inset:0;
  border-radius:999px;
}

.dcc-login-portal-ring-a{
  border:1px solid rgba(224, 242, 254, .42);
  background:
    conic-gradient(from 0deg, transparent 0 18deg, rgba(34, 211, 238, .76) 18deg 24deg, transparent 24deg 82deg, rgba(245, 158, 11, .7) 82deg 88deg, transparent 88deg 145deg, rgba(224, 242, 254, .54) 145deg 152deg, transparent 152deg 360deg);
  mask:radial-gradient(circle, transparent 63%, #000 64%, #000 65%, transparent 66%);
  animation: loginPortalSpin 24s linear infinite;
}

.dcc-login-portal-ring-b{
  inset:12%;
  border:1px dashed rgba(125, 211, 252, .42);
  background:conic-gradient(from 180deg, rgba(34, 211, 238, .18), transparent 22%, rgba(245, 158, 11, .16), transparent 48%, rgba(224, 242, 254, .12), transparent 74%);
  mask:radial-gradient(circle, transparent 55%, #000 56%, #000 59%, transparent 60%);
  animation: loginPortalSpin 18s linear infinite reverse;
}

.dcc-login-portal-core{
  inset:30%;
  border:1px solid rgba(224, 242, 254, .32);
  background:radial-gradient(circle, rgba(34, 211, 238, .22), rgba(245, 158, 11, .08) 36%, transparent 68%);
  animation: loginPortalCore 6.5s ease-in-out infinite;
}

.dcc-login-beam{
  position:absolute;
  left:50%;
  width:min(860px, 94vw);
  height:2px;
  transform:translateX(-50%);
  background:linear-gradient(90deg, transparent, rgba(224, 242, 254, .2), rgba(34, 211, 238, .9), rgba(245, 158, 11, .84), rgba(224, 242, 254, .28), transparent);
  box-shadow:0 0 14px rgba(34, 211, 238, .36), 0 0 26px rgba(245, 158, 11, .12);
  opacity:0;
}

.dcc-login-beam-a{
  top:42%;
  animation: loginBeam 8s ease-in-out .5s infinite;
}

.dcc-login-beam-b{
  top:58%;
  animation: loginBeam 9s ease-in-out 2.1s infinite reverse;
}

.dcc-login-orbit{
  position:absolute;
  width:min(620px, 76vw);
  aspect-ratio:1;
  border:1px solid rgba(224, 242, 254, .34);
  border-radius:999px;
  box-shadow: inset 0 0 18px rgba(14, 165, 233, .08), 0 0 26px rgba(14, 165, 233, .1);
}

.dcc-login-orbit::before{
  content:"";
  position:absolute;
  width:9px;
  height:9px;
  border-radius:999px;
  background:#fbbf24;
  box-shadow:0 0 12px rgba(251, 191, 36, .62);
  top:18%;
  left:18%;
}

.dcc-login-orbit-a{
  left:calc(50% - 310px);
  top:calc(50% - 310px);
  animation: loginOrbitPulse 9s ease-in-out infinite;
}

.dcc-login-orbit-b{
  width:min(430px, 58vw);
  left:calc(50% - 215px);
  top:calc(50% - 215px);
  border-color:rgba(125, 211, 252, .25);
  animation: loginOrbitPulse 10s ease-in-out 1.1s infinite reverse;
}

.dcc-login-route{
  position:absolute;
  height:2px;
  width:38vw;
  max-width:560px;
  background:linear-gradient(90deg, transparent, rgba(224, 242, 254, .64), rgba(251, 191, 36, .72), transparent);
  opacity:.6;
  filter:drop-shadow(0 0 8px rgba(14, 165, 233, .28));
}

.dcc-login-route-a{
  left:5vw;
  top:32vh;
  transform:rotate(-8deg);
  animation: loginRoute 8s ease-in-out infinite;
}

.dcc-login-route-b{
  right:4vw;
  bottom:28vh;
  transform:rotate(9deg);
  animation: loginRoute 9s ease-in-out 1.2s infinite reverse;
}

.dcc-login-node{
  position:absolute;
  width:10px;
  height:10px;
  border-radius:999px;
  background:#e0f2fe;
  box-shadow:0 0 0 5px rgba(224, 242, 254, .1), 0 0 14px rgba(14, 165, 233, .58);
  animation: loginNodeBlink 6s ease-in-out infinite;
}

.dcc-login-node-a{ left:18vw; top:24vh; }
.dcc-login-node-b{ right:21vw; top:23vh; animation-delay:.8s; background:#fbbf24; box-shadow:0 0 0 5px rgba(251, 191, 36, .1), 0 0 14px rgba(251, 191, 36, .58); }
.dcc-login-node-c{ left:26vw; bottom:24vh; animation-delay:1.5s; }
.dcc-login-node-d{ right:17vw; bottom:19vh; animation-delay:2.1s; }

.dcc-login-status{
  position:absolute;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(15, 23, 42, .24);
  color:rgba(248, 250, 252, .8);
  backdrop-filter:none;
  border-radius:6px;
  padding:7px 10px;
  font-size:11px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  text-shadow:0 1px 4px rgba(0,0,0,.24);
  animation: loginStatusFloat 9s ease-in-out infinite;
}

.dcc-login-status-a{ left:8vw; bottom:14vh; }
.dcc-login-status-b{ right:8vw; top:17vh; animation-delay:1.7s; }

.login-shell{
  position:relative;
  z-index:2;
  min-height:100vh;
  padding:24px;
}

.login-orb{
  position:fixed;
  top:clamp(20px, 2.8vw, 44px);
  left:clamp(20px, 2.8vw, 44px);
  width:88px;
  height:88px;
  padding:0;
  border:none;
  border-radius:999px;
  background:transparent;
  z-index:5;
  display:grid;
  place-items:center;
  cursor:pointer;
  outline:none;
  transform-origin:center center;
  transition:transform .25s cubic-bezier(.16,1,.3,1), opacity .25s ease;
  filter:drop-shadow(0 0 20px rgba(14,165,233,.18));
}

.login-orb-caption{
  position:fixed;
  top:calc(clamp(20px, 2.8vw, 44px) + 102px);
  left:clamp(20px, 2.8vw, 44px);
  width:132px;
  z-index:5;
  padding:6px 10px;
  color:rgba(248, 250, 252, .80);
  font-size:9px;
  line-height:1;
  font-weight:700;
  letter-spacing:.10em;
  text-transform:uppercase;
  text-align:center;
  text-shadow:0 1px 2px rgba(15, 23, 42, .36);
  pointer-events:none;
  opacity:.88;
  transition:opacity .25s ease, transform .25s cubic-bezier(.16,1,.3,1), border-color .25s ease, background-color .25s ease;
  transform:translateX(calc(-50% + 44px)) translateY(0);
  border-radius:999px;
  background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(15, 23, 42, .18));
  border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(14px) saturate(1.12);
  -webkit-backdrop-filter:blur(14px) saturate(1.12);
  box-shadow:
    0 12px 28px rgba(15, 23, 42, .16),
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 -1px 0 rgba(255,255,255,.05);
}

.login-clock{
  position:fixed;
  left:50%;
  top:50%;
  z-index:1;
  min-width:240px;
  transform:translate(-50%, -50%) scale(1);
  color:#e0f2fe;
  font-variant-numeric:tabular-nums;
  font-family:"SFMono-Regular", "Consolas", "Liberation Mono", monospace;
  text-align:center;
  text-shadow:
    0 0 18px rgba(34, 211, 238, .24),
    0 0 42px rgba(14, 165, 233, .18);
  pointer-events:none;
  overflow:hidden;
  opacity:.92;
  transition:
    opacity .78s cubic-bezier(.16,1,.3,1),
    transform .78s cubic-bezier(.16,1,.3,1),
    filter .78s cubic-bezier(.16,1,.3,1);
  filter:blur(0);
  mix-blend-mode:screen;
  will-change:opacity, transform, filter;
}

.login-clock::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, transparent 0, transparent 47%, rgba(34, 211, 238, .14) 49%, rgba(255,255,255,.06) 50%, rgba(14,165,233,.14) 51%, transparent 53%, transparent 100%);
  opacity:.22;
  pointer-events:none;
  animation: loginClockSweep 4.2s linear infinite;
}

.login-clock::before{
  content:"";
  position:absolute;
  left:50%;
  top:calc(50% - 8px);
  width:1px;
  height:112px;
  transform:translateX(-50%);
  background:linear-gradient(180deg, transparent, rgba(34, 211, 238, .42), rgba(255,255,255,.18), rgba(14, 165, 233, .54), transparent);
  opacity:.72;
  z-index:0;
  filter:blur(.1px);
  box-shadow:0 0 18px rgba(14,165,233,.18);
}

.login-clock-time{
  position:relative;
  display:block;
  font-size:28px;
  font-weight:900;
  line-height:1;
  letter-spacing:.26em;
  color:#f8fbff;
  text-shadow:
    0 0 24px rgba(34, 211, 238, .26),
    0 0 62px rgba(14, 165, 233, .12);
  transition:opacity .42s cubic-bezier(.16,1,.3,1), transform .42s cubic-bezier(.16,1,.3,1);
}

.login-clock-date{
  position:relative;
  display:block;
  margin-top:8px;
  color:rgba(186, 230, 253, .92);
  font-size:10px;
  font-weight:800;
  line-height:1;
  letter-spacing:.24em;
  text-transform:uppercase;
  transition:opacity .48s cubic-bezier(.16,1,.3,1), transform .48s cubic-bezier(.16,1,.3,1);
}

.login-clock-time::after,
.login-clock-date::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-6px;
  width:72%;
  height:1px;
  transform:translateX(-50%);
  background:linear-gradient(90deg, transparent, rgba(34, 211, 238, .42), rgba(255,255,255,.18), rgba(14,165,233,.44), transparent);
  opacity:.5;
}

.login-orb-ring{
  position:absolute;
  inset:0;
  border-radius:999px;
  background:
    radial-gradient(circle at 35% 28%, rgba(255,255,255,.42), transparent 26%),
    linear-gradient(145deg, rgba(14, 165, 233, .38), rgba(34, 197, 94, .22) 54%, rgba(15, 23, 42, .16));
  box-shadow:
    0 0 0 1px rgba(255,255,255,.14),
    0 24px 48px rgba(15, 23, 42, .24),
    inset 0 1px 0 rgba(255,255,255,.24);
}

.login-orb-ring::before,
.login-orb-ring::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  border-radius:999px;
  transform:translate(-50%, -50%) scale(.72);
  opacity:0;
  pointer-events:none;
}

.login-orb-ring::before{
  width:92px;
  height:92px;
  border:1px solid rgba(125, 211, 252, .42);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.06) inset,
    0 0 36px rgba(14,165,233,.16);
  animation: loginPulse 2.1s ease-out infinite;
}

.login-orb-ring::after{
  width:128px;
  height:128px;
  background:
    conic-gradient(from 0deg,
      transparent 0 12deg,
      rgba(125, 211, 252, .62) 12deg 18deg,
      transparent 18deg 54deg,
      rgba(255, 255, 255, .24) 54deg 60deg,
      transparent 60deg 112deg,
      rgba(14, 165, 233, .52) 112deg 118deg,
      transparent 118deg 180deg,
      rgba(125, 211, 252, .32) 180deg 184deg,
      transparent 184deg 360deg);
  -webkit-mask:radial-gradient(circle, transparent 59%, #000 60%, #000 67%, transparent 68%);
  mask:radial-gradient(circle, transparent 59%, #000 60%, #000 67%, transparent 68%);
  border:0;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.04) inset,
    0 0 54px rgba(14,165,233,.10);
  animation:
    loginPulse 2.9s ease-out .45s infinite,
    loginOrbSpin 12s linear infinite;
  opacity:.74;
}

.login-orb-ring::before{
  background:radial-gradient(circle, rgba(125, 211, 252, .16), rgba(14, 165, 233, .08) 42%, transparent 70%);
  filter:blur(.5px);
}

body.login-is-open .login-orb-ring::before,
body.login-is-open .login-orb-ring::after{
  animation-play-state:paused;
  opacity:0;
}

.login-orb-core{
  position:relative;
  width:68px;
  height:68px;
  border-radius:999px;
  display:grid;
  place-items:center;
  color:#083344;
  background:
    radial-gradient(circle at 30% 26%, rgba(255,255,255,.92), transparent 34%),
    radial-gradient(circle at 50% 68%, rgba(14, 165, 233, .12), transparent 56%),
    linear-gradient(145deg, rgba(255,255,255,.92), rgba(226, 232, 240, .72));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.92),
    inset 0 -10px 24px rgba(14, 165, 233, .08),
    0 18px 32px rgba(15, 23, 42, .18),
    0 0 0 8px rgba(125, 211, 252, .05),
    0 0 0 18px rgba(125, 211, 252, .03);
  transition:transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s cubic-bezier(.16,1,.3,1), filter .25s ease;
}

.login-orb-core i{
  font-size:30px;
  line-height:1;
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.8));
}

.login-orb:hover .login-orb-core,
.login-orb:focus-visible .login-orb-core{
  transform:translateY(-2px) scale(1.04);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.96),
    inset 0 -12px 26px rgba(14, 165, 233, .1),
    0 24px 40px rgba(15, 23, 42, .22);
  filter:saturate(1.08);
}

.login-panel-wrap{
  width:min(100%, 470px);
  opacity:0;
  transform:translateY(42px) scale(.88) rotateX(12deg);
  filter:blur(12px);
  pointer-events:none;
  transition:
    opacity .68s cubic-bezier(.16,1,.3,1),
    transform .68s cubic-bezier(.16,1,.3,1),
    filter .68s cubic-bezier(.16,1,.3,1);
  transform-origin:center top;
  will-change:transform, opacity, filter;
}

.login-panel-wrap.is-visible,
body.login-is-open .login-panel-wrap{
  opacity:1;
  transform:translateY(0) scale(1) rotateX(0deg);
  filter:blur(0);
  pointer-events:auto;
}

.login-card{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.22);
  border-radius:30px;
  background:
    radial-gradient(circle at top left, rgba(125, 211, 252, .10), transparent 28%),
    radial-gradient(circle at bottom right, rgba(34, 197, 94, .06), transparent 24%),
    linear-gradient(180deg, rgba(15, 23, 42, .66), rgba(15, 23, 42, .48));
  backdrop-filter: blur(26px) saturate(1.18);
  -webkit-backdrop-filter: blur(26px) saturate(1.18);
  box-shadow:
    0 44px 120px rgba(15, 23, 42, .46),
    0 1px 0 rgba(255,255,255,.14) inset,
    0 0 0 1px rgba(56, 189, 248, .08),
    0 0 0 1px rgba(255,255,255,.06) inset;
  transform:translateZ(0);
  transition:
    transform .68s cubic-bezier(.16,1,.3,1),
    box-shadow .68s cubic-bezier(.16,1,.3,1),
    border-color .68s cubic-bezier(.16,1,.3,1);
}

.login-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at top right, rgba(125, 211, 252, .18), transparent 26%),
    radial-gradient(circle at bottom left, rgba(34, 197, 94, .10), transparent 30%),
    linear-gradient(135deg, rgba(255,255,255,.10), transparent 38%, transparent 62%, rgba(255,255,255,.04));
  pointer-events:none;
}

.login-card::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  padding:1px;
  background:linear-gradient(135deg, rgba(125, 211, 252, .62), rgba(255,255,255,.12) 24%, rgba(59, 130, 246, .14) 52%, rgba(245, 158, 11, .16) 78%, rgba(255,255,255,.10));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite:exclude;
  pointer-events:none;
  opacity:.70;
}

body.login-is-open .login-card{
  box-shadow:
    0 50px 140px rgba(15, 23, 42, .52),
    0 0 0 1px rgba(125, 211, 252, .14) inset,
    0 0 0 1px rgba(56, 189, 248, .10),
    0 0 40px rgba(56, 189, 248, .08);
}

body.login-is-open .login-panel-wrap .login-card{
  animation: loginPanelFloat 6.5s ease-in-out .8s infinite;
}

.login-alert{
  border-radius:14px;
}

.login-mode-stack{
  position:relative;
  min-height:448px;
  perspective:1400px;
}

.login-mode-stack::after{
  content:"";
  position:absolute;
  inset:-12px;
  border-radius:28px;
  background:linear-gradient(115deg, transparent 32%, rgba(125, 211, 252, .22) 46%, rgba(255,255,255,.14) 50%, rgba(245, 158, 11, .14) 54%, transparent 68%);
  opacity:0;
  transform:translateX(-24%) skewX(-10deg);
  pointer-events:none;
}

.login-mode-stack.is-switching::after{
  animation:loginModeWarp .9s cubic-bezier(.16,1,.3,1);
}

.login-mode-pane{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  gap:0;
  transition:
    opacity .58s cubic-bezier(.16,1,.3,1),
    transform .7s cubic-bezier(.16,1,.3,1),
    filter .58s cubic-bezier(.16,1,.3,1);
  will-change:transform, opacity, filter;
}

.login-pane-header{
  margin-bottom:10px;
}

.login-pane-eyebrow{
  color:rgba(125, 211, 252, .86);
  font-size:10px;
  font-weight:800;
  letter-spacing:.18em;
  text-transform:uppercase;
  line-height:1.2;
}

.login-pane-title{
  margin-top:8px;
  color:#f8fbff;
  font-size:26px;
  font-weight:800;
  line-height:1.08;
  letter-spacing:-.03em;
  margin-bottom:0;
}

.login-pane-subtitle{
  margin-top:10px;
  max-width:320px;
  color:rgba(226, 232, 240, .66);
  font-size:11px;
  line-height:1.5;
  margin-bottom:0;
}

.login-pane-header-face{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:24px;
}

.login-mode-pane-manual .login-pane-header{
  margin-bottom:18px;
}

.login-card .form-label{
  color:rgba(248, 250, 252, .74) !important;
}

.login-input{
  min-height:42px;
  border-radius:14px;
}

.login-card .app-input,
.login-card .form-control{
  background:rgba(15, 23, 42, .24);
  border-color:rgba(148, 163, 184, .20);
  color:#f8fafc;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 1px 0 rgba(255,255,255,.03);
}

.login-card .app-input:focus,
.login-card .form-control:focus{
  background:rgba(15, 23, 42, .30);
  border-color:rgba(56, 189, 248, .46);
  color:#f8fafc;
  box-shadow:
    0 0 0 .2rem rgba(14, 165, 233, .12),
    inset 0 1px 0 rgba(255,255,255,.05);
}

.login-card .app-input::placeholder,
.login-card .form-control::placeholder{
  color:rgba(248, 250, 252, .42);
}

.login-captcha-shell{
  display:grid;
  gap:10px;
}

.login-captcha-question{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:44px;
  padding:10px 14px;
  border-radius:14px;
  border:1px solid rgba(148, 163, 184, .18);
  background:rgba(15, 23, 42, .28);
  color:#f8fafc;
  font-size:13px;
  font-weight:700;
}

.login-captcha-question i{
  font-size:16px;
  color:#7dd3fc;
}

.login-submit{
  min-height:44px;
  border-radius:14px;
  font-weight:700;
}

.login-submit.btn-primary{
  background:linear-gradient(145deg, #0ea5e9, #2563eb 70%, #1d4ed8);
  border-color:transparent;
  box-shadow:
    0 14px 30px rgba(37, 99, 235, .28),
    inset 0 1px 0 rgba(255,255,255,.22);
}

.login-submit.btn-primary:hover{
  background:linear-gradient(145deg, #0284c7, #1d4ed8 70%, #1e40af);
}

.login-actions{
  display:flex;
  align-items:stretch;
  gap:10px;
}

.login-submit{
  flex:1 1 auto;
  width:auto !important;
}

.login-face-trigger{
  flex:0 0 46px;
  width:46px;
  min-width:46px;
  padding:0;
  display:grid;
  place-items:center;
  border-radius:12px;
  border:1px solid rgba(224, 242, 254, .2);
  background:linear-gradient(180deg, rgba(15, 23, 42, .52), rgba(15, 23, 42, .32));
  color:rgba(248, 250, 252, .86);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
  transition:transform .18s ease, border-color .18s ease, background-color .18s ease, color .18s ease;
}

.login-face-trigger:hover,
.login-face-trigger:focus-visible{
  transform:translateY(-1px);
  border-color:rgba(56, 189, 248, .34);
  background:linear-gradient(180deg, rgba(14, 165, 233, .22), rgba(15, 23, 42, .46));
  color:#f8fbff;
}

.login-face-trigger i{
  font-size:16px;
  line-height:1;
}

.login-face-box{
  margin-top:0;
  padding:14px;
  border-radius:20px;
  border:1px solid rgba(224, 242, 254, .12);
  background:
    linear-gradient(180deg, rgba(15, 23, 42, .66), rgba(15, 23, 42, .52)),
    radial-gradient(circle at top right, rgba(56, 189, 248, .12), transparent 36%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 12px 26px rgba(15, 23, 42, .16);
}

.login-face-close{
  flex:0 0 auto;
  width:38px;
  min-width:38px;
  height:38px;
  padding:0;
  border:1px solid rgba(125, 211, 252, .26);
  border-radius:12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:
    linear-gradient(145deg, rgba(14, 165, 233, .18), rgba(37, 99, 235, .16)),
    rgba(255,255,255,.05);
  color:#f8fbff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 10px 24px rgba(14, 165, 233, .14);
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.login-face-close i{
  font-size:13px;
  line-height:1;
}

.login-face-close:hover,
.login-face-close:focus-visible{
  transform:translateY(-1px);
  border-color:rgba(125, 211, 252, .42);
  background:
    linear-gradient(145deg, rgba(14, 165, 233, .26), rgba(37, 99, 235, .22)),
    rgba(255,255,255,.06);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.1),
    0 14px 28px rgba(14, 165, 233, .18),
    0 0 0 1px rgba(125, 211, 252, .08);
}

.login-face-stage{
  position:relative;
  min-height:258px;
  aspect-ratio: 4 / 3;
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(224, 242, 254, .12);
  background:
    radial-gradient(circle at center, rgba(56, 189, 248, .09), transparent 52%),
    linear-gradient(180deg, rgba(2, 6, 23, .82), rgba(15, 23, 42, .88));
}

.login-face-stage-frame{
  position:absolute;
  inset:12px;
  border-radius:14px;
  border:1px solid rgba(125, 211, 252, .2);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.03),
    0 0 0 1px rgba(14,165,233,.05);
  pointer-events:none;
}

.login-face-stage-frame::before,
.login-face-stage-frame::after{
  content:"";
  position:absolute;
  width:22px;
  height:22px;
  border-color:rgba(125, 211, 252, .75);
  border-style:solid;
}

.login-face-stage-frame::before{
  left:-1px;
  top:-1px;
  border-width:2px 0 0 2px;
  border-top-left-radius:12px;
}

.login-face-stage-frame::after{
  right:-1px;
  bottom:-1px;
  border-width:0 2px 2px 0;
  border-bottom-right-radius:12px;
}

.login-face-scanline{
  position:absolute;
  left:10px;
  right:10px;
  top:14%;
  height:2px;
  border-radius:999px;
  background:linear-gradient(90deg, transparent, rgba(125, 211, 252, .12), rgba(56, 189, 248, .82), rgba(255,255,255,.18), transparent);
  box-shadow:0 0 18px rgba(56, 189, 248, .32);
  animation:loginFaceSweep 3.2s ease-in-out infinite;
  pointer-events:none;
}

.login-face-video{
  display:block;
  width:100%;
  height:100%;
  min-height:258px;
  object-fit:cover;
}

.login-face-guide{
  position:absolute;
  inset:0;
  z-index:3;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  pointer-events:none;
  transition:opacity .22s ease, transform .22s ease;
}

.login-face-guide.is-hidden{
  opacity:0;
  transform:scale(.94);
}

.login-face-guide-arrow{
  width:88px;
  height:88px;
  border-radius:999px;
  display:grid;
  place-items:center;
  color:#f8fbff;
  background:radial-gradient(circle at 30% 30%, rgba(255,255,255,.28), rgba(34, 211, 238, .22) 42%, rgba(15, 23, 42, .58) 76%);
  border:1px solid rgba(224, 242, 254, .32);
  box-shadow:
    0 0 0 10px rgba(56, 189, 248, .06),
    0 18px 38px rgba(2, 6, 23, .34),
    inset 0 1px 0 rgba(255,255,255,.18);
  animation:loginFaceGuidePulse 1.15s ease-in-out infinite;
}

.login-face-guide-arrow i{
  font-size:50px;
  line-height:1;
  filter:drop-shadow(0 0 14px rgba(255,255,255,.18));
}

.login-face-guide[data-direction="left"] .login-face-guide-arrow i{
  transform:rotate(180deg);
}

.login-face-guide[data-direction="up"] .login-face-guide-arrow i{
  transform:rotate(-90deg);
}

.login-face-guide-text{
  min-width:144px;
  padding:8px 14px;
  border-radius:999px;
  color:#e0f2fe;
  font-size:11px;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
  text-align:center;
  background:rgba(15, 23, 42, .54);
  border:1px solid rgba(224, 242, 254, .16);
  box-shadow:
    0 10px 24px rgba(2, 6, 23, .24),
    inset 0 1px 0 rgba(255,255,255,.12);
}

.login-face-placeholder{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  color:rgba(226, 232, 240, .74);
  font-size:11px;
  letter-spacing:.04em;
  text-transform:uppercase;
}

.login-face-placeholder i{
  font-size:28px;
  color:rgba(125, 211, 252, .78);
}

.login-face-status{
  margin-top:12px;
  color:rgba(226, 232, 240, .76);
  font-size:10.5px;
  line-height:1.55;
  min-height:34px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(224, 242, 254, .08);
  background:rgba(255,255,255,.04);
}

.login-mode-pane-manual{
  opacity:1;
  transform:translate3d(0, 0, 0) rotateY(0deg) scale(1);
  filter:blur(0);
  pointer-events:auto;
}

.login-mode-pane-face{
  opacity:0;
  transform:translate3d(52px, 0, 0) rotateY(16deg) scale(.92);
  filter:blur(12px);
  pointer-events:none;
}

.login-mode-stack[data-mode="face"] .login-mode-pane-manual{
  opacity:0;
  transform:translate3d(-58px, 0, 0) rotateY(-18deg) scale(.92);
  filter:blur(14px);
  pointer-events:none;
}

.login-mode-stack[data-mode="face"] .login-mode-pane-face{
  opacity:1;
  transform:translate3d(0, 0, 0) rotateY(0deg) scale(1);
  filter:blur(0);
  pointer-events:auto;
}

.login-card.login-card-face{
  box-shadow:
    0 54px 150px rgba(15, 23, 42, .56),
    0 0 0 1px rgba(125, 211, 252, .16) inset,
    0 0 42px rgba(56, 189, 248, .12),
    0 0 80px rgba(14, 165, 233, .08);
}

body.login-is-open .login-orb{
  opacity:.42;
  transform:scale(.9);
  filter:drop-shadow(0 0 16px rgba(14,165,233,.12));
}

body.login-is-open .login-orb-caption{
  opacity:0;
  transform:translateX(calc(-50% + 44px)) translateY(8px);
}

body.login-is-open .login-clock{
  opacity:0;
  transform:translate(-50%, -50%) scale(.76);
  filter:blur(18px);
}

body.login-is-open .login-clock-time{
  opacity:0;
  transform:translateY(-14px) scale(.94);
}

body.login-is-open .login-clock-date{
  opacity:0;
  transform:translateY(14px) scale(.94);
}

body:not(.login-is-open) .login-clock{
  animation: loginClockBreath 7s ease-in-out infinite;
}

body:not(.login-is-open) .login-clock-time,
body:not(.login-is-open) .login-clock-date{
  animation: loginClockGlow 7s ease-in-out infinite;
}

body.login-authenticating .login-card{
  transform:scale(.995);
}

body.login-authenticating .login-submit{
  position:relative;
  pointer-events:none;
  opacity:.92;
}

body.login-authenticating .login-submit::after{
  content:"";
  position:absolute;
  right:16px;
  top:50%;
  width:14px;
  height:14px;
  margin-top:-7px;
  border-radius:999px;
  border:2px solid rgba(255,255,255,.72);
  border-right-color:transparent;
  animation: loginSpinner .75s linear infinite;
}

@keyframes loginPulse{
  0%{
    transform:translate(-50%, -50%) scale(.62);
    opacity:.96;
  }
  52%{
    transform:translate(-50%, -50%) scale(1.26);
    opacity:.14;
  }
  100%{
    transform:translate(-50%, -50%) scale(1.58);
    opacity:0;
  }
}

@keyframes loginOrbSpin{
  to{
    transform:translate(-50%, -50%) scale(.72) rotate(360deg);
  }
}

@keyframes loginClockSweep{
  0%{ transform:translateY(-120%); opacity:0; }
  15%{ opacity:.26; }
  50%{ opacity:.14; }
  100%{ transform:translateY(120%); opacity:0; }
}

@keyframes loginClockBreath{
  0%, 100%{
    transform:translate(-50%, -50%) scale(1);
    filter:blur(0) drop-shadow(0 0 0 rgba(0,0,0,0));
  }
  50%{
    transform:translate(-50%, -50%) scale(1.012);
    filter:blur(0) drop-shadow(0 0 18px rgba(14,165,233,.06));
  }
}

@keyframes loginClockGlow{
  0%, 100%{
    text-shadow:
      0 0 24px rgba(34, 211, 238, .26),
      0 0 62px rgba(14, 165, 233, .12);
  }
  50%{
    text-shadow:
      0 0 30px rgba(34, 211, 238, .32),
      0 0 70px rgba(14, 165, 233, .18);
  }
}

@keyframes loginScanlines{
  to{ transform:translateY(28px); }
}

@keyframes loginGridDrift{
  to{ background-position:72px 72px, 72px 72px; }
}

@keyframes loginSweep{
  0%, 18%{ transform:translateX(-52%); opacity:0; }
  35%{ opacity:1; }
  62%, 100%{ transform:translateX(52%); opacity:0; }
}

@keyframes loginPortalSpin{
  to{ transform:rotate(360deg); }
}

@keyframes loginPortalCore{
  0%, 100%{ opacity:.42; transform:scale(.92); }
  50%{ opacity:.78; transform:scale(1.08); }
}

@keyframes loginBeam{
  0%, 18%, 100%{ opacity:0; transform:translateX(-50%) scaleX(.36); }
  30%{ opacity:.9; transform:translateX(-50%) scaleX(1); }
  46%{ opacity:.2; transform:translateX(-50%) scaleX(.72); }
}

@keyframes loginOrbitPulse{
  0%, 100%{ opacity:.42; transform:scale(.98); }
  50%{ opacity:.74; transform:scale(1.03); }
}

@keyframes loginRoute{
  0%, 100%{ opacity:.22; }
  50%{ opacity:.64; }
}

@keyframes loginNodeBlink{
  0%, 100%{ opacity:.45; transform:scale(.86); }
  50%{ opacity:1; transform:scale(1.18); }
}

@keyframes loginStatusFloat{
  0%, 100%{ opacity:.64; transform:translateY(0); }
  50%{ opacity:.94; transform:translateY(-7px); }
}

@keyframes loginPanelFloat{
  0%, 100%{
    transform:translateY(0) scale(1) rotateX(0deg);
  }
  50%{
    transform:translateY(-4px) scale(1.006) rotateX(0deg);
  }
}

@keyframes loginSpinner{
  to{ transform:rotate(360deg); }
}

@keyframes loginFaceSweep{
  0%, 100%{
    top:14%;
    opacity:.28;
  }
  50%{
    top:82%;
    opacity:.86;
  }
}

@keyframes loginModeWarp{
  0%{
    opacity:0;
    transform:translateX(-26%) skewX(-10deg);
  }
  20%{
    opacity:.9;
  }
  100%{
    opacity:0;
    transform:translateX(26%) skewX(-10deg);
  }
}

@media (max-width: 575.98px){
  .login-shell{
    padding:18px;
  }
  .login-orb{
    width:72px;
    height:72px;
  }
  .login-orb-caption{
    top:calc(clamp(20px, 2.8vw, 44px) + 84px);
    left:clamp(20px, 2.8vw, 44px);
    width:118px;
    font-size:9px;
    transform:translateX(calc(-50% + 36px)) translateY(0);
    padding:5px 9px;
  }
  .login-orb-core{
    width:54px;
    height:54px;
  }
  .login-orb-core i{
    font-size:24px;
  }
  .login-orb-ring::before{
    width:78px;
    height:78px;
  }
  .login-orb-ring::after{
    width:108px;
    height:108px;
  }
  .login-panel-wrap{
    width:min(100%, 440px);
  }
  .login-mode-stack{
    min-height:412px;
  }
  .login-pane-title{
    font-size:22px;
  }
  .login-pane-subtitle{
    max-width:none;
  }
  .login-clock{
    min-width:200px;
  }
  .login-clock-time{
    font-size:22px;
    letter-spacing:.20em;
  }
  .login-clock-date{
    font-size:9px;
    letter-spacing:.16em;
  }
  .login-actions{
    gap:8px;
  }
  .login-face-trigger{
    flex-basis:42px;
    width:42px;
    min-width:42px;
  }
  .login-face-box{
    padding:10px;
  }
  .login-face-stage{
    min-height:0;
    aspect-ratio: 3 / 4;
  }
  .login-face-video,
  .login-face-placeholder{
    min-height:0;
  }
  .login-face-guide-arrow{
    width:72px;
    height:72px;
  }
  .login-face-guide-arrow i{
    font-size:42px;
  }
  .login-face-guide-text{
    min-width:124px;
    font-size:10px;
    letter-spacing:.12em;
  }
  .dcc-login-status{ display:none; }
  .dcc-login-portal{ width:112vw; }
  .dcc-login-route{ width:58vw; }
  .dcc-login-node-a{ left:9vw; }
  .dcc-login-node-b{ right:9vw; }
  .dcc-login-node-c{ left:12vw; }
  .dcc-login-node-d{ right:12vw; }
}

@media (prefers-reduced-motion: reduce){
  .login-panel-wrap,
  .login-orb-core,
  .login-mode-pane,
  .login-mode-stack::after{
    transition:none !important;
  }
  .login-orb-ring::before,
  .login-orb-ring::after,
  .login-face-scanline,
  .login-face-guide-arrow,
  .login-mode-stack.is-switching::after{
    animation:none !important;
  }
}

@keyframes loginFaceGuidePulse{
  0%, 100%{
    transform:scale(1);
    box-shadow:
      0 0 0 10px rgba(56, 189, 248, .06),
      0 18px 38px rgba(2, 6, 23, .34),
      inset 0 1px 0 rgba(255,255,255,.18);
  }
  50%{
    transform:scale(1.08);
    box-shadow:
      0 0 0 16px rgba(56, 189, 248, .09),
      0 22px 42px rgba(2, 6, 23, .38),
      inset 0 1px 0 rgba(255,255,255,.22);
  }
}