.auth-gate { background: #000; }
.auth-login-card {
  --auth-portal-gutter: clamp(0.25rem, 0.8vmin, 0.5rem);
  --auth-portal-width: calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right) - var(--auth-portal-gutter) * 2);
  --auth-portal-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - var(--auth-portal-gutter) * 2);
  --auth-portal-depth-x: clamp(0.875rem, calc(var(--auth-portal-width) * 0.046), 2.5rem);
  --auth-portal-depth-y: clamp(0.875rem, calc(var(--auth-portal-height) * 0.028), 2rem);
  --auth-portal-content-x: var(--auth-portal-depth-x);
  --auth-portal-content-y: var(--auth-portal-depth-y);
  --auth-portal-frame-x: calc(var(--auth-portal-depth-x) * 0.6);
  --auth-portal-frame-y: calc(var(--auth-portal-depth-y) * 0.6);
  --auth-portal-content-gap: clamp(0.75rem, calc(var(--auth-portal-height) * 0.014), 1.125rem);
  --auth-portal-logo-size: clamp(9rem, min(calc(var(--auth-portal-width) * 0.62), calc(var(--auth-portal-height) * 0.28)), 22rem);
  position: absolute;
  inset:
    calc(env(safe-area-inset-top) + var(--auth-portal-gutter))
    calc(env(safe-area-inset-right) + var(--auth-portal-gutter))
    calc(env(safe-area-inset-bottom) + var(--auth-portal-gutter))
    calc(env(safe-area-inset-left) + var(--auth-portal-gutter));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--auth-portal-content-gap);
  width: var(--auth-portal-width);
  max-width: none;
  height: max-content;
  min-height: var(--auth-portal-height);
  margin: 0;
  padding:
    calc(var(--auth-portal-content-y) + var(--auth-portal-content-gap))
    calc(var(--auth-portal-content-x) + clamp(0.625rem, calc(var(--auth-portal-width) * 0.02), 1.25rem));
  border: 0;
  border-radius: 0;
  background: linear-gradient(172deg, #0b0d0f, #050608 48%, #020304);
  box-shadow: none;
}

.auth-gate:not(.auth-portal-entering)::before,
.auth-gate:not(.auth-portal-entering)::after,
.auth-glow,
.auth-login-card::before { display: none; }

.auth-login-card > .auth-fluid-canvas,
.auth-login-card > .auth-portal-leds {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  margin: 0;
  border-radius: 0;
  pointer-events: none;
}
.auth-login-card > .auth-fluid-canvas { z-index: 0; }
.auth-login-card > .auth-portal-leds { z-index: 5; overflow: visible; }
.auth-login-card > .auth-fluid-touch-surface {
  position: absolute;
  inset: var(--auth-portal-frame-y) var(--auth-portal-frame-x);
  width: auto;
  margin: 0;
  z-index: 1;
  touch-action: pinch-zoom;
}
.auth-login-fields,
.auth-login-card > .auth-public-footer,
.auth-login-card > .auth-p-emblem { z-index: 2; }

.auth-login-card::after {
  z-index: 4;
  inset: 0;
  box-sizing: border-box;
  border: solid transparent;
  border-width: var(--auth-portal-frame-y) var(--auth-portal-frame-x);
  border-radius: 0;
  border-image-source: url("/auth-portal-frame.svg?v=3");
  border-image-slice: 52 46 fill;
  border-image-width: 1;
  border-image-repeat: stretch;
  background: transparent;
  filter: brightness(0.64) saturate(0.72);
  opacity: 1;
  animation: none;
}

.auth-portal-leds rect {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.auth-portal-led-rail {
  stroke: rgba(245, 238, 222, 0.12);
  stroke-width: 1px;
  filter: drop-shadow(0 0 2px rgba(246, 232, 207, 0.22));
}
.auth-portal-led-trail-a,
.auth-portal-led-trail-b {
  stroke: #fff5e5;
  stroke-width: 1.4px;
  filter:
    drop-shadow(0 0 3px rgba(255, 239, 211, 0.65))
    drop-shadow(0 0 8px rgba(235, 220, 193, 0.3));
}
.auth-fluid-reduced .auth-p-emblem-led,
.auth-fluid-reduced #authSubmit,
.auth-fluid-reduced #authSubmit::before { animation: none; }
.auth-fluid-economy .auth-portal-led-trail-a,
.auth-fluid-economy .auth-portal-led-trail-b { filter: drop-shadow(0 0 4px rgba(255, 239, 211, 0.55)); }
.auth-fluid-economy input { backdrop-filter: none; }
.auth-fluid-economy #authSubmit,
.auth-fluid-economy #authSubmit::before { animation: none; }

.auth-login-card .auth-p-emblem,
.auth-login-card:focus-within .auth-p-emblem {
  position: relative;
  top: auto;
  left: auto;
  flex: 0 0 var(--auth-portal-logo-size);
  width: var(--auth-portal-logo-size);
  height: var(--auth-portal-logo-size);
  max-height: var(--auth-portal-logo-size);
  margin: 0;
  opacity: 0.98;
  transform: none;
  touch-action: pinch-zoom;
}
.auth-fluid-logo-ready .auth-p-emblem svg { opacity: 0; }
.auth-fluid-logo-ready .auth-p-emblem-led { animation: none; filter: none; }

.auth-login-fields {
  position: relative !important;
  display: grid;
  flex: 0 0 auto;
  gap: 0.56rem;
  width: min(24rem, 100%) !important;
  margin: auto 0 !important;
}
.auth-login-card > .auth-public-footer {
  flex: 0 0 auto;
  width: min(24rem, 100%);
  margin: 0;
}

.auth-login-card .auth-brand-logo {
  filter:
    brightness(0) invert(1)
    drop-shadow(0 0 0.42rem rgba(162, 229, 246, 0.26))
    drop-shadow(0 0 1.1rem rgba(68, 174, 207, 0.12));
}
.auth-login-card input {
  border-color: rgba(112, 158, 173, 0.38);
  background: rgba(1, 7, 11, 0.78);
  box-shadow: inset 0 0.45rem 1.4rem rgba(0, 0, 0, 0.48);
  backdrop-filter: blur(0.65rem);
}
.auth-login-card .auth-brand-logo { user-select: none; -webkit-user-drag: none; }

#authSubmit {
  border-color: rgba(111, 205, 226, 0.48);
  background:
    radial-gradient(circle at 24% 12%, rgba(104, 211, 234, 0.16), transparent 34%),
    linear-gradient(112deg, rgba(1, 6, 10, 0.96), rgba(12, 40, 53, 0.96) 48%, rgba(1, 8, 13, 0.96));
  background-size: 170% 100%;
  box-shadow:
    0 0.85rem 2.1rem rgba(0, 0, 0, 0.54),
    0 0 1.25rem rgba(67, 184, 213, 0.08),
    inset 0 1px rgba(206, 246, 255, 0.1);
}

.auth-fluid-static .auth-p-emblem,
.auth-fluid-static:focus-within .auth-p-emblem { opacity: 0.2; }
.auth-fluid-static .auth-p-emblem-led { animation: none; filter: none; }

/* A local material surface remains visible before/without the optional GPU renderer. */
.auth-login-card:not(.auth-fluid-active)::before {
  display: block; z-index: 0; inset: var(--auth-portal-frame-y) var(--auth-portal-frame-x);
  padding: 0; border-radius: 0; opacity: 1; pointer-events: none;
  -webkit-mask: none; mask: none; animation: none;
  background:
    radial-gradient(ellipse 110% 24% at 8% 30%, transparent 35%, #202529 47%, #0d1114 54%, transparent 68%),
    radial-gradient(ellipse 120% 30% at 98% 72%, transparent 36%, #242a2e 49%, #101518 57%, transparent 70%),
    radial-gradient(ellipse 100% 42% at 35% 100%, #151b1f 0%, transparent 64%),
    linear-gradient(155deg, #0e1215, #050709 55%, #101518);
  background-size: 115% 125%; box-shadow: inset 0 0 3rem #0008;
}
@media (prefers-reduced-motion: no-preference) {
  .auth-login-card:not(.auth-fluid-active)::before { animation: auth-silk-drift 18s ease-in-out infinite alternate; }
}
@keyframes auth-silk-drift { to { background-position: 16% 24%, -12% -16%, 8% 8%, 0 0; } }
.auth-portal-entering .auth-login-card:not(.auth-fluid-active)::before { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce), (prefers-contrast: more) {
  .auth-login-card:not(.auth-fluid-active)::before { animation: none; }
}
@media (forced-colors: active) {
  .auth-login-card:not(.auth-fluid-active)::before { display: none; }
}

@media (max-height: 42.5rem) {
  .auth-login-card {
    --auth-portal-depth-x: clamp(0.72rem, calc(var(--auth-portal-width) * 0.031), 1.65rem);
    --auth-portal-depth-y: clamp(0.65rem, calc(var(--auth-portal-height) * 0.021), 1.2rem);
    --auth-portal-content-gap: clamp(0.5rem, calc(var(--auth-portal-height) * 0.014), 0.75rem);
    --auth-portal-logo-size: clamp(4.5rem, min(calc(var(--auth-portal-width) * 0.25), calc(var(--auth-portal-height) * 0.18)), 8.5rem);
  }
}

@media (min-width: 480px) and (max-height: 500px) and (orientation: landscape) {
  .auth-login-card {
    --auth-portal-logo-size: clamp(6rem, calc(var(--auth-portal-height) * 0.32), 12rem);
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    grid-template-rows: minmax(min-content, 1fr) auto;
    align-content: stretch;
    align-items: center;
    justify-items: center;
    gap: 0.5rem clamp(1rem, calc(var(--auth-portal-width) * 0.04), 3rem);
    padding: calc(var(--auth-portal-frame-y) + 0.5rem) calc(var(--auth-portal-frame-x) + 1rem);
  }
  .auth-login-card .auth-p-emblem,
  .auth-login-card:focus-within .auth-p-emblem {
    grid-area: 1 / 1;
    width: min(100%, var(--auth-portal-logo-size));
    height: auto;
    aspect-ratio: 1;
  }
  .auth-login-fields {
    grid-area: 1 / 2;
    gap: 0.4rem;
    margin: 0 !important;
  }
  .auth-login-card > .auth-public-footer {
    grid-area: 2 / 1 / 3 / 3;
    padding-top: 0.5rem;
  }
}

@media (min-width: 480px) and (max-width: 639px) and (max-height: 500px) and (orientation: landscape) {
  .auth-login-card .auth-brand-logo { width: min(100%, 12rem); }
  .auth-login-fields { gap: 0.3rem; }
  .auth-login-card input { min-height: 2.75rem; padding-block: 0.45rem; }
  #authSubmit {
    min-height: 2.75rem;
    margin-top: 0;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .auth-login-card .auth-p-emblem,
  .auth-login-card:focus-within .auth-p-emblem { opacity: 0.2; }
  .auth-login-card .auth-p-emblem-led { animation: none; }
}
@media (prefers-contrast: more) {
  .auth-fluid-canvas { display: none; }
  .auth-login-card .auth-p-emblem svg { opacity: 0.8; }
}
@media (forced-colors: active) {
  .auth-login-card { box-shadow: none; }
  .auth-fluid-canvas,
  .auth-portal-leds { display: none !important; }
}