/* ==========================================================================
   Skyline SMS — CINEMATIC LOGIN EXPERIENCE  ("Signal Horizon")
   assets/skyline-login-anim.css

   One shared sheet for EVERY login page:
     body.ams-login          -> login.html            (Admin / Manager / Agent / Client)
     body.ams-portal-login   -> management-login.html, payment-login.html,
                               test-login.html, panel-sharing-login.html

   Design rules
   ------------
   * Only `transform` and `opacity` are animated (plus one short drop-shadow
     bloom on the logo), so everything stays on the compositor.
   * No video, no images, no webfonts, no libraries, no network requests.
   * The whole feature is gated on ONE class on <html>:
        .ams-anim-on   -> everything animates
        .ams-anim-off  -> nothing animates (the page keeps its static depth)
   * prefers-reduced-motion is honoured in CSS as well as in JS.
   * Nothing here touches authentication, CAPTCHA, validation or routing.
   ========================================================================== */

/* ------------------------------------------------------------------ *
 * 1. THE BACKGROUND LAYER
 *    Fixed, non-interactive, painted behind the card (z-index:-1).
 *    Marked up by assets/skyline-login-anim.js.
 * ------------------------------------------------------------------ */
.ams-login-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  contain: layout paint;
}
.ams-login-bg > * {
  position: absolute;
  display: block;
  will-change: transform, opacity;
  transform: translateZ(0);
}

/* 1a. Slow shifting wash — the "depth" of the scene */
.ams-login-bg::before {
  content: "";
  position: absolute;
  inset: -22%;
  background:
    radial-gradient(58% 44% at 22% 16%, rgba(50,86,223,.38) 0%, rgba(50,86,223,0) 62%),
    radial-gradient(54% 42% at 84% 80%, rgba(16,150,143,.30) 0%, rgba(16,150,143,0) 64%),
    radial-gradient(46% 36% at 64% 28%, rgba(31,144,243,.16) 0%, rgba(31,144,243,0) 60%);
  will-change: transform;
}
.ams-anim-on .ams-login-bg::before { animation: amsWash 26s ease-in-out infinite alternate; }
@keyframes amsWash {
  0%   { transform: translate3d(-3%, -2%, 0) scale(1); }
  100% { transform: translate3d( 3%,  2%, 0) scale(1.14); }
}

/* 1b. Three large drifting orbs */
.ams-lb-orb { border-radius: 50%; }
.ams-lb-orb-a {
  width: 62vmax; height: 62vmax; left: -14vmax; top: -18vmax;
  background: radial-gradient(circle at 50% 50%, rgba(50,86,223,.40) 0%, rgba(50,86,223,.14) 42%, rgba(50,86,223,0) 70%);
}
.ams-lb-orb-b {
  width: 54vmax; height: 54vmax; right: -16vmax; bottom: -20vmax;
  background: radial-gradient(circle at 50% 50%, rgba(16,150,143,.32) 0%, rgba(16,150,143,.12) 44%, rgba(16,150,143,0) 72%);
}
.ams-lb-orb-c {
  width: 40vmax; height: 40vmax; left: 42%; top: 26%;
  background: radial-gradient(circle at 50% 50%, rgba(31,144,243,.20) 0%, rgba(31,144,243,.08) 46%, rgba(31,144,243,0) 70%);
}
.ams-anim-on .ams-lb-orb-a { animation: amsOrbA 26s ease-in-out infinite; }
.ams-anim-on .ams-lb-orb-b { animation: amsOrbB 34s ease-in-out infinite; }
.ams-anim-on .ams-lb-orb-c { animation: amsOrbC 30s ease-in-out infinite; }
@keyframes amsOrbA {
  0%   { transform: translate3d(0,0,0)     scale(1);    }
  50%  { transform: translate3d(7vw,5vh,0) scale(1.12); }
  100% { transform: translate3d(0,0,0)     scale(1);    }
}
@keyframes amsOrbB {
  0%   { transform: translate3d(0,0,0)      scale(1.06); }
  50%  { transform: translate3d(-8vw,6vh,0) scale(1);    }
  100% { transform: translate3d(0,0,0)      scale(1.06); }
}
@keyframes amsOrbC {
  0%   { transform: translate3d(0,0,0)      scale(1);    opacity: .85; }
  50%  { transform: translate3d(6vw,-7vh,0) scale(1.16); opacity: 1;   }
  100% { transform: translate3d(0,0,0)      scale(1);    opacity: .85; }
}

/* 1c. Light trails — thin comets crossing the scene */
.ams-lb-trail {
  height: 2px;
  width: 46vw;
  border-radius: 2px;
  opacity: 0;
  background: linear-gradient(90deg,
    rgba(31,144,243,0) 0%,
    rgba(31,144,243,.32) 22%,
    rgba(180,218,251,.85) 52%,
    rgba(31,144,243,.32) 78%,
    rgba(31,144,243,0) 100%);
}
.ams-lb-trail-1 { top: 22%; left: 0; transform: rotate(-9deg);  }
.ams-lb-trail-2 { top: 58%; left: 0; transform: rotate(7deg);   width: 38vw; }
.ams-lb-trail-3 { top: 80%; left: 0; transform: rotate(-5deg);  width: 30vw; }
.ams-anim-on .ams-lb-trail-1 { animation: amsTrail 15s linear 1.5s infinite; }
.ams-anim-on .ams-lb-trail-2 { animation: amsTrail 21s linear 6s   infinite; }
.ams-anim-on .ams-lb-trail-3 { animation: amsTrail 27s linear 11s  infinite; }
@keyframes amsTrail {
  0%   { transform: translate3d(-60vw,0,0) rotate(-9deg); opacity: 0; }
  8%   { opacity: .9; }
  70%  { opacity: .9; }
  100% { transform: translate3d(150vw,0,0) rotate(-9deg); opacity: 0; }
}

/* 1d. Flowing light waves */
.ams-lb-wave {
  width: 150vw;
  height: 200px;
  left: -25vw;
  opacity: .5;
  background: linear-gradient(180deg,
    rgba(31,144,243,0) 0%,
    rgba(31,144,243,.09) 45%,
    rgba(127,169,247,.13) 52%,
    rgba(31,144,243,.09) 60%,
    rgba(31,144,243,0) 100%);
}
.ams-lb-wave-1 { top: 12%; transform: skewY(-6deg); }
.ams-lb-wave-2 { top: 66%; transform: skewY(5deg);  height: 240px; }
.ams-anim-on .ams-lb-wave-1 { animation: amsWave1 19s ease-in-out infinite alternate; }
.ams-anim-on .ams-lb-wave-2 { animation: amsWave2 24s ease-in-out infinite alternate; }
@keyframes amsWave1 {
  0%   { transform: translate3d(-8vw,0,0) skewY(-6deg); opacity: .35; }
  100% { transform: translate3d( 8vw,2vh,0) skewY(-4deg); opacity: .7; }
}
@keyframes amsWave2 {
  0%   { transform: translate3d(6vw,0,0)  skewY(5deg);  opacity: .6; }
  100% { transform: translate3d(-6vw,-2vh,0) skewY(7deg); opacity: .32; }
}

/* 1e. Particles / travelling stars (count and position set by the script) */
.ams-lb-star {
  width: var(--ams-ui-size, 3px);
  height: var(--ams-ui-size, 3px);
  border-radius: 50%;
  background: #eaf2fd;
  box-shadow: 0 0 8px rgba(180,218,251,.95), 0 0 18px rgba(31,144,243,.55);
  opacity: 0;
}
.ams-anim-on .ams-lb-star { animation: amsStar linear infinite; }
@keyframes amsStar {
  0%   { transform: translate3d(0,0,0)        scale(.6); opacity: 0; }
  12%  { opacity: var(--ams-ui-peak, .9); }
  75%  { opacity: var(--ams-ui-peak, .9); }
  100% { transform: translate3d(var(--ams-ui-drift, 26px), -105vh, 0) scale(1); opacity: 0; }
}

/* 1f. Shooting stars — mostly idle, then one quick streak */
.ams-lb-shot {
  width: 150px;
  height: 1.5px;
  border-radius: 2px;
  opacity: 0;
  background: linear-gradient(90deg, rgba(234,242,253,0) 0%, rgba(234,242,253,.95) 60%, #ffffff 100%);
}
.ams-lb-shot-1 { top: 16%; left: 0; }
.ams-lb-shot-2 { top: 44%; left: 0; width: 110px; }
.ams-anim-on .ams-lb-shot-1 { animation: amsShot 9s ease-in 2.5s infinite; }
.ams-anim-on .ams-lb-shot-2 { animation: amsShot 13s ease-in 7s  infinite; }
/* A streak occupies the first ~14% of the cycle and then rests, so a shooting
   star passes roughly every 9s and every 13s — visible, not constant. */
@keyframes amsShot {
  0%    { transform: translate3d(-12vw,0,0) rotate(16deg) scaleX(.2);  opacity: 0; }
  2%    { opacity: 1; transform: translate3d(-10vw,1vh,0) rotate(16deg) scaleX(1); }
  11%   { opacity: 1; transform: translate3d(70vw,18vh,0)  rotate(16deg) scaleX(1); }
  14%   { opacity: 0; transform: translate3d(106vw,27vh,0) rotate(16deg) scaleX(1); }
  100%  { opacity: 0; transform: translate3d(106vw,27vh,0) rotate(16deg) scaleX(1); }
}

/* 1g. Orbiting glow — a soft light circling behind the card */
.ams-lb-orbit {
  width: 460px; height: 460px;
  left: 50%; top: 50%;
  margin: -230px 0 0 -230px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(31,144,243,.18) 0%, rgba(50,86,223,.10) 40%, rgba(50,86,223,0) 70%);
}
.ams-anim-on .ams-lb-orbit { animation: amsOrbit 22s linear infinite; }
@keyframes amsOrbit {
  0%   { transform: rotate(0deg)    translateX(190px) rotate(0deg);    }
  100% { transform: rotate(360deg)  translateX(190px) rotate(-360deg); }
}

/* 1h. Static vignette so the card always has an edge */
.ams-login-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 90% at 50% 50%, rgba(2,6,23,0) 42%, rgba(2,6,23,.42) 100%);
}

/* ------------------------------------------------------------------ *
 * 2. THE CARD — premium glass surface, entrance, travelling edge light
 *    .shell   = login.html   (Admin / Manager / Agent / Client)
 *    .card    = the four portal logins
 *
 *    The glass look is STATIC and applies in both ON and OFF; only the
 *    motion (entrance + edge sweep) is gated by the toggle. Selectors are
 *    one element longer than the rules in skyline.css (0,3,1) so they win
 *    without touching that file.
 * ------------------------------------------------------------------ */
