/* Opt-in portal and workspace login appearance. */

.auth-canvas.auth-motion {
  isolation: isolate;
  --a-teal: #082f36; --a-teal-deep: #06272d; --a-teal-2: #12424a;
  --a-lime: #79ed4d; --a-lime-d: #6ad83f;
}
.auth-canvas.auth-motion::before { content: none; }
.auth-motion .auth-rings { display: none; }
.auth-motion .packr8-motion {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(ellipse 32% 70% at -4% 65%, #214b36 0%, transparent 95%),
    radial-gradient(ellipse 30% 60% at 102% 42%, #1d4334 0%, transparent 90%),
    linear-gradient(145deg, #082f36, #06272d 72%);
}
.auth-motion .packr8-glass { position: absolute; width: 78vw; height: 112vh; opacity: 0; transition: opacity 1s ease; }
.auth-motion .packr8-motion[data-ready] .packr8-glass { opacity: 1; }
.auth-motion .packr8-motion[data-ready] { background: #082f36; }
.auth-motion .packr8-glass-left { left: -19vw; top: -6vh; mask-image: linear-gradient(to right, #000 68%, transparent 100%); }
.auth-motion .packr8-glass-right { right: -19vw; top: 3vh; mask-image: linear-gradient(to left, #000 68%, transparent 100%); }
.auth-motion .packr8-glass canvas { display: block; width: 100%; height: 100%; }
.auth-motion .packr8-motion::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 42% 70% at 50% 50%, rgba(6,39,45,.24), transparent 100%);
}
.auth-motion .packr8-motion-toggle {
  position: fixed; bottom: max(20px, env(safe-area-inset-bottom)); right: 20px; z-index: 2;
  display: grid; place-items: center; width: 44px; height: 44px;
  color: rgba(255,255,255,.75); background: rgba(6,39,48,.45);
  border: 1px solid rgba(255,255,255,.15); border-radius: 50%; cursor: pointer;
}
.auth-motion .packr8-motion-toggle:hover { color: #fff; background: #0a3b45; }
.auth-motion .packr8-motion-toggle:focus-visible { outline: 2px solid #7eea57; outline-offset: 4px; }
.auth-motion .packr8-motion-toggle svg { width: 15px; height: 15px; }
.auth-motion .packr8-motion-toggle[hidden] { display: none; }
.auth-motion .packr8-motion-toggle .motion-play { display: none; }
.auth-motion .packr8-motion-toggle[aria-pressed="true"] .motion-pause { display: none; }
.auth-motion .packr8-motion-toggle[aria-pressed="true"] .motion-play { display: block; }
@media (max-width: 600px) {
.auth-motion .packr8-glass { width: 140vw; height: 105vh; }
.auth-motion .packr8-glass-left { left: -74vw; top: -6vh; }
.auth-motion .packr8-glass-right { right: -74vw; top: 4vh; }
.auth-motion .packr8-motion-toggle { bottom: 12px; right: 12px; }
}
@media (prefers-reduced-motion: reduce) {
.auth-motion .packr8-glass { transition: none; }
}
.auth-motion .auth-stack { max-width: 432px; }
.auth-motion .auth-brand { margin-bottom: 24px; }
.auth-motion .auth-brand a { font-size: 36px; letter-spacing: -.04em; }
.auth-motion .auth-card {
  padding: 34px 32px 28px;
  border-radius: 24px;
  border: 1px solid rgba(211,255,241,.32);
  color: #f0fcf8;
  background: linear-gradient(140deg, rgba(227,255,246,.1), rgba(8,40,48,.34) 65%), rgba(6,36,43,.92);
  box-shadow: 0 28px 80px rgba(0,20,27,.22), inset 0 1px 0 rgba(239,255,248,.24), inset 1px 0 0 rgba(239,255,248,.16), inset -1px 0 0 rgba(239,255,248,.05), inset 0 -1px 0 rgba(0,19,22,.16);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.auth-motion .auth-card {
    background: linear-gradient(135deg, rgba(227,255,246,.08), transparent 42%, rgba(211,255,235,.025) 72%, rgba(227,255,246,.07)), rgba(6,36,43,.10);
    -webkit-backdrop-filter: blur(5px) saturate(115%);
    backdrop-filter: blur(5px) saturate(115%);
  }
}
.auth-motion .auth-h1 { color: #f4fff9; font-size: 26px; font-weight: 650; letter-spacing: -.035em; }
.auth-motion .auth-sub { margin-top: 10px; font-size: 14px; color: #bdd4d1; }
.auth-motion .auth-form { margin-top: 28px; }
.auth-motion .auth-label { color: #e0f0e9; font-size: 14px; font-weight: 500; margin-bottom: 9px; }
.auth-motion .auth-workspace {
  min-height: 52px;
  border: 1px solid rgba(225,255,244,.23);
  border-radius: 13px;
  background: rgba(2,23,31,.36);
  box-shadow: inset 0 1px 4px rgba(0,15,20,.08);
}
.auth-motion .auth-workspace input { color: #f5fff9; padding-top: 14px; padding-bottom: 14px; font-size: 15px; }
.auth-motion .auth-workspace input::placeholder { color: #a2bcba; }
.auth-motion .auth-workspace .lead { color: #a7c3bd; }
.auth-motion .auth-workspace .suffix {
  color: #c5dcd6;
  background: rgba(219,255,240,.045);
  border-left: 1px solid rgba(225,255,244,.13);
  font-size: 13px;
}
.auth-motion .auth-workspace:focus-within { border-color: rgba(158,244,124,.75); background: rgba(2,23,31,.44); box-shadow: 0 0 0 3px rgba(126,234,87,.1); }
.auth-motion .auth-workspace:focus-within .lead { color: #a2f27e; }
.auth-motion .auth-redirect { margin-top: 12px; color: #aac6bf; font-size: 12px; }
.auth-motion .auth-redirect b { color: #b9ecc2; font-weight: 500; }
.auth-motion .auth-btn-primary {
  margin-top: 23px;
  min-height: 50px;
  border-radius: 13px;
  color: #123626;
  background: linear-gradient(120deg, #9df177, #79ed4d 68%, #75e349);
  box-shadow: inset 0 1px 0 rgba(239,255,216,.48), 0 8px 24px rgba(87,217,68,.12);
}
.auth-motion .auth-btn-primary:hover { background: linear-gradient(120deg, #b3fa94, #8def68 68%, #89ed75); box-shadow: inset 0 1px 0 rgba(239,255,216,.5), 0 10px 28px rgba(87,217,68,.2); }
.auth-motion .auth-foot { margin-top: 24px; color: #bdd1cb; font-size: 13px; }
.auth-motion .auth-foot a { color: #b1f08c; font-weight: 500; }
.auth-motion .auth-secured { margin-top: 20px; font-size: 12px; color: #a5bfb8; letter-spacing: .025em; }
@media (max-width: 480px) {
.auth-motion .auth-card { padding: 28px 24px 25px; border-radius: 22px; }
.auth-motion .auth-brand { margin-bottom: 22px; }
.auth-motion .auth-workspace .suffix { padding-left: 11px; padding-right: 11px; }
.auth-motion .auth-foot { font-size: 12px; }
}
.auth-motion .auth-card [hidden] { display: none; }
.auth-motion .auth-field { margin-bottom: 18px; }
.auth-motion .auth-input {
  min-height: 52px;
  border: 1px solid rgba(225,255,244,.23);
  border-radius: 13px;
  color: #f5fff9;
  background: rgba(2,23,28,.36);
}
.auth-motion .auth-input::placeholder { color: #a2bcba; }
.auth-motion .auth-input:focus { border-color: rgba(158,244,124,.75); background: rgba(2,23,28,.44); box-shadow: 0 0 0 3px rgba(121,237,77,.1); }
.auth-motion .auth-input-wrap .lead, .auth-motion .auth-pw-toggle { color: #a7c3bd; }
.auth-motion .auth-pw-toggle:hover { color: #f5fff9; background: rgba(225,255,244,.08); }
.auth-motion .auth-ws { flex-direction: row; text-align: left; gap: 12px; margin-bottom: 27px; padding-bottom: 23px; border-bottom: 1px solid rgba(225,255,244,.13); }
.auth-motion .auth-ws-avatar { flex-shrink: 0; width: 46px; height: 46px; background: linear-gradient(140deg, #285740, #123a36); color: #b7ef92; border: 1px solid rgba(121,237,77,.25); }
.auth-motion .auth-ws-name { color: #f0fcf8; font-size: 15px; overflow-wrap: anywhere; }
.auth-motion .auth-ws-domain { color: #acc6bc; overflow-wrap: anywhere; }
.auth-motion .auth-ws-domain::before { flex-shrink: 0; }
.auth-motion .auth-row { gap: 12px; flex-wrap: wrap; margin-top: 4px; }
.auth-motion .auth-remember { color: #bdd1cb; }
.auth-motion .auth-minor, .auth-motion .auth-foot-split a { color: #b1df9b; }
.auth-motion .auth-minor:hover, .auth-motion .auth-foot-split a:hover { color: #d8fbc5; }
.auth-motion .auth-foot-split { border-color: rgba(225,255,244,.13); margin-top: 24px; padding-top: 20px; gap: 16px; flex-wrap: wrap; }
.auth-motion .auth-input-err { color: #ffc0b6; }
.auth-motion .auth-prefill { color: #d2e5d9; border-color: rgba(225,255,244,.2); background: rgba(225,255,244,.05); }
.auth-motion .auth-prefill b { color: #b1df9b; }
@media (max-height: 800px) and (min-width: 600px) {
.auth-canvas.auth-motion { padding-top: 20px; padding-bottom: 20px; }
.auth-motion .auth-brand { margin-bottom: 16px; }
.auth-motion .auth-brand a { font-size: 32px; }
.auth-motion .auth-card { padding: 26px 30px 24px; }
.auth-motion .auth-ws { margin-bottom: 18px; padding-bottom: 16px; }
.auth-motion .auth-form { margin-top: 22px; }
.auth-motion .auth-field { margin-bottom: 14px; }
.auth-motion .auth-btn-primary { margin-top: 18px; }
.auth-motion .auth-foot-split { margin-top: 18px; padding-top: 16px; }
.auth-motion .auth-secured { margin-top: 15px; }
}
.auth-motion .auth-transition-layer { position: fixed; inset: 0; z-index: 50; pointer-events: none; overflow: hidden; }
.auth-motion .auth-glass-shard { position: absolute; display: block; background: linear-gradient(130deg, rgba(215,255,231,.18), rgba(40,86,69,.12)); border: 1px solid rgba(198,246,204,.19); will-change: transform, opacity; }
.auth-motion .auth-arrival-logo { position: absolute; color: #fff; white-space: nowrap; transform-origin: 50% 50%; will-change: transform, opacity; }
.auth-motion .auth-arrival-logo .eight { position: relative; color: #79ed4d; }
.auth-motion .auth-arrival-logo .eight::after { content: ''; position: absolute; bottom: -3px; left: 0; right: 0; height: 3px; background: currentColor; border-radius: 2px; }
.auth-canvas.auth-motion[data-auth-transition] .auth-card { animation: none; transform: none; }

.auth-motion .auth-input:-webkit-autofill, .auth-motion .auth-workspace input:-webkit-autofill { -webkit-text-fill-color: #f5fff9; box-shadow: 0 0 0 1000px #123a36 inset; caret-color: #f5fff9; }