/* Prism entry: the same pearl, steel and blue materials as the operational workspace. */
.auth {
  --auth-canvas: #f4f7fb;
  --auth-card: #ffffff;
  --auth-ink: #172330;
  --auth-sub: #617185;
  --auth-line: #d6e0eb;
  --auth-accent: #0866eb;
  --auth-focus: #0866eb26;
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 12vw;
  min-height: 100dvh;
  height: auto;
  padding: 64px 6vw;
  overflow-x: clip;
  background:
    radial-gradient(ellipse at 75% 12%, #ffffff 0, #ffffff00 55%),
    var(--auth-canvas);
  color: var(--auth-ink);
  font-family: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Optical layers carry no state or product claims. They are never interactive. */
.auth::before {
  content: '';
  position: absolute;
  z-index: -1;
  pointer-events: none;
}

.auth::before {
  inset: 18px 50% 18px 18px;
  border: 1px solid #a5c4e11a;
  border-radius: 16px;
  background:
    radial-gradient(ellipse at 68% 28%, #4372a526, #4372a500 54%),
    linear-gradient(140deg, #e2edfa0b, transparent 45%),
    repeating-linear-gradient(0deg, transparent 0 71px, #a5c4e108 71px 72px),
    repeating-linear-gradient(90deg, transparent 0 71px, #a5c4e108 71px 72px),
    linear-gradient(165deg, #1d2d3e, #152330 60%, #11202d);
  box-shadow: inset 0 1px 0 #e8f2ff0d;
}


.auth .authcard {
  grid-column: 2;
  justify-self: center;
  width: min(420px, 100%);
  min-width: 0;
  margin: 0;
  padding: 24px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--auth-ink);
}

.auth .authbrand {
  justify-content: flex-start;
  gap: 11px;
  margin-bottom: 46px;
}

.auth .authbrand .ezicone { width: 48px; min-width: 48px; }
.auth .authbrand .ezmot {
  color: var(--auth-ink);
  font-family: inherit;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -.045em;
}
.auth .authbrand .ezmot :is(.e, .z) { color: var(--auth-accent); background: none; }
.auth .authbrand :is(.g1, .g2, .g3, .g4) { stop-color: var(--auth-accent); }

.auth .authcard h1 {
  max-width: 410px;
  text-align: left;
  color: var(--auth-ink);
  font-family: inherit;
  font-size: clamp(29px, 2.5vw, 35px);
  line-height: 1.16;
  font-weight: 650;
  letter-spacing: -.045em;
  text-wrap: balance;
}

.auth .authcard > p {
  max-width: 390px;
  margin: 14px 0 32px;
  text-align: left;
  color: var(--auth-sub);
  font-size: 14px;
  line-height: 1.65;
}

.auth .field { gap: 8px; margin-bottom: 20px; }
.auth .field > label { color: var(--auth-ink); font-size: 13px; font-weight: 550; }
.auth .field small { color: var(--auth-sub); font-size: 12px; }
.auth .field input {
  min-height: 50px;
  padding: 13px 14px;
  border: 1px solid var(--auth-line);
  border-radius: 8px;
  background: var(--auth-card);
  color: var(--auth-ink);
  font-family: inherit;
  font-size: 14px;
  line-height: 22px;
  box-shadow: 0 1px 2px #20374e03;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.auth .field input::placeholder { color: var(--auth-sub); opacity: .8; }
.auth .field input:hover { border-color: #a7b9cd; }
.auth .field input:focus {
  border-color: var(--auth-accent) !important;
  box-shadow: 0 0 0 3px var(--auth-focus) !important;
}
.auth .field input:-webkit-autofill {
  -webkit-text-fill-color: var(--auth-ink);
  box-shadow: 0 0 0 100px var(--auth-card) inset;
  caret-color: var(--auth-ink);
}
.auth .field input:-webkit-autofill:focus {
  box-shadow: 0 0 0 100px var(--auth-card) inset, 0 0 0 3px var(--auth-focus) !important;
}

.auth .authcard > .btn.primary {
  justify-content: space-between;
  min-height: 50px;
  margin-top: 6px;
  padding: 13px 16px;
  border: 1px solid #075edc;
  border-radius: 8px;
  background: linear-gradient(180deg, #1675f6, #0866eb);
  color: #ffffff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  box-shadow: inset 0 1px 0 #ffffff26, 0 2px 3px #0866eb15;
  transition: background .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.auth .authcard > .btn.primary:hover {
  border-color: #0557cc;
  background: linear-gradient(180deg, #0f6bec, #055bd7);
  box-shadow: inset 0 1px 0 #ffffff26, 0 3px 8px #0866eb20;
}
.auth .authcard > .btn.primary:focus-visible {
  outline: 3px solid var(--auth-accent);
  outline-offset: 4px;
}
.auth .authcard > .btn.primary:disabled { opacity: .55; box-shadow: none; }
.auth .authcard > .btn.primary .ico { width: 18px; height: 18px; }
.auth .authfoot {
  margin-top: 27px;
  padding-top: 20px;
  border-top: 1px solid var(--auth-line);
  text-align: left;
  color: var(--auth-sub);
  font-size: 12px;
  line-height: 1.7;
}
.auth .inlinealert {
  margin-bottom: 22px;
  padding: 12px 14px;
  border: 1px solid #d64a4630;
  border-radius: 8px;
  background: #fff1f0;
  color: #a12e2b;
  font-size: 13px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

[data-theme=dark] .auth {
  --auth-canvas: #101b27;
  --auth-card: #182635;
  --auth-ink: #edf4fc;
  --auth-sub: #a3b3c7;
  --auth-line: #34475c;
  --auth-accent: #70adff;
  --auth-focus: #70adff29;
  background: radial-gradient(ellipse at 75% 12%, #1a2d424d, #1a2d4200 55%), var(--auth-canvas);
}
[data-theme=dark] .auth::before { border-color: #a5c4e124; background-color: #0f1b28; }
[data-theme=dark] .auth .field input:hover { border-color: #617a96; }
[data-theme=dark] .auth .inlinealert { background: #38272c; color: #ffb2ad; border-color: #f28c8233; }

@media (max-width: 960px) {
  .auth {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding: 48px 28px;
    background:
      radial-gradient(ellipse at 50% 0, #e4effe, #e4effe00 60%),
      var(--auth-canvas);
  }
  .auth::before { content: none; }
  .auth .authcard {
    grid-column: 1;
    width: min(480px, 100%);
    padding: 40px;
    border: 1px solid var(--auth-line);
    border-radius: 14px;
    background: var(--auth-card);
    box-shadow: 0 2px 4px #17233003, 0 20px 64px #29466a08;
  }
  .auth .authbrand { margin-bottom: 38px; }
  .auth .authcard h1 { font-size: 32px; }
  [data-theme=dark] .auth .authcard { box-shadow: 0 20px 64px #060f1930; }
}

@media (max-width: 520px) {
  .auth { padding: 32px 24px; }
  .auth .authcard { padding: 20px 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
  .auth .authbrand { margin-bottom: 42px; }
  .auth .authbrand .ezicone { width: 48px; min-width: 48px; }
  .auth .authbrand .ezmot { font-size: 28px; }
  .auth .authcard h1 { max-width: 340px; font-size: 31px; }
  .auth .authcard > p { margin-bottom: 30px; }
  .auth .field input { min-height: 52px; font-size: 16px; }
  .auth .authcard > .btn.primary { min-height: 52px; }
  [data-theme=dark] .auth .authcard { box-shadow: none; }
}

@media (max-height: 620px) and (min-width: 961px) {
  .auth { padding-top: 30px; padding-bottom: 30px; }
  .auth .authbrand { margin-bottom: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  .auth .field input,
  .auth .authcard > .btn.primary { transition: none; }
}

/* The animated journey belongs to login, independently of the workspace. */
.auth .auth-orbit {
  grid-column: 1;
  grid-row: 1;
  justify-self: center;
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  width: min(500px, 100%);
  min-width: 0;
  min-height: 440px;
  color: #e4efff;
}
.auth .auth-orbit::before {
  content: '';
  position: absolute;
  inset: 12px -10px;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 50%, #0866e92e, transparent 67%), radial-gradient(#b8d7ff18 .6px, transparent .6px);
  background-size: auto, 17px 17px;
  mask-image: radial-gradient(ellipse, #000 35%, transparent 72%);
}
.auth .auth-orbit-caption {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 12px 18px;
  font: 8px/1.5 var(--mono);
  letter-spacing: 1.2px;
  color: #a8bdd9;
}
.auth .visual-dot {width:4px;height:4px;flex-shrink:0;border-radius:50%;background:#92ccff}
.auth .mission-orbit {position:relative;flex:1;width:100%;min-height:320px;margin:auto}
.auth .orbit-lines {position:absolute;inset:0;width:100%;height:100%;overflow:visible;stroke:#92ccff30;stroke-width:.8;transform-origin:50% 50%;animation:auth-rings-turn 64s linear infinite}
.auth .orbit-lines .orbit-inner {stroke:#92ccff26;stroke-dasharray:2 5;transform-box:fill-box;transform-origin:center;animation:auth-rings-turn 28s linear infinite reverse}
.auth .orbit-lines .orbit-path {stroke-width:1.4}
.auth .orbit-core {position:absolute;left:50%;top:50%;width:72px;height:72px;display:grid;place-items:center;transform:translate(-50%,-50%) rotate(-8deg);border:1px solid #a6cfff99;border-radius:21px;background:linear-gradient(145deg,#58a7ff,#0866e9);color:white;box-shadow:0 0 0 12px #92ccff06,0 0 0 28px #92ccff04,0 22px 35px #08182e55,inset 0 1px 0 #ffffff33;z-index:2;animation:auth-core-turn 36s linear infinite}
.auth .orbit-core-content {display:flex;flex-direction:column;align-items:center;gap:5px;animation:auth-core-upright 36s linear infinite}
.auth .orbit-core .ico {width:29px;height:29px;stroke-width:1.2}
.auth .orbit-core-content>span {font-size:12px;font-weight:600;letter-spacing:-.4px}
.auth .orbit-node {position:absolute;display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid #a6cfff30;border-radius:10px;background:#243950f2;box-shadow:0 12px 25px #0000001c}
.auth .orbit-node>.ico {width:24px;height:24px;padding:5px;box-sizing:content-box;border-radius:8px;background:#58a7ff18;color:#a6cfff;stroke-width:1.4}
.auth .orbit-node span {display:flex;flex-direction:column;gap:4px}
.auth .orbit-node small {font:7px/1.4 var(--mono);letter-spacing:1px;color:#a8bdd9}
.auth .orbit-node strong {font-size:10px;line-height:1.4;font-weight:500;color:#edf5ff;white-space:nowrap}
.auth .orbit-intent {top:9%;left:7%;transform:rotate(-5deg)}
.auth .orbit-execution {top:43%;right:5%;transform:rotate(4deg)}
.auth .orbit-proof {bottom:6%;left:11%;transform:rotate(-3deg)}
@supports (offset-path:ellipse(calc(50% - 100px) calc(50% - 40px) at 50% 50%) border-box) {
  .auth .orbit-node {left:0;top:0;right:auto;bottom:auto;transform:none;offset-path:ellipse(calc(50% - 100px) calc(50% - 40px) at 50% 50%) border-box;offset-anchor:50% 50%;offset-rotate:0deg;animation:auth-revolution 32s linear infinite,auth-orbit-depth 32s linear infinite;animation-delay:var(--orbit-delay),var(--orbit-delay)}
  .auth .orbit-intent {--orbit-delay:-20.8s;offset-distance:65%}
  .auth .orbit-execution {--orbit-delay:-1.6s;offset-distance:5%}
  .auth .orbit-proof {--orbit-delay:-11.2s;offset-distance:35%}
}
.auth .auth-orbit-footer {margin:22px 12px 0;padding-top:20px;border-top:1px solid #c8daf025;font-size:12px;font-weight:450;color:#b8cce6}
@keyframes auth-revolution {from{offset-distance:0%}to{offset-distance:100%}}
@keyframes auth-orbit-depth {0%,50%,100%{opacity:1;z-index:3}25%{opacity:1;z-index:4}75%{opacity:.78;z-index:1}}
@keyframes auth-rings-turn {from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes auth-core-turn {from{transform:translate(-50%,-50%) rotate(-8deg)}to{transform:translate(-50%,-50%) rotate(352deg)}}
@keyframes auth-core-upright {from{transform:rotate(8deg)}to{transform:rotate(-352deg)}}
.reduce .auth .auth-orbit * {animation:none!important}
@media(max-width:1100px) {
  .auth .orbit-node {padding:10px 8px;offset-path:ellipse(calc(50% - 62px) calc(50% - 30px) at 50% 50%) border-box}
  .auth .orbit-node>.ico {display:none}
  .auth .orbit-node strong {font-size:9px}
  .auth .orbit-core {width:56px;height:56px;border-radius:17px}
  .auth .orbit-core .ico {width:23px;height:23px}
  .auth .orbit-core-content {gap:3px}
  .auth .orbit-core-content>span {font-size:10px}
}
@media(max-width:960px) {
  .auth {gap:32px}
  .auth .authcard {grid-row:1}
  .auth .auth-orbit {grid-row:2;width:min(480px,100%);min-height:380px;padding:20px 18px;border:1px solid #a5c4e124;border-radius:16px;background:linear-gradient(165deg,#1d2d3e,#11202d)}
  .auth .mission-orbit {min-height:270px}
  .auth .auth-orbit-caption {padding:0 0 16px}
  .auth .auth-orbit-footer {margin:16px 0 0;padding-top:16px}
}
@media(max-width:520px) {
  .auth .auth-orbit {padding:20px 0;min-height:330px}
  .auth .auth-orbit-caption {padding:0 17px 10px;font-size:7px;letter-spacing:.8px}
  .auth .mission-orbit {min-height:260px}
  .auth .orbit-node {padding:8px 6px;offset-path:ellipse(calc(50% - 54px) calc(50% - 24px) at 50% 50%) border-box}
  .auth .orbit-node strong {font-size:8px}
  .auth .orbit-node small {font-size:6px;letter-spacing:.6px}
  .auth .orbit-core {width:44px;height:44px;border-radius:13px}
  .auth .orbit-core .ico {width:18px;height:18px}
  .auth .orbit-core-content {gap:2px}
  .auth .orbit-core-content>span {font-size:8px}
  .auth .auth-orbit-footer {margin:14px 17px 0;font-size:11px}
}
@media(prefers-reduced-motion:reduce) {
  .auth .auth-orbit * {animation:none!important}
}