html body.ams-light.ams-login .shell,
html body.ams-light.ams-portal-login > .card {
  position: relative;
  border-radius: 22px !important;
  background: linear-gradient(160deg, rgba(255,255,255,.74) 0%, rgba(230,240,255,.56) 100%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  backdrop-filter: blur(22px) saturate(160%);
  border: 1px solid rgba(165,225,255,.55) !important;
  box-shadow:
    0 30px 70px rgba(3,12,30,.50),
    0 2px 10px rgba(3,12,30,.30),
    0 0 0 1px rgba(31,144,243,.14),
    0 0 46px rgba(31,144,243,.14),
    inset 0 1px 0 rgba(255,255,255,.75) !important;
}
/* the panel inside the shell must not repaint a solid white slab over the glass */
html body.ams-light.ams-login .login-panel { background: transparent !important; }
/* no backdrop-filter support -> fall back to a near-opaque surface so text stays readable */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html body.ams-light.ams-login .shell,
  html body.ams-light.ams-portal-login > .card { background: rgba(244,249,255,.97) !important; }
}

/* entrance: fade in from slightly below, rise, scale 97% -> 100%, settle (no bounce) */
.ams-anim-on :is(.shell, .card) {
  overflow: hidden;
  animation: amsCardIn .78s cubic-bezier(.16,.84,.30,1) both;
}
@keyframes amsCardIn {
  0%   { opacity: 0; transform: translate3d(0,22px,0) scale(.97); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: translate3d(0,0,0)    scale(1);   }
}

/* RGB "LED strip" edge light.
   .ams-ui-edge = crisp 4px ring on the card border; .ams-ui-glow = a wider, soft ring just
   inside it. Both are masked to a ring (padding box XOR content box), so only the
   border region is ever lit and the form is never covered (pointer-events:none).
   Their ::before is one big conic gradient in the logo's colours that spins
   continuously. Only transform + opacity animate. */
.ams-ui-edge, .ams-ui-glow {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
  -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 exclude, linear-gradient(#000 0 0);
  mask-composite: exclude;
}
.ams-ui-edge { z-index: 4; padding: 4px; }
.ams-ui-glow { z-index: 3; padding: 9px; }
.ams-ui-edge::before, .ams-ui-glow::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 240%;
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%) rotate(0deg);
  opacity: 0;
  background: conic-gradient(from 0deg,
    #2bb6d6 0deg, #4a70ea 60deg, #7a6ae4 120deg, #d1548a 180deg,
    #e0912f 240deg, #f4cf94 290deg, #4ad0a8 330deg, #2bb6d6 360deg);
}
.ams-ui-glow::before { filter: blur(9px); }
/* ON: fade in once, then spin forever (one lap every 6s) */
.ams-anim-on .ams-ui-edge::before { animation: amsEdgeSpin 6s linear infinite, amsEdgeFade .8s ease 1s both; }
.ams-anim-on .ams-ui-glow::before { animation: amsEdgeSpin 6s linear infinite, amsGlowFade .8s ease 1s both; }
@keyframes amsEdgeSpin {
  from { transform: translate(-50%,-50%) rotate(0deg);   }
  to   { transform: translate(-50%,-50%) rotate(360deg); }
}
@keyframes amsEdgeFade { from { opacity: 0; } to { opacity: 1;   } }
@keyframes amsGlowFade { from { opacity: 0; } to { opacity: .45; } }

/* ------------------------------------------------------------------ *
 * 3. THE LOGO — gentle fade + scale-up, then completely still
 *    No rotation, no halo, no breathing loop. The supplied logo has an opaque
 *    white background, so on the glass card it is blended with `multiply`:
 *    white disappears into the card, the artwork keeps its colours, nothing is
 *    stretched (object-fit/size still come from skyline.css). To rebrand, replace
 *    assets/skyline-logo-square.png — any logo (white OR transparent background)
 *    works with no CSS change.
 * ------------------------------------------------------------------ */
html body.ams-light:is(.ams-login,.ams-portal-login) :is(.m-brand img, .logo img, .login-hero-logo) {
  background: transparent !important;
}
/* `multiply` exists to dissolve an OPAQUE white logo backing. Applied only when
   the runtime detects one (html.ams-ui-logo-opaque); on an already-transparent mark
   it would darken the artwork against the glass. */
html.ams-ui-logo-opaque body.ams-light:is(.ams-login,.ams-portal-login) :is(.m-brand img, .logo img, .login-hero-logo) {
  mix-blend-mode: multiply;
}
html body.ams-light.ams-portal-login .logo { background: transparent !important; }
/* The <img> keeps its natural aspect ratio (width:auto) so its box IS the picture,
   and a soft edge mask dissolves the logo's white backing into the glass instead of
   leaving a hard rectangle. 14% fade zone: the artwork never reaches that close to
   the edge. Works unchanged for any replacement logo. */
html body.ams-light.ams-login .m-brand img {
  width: auto !important; height: 114px !important; max-width: 100% !important; object-fit: contain !important;
}
html body.ams-light.ams-portal-login .logo img {
  display: block; width: auto !important; height: 100% !important; max-width: 100% !important; margin: 0 auto; object-fit: contain !important;
}
html.ams-ui-logo-opaque body.ams-light:is(.ams-login,.ams-portal-login) :is(.m-brand img, .logo img, .login-hero-logo) {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%),
                      linear-gradient(180deg, transparent 0, #000 14%, #000 86%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%),
              linear-gradient(180deg, transparent 0, #000 14%, #000 86%, transparent 100%);
  mask-composite: intersect;
}
.ams-anim-on :is(.m-brand img, .logo img, .login-hero-logo) {
  animation: amsLogoIn .8s cubic-bezier(.22,.9,.3,1) .22s both;
}
@keyframes amsLogoIn {
  0%   { opacity: 0; transform: scale(.90); }
  100% { opacity: 1; transform: scale(1);   }
}

/* labels/checkbox text a shade darker so contrast stays >= 4.5:1 on the more transparent glass */
html body.ams-light:is(.ams-login,.ams-portal-login) :is(.field label, label, .checkbox, .row-between) { color: #2d2e33 !important; }
html body.ams-light:is(.ams-login,.ams-portal-login) .login-anim-toggle .login-anim-label { color: #424449 !important; }
/* helper/footer lines: skyline.css paints them #cfd2d8 (unreadable on a light glass surface) */
html body.ams-light:is(.ams-login,.ams-portal-login) :is(.hint, .footer, .sub) { color: #2d2e33 !important; }
html body.ams-light:is(.ams-login,.ams-portal-login) :is(.eyebrow, .login-head .eyebrow) { color: #2748c4 !important; }
html body.ams-light:is(.ams-login,.ams-portal-login) .row-between a { color: #2748c4 !important; }

/* CAPTCHA question must never wrap onto two lines */
html body.ams-light.ams-login #captchaText { white-space: nowrap; }

/* ------------------------------------------------------------------ *
 * 4. THE SEQUENCE — everything inside the card arrives in order
 * ------------------------------------------------------------------ */
.ams-ui-rise { animation: amsRise .46s cubic-bezier(.22,.9,.3,1) both; }
@keyframes amsRise {
  0%   { opacity: 0; transform: translate3d(0,12px,0); }
  100% { opacity: 1; transform: translate3d(0,0,0);    }
}

.ams-anim-on :is(.eyebrow)                           { animation: amsRise .44s cubic-bezier(.22,.9,.3,1) .40s both; }
.ams-anim-on :is(.login-head, .title, .card h1)      { animation: amsRise .44s cubic-bezier(.22,.9,.3,1) .46s both; }
.ams-anim-on :is(.sub)                               { animation: amsRise .44s cubic-bezier(.22,.9,.3,1) .52s both; }
/* the form: children stagger automatically, whichever markup the page uses */
.ams-anim-on :is(.shell, .card) form > *             { animation: amsRise .44s cubic-bezier(.22,.9,.3,1) .58s both; }
.ams-anim-on :is(.shell, .card) form > *:nth-child(2){ animation-delay: .65s; }
.ams-anim-on :is(.shell, .card) form > *:nth-child(3){ animation-delay: .72s; }
.ams-anim-on :is(.shell, .card) form > *:nth-child(4){ animation-delay: .78s; }
.ams-anim-on :is(.shell, .card) form > *:nth-child(n+5) { animation-delay: .84s; }
.ams-anim-on :is(.footer, .hint)                     { animation: amsRise .44s cubic-bezier(.22,.9,.3,1) .90s both; }

/* ------------------------------------------------------------------ *
 * 5. THE ANIMATION TOGGLE — identical on every login page
 *    Label and switch are separate siblings in a nowrap flex row, so the
 *    knob can never ride over the text. Every property the shared login
 *    sheet overrides with !important is re-declared with !important.
 * ------------------------------------------------------------------ */
.login-anim-toggle {
  position: fixed;
  top: 16px; right: 16px;
  z-index: 60;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  background: rgba(255,255,255,.97) !important;
  border: 1px solid #cfd2d8 !important;
  border-radius: 999px !important;
  padding: 7px 12px !important;
  box-shadow: 0 6px 20px rgba(25,26,31,.22), 0 0 0 1px rgba(25,26,31,.05) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #424449 !important;
  max-width: calc(100vw - 32px);
  box-sizing: border-box;
}
.login-anim-label {
  flex: 0 0 auto !important;
  order: 1 !important;
  display: inline-block !important;
  white-space: nowrap !important;
  overflow: visible !important;
  line-height: 22px !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #424449 !important;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
/* The switch is an <input>, and the shared sheet repaints EVERY login input
   with !important:
       body.ams-light :is(input,select,textarea)                  -> 0,2,1
       body.ams-light:is(.ams-login,.ams-portal-login) input        -> 0,2,2
   A plain `.login-anim-switch` (0,1,0) loses that fight even with !important,
   which is why the track rendered WHITE in both states. The selector below is
   0,4,1 and wins outright; the long form is deliberate, do not shorten it. */
.login-anim-switch,
body:is(.ams-light,.ams-dark):is(.ams-login,.ams-portal-login) .login-anim-toggle .login-anim-switch {
  flex: 0 0 auto !important;
  order: 2 !important;
  position: relative !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  width: 40px !important;
  height: 22px !important;
  min-width: 40px !important;
  max-width: 40px !important;
  min-height: 22px !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  border: 1px solid #8b8a8e !important;   /* OFF — solid slate, never white */
  border-radius: 999px !important;
  background: #a9a9ad !important;
  box-shadow: inset 0 1px 2px rgba(25,26,31,.20) !important;
  outline: none;
  cursor: pointer;
  vertical-align: middle;
  transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
/* ON — blue AND ringed. The two states must be unmistakable. */
.login-anim-switch:checked,
body:is(.ams-light,.ams-dark):is(.ams-login,.ams-portal-login) .login-anim-toggle .login-anim-switch:checked {
  background: #3256df !important;
  border-color: #2748c4 !important;
  box-shadow: inset 0 1px 2px rgba(25,26,31,.15), 0 0 0 3px rgba(29,78,216,.20) !important;
}
.login-anim-switch::after {
  content: "";
  position: absolute;
  left: 2px; top: 2px;
  width: 17px; height: 17px;
  background: #fff;
  border-radius: 50%;
  /* dark ring so the knob reads on the slate track AND on the blue track */
  box-shadow: 0 1px 3px rgba(25,26,31,.35), 0 0 0 1px rgba(25,26,31,.22);
  transition: transform .2s cubic-bezier(.4,0,.2,1);
}
.login-anim-switch:checked::after { transform: translateX(17px); }
.login-anim-switch:focus-visible,
body:is(.ams-light,.ams-dark) .login-anim-toggle .login-anim-switch:focus-visible {
  outline: 2px solid #3256df !important;
  outline-offset: 2px;
  box-shadow: 0 0 0 3px rgba(29,78,216,.20) !important;
}
/* the state in words, so it is not carried by colour alone */
.login-anim-state {
  flex: 0 0 auto !important;
  order: 3 !important;
  display: inline-block !important;
  min-width: 24px;
  text-align: left;
  font-size: 10.5px !important;
  font-weight: 800 !important;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #8b8a8e !important;
}
.login-anim-state.is-on { color: #3256df !important; }

/* ------------------------------------------------------------------ *
 * 6. OFF — not merely a different colour: NO animation at all
 * ------------------------------------------------------------------ */
.ams-anim-off .ams-login-bg::before,
.ams-anim-off .ams-login-bg > *,
.ams-anim-off :is(.shell, .card),
.ams-anim-off :is(.shell, .card) *,
.ams-anim-off :is(.m-brand, .logo, .m-brand img, .login-hero-logo, .logo img,
                    .eyebrow, .login-head, .title, .card h1, .sub, .footer, .hint),
.ams-anim-off .ams-ui-edge,
.ams-anim-off .ams-ui-edge::before,
.ams-anim-off .ams-ui-glow,
.ams-anim-off .ams-ui-glow::before { animation: none !important; }

/* paused while the tab is hidden */
.ams-anim-paused .ams-login-bg::before,
.ams-anim-paused .ams-login-bg > *,
.ams-anim-paused .ams-ui-edge::before,
.ams-anim-paused .ams-ui-glow::before { animation-play-state: paused !important; }

/* ------------------------------------------------------------------ *
 * 7. REDUCED MOTION — honoured in CSS as well as in the script
 * ------------------------------------------------------------------ */
/* The OS setting only picks the DEFAULT (the inline <head> snippet and the JS put
   .ams-anim-off on <html> when the user has never chosen). It must not override an
   explicit ON from the toggle, so the safety net below applies only while the page
   is NOT in the explicit-ON state. */
@media (prefers-reduced-motion: reduce) {
  html:not(.ams-anim-on) .ams-login-bg::before,
  html:not(.ams-anim-on) .ams-login-bg > *,
  html:not(.ams-anim-on) :is(.shell, .card),
  html:not(.ams-anim-on) :is(.shell, .card) *,
  html:not(.ams-anim-on) :is(.m-brand, .logo, .m-brand img, .login-hero-logo, .logo img,
      .eyebrow, .login-head, .title, .card h1, .sub, .footer, .hint),
  html:not(.ams-anim-on) .ams-ui-edge,
  html:not(.ams-anim-on) .ams-ui-edge::before,
  html:not(.ams-anim-on) .ams-ui-glow,
  html:not(.ams-anim-on) .ams-ui-glow::before { animation: none !important; }
}

/* ------------------------------------------------------------------ *
 * 8. MOBILE — comfortable tap target, slightly calmer scene
 * ------------------------------------------------------------------ */
@media (max-width: 900px) {
  .login-anim-toggle {
    top: 10px; right: 10px;
    gap: 9px !important;
    padding: 8px 11px !important;
    min-height: 44px;
  }
  .login-anim-label { font-size: 11.5px !important; line-height: 24px !important; }
  .login-anim-switch,
  body:is(.ams-light,.ams-dark):is(.ams-login,.ams-portal-login) .login-anim-toggle .login-anim-switch {
    width: 46px !important; height: 26px !important;
    min-width: 46px !important; max-width: 46px !important; min-height: 26px !important;
    border-radius: 999px !important;
  }
  .login-anim-switch::after { width: 21px; height: 21px; left: 2px; top: 2px; }
  .login-anim-switch:checked::after { transform: translateX(19px); }
  .login-anim-state { font-size: 10px !important; min-width: 26px; }
  .ams-lb-orbit { width: 320px; height: 320px; margin: -160px 0 0 -160px; }
  .ams-anim-on .ams-lb-orbit { animation-duration: 26s; }
}


/* ==========================================================================
   9. PREMIUM DARK EDITION  ("Midnight Aurora")
   Appended last so it wins over every light-glass rule above and in ams.css.
   Presentation only — no markup, form, CAPTCHA or auth behaviour is touched.
   ========================================================================== */
@property --ams-ui-a { syntax: "<angle>"; initial-value: 0deg; inherits: false; }

/* ---- page background -------------------------------------------------- */
html body.ams-light:is(.ams-login,.ams-portal-login) {
  background:
    radial-gradient(900px 520px at 12% -10%, rgba(106,90,224,.38) 0%, rgba(106,90,224,0) 60%),
    radial-gradient(800px 520px at 100% 110%, rgba(209,84,138,.26) 0%, rgba(209,84,138,0) 60%),
    radial-gradient(700px 420px at 90% 0%, rgba(31,144,243,.22) 0%, rgba(31,144,243,0) 60%),
    linear-gradient(165deg,#0d111d 0%,#0a0e18 50%,#080b14 100%) !important;
  background-attachment: fixed !important;
}

/* aurora recolour of the existing orbs */
.ams-lb-orb-a { background: radial-gradient(circle, rgba(106,90,224,.55) 0%, rgba(106,90,224,.16) 44%, rgba(106,90,224,0) 70%) !important; }
.ams-lb-orb-b { background: radial-gradient(circle, rgba(209,84,138,.42) 0%, rgba(209,84,138,.12) 44%, rgba(209,84,138,0) 72%) !important; }
.ams-lb-orb-c { background: radial-gradient(circle, rgba(31,144,243,.34) 0%, rgba(106,90,224,.10) 46%, rgba(31,144,243,0) 70%) !important; }
.ams-lb-orbit { background: radial-gradient(circle, rgba(168,85,247,.30) 0%, rgba(59,130,246,.12) 40%, rgba(59,130,246,0) 70%) !important; }
.ams-login-bg::before {
  background:
    radial-gradient(58% 44% at 22% 16%, rgba(50,86,223,.38) 0%, rgba(106,90,224,0) 62%),
    radial-gradient(54% 42% at 84% 80%, rgba(209,84,138,.28) 0%, rgba(209,84,138,0) 64%),
    radial-gradient(46% 36% at 64% 28%, rgba(31,144,243,.18) 0%, rgba(31,144,243,0) 60%) !important;
}
.ams-lb-wave { background: linear-gradient(180deg, rgba(91,75,216,0) 0%, rgba(91,75,216,.10) 45%, rgba(31,144,243,.14) 52%, rgba(91,75,216,.10) 60%, rgba(91,75,216,0) 100%) !important; }
.ams-lb-star { background: #fff !important; box-shadow: 0 0 8px rgba(255,255,255,.9), 0 0 18px rgba(91,75,216,.7) !important; }

/* moving neon grid + vignette (replaces the old static vignette) */
.ams-login-bg::after {
  background:
    radial-gradient(120% 90% at 50% 50%, rgba(2,3,12,0) 38%, rgba(2,3,12,.70) 100%),
    linear-gradient(rgba(127,169,247,.10) 1px, transparent 1px) 0 0 / 56px 56px,
    linear-gradient(90deg, rgba(127,169,247,.10) 1px, transparent 1px) 0 0 / 56px 56px !important;
  -webkit-mask-image: radial-gradient(90% 80% at 50% 50%, #000 30%, transparent 100%);
          mask-image: radial-gradient(90% 80% at 50% 50%, #000 30%, transparent 100%);
}
.ams-anim-on .ams-login-bg::after { animation: amsGrid 14s linear infinite; }
@keyframes amsGrid { to { background-position: 0 0, 0 56px, 56px 0; } }

/* ---- RGB halo behind the card (positioned by the script) -------------- */
.ams-lb-halo {
  position: fixed !important; left: 0; top: 0; width: 420px; height: 560px;
  border-radius: 24px; opacity: 0; transform: none !important;
  background: conic-gradient(from var(--ams-ui-a), #2bb6d6, #4a70ea, #7a6ae4, #d1548a, #e0912f, #f4cf94, #4ad0a8, #2bb6d6);
  filter: blur(34px);
  transition: opacity .8s ease .5s;
}
.ams-anim-on .ams-lb-halo { opacity: .8; animation: amsHalo 6s linear infinite; }
.ams-anim-off .ams-lb-halo { opacity: .22; }
@keyframes amsHalo { to { --ams-ui-a: 360deg; } }

/* ---- the card: dark glass -------------------------------------------- */
html body.ams-light.ams-login .shell,
html body.ams-light.ams-portal-login > .card {
  background: linear-gradient(160deg, rgba(20,24,52,.72) 0%, rgba(10,12,30,.78) 100%) !important;
  -webkit-backdrop-filter: blur(26px) saturate(170%);
          backdrop-filter: blur(26px) saturate(170%);
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 24px !important;
  color: #e4e6ea !important;
  box-shadow: 0 40px 90px rgba(0,0,0,.65), 0 0 0 1px rgba(255,255,255,.03), inset 0 1px 0 rgba(255,255,255,.12) !important;
}
html body.ams-light.ams-login .login-panel { background: transparent !important; padding: 34px 32px 28px !important; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html body.ams-light.ams-login .shell, html body.ams-light.ams-portal-login > .card { background: #151b29 !important; }
}
/* cursor spotlight on the glass (vars set by the script) */
html body.ams-light:is(.ams-login,.ams-portal-login) :is(.shell,.card)::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit;
  background: radial-gradient(340px circle at var(--mx,50%) var(--my,0%), rgba(127,169,247,.16), transparent 60%);
  opacity: 0; transition: opacity .3s ease;
}
html body.ams-light:is(.ams-login,.ams-portal-login) :is(.shell,.card):hover::after { opacity: 1; }
/* diagonal light sweep across the glass, every few seconds */
html body.ams-light:is(.ams-login,.ams-portal-login) :is(.shell,.card)::before {
  content: ""; position: absolute; top: -20%; bottom: -20%; left: -60%; width: 38%; z-index: 1; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.07), transparent);
  transform: skewX(-18deg) translate3d(0,0,0);
}
.ams-anim-on :is(.shell,.card)::before { animation: amsSweep 7s ease-in-out 1.8s infinite; }
@keyframes amsSweep { 0% { left: -60%; } 40%,100% { left: 130%; } }

/* stronger, brighter LED ring */
.ams-ui-edge { padding: 2px !important; }
.ams-ui-glow { padding: 8px !important; }
.ams-anim-on .ams-ui-edge::before { animation: amsEdgeSpin 5s linear infinite, amsEdgeFade .8s ease 1s both !important; }
.ams-anim-on .ams-ui-glow::before { animation: amsEdgeSpin 5s linear infinite, amsGlowFade .8s ease 1s both !important; }
@keyframes amsGlowFade { from { opacity: 0; } to { opacity: .65; } }

/* floating logo plate */
html body.ams-light:is(.ams-login,.ams-portal-login) :is(.m-brand img, .logo img, .login-hero-logo) {
  mix-blend-mode: normal !important;
  -webkit-mask-image: none !important; mask-image: none !important;
  filter: drop-shadow(0 0 14px rgba(106,90,224,.55));
}
html.ams-ui-logo-opaque body.ams-light.ams-login .m-brand img {
  background: linear-gradient(145deg,#ffffff,#e0ecfc) !important;
  padding: 10px 16px; border-radius: 20px !important; box-sizing: content-box;
  height: 84px !important; width: auto !important;
  box-shadow: 0 10px 34px rgba(106,90,224,.45), 0 0 0 1px rgba(255,255,255,.5) !important;
}
html.ams-ui-logo-opaque body.ams-light.ams-portal-login .logo {
  background: linear-gradient(145deg,#ffffff,#e0ecfc) !important;
  border-radius: 20px !important; padding: 8px 14px; box-sizing: border-box;
  box-shadow: 0 10px 34px rgba(106,90,224,.45), 0 0 0 1px rgba(255,255,255,.5) !important;
}
.ams-anim-on :is(.m-brand, .logo) { animation: amsFloat 5s ease-in-out infinite; }
@keyframes amsFloat { 0%,100% { transform: translate3d(0,0,0); } 50% { transform: translate3d(0,-6px,0); } }

/* ---- type ------------------------------------------------------------- */
html body.ams-light.ams-login .login-head h2,
html body.ams-light.ams-portal-login :is(.title,h1) {
  background: linear-gradient(90deg,#fff 0%,#cec7f6 35%,#5fd3d8 70%,#fff 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent !important;
}
.ams-anim-on .login-head h2, .ams-anim-on .title { animation: amsRise .44s cubic-bezier(.22,.9,.3,1) .46s both, amsTitle 7s linear 1s infinite; }
@keyframes amsTitle { to { background-position: -220% 0; } }
html body.ams-light:is(.ams-login,.ams-portal-login) :is(.eyebrow,.login-head .eyebrow) { color: #5fd3d8 !important; text-shadow: 0 0 14px rgba(31,144,243,.55); }
html body.ams-light:is(.ams-login,.ams-portal-login) :is(.field label,label,.checkbox,.row-between) { color: #cfd2d8 !important; }
html body.ams-light:is(.ams-login,.ams-portal-login) :is(.sub,.hint,.footer) { color: #a9a9ad !important; }
html body.ams-light:is(.ams-login,.ams-portal-login) .row-between a { color: #7fa9f7 !important; }
html body.ams-light:is(.ams-login,.ams-portal-login) .row-between a:hover { color: #5fd3d8 !important; }

/* ---- fields ----------------------------------------------------------- */
html body.ams-light:is(.ams-login,.ams-portal-login) .field { position: relative; }
html body.ams-light:is(.ams-login,.ams-portal-login) input:not([type=checkbox]):not(.login-anim-switch) {
  background: rgba(255,255,255,.055) !important;
  border: 1px solid rgba(255,255,255,.13) !important;
  border-radius: 14px !important;
  color: #f6f7f9 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05) !important;
  transition: border-color .2s, box-shadow .25s, background .2s !important;
}
html body.ams-light:is(.ams-login,.ams-portal-login) input::placeholder { color: #8b8a8e !important; }
html body.ams-light:is(.ams-login,.ams-portal-login) input:not([type=checkbox]):not(.login-anim-switch):focus {
  background: rgba(255,255,255,.09) !important;
  border-color: rgba(103,232,249,.8) !important;
  box-shadow: 0 0 0 3px rgba(31,144,243,.16), 0 0 26px rgba(91,75,216,.35) !important;
}
html body.ams-light:is(.ams-login,.ams-portal-login) input:-webkit-autofill {
  -webkit-text-fill-color: #f6f7f9 !important;
  -webkit-box-shadow: 0 0 0 40px #1a2030 inset !important;
  caret-color: #fff;
}
html body.ams-light.ams-login .input-wrap svg { stroke: #7a6ae4 !important; transition: stroke .2s, filter .2s; }
html body.ams-light.ams-login .input-wrap:focus-within svg { stroke: #5fd3d8 !important; filter: drop-shadow(0 0 6px rgba(31,144,243,.8)); }
/* RGB underline that draws in on focus */
html body.ams-light:is(.ams-login,.ams-portal-login) .field::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: -1px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg,#2bb6d6,#7a6ae4,#d1548a,#e0912f,#2bb6d6); background-size: 200% 100%;
  transform: scaleX(0); transform-origin: left; transition: transform .35s cubic-bezier(.22,.9,.3,1); pointer-events: none;
}
html body.ams-light:is(.ams-login,.ams-portal-login) .field:focus-within::after { transform: scaleX(1); }
.ams-anim-on .field:focus-within::after { animation: amsBar 3s linear infinite; }
@keyframes amsBar { to { background-position: 200% 0; } }

/* captcha + show/hide */
html body.ams-light:is(.ams-login,.ams-portal-login) :is(.captcha-box,.toggle-pass) {
  background: rgba(106,90,224,.14) !important; color: #cec7f6 !important; border-color: rgba(127,169,247,.45) !important;
  box-shadow: none !important;
}
html body.ams-light.ams-login #captchaText { color: #fff !important; text-shadow: 0 0 12px rgba(127,169,247,.9) !important; }
html body.ams-light.ams-login .refresh-btn {
  background: linear-gradient(135deg,#5b4bd8,#7a6ae4) !important; border-color: rgba(255,255,255,.2) !important;
  box-shadow: 0 4px 14px rgba(106,90,224,.5) !important;
}
html body.ams-light.ams-login .checkbox input { accent-color: #7a6ae4; }

/* ---- primary button: RGB gradient + shimmer ---------------------------- */
html body.ams-light:is(.ams-login,.ams-portal-login) :is(form > .btn, form button[type=submit]) {
  position: relative; overflow: hidden;
  background: linear-gradient(110deg,#3256df,#5b4bd8,#b9385f,#3256df) !important;
  background-size: 260% 100% !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  color: #fff !important; letter-spacing: .03em;
  box-shadow: 0 12px 30px rgba(75,63,196,.50), inset 0 1px 0 rgba(255,255,255,.3) !important;
  transition: transform .18s ease, box-shadow .25s ease !important;
}
.ams-anim-on :is(form > .btn, form button[type=submit]) { animation: amsBtn 6s linear infinite; }
@keyframes amsBtn { to { background-position: -260% 0; } }
html body.ams-light:is(.ams-login,.ams-portal-login) :is(form > .btn, form button[type=submit])::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 30%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.38), transparent);
  transform: skewX(-20deg); pointer-events: none;
}
.ams-anim-on :is(form > .btn, form button[type=submit])::after { animation: amsShine 3.6s ease-in-out 1.2s infinite; }
@keyframes amsShine { 0% { left: -40%; } 45%,100% { left: 140%; } }
html body.ams-light:is(.ams-login,.ams-portal-login) :is(form > .btn, form button[type=submit]):hover {
  filter: none !important; transform: translateY(-2px);
  box-shadow: 0 18px 40px rgba(209,84,138,.5), 0 0 0 3px rgba(167,139,250,.25), inset 0 1px 0 rgba(255,255,255,.35) !important;
}
html body.ams-light:is(.ams-login,.ams-portal-login) :is(form > .btn, form button[type=submit]):active { transform: translateY(0) scale(.99); filter: none !important; }

/* ---- messages ---------------------------------------------------------- */
html body.ams-light:is(.ams-login,.ams-portal-login) .msg.error { background: rgba(239,68,68,.12) !important; color: #f1c2c0 !important; border-color: rgba(248,113,113,.45) !important; }
html body.ams-light:is(.ams-login,.ams-portal-login) .msg.success { background: rgba(34,197,94,.12) !important; color: #a8dcc7 !important; border-color: rgba(74,222,128,.45) !important; }

/* ---- animation toggle: dark glass pill -------------------------------- */
html body.ams-light:is(.ams-login,.ams-portal-login) .login-anim-toggle {
  background: rgba(15,18,42,.72) !important; border: 1px solid rgba(255,255,255,.16) !important;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 8px 26px rgba(0,0,0,.5) !important;
}
html body.ams-light:is(.ams-login,.ams-portal-login) .login-anim-toggle .login-anim-label { color: #cfd2d8 !important; }
html body.ams-light:is(.ams-login,.ams-portal-login) .login-anim-state { color: #a9a9ad !important; }
html body.ams-light:is(.ams-login,.ams-portal-login) .login-anim-state.is-on { color: #5fd3d8 !important; }

/* ---- OFF state: halo/sweep/shine/float stay still ---------------------- */
.ams-anim-off .ams-lb-halo,
.ams-anim-off :is(.shell,.card)::before,
.ams-anim-off :is(form > .btn, form button[type=submit]),
.ams-anim-off :is(form > .btn, form button[type=submit])::after,
.ams-anim-off .field::after,
.ams-anim-off .ams-login-bg::after { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  html:not(.ams-anim-on) .ams-lb-halo,
  html:not(.ams-anim-on) :is(.shell,.card)::before,
  html:not(.ams-anim-on) :is(form > .btn, form button[type=submit]),
  html:not(.ams-anim-on) :is(form > .btn, form button[type=submit])::after { animation: none !important; }
}
@media (max-width: 900px) {
  .ams-lb-halo { filter: blur(24px); }
  html body.ams-light.ams-login .login-panel { padding: 22px 20px 18px !important; }
  html body.ams-light.ams-login .m-brand img { height: 56px !important; padding: 8px 12px; border-radius: 16px !important; }
}

html body.ams-light.ams-login .m-brand { margin-top: 14px !important; }
html body.ams-light.ams-portal-login .logo { margin-top: 8px !important; }


/* ==========================================================================
   10. FIXES — autofill white-out + smooth on low-end devices
   ========================================================================== */
/* --- 10a. autofill / saved-password must stay dark (the focus rule above used
        to win over the autofill rule, which is what turned the field white) --- */
body.ams-login, body.ams-portal-login { color-scheme: dark; }
html body.ams-light:is(.ams-login,.ams-portal-login) input:not([type=checkbox]):not(.login-anim-switch):-webkit-autofill,
html body.ams-light:is(.ams-login,.ams-portal-login) input:not([type=checkbox]):not(.login-anim-switch):-webkit-autofill:hover,
html body.ams-light:is(.ams-login,.ams-portal-login) input:not([type=checkbox]):not(.login-anim-switch):-webkit-autofill:focus,
html body.ams-light:is(.ams-login,.ams-portal-login) input:not([type=checkbox]):not(.login-anim-switch):-webkit-autofill:active {
  -webkit-text-fill-color: #f6f7f9 !important;
  -webkit-box-shadow: 0 0 0 1000px #241e42 inset !important;
          box-shadow: 0 0 0 1000px #241e42 inset !important;
  caret-color: #fff !important;
  border-color: rgba(127,169,247,.55) !important;
  transition: background-color 600000s 0s, color 600000s 0s !important;
}
html body.ams-light:is(.ams-login,.ams-portal-login) input:not([type=checkbox]):not(.login-anim-switch):autofill {
  -webkit-text-fill-color: #f6f7f9 !important;
  box-shadow: 0 0 0 1000px #241e42 inset !important;
}

/* --- 10b. cheaper rendering (applies to everyone) --- */
/* backdrop-filter is the single most expensive thing on weak GPUs: use a denser solid glass instead */
html body.ams-light.ams-login .shell,
html body.ams-light.ams-portal-login > .card {
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  background: linear-gradient(160deg, rgba(20,24,52,.94) 0%, rgba(10,12,30,.96) 100%) !important;
}
html body.ams-light:is(.ams-login,.ams-portal-login) .login-anim-toggle { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: rgba(15,18,42,.92) !important; }
/* the blurred, spinning inner glow ring repaints every frame: drop it, keep the crisp LED ring */
.ams-ui-glow { display: none !important; }
/* halo: blur computed once (static), no per-frame repaint */
.ams-anim-on .ams-lb-halo { animation: none !important; opacity: .6; filter: blur(28px); }
/* grid: static (animating background-position repaints the whole screen) */
.ams-anim-on .ams-login-bg::after { animation: none !important; }
/* gradient-text / gradient-button background animations repaint: removed */
.ams-anim-on .login-head h2, .ams-anim-on .title { animation: amsRise .44s cubic-bezier(.22,.9,.3,1) .46s both !important; }
.ams-anim-on :is(form > .btn, form button[type=submit]) { animation: amsRise .44s cubic-bezier(.22,.9,.3,1) .84s both !important; }
.ams-anim-on .field:focus-within::after { animation: none !important; }
/* sweep + shine: move with transform (compositor) instead of left (layout) */
html body.ams-light:is(.ams-login,.ams-portal-login) :is(.shell,.card)::before { left: 0 !important; transform: translate3d(-160%,0,0) skewX(-18deg); will-change: transform; }
@keyframes amsSweep { 0% { transform: translate3d(-160%,0,0) skewX(-18deg); } 45%,100% { transform: translate3d(420%,0,0) skewX(-18deg); } }
html body.ams-light:is(.ams-login,.ams-portal-login) :is(form > .btn, form button[type=submit])::after { left: 0 !important; transform: translate3d(-160%,0,0) skewX(-20deg); will-change: transform; }
@keyframes amsShine { 0% { transform: translate3d(-160%,0,0) skewX(-20deg); } 45%,100% { transform: translate3d(520%,0,0) skewX(-20deg); } }
/* fewer always-on layers */
.ams-lb-orb-c, .ams-lb-wave, .ams-lb-trail-2, .ams-lb-trail-3, .ams-lb-shot-2 { display: none !important; }
.ams-login-bg > * { will-change: auto; }
.ams-lb-orb, .ams-lb-orbit { will-change: transform; }

/* --- 10c. LITE mode: auto-enabled on weak / slow devices (class set by the script) --- */
.ams-ui-lite .ams-lb-orb-b, .ams-ui-lite .ams-lb-orbit, .ams-ui-lite .ams-lb-trail, .ams-ui-lite .ams-lb-shot, .ams-ui-lite .ams-lb-star:nth-child(n+16) { display: none !important; }
.ams-ui-lite .ams-login-bg::before { animation: none !important; }
.ams-ui-lite :is(.shell,.card)::before, .ams-ui-lite :is(.shell,.card)::after,
.ams-ui-lite :is(form > .btn, form button[type=submit])::after { display: none !important; }
.ams-ui-lite :is(.m-brand,.logo) { animation: none !important; }
.ams-ui-lite .ams-lb-halo { display: none !important; }
.ams-ui-lite .ams-lb-orb-a { animation-duration: 60s !important; }
.ams-ui-lite .ams-ui-edge::before { animation-duration: 9s, .8s !important; }
.ams-ui-lite .ams-lb-star { box-shadow: 0 0 6px rgba(255,255,255,.8) !important; }


/* ==========================================================================
   11. COMPACT CARD + NEW LOGO MARK
   Everything incl. Sign In fits a normal laptop screen without scrolling.
   ========================================================================== */
html body.ams-light:is(.ams-login,.ams-portal-login) { padding-top: 12px !important; padding-bottom: 12px !important; }
html body.ams-light.ams-login .shell { max-width: 396px !important; border-radius: 22px !important; }
html body.ams-light.ams-portal-login > .card { max-width: 396px !important; padding: 22px 26px 18px !important; border-radius: 22px !important; }
html body.ams-light.ams-login .login-panel { padding: 20px 28px 16px !important; }

/* logo mark (inline SVG, built by the script) */
.ams-ui-mark { display: flex; justify-content: center; }
.ams-ui-mark svg { width: 68px; height: 68px; display: block; filter: drop-shadow(0 0 12px rgba(91,75,216,.65)) drop-shadow(0 0 26px rgba(31,144,243,.35)); }
html body.ams-light.ams-login .m-brand { margin: 0 0 8px !important; }
html body.ams-light.ams-portal-login .logo {
  background: none !important; box-shadow: none !important; border: 0 !important; border-radius: 0 !important; padding: 0 !important;
  width: auto !important; height: auto !important; margin: 0 auto 8px !important; overflow: visible !important;
}

/* tighter rhythm */
html body.ams-light.ams-login .login-head { margin-bottom: 12px !important; }
html body.ams-light.ams-login .login-head h2 { font-size: 22px !important; }
html body.ams-light.ams-login .login-head .eyebrow, html body.ams-light.ams-portal-login .eyebrow { margin-bottom: 5px !important; font-size: 10px !important; }
html body.ams-light.ams-portal-login :is(.title,h1) { font-size: 22px !important; margin: 4px 0 2px !important; }
html body.ams-light.ams-portal-login .sub { font-size: 12.5px !important; margin-bottom: 14px !important; }
html body.ams-light.ams-login .field { margin-bottom: 11px !important; }
html body.ams-light.ams-portal-login .field { margin-bottom: 11px !important; }
html body.ams-light.ams-login .field label, html body.ams-light.ams-portal-login .field label { font-size: 12.5px !important; margin-bottom: 5px !important; }
html body.ams-light.ams-login .input-wrap input { height: 42px !important; font-size: 14px !important; border-radius: 12px !important; }
html body.ams-light.ams-portal-login input { height: 42px !important; min-height: 42px !important; font-size: 14px !important; }
html body.ams-light.ams-login .captcha-row { grid-template-columns: 116px minmax(0,1fr) !important; gap: 10px !important; }
html body.ams-light.ams-login .captcha-box { height: 42px !important; border-radius: 12px !important; }
html body.ams-light.ams-login .row-between { margin: 2px 0 12px !important; }
html body.ams-light.ams-login form > .btn, html body.ams-light.ams-portal-login form button[type=submit] { height: 44px !important; min-height: 44px !important; border-radius: 12px !important; margin-top: 2px !important; }
html body.ams-light.ams-login .footer { margin-top: 14px !important; }
html body.ams-light.ams-portal-login .hint { margin-top: 12px !important; font-size: 11.5px !important; }

/* short screens: shed the decoration, never the form */
@media (max-height: 640px) {
  .ams-ui-mark svg { width: 46px; height: 46px; }
  html body.ams-light.ams-login .login-head .eyebrow, html body.ams-light.ams-portal-login .eyebrow,
  html body.ams-light.ams-login .footer, html body.ams-light.ams-portal-login .sub { display: none !important; }
  html body.ams-light.ams-login .field, html body.ams-light.ams-portal-login .field { margin-bottom: 8px !important; }
}
@media (max-width: 900px) {
  .ams-ui-mark svg { width: 48px; height: 48px; }
  html body.ams-light.ams-login .m-brand { margin: 0 0 6px !important; }
  html body.ams-light.ams-login .login-panel { padding: 16px 18px 12px !important; }
  html body.ams-light.ams-login .login-head h2 { font-size: 20px !important; }
}


/* ==========================================================================
   12. SIGNAL HORIZON — scene, entrance, interaction feedback
   Additive. Built by skyline-login-anim.js (sceneMarkup / decorateCard /
   feedbackFx). Everything that moves uses transform, opacity, translate or
   scale only. All motion is gated on .ams-anim-on, so "Animations: Off",
   prefers-reduced-motion and .ams-ui-lite all leave a calm, static scene.
   ========================================================================== */

/* ---- 12.0 DEFECT FIX — the background layer was never visible -----------------
   The layer sat at z-index:-1, but <html> has its own background (skyline.css), so
   the aurora gradient on <body> is NOT propagated to the canvas and is painted
   ABOVE negative-z content: orbs, grid, halo, trails and stars were all hidden
   behind it (the "empty" look). Lifting the layer to z-index:0 paints it over
   the body gradient; the card (positioned, later in the DOM, z-index:1) and the
   toggle (z-index:60) stay above it. No markup, selector or behaviour changes. */
.ams-login-bg { z-index: 0; }
html body.ams-light.ams-login .shell,
html body.ams-light.ams-portal-login > .card { z-index: 1; }

/* ---- 12a. scene container ------------------------------------------------ */
.ams-login-bg > .ams-ui-scene { position: absolute; inset: 0; transform: none; will-change: auto; display: block; }
.ams-ui-scene > *, .ams-ui-scene .ams-ui-par > * { position: absolute; display: block; }
.ams-ui-scene i, .ams-ui-scene b, .ams-ui-scene u { display: block; font-style: normal; text-decoration: none; }
.ams-ui-scene .ams-ui-par { inset: 0; translate: calc(var(--px,0) * var(--pm,0) * 1px) calc(var(--py,0) * var(--pm,0) * .6px); transition: translate .7s cubic-bezier(.2,.7,.2,1); }
.ams-ui-par-l { --pm: -16; --dir: -1; }
.ams-ui-par-r { --pm: 16;  --dir: 1;  }

/* which half is visible: desktop flanks vs. small-screen scene */
.ams-ui-strip, .ams-ui-par { display: none !important; }
.ams-ui-m-ring, .ams-ui-m-glow { display: block; }
@media (min-width: 1000px) {
  .ams-ui-strip, .ams-ui-par { display: block !important; }
  .ams-ui-m-ring, .ams-ui-m-glow { display: none !important; }
}

/* ---- 12b. perspective floor ---------------------------------------------- */
.ams-ui-floor {
  left: -10%; right: -10%; bottom: 0; height: 44vh;
  perspective: 520px; perspective-origin: 50% 0%; overflow: hidden;
  -webkit-mask-image: linear-gradient(to top, #000 0%, rgba(0,0,0,.55) 55%, transparent 100%);
          mask-image: linear-gradient(to top, #000 0%, rgba(0,0,0,.55) 55%, transparent 100%);
  opacity: .42;
}
.ams-ui-floor::before { /* horizon line */
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; z-index: 1;
  background: linear-gradient(90deg, transparent, rgba(127,169,247,.7) 30%, rgba(103,232,249,.9) 50%, rgba(244,114,182,.7) 70%, transparent);
}
.ams-ui-floor-grid {
  left: 0; right: 0; top: 0; height: 260%;
  transform-origin: 50% 0; transform: rotateX(62deg) translate3d(0,0,0);
  background:
    linear-gradient(rgba(127,169,247,.55) 1px, transparent 1px) 0 0 / 100% 64px,
    linear-gradient(90deg, rgba(127,169,247,.55) 1px, transparent 1px) 0 0 / 64px 100%;
  background-position: 0 0, 50% 0;
}
.ams-ui-floor-grid { position: absolute; display: block; }
@keyframes amsFloor {
  from { transform: rotateX(62deg) translate3d(0,0,0); }
  to   { transform: rotateX(62deg) translate3d(0,64px,0); }
}
.ams-anim-on .ams-ui-floor-grid { animation: amsFloor 3.2s linear infinite; will-change: transform; }

/* ---- 12c. light rails ----------------------------------------------------- */
.ams-ui-strip {
  top: 0; height: 100%; width: 1px; overflow: hidden;
  background: linear-gradient(180deg, transparent 0%, rgba(127,169,247,.30) 30%, rgba(127,169,247,.30) 70%, transparent 100%);
}
.ams-ui-strip::after {
  content: ""; position: absolute; left: -1px; width: 3px; top: 0; height: 18vh; border-radius: 3px;
  background: linear-gradient(180deg, transparent, #5fd3d8 60%, #fff);
  transform: translate3d(0,-20vh,0); opacity: 0;
}
.ams-ui-strip-la { left: calc(50% - 224px); } .ams-ui-strip-ra { left: calc(50% + 224px); }
.ams-ui-strip-lb { left: calc(50% - (198px + (50vw - 198px) * .55)); }
.ams-ui-strip-rb { left: calc(50% + (198px + (50vw - 198px) * .55)); }
.ams-ui-strip-lc { left: calc(50% - (198px + (50vw - 198px) * .9)); }
.ams-ui-strip-rc { left: calc(50% + (198px + (50vw - 198px) * .9)); }
.ams-ui-strip-lb::after, .ams-ui-strip-rc::after { background: linear-gradient(180deg, transparent, #b8aef2 60%, #fff); }
.ams-ui-strip-lc::after, .ams-ui-strip-rb::after { background: linear-gradient(180deg, transparent, #e79cc4 60%, #fff); }
.ams-anim-on .ams-ui-strip::after { animation: amsRail var(--d,10s) cubic-bezier(.45,0,.55,1) var(--dl,0s) infinite; }
@keyframes amsRail {
  0%   { transform: translate3d(0,-20vh,0); opacity: 0; }
  8%   { opacity: .95; }
  62%  { opacity: .95; }
  72%,100% { transform: translate3d(0,112vh,0); opacity: 0; }
}

/* ---- 12d. left: message chips -------------------------------------------- */
.ams-ui-chip {
  --free: calc(50vw - 198px - 168px);
  width: 168px; height: 52px; border-radius: 15px;
  right: calc(50% + 198px + var(--k,.1) * var(--free));
  top: var(--t,30%);
  scale: var(--s,1); opacity: var(--o,.9);
  background: linear-gradient(135deg, rgba(34,38,86,.80), rgba(14,16,42,.80));
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 14px 34px rgba(0,0,0,.45), 0 0 26px var(--glow,rgba(106,90,224,.16)), inset 0 1px 0 rgba(255,255,255,.08);
}
.ams-ui-chip-1 { --t: 17%; --k: .30; --s: 1;   --o: .92; --glow: rgba(31,144,243,.16); }
.ams-ui-chip-2 { --t: 33%; --k: .78; --s: .92; --o: .80; --glow: rgba(91,75,216,.18); }
.ams-ui-chip-3 { --t: 50%; --k: .12; --s: 1;   --o: .92; --glow: rgba(209,84,138,.16); }
.ams-ui-chip-4 { --t: 66%; --k: .62; --s: .84; --o: .62; --glow: rgba(31,144,243,.12); }
.ams-ui-chip i { /* avatar */
  position: absolute; left: 11px; top: 13px; width: 26px; height: 26px; border-radius: 50%;
  background: linear-gradient(135deg, #2bb6d6, #7a6ae4 60%, #d1548a);
  box-shadow: 0 0 12px rgba(91,75,216,.55);
}
.ams-ui-chip b, .ams-ui-chip b::after { /* two skeleton text lines */
  position: absolute; left: 48px; height: 6px; border-radius: 3px; background: rgba(226,232,240,.26);
}
.ams-ui-chip b { top: 16px; width: 66px; }
.ams-ui-chip b::after { content: ""; left: 0; top: 14px; width: 40px; background: rgba(226,232,240,.13); }
.ams-ui-chip u { position: absolute; right: 11px; bottom: 9px; font: 800 11px/1 system-ui, sans-serif; letter-spacing: -.12em; color: #5fd3d8; text-shadow: 0 0 8px rgba(31,144,243,.8); }
.ams-ui-chip u::before { content: "\2713\2713"; }
.ams-ui-chip-2 i { background: linear-gradient(135deg, #8f7ceb, #d1548a); }
.ams-ui-chip-3 i { background: linear-gradient(135deg, #e0912f, #e0912f); }
.ams-ui-chip-4 i { background: linear-gradient(135deg, #4ad0a8, #2bb6d6); }
.ams-ui-chip-3 b { width: 52px; } .ams-ui-chip-3 b::after { width: 58px; }
.ams-anim-on .ams-ui-chip {
  animation: amsChipIn .9s cubic-bezier(.16,.84,.3,1) var(--in,1.1s) both, amsChipFloat var(--fd,8s) ease-in-out var(--fl,0s) infinite alternate;
}
.ams-ui-chip-1 { --in: 1.05s; --fd: 8s;  --fl: -1s; } .ams-ui-chip-2 { --in: 1.25s; --fd: 10s; --fl: -4s; }
.ams-ui-chip-3 { --in: 1.45s; --fd: 9s;  --fl: -6s; } .ams-ui-chip-4 { --in: 1.65s; --fd: 11s; --fl: -2s; }
@keyframes amsChipIn {
  from { opacity: 0; transform: translate3d(calc(var(--dir,-1) * -34px), 12px, 0); }
  to   { opacity: var(--o,.9); transform: translate3d(0,0,0); }
}
@keyframes amsChipFloat { from { translate: 0 -9px; } to { translate: 0 9px; } }

/* ---- 12e. right: radar ---------------------------------------------------- */
.ams-ui-radar {
  --rs: clamp(240px, calc(50vw - 248px), 500px);
  width: var(--rs); height: var(--rs);
  left: calc(75% + 99px - var(--rs) / 2); top: calc(50% - var(--rs) / 2);
  opacity: .9;
}
.ams-ui-radar::before, .ams-ui-radar::after { /* crosshair */
  content: ""; position: absolute; background: linear-gradient(90deg, transparent, rgba(127,169,247,.22) 20%, rgba(127,169,247,.22) 80%, transparent);
}
.ams-ui-radar::before { left: 0; right: 0; top: 50%; height: 1px; }
.ams-ui-radar::after  { top: 0; bottom: 0; left: 50%; width: 1px; background: linear-gradient(180deg, transparent, rgba(127,169,247,.22) 20%, rgba(127,169,247,.22) 80%, transparent); }
.ams-ui-rr { position: absolute; border-radius: 50%; border: 1px solid rgba(127,169,247,.30); box-shadow: inset 0 0 40px rgba(106,90,224,.10); }
.ams-ui-rr1 { inset: 0; }
.ams-ui-rr2 { inset: 16%; border-color: rgba(127,169,247,.24); }
.ams-ui-rr3 { inset: 32%; border-color: rgba(31,144,243,.28); }
.ams-ui-sweep {
  position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(31,144,243,0) 0deg, rgba(31,144,243,0) 270deg, rgba(31,144,243,.34) 359deg, rgba(190,245,255,.8) 360deg);
}
.ams-anim-on .ams-ui-sweep { animation: amsSweepSpin 8s linear infinite; will-change: transform; }
@keyframes amsSweepSpin { to { transform: rotate(360deg); } }
.ams-ui-node {
  position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%;
  background: #eaf2fd; box-shadow: 0 0 10px rgba(103,232,249,.95), 0 0 22px rgba(31,144,243,.5);
  transform: rotate(var(--a)) translateX(calc(var(--rs) * var(--k)));
  opacity: .55;
}
.ams-anim-on .ams-ui-node { animation: amsNode 8s linear infinite; }
@keyframes amsNode {
  0%   { opacity: 1;   scale: 1.9; }
  22%  { opacity: .55; scale: 1; }
  100% { opacity: .55; scale: 1; }
}
.ams-ui-hub { position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: #fff; box-shadow: 0 0 16px 4px rgba(91,75,216,.8); }
.ams-anim-on .ams-ui-radar { animation: amsRadarIn 1.1s cubic-bezier(.16,.84,.3,1) .9s both; }
@keyframes amsRadarIn { from { opacity: 0; transform: scale(.86); } to { opacity: .9; transform: scale(1); } }

/* ---- 12f. illuminated geometry -------------------------------------------- */
.ams-ui-geo {
  width: var(--g); height: var(--g); border: 1px solid rgba(127,169,247,.38); transform: rotate(45deg);
  box-shadow: 0 0 26px rgba(106,90,224,.22), inset 0 0 22px rgba(50,86,223,.12);
}
.ams-ui-geo::after { content: ""; position: absolute; inset: 22%; border: 1px solid rgba(31,144,243,.40); transform: rotate(22deg); }
.ams-ui-geo-l1 { --g: 74px; left: 7%;  top: 12%; }
.ams-ui-geo-l2 { --g: 44px; left: 22%; bottom: 13%; border-color: rgba(209,84,138,.38); }
.ams-ui-geo-r1 { --g: 58px; right: 8%; top: 14%; border-color: rgba(31,144,243,.34); }
.ams-ui-geo-r2 { --g: 36px; right: 25%; bottom: 11%; }
.ams-anim-on .ams-ui-geo { animation: amsGeoSpin 46s linear infinite; }
.ams-anim-on .ams-ui-geo-l2, .ams-anim-on .ams-ui-geo-r1 { animation-duration: 62s; animation-direction: reverse; }
@keyframes amsGeoSpin { from { transform: rotate(45deg); } to { transform: rotate(405deg); } }

/* ---- 12g. small screens: sonar rings + horizon glow ----------------------- */
.ams-ui-m-ring {
  --d: min(130vw, 560px);
  left: 50%; top: 50%; width: var(--d); height: var(--d); margin: calc(var(--d) / -2) 0 0 calc(var(--d) / -2);
  border-radius: 50%; border: 1px solid rgba(127,169,247,.38); opacity: .35; transform: scale(.8);
}
.ams-ui-m-ring-2 { border-color: rgba(31,144,243,.34); transform: scale(1.05); }
.ams-anim-on .ams-ui-m-ring { animation: amsRing 9s ease-out infinite; }
.ams-anim-on .ams-ui-m-ring-2 { animation-delay: -4.5s; }
@keyframes amsRing {
  0%   { transform: scale(.45); opacity: 0; }
  15%  { opacity: .5; }
  100% { transform: scale(1.15); opacity: 0; }
}
.ams-ui-m-glow {
  left: 0; right: 0; bottom: 0; height: 32vh;
  background: radial-gradient(60% 100% at 50% 100%, rgba(91,75,216,.38), rgba(209,84,138,.12) 55%, transparent 75%);
}
.ams-anim-on .ams-ui-m-glow { animation: amsGlowPulse 7s ease-in-out infinite alternate; }
@keyframes amsGlowPulse { from { opacity: .55; } to { opacity: 1; } }
@media (max-width: 999px) {
  .ams-ui-floor { opacity: .32; height: 30vh; }
  .ams-anim-on .ams-ui-floor-grid { animation: none; }          /* static on phones */
}

/* ---- 12h. scene entrance (after the card has landed) ----------------------- */
.ams-anim-on .ams-ui-floor { animation: amsFadeIn 1.4s ease .6s both; }
.ams-anim-on .ams-ui-strip { animation: amsStripIn 1.1s cubic-bezier(.2,.8,.2,1) .8s both; transform-origin: 50% 50%; }
.ams-anim-on .ams-ui-m-glow { animation: amsFadeIn 1.2s ease .5s both, amsGlowPulse 7s ease-in-out 1.7s infinite alternate; }
@keyframes amsFadeIn { from { opacity: 0; } }
@keyframes amsStripIn { from { opacity: 0; transform: scaleY(.1); } to { opacity: 1; transform: scaleY(1); } }

/* ---- 12i. CARD ENTRANCE — "signal lock" ------------------------------------
   The glass card tilts up out of the depth (3D), settles without bounce, and
   a scan line sweeps down it, lighting the glass as the LED ring ignites.
   Replaces the plain fade-rise; same animation name so no selector changes. */
@keyframes amsCardIn {
  0%   { opacity: 0; transform: perspective(1100px) translate3d(0,48px,-140px) rotateX(16deg) scale(.93); }
  55%  { opacity: 1; }
  100% { opacity: 1; transform: perspective(1100px) translate3d(0,0,0) rotateX(0deg) scale(1); }
}
.ams-anim-on :is(.shell, .card) { animation-duration: 1.05s; animation-timing-function: cubic-bezier(.16,.84,.3,1); }

.ams-ui-scan { position: absolute; inset: 0; z-index: 5; pointer-events: none; border-radius: inherit; overflow: hidden; }
.ams-ui-scan::before, .ams-ui-scan::after {
  content: ""; position: absolute; inset: 0; opacity: 0; transform: translate3d(0,-101%,0);
  background:
    linear-gradient(90deg, transparent 4%, #5fd3d8 22%, #b8aef2 50%, #e79cc4 78%, transparent 96%) bottom / 100% 2px no-repeat,
    linear-gradient(180deg, rgba(103,232,249,0) 0%, rgba(127,169,247,.05) 55%, rgba(103,232,249,.20) 100%);
}
.ams-anim-on .ams-ui-scan::before { animation: amsScan 1.15s cubic-bezier(.45,.05,.25,1) .45s both; }
@keyframes amsScan {
  0%   { opacity: 1; transform: translate3d(0,-101%,0); }
  100% { opacity: 1; transform: translate3d(0,101%,0); }
}
/* feedback scans: red on a failed attempt, green on success */
.ams-ui-scan.is-err::after { background:
    linear-gradient(90deg, transparent 4%, #e0726e 30%, #e0726e 70%, transparent 96%) bottom / 100% 2px no-repeat,
    linear-gradient(180deg, rgba(248,113,113,0) 0%, rgba(248,113,113,.18) 100%); }
.ams-ui-scan.is-ok::after { background:
    linear-gradient(90deg, transparent 4%, #4ad0a8 30%, #4ad0a8 70%, transparent 96%) bottom / 100% 2px no-repeat,
    linear-gradient(180deg, rgba(74,222,128,0) 0%, rgba(74,222,128,.18) 100%); }
.ams-anim-on .ams-ui-scan.is-err::after, .ams-anim-on .ams-ui-scan.is-ok::after { animation: amsScan .8s cubic-bezier(.45,.05,.25,1) both; }

/* ---- 12j. INTERACTION FEEDBACK ---------------------------------------------- */
html body.ams-light:is(.ams-login,.ams-portal-login) :is(.btn, button, input, a, label) { -webkit-tap-highlight-color: transparent; }
html body.ams-light:is(.ams-login,.ams-portal-login) :is(.btn, button, a, .checkbox) { touch-action: manipulation; }

/* label + icon respond to focus */
html body.ams-light:is(.ams-login,.ams-portal-login) .field label { transition: color .2s ease, transform .25s cubic-bezier(.22,.9,.3,1); }
html body.ams-light:is(.ams-login,.ams-portal-login) .field:focus-within label { color: #5fd3d8 !important; transform: translate3d(2px,0,0); }
html body.ams-light.ams-login .input-wrap svg { transform-origin: 50% 50%; }
html body.ams-light.ams-login .input-wrap:focus-within svg { transform: translateY(-50%) scale(1.12); }
html body.ams-light:is(.ams-login,.ams-portal-login) input:not([type=checkbox]):not(.login-anim-switch):hover:not(:focus) { border-color: rgba(180,218,251,.40) !important; background: rgba(255,255,255,.075) !important; }

/* keyboard focus: one clear, consistent ring */
html body.ams-light:is(.ams-login,.ams-portal-login) :is(.btn, .toggle-pass, .refresh-btn, .row-between a, .checkbox input):focus-visible {
  outline: 2px solid #5fd3d8 !important; outline-offset: 3px;
}

/* show/hide + captcha refresh */
html body.ams-light:is(.ams-login,.ams-portal-login) .toggle-pass { transition: background .18s ease, transform .15s ease, color .18s ease !important; }
html body.ams-light:is(.ams-login,.ams-portal-login) .toggle-pass:hover { background: rgba(127,169,247,.30) !important; color: #fff !important; }
html body.ams-light:is(.ams-login,.ams-portal-login) .toggle-pass:active { transform: translateY(-50%) scale(.94); }
html body.ams-light.ams-login .refresh-btn svg { transition: transform .35s cubic-bezier(.22,.9,.3,1); }
html body.ams-light.ams-login .refresh-btn.ams-ui-spin svg { animation: amsSpin .5s cubic-bezier(.22,.9,.3,1); }
@keyframes amsSpin { to { transform: rotate(360deg); } }

/* "Forgot password?" — underline draws in */
html body.ams-light:is(.ams-login,.ams-portal-login) .row-between a {
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .28s ease, color .2s ease; padding-bottom: 1px;
}
html body.ams-light:is(.ams-login,.ams-portal-login) .row-between a:hover { background-size: 100% 1px; }

/* sign-in button: ripple + busy bar */
.ams-ui-ripple {
  position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; pointer-events: none;
  background: rgba(255,255,255,.42); transform: scale(0); animation: amsRipple .65s ease-out forwards;
}
@keyframes amsRipple { to { transform: scale(30); opacity: 0; } }
html body.ams-light:is(.ams-login,.ams-portal-login) :is(form > .btn, form button[type=submit]).ams-ui-busy { cursor: progress; }
html body.ams-light:is(.ams-login,.ams-portal-login) :is(form > .btn, form button[type=submit]).ams-ui-busy::before {
  content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 40%; background: rgba(255,255,255,.85); border-radius: 3px;
  transform: translate3d(-100%,0,0);
}
.ams-anim-on :is(form > .btn, form button[type=submit]).ams-ui-busy::before { animation: amsBusy 1s ease-in-out infinite; }
@keyframes amsBusy { to { transform: translate3d(250%,0,0); } }

/* error shake (the form, not the card, so the entrance never replays) */
.ams-anim-on form.ams-ui-shake { animation: amsShake .46s cubic-bezier(.36,.07,.19,.97) both; }
@keyframes amsShake {
  10%,90% { transform: translate3d(-1px,0,0); } 20%,80% { transform: translate3d(3px,0,0); }
  30%,50%,70% { transform: translate3d(-5px,0,0); } 40%,60% { transform: translate3d(5px,0,0); }
}

/* ---- 12k. phones: the form stays big, readable and calm --------------------- */
@supports (height: 100dvh) {
  html body.ams-light:is(.ams-login,.ams-portal-login) { min-height: 100dvh; }
}
@media (max-width: 900px) {
  /* >=16px stops iOS zooming the page on focus; taller targets for thumbs */
  html body.ams-light.ams-login .input-wrap input { font-size: 16px !important; height: 46px !important; }
  html body.ams-light.ams-portal-login input { font-size: 16px !important; height: 46px !important; min-height: 46px !important; }
  html body.ams-light.ams-login .captcha-box, html body.ams-light.ams-login .captcha-row { --h: 46px; }
  html body.ams-light.ams-login .captcha-box { height: 46px !important; }
  html body.ams-light:is(.ams-login,.ams-portal-login) .toggle-pass { padding: 9px 11px !important; }
  html body.ams-light.ams-login .row-between { min-height: 40px; }
  html body.ams-light.ams-login .checkbox { min-height: 40px; }
  html body.ams-light.ams-login .checkbox input { width: 20px !important; height: 20px !important; }
  html body.ams-light.ams-login form > .btn, html body.ams-light.ams-portal-login form button[type=submit] { height: 48px !important; min-height: 48px !important; }
  html body.ams-light.ams-login .row-between a { padding: 10px 0; }
}
@media (max-width: 760px) {
  /* fewer layers: the sonar rings + glow replace trails, shots and the orbit */
  .ams-lb-trail, .ams-lb-shot, .ams-lb-orbit { display: none !important; }
}

/* ---- 12l. safety nets: OFF, hidden tab, LITE, reduced motion ----------------- */
.ams-anim-off .ams-ui-scene *, .ams-anim-off .ams-ui-scene *::before, .ams-anim-off .ams-ui-scene *::after,
.ams-anim-off .ams-ui-scan::before, .ams-anim-off .ams-ui-scan::after,
.ams-anim-off .ams-ui-ripple, .ams-anim-off form.ams-ui-shake { animation: none !important; transition: none !important; }
.ams-anim-paused .ams-ui-scene *, .ams-anim-paused .ams-ui-scene *::after { animation-play-state: paused !important; }

/* LITE (weak CPU / low RAM / data-saver / measured slow frames): static scene,
   the decorative extras that cost the most are dropped entirely */
.ams-ui-lite .ams-ui-scene *, .ams-ui-lite .ams-ui-scene *::after { animation: none !important; }
.ams-ui-lite .ams-ui-geo, .ams-ui-lite .ams-ui-strip, .ams-ui-lite .ams-ui-m-ring, .ams-ui-lite .ams-ui-sweep { display: none !important; }
.ams-ui-lite .ams-ui-chip-4, .ams-ui-lite .ams-ui-chip-2 { display: none !important; }
.ams-ui-lite .ams-ui-par { transition: none; }

@media (prefers-reduced-motion: reduce) {
  html:not(.ams-anim-on) .ams-ui-scene *, html:not(.ams-anim-on) .ams-ui-scene *::before, html:not(.ams-anim-on) .ams-ui-scene *::after,
  html:not(.ams-anim-on) .ams-ui-scan::before, html:not(.ams-anim-on) .ams-ui-scan::after { animation: none !important; transition: none !important; }
}


/* ==========================================================================
   13. MORE MOTION — packets, bokeh, crosses, ribbons, sonar from the card
   Same rules as section 12: transform/opacity/scale only, no filters, gated on
   .ams-anim-on. .ams-ui-x marks the extra elements dropped on phones / LITE.
   ========================================================================== */
/* data packets: a bright head with a fading tail crossing the screen */
.ams-ui-pk {
  left: 0; width: var(--w,70px); height: 2px; border-radius: 2px; opacity: 0;
  background: linear-gradient(90deg, rgba(31,144,243,0), rgba(103,232,249,.55) 70%, #fff);
  box-shadow: 0 0 8px rgba(103,232,249,.7);
}
.ams-anim-on .ams-ui-pk { animation: amsPacket var(--d,10s) linear infinite; }
@keyframes amsPacket {
  0%   { transform: translate3d(var(--x0),0,0); opacity: 0; }
  8%   { opacity: .8; }
  88%  { opacity: .8; }
  100% { transform: translate3d(var(--x1),0,0); opacity: 0; }
}
.ams-ui-pk:nth-of-type(3n+1) { background: linear-gradient(90deg, rgba(168,85,247,0), rgba(196,181,253,.55) 70%, #fff); box-shadow: 0 0 8px rgba(167,139,250,.7); }
.ams-ui-pk:nth-of-type(3n+2) { background: linear-gradient(90deg, rgba(209,84,138,0), rgba(249,168,212,.55) 70%, #fff); box-shadow: 0 0 8px rgba(244,114,182,.7); }

/* bokeh: big soft discs rising and swaying (radial gradient, no blur filter) */
.ams-ui-bk {
  bottom: 0; width: var(--s,70px); height: var(--s,70px); border-radius: 50%; opacity: 0;
  background: radial-gradient(circle, rgba(var(--c,106,90,224),.55) 0%, rgba(var(--c,106,90,224),.16) 48%, rgba(var(--c,106,90,224),0) 70%);
}
.ams-anim-on .ams-ui-bk { animation: amsBokeh 26s ease-in-out infinite; }
@keyframes amsBokeh {
  0%   { transform: translate3d(0,20%,0) scale(.8); opacity: 0; }
  15%  { opacity: var(--pk,.35); }
  80%  { opacity: var(--pk,.35); }
  100% { transform: translate3d(var(--sx,40px),-115vh,0) scale(1.15); opacity: 0; }
}
.ams-anim-off .ams-ui-bk { opacity: .12; bottom: auto; top: 40%; }

/* drifting "+" markers */
.ams-ui-cr { width: 14px; height: 14px; opacity: .5;
  background: linear-gradient(#7fa9f7,#7fa9f7) 50% 0 / 2px 100% no-repeat, linear-gradient(#7fa9f7,#7fa9f7) 0 50% / 100% 2px no-repeat;
  filter: none; }
.ams-ui-cr:nth-of-type(odd) { background: linear-gradient(#5fd3d8,#5fd3d8) 50% 0 / 2px 100% no-repeat, linear-gradient(#5fd3d8,#5fd3d8) 0 50% / 100% 2px no-repeat; }
.ams-anim-on .ams-ui-cr { animation: amsCross 18s ease-in-out infinite alternate; }
@keyframes amsCross {
  from { transform: translate3d(0,0,0) rotate(0deg); opacity: .15; }
  50%  { opacity: .65; }
  to   { transform: translate3d(var(--dx,40px),var(--dy,-60px),0) rotate(180deg); opacity: .2; }
}

/* aurora ribbons: wide soft bands sliding across */
.ams-ui-rb { left: -20vw; width: 140vw; height: 140px; opacity: .5;
  background: linear-gradient(180deg, rgba(31,144,243,0), rgba(106,90,224,.14) 50%, rgba(209,84,138,.10) 60%, rgba(209,84,138,0)); }
.ams-ui-rb-1 { top: 24%; transform: skewY(-8deg); }
.ams-ui-rb-2 { top: 62%; transform: skewY(7deg); height: 170px; }
.ams-anim-on .ams-ui-rb-1 { animation: amsRibbon1 22s ease-in-out infinite alternate; }
.ams-anim-on .ams-ui-rb-2 { animation: amsRibbon2 28s ease-in-out infinite alternate; }
@keyframes amsRibbon1 { from { transform: translate3d(-9vw,0,0) skewY(-8deg); opacity: .25; } to { transform: translate3d(9vw,3vh,0) skewY(-5deg); opacity: .7; } }
@keyframes amsRibbon2 { from { transform: translate3d(8vw,0,0) skewY(7deg); opacity: .6; } to { transform: translate3d(-8vw,-3vh,0) skewY(9deg); opacity: .25; } }

/* sonar rings now also pulse out from behind the card on desktop */
@media (min-width: 1000px) {
  .ams-ui-m-ring { display: block !important; --d: min(86vw, 1000px); }
}

/* phones / LITE: keep only the first few of each kind */
@media (max-width: 999px) { .ams-ui-x { display: none !important; } .ams-ui-rb { height: 110px; } }
.ams-ui-lite .ams-ui-x, .ams-ui-lite .ams-ui-rb, .ams-ui-lite .ams-ui-cr { display: none !important; }
.ams-ui-lite .ams-ui-bk:nth-of-type(n+2) { display: none; }
.ams-anim-off .ams-ui-pk { opacity: 0; }


/* ==========================================================================
   14. FUN LAYER — cursor comet, sparks, confetti, clickable chips
   ========================================================================== */
.ams-ui-fx { position: fixed; inset: 0; z-index: 50; pointer-events: none; overflow: hidden; contain: layout paint; }
.ams-ui-spark, .ams-ui-conf { position: absolute; display: block; background: var(--c,#5fd3d8); will-change: transform, opacity; }
.ams-ui-spark { border-radius: 50%; box-shadow: 0 0 10px var(--c,#5fd3d8), 0 0 2px #fff; }
.ams-ui-conf { width: 7px; height: 11px; border-radius: 2px; }

/* cursor comet: a wide soft glow, a mid glow and a bright core, each lagging more */
.ams-ui-cur { left: 0; top: 0; border-radius: 50%; opacity: 0; translate: -999px -999px; pointer-events: none; }
.ams-ui-cur-1 { width: 360px; height: 360px; margin: -180px 0 0 -180px; transition: translate .55s cubic-bezier(.2,.7,.2,1), opacity .4s;
  background: radial-gradient(circle, rgba(127,169,247,.30), rgba(106,90,224,.10) 45%, rgba(31,144,243,0) 70%); }
.ams-ui-cur-2 { width: 70px; height: 70px; margin: -35px 0 0 -35px; transition: translate .28s cubic-bezier(.2,.7,.2,1), opacity .4s;
  background: radial-gradient(circle, rgba(209,84,138,.55), rgba(209,84,138,0) 70%); }
.ams-ui-cur-3 { width: 10px; height: 10px; margin: -5px 0 0 -5px; transition: translate .08s linear, opacity .4s;
  background: #fff; box-shadow: 0 0 14px 4px rgba(103,232,249,.9); }
html.ams-ui-pointer-seen.ams-anim-on .ams-ui-cur { opacity: 1; }
html.ams-ui-pointer-seen.ams-anim-on .ams-ui-cur-1 { opacity: .9; }
@media (hover: none), (pointer: coarse) { .ams-ui-cur { display: none !important; } }
.ams-ui-lite .ams-ui-cur-1 { display: none !important; }

/* chips can be clicked: let them take the pointer and react to hover */
.ams-ui-chip { pointer-events: auto; cursor: pointer; transition: box-shadow .25s ease, border-color .25s ease; }
.ams-ui-chip:hover { border-color: rgba(103,232,249,.55); box-shadow: 0 14px 34px rgba(0,0,0,.45), 0 0 34px rgba(31,144,243,.45), inset 0 1px 0 rgba(255,255,255,.12); }
.ams-ui-chip i { transition: transform .3s cubic-bezier(.3,1.6,.5,1); }
.ams-ui-chip:hover i { transform: scale(1.18) rotate(-10deg); }
.ams-ui-chip:hover u { color: #fff; }
.m-brand, .logo { cursor: pointer; }

.ams-anim-off .ams-ui-fx, .ams-anim-off .ams-ui-cur { display: none !important; }


/* ==========================================================================
   15. LIGHTER — fewer / cheaper moving parts (user feedback: page lagged)
   Removes the cursor comet, makes the floor and radar nodes static, drops the
   desktop sonar rings and the heaviest always-on backgrounds, and slows the rest.
   ========================================================================== */
.ams-ui-cur { display: none !important; }
.ams-anim-on .ams-ui-floor-grid { animation: none !important; will-change: auto; }   /* static perspective floor */
.ams-anim-on .ams-ui-node { animation: none !important; }
@media (min-width: 1000px) { .ams-ui-m-ring { display: none !important; } }
.ams-anim-on .ams-ui-sweep { animation-duration: 12s; }
.ams-anim-on .ams-ui-geo { animation-duration: 90s; }
.ams-anim-on .ams-ui-chip { animation: amsChipIn .9s cubic-bezier(.16,.84,.3,1) var(--in,1.1s) both, amsChipFloat 14s ease-in-out var(--fl,0s) infinite alternate; }
.ams-anim-on .ams-ui-pk { animation-duration: calc(var(--d,10s) * 1.6); }
.ams-anim-on .ams-ui-bk { animation-duration: 40s; }
.ams-anim-on .ams-ui-rb-1 { animation-duration: 40s; }
.ams-anim-on .ams-ui-m-glow { animation: amsFadeIn 1.2s ease .5s both; }                /* no pulse */
/* existing background: drop the extras that repaint the most */
.ams-lb-wave, .ams-lb-trail, .ams-lb-shot { display: none !important; }
.ams-anim-on .ams-lb-orb-a { animation-duration: 50s; }
.ams-anim-on .ams-lb-orb-b { animation-duration: 60s; }
/* fewer layers on phones */
@media (max-width: 999px) {
  .ams-ui-pk, .ams-ui-bk, .ams-ui-cr, .ams-ui-rb, .ams-ui-geo { display: none !important; }
  .ams-anim-on .ams-ui-m-ring { animation-duration: 14s; }
}
.ams-ui-lite .ams-ui-pk, .ams-ui-lite .ams-ui-cr { display: none !important; }