.lux-future-logo-stage,
.lux-future-waves,
.lux-line-tech-field,
.lux-line-light,
.lux-reference-logo-art,
.lux-reference-line-art,
.lux-generated-logo-art,
.lux-generated-line-art,
.lux-logo-edge-runner,
.lux-line-edge-runner {
  display: none;
}

.lux-video-login {
  display: none;
}

@property --lux-logo-light-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@media (max-width: 760px) {
  body[data-login-mobile-mode="video"] .lux-login-page.active {
    background: #f3eee3 !important;
  }

  body[data-login-mobile-mode="video"] .lux-login-page.active::before,
  body[data-login-mobile-mode="video"] .lux-login-page.active::after,
  body[data-login-mobile-mode="video"] .lux-login-page .login-language,
  body[data-login-mobile-mode="video"] .lux-login-page .lux-login-brand,
  body[data-login-mobile-mode="video"] .lux-login-page .lux-login-action {
    display: none !important;
  }

  body[data-login-mobile-mode="video"] .lux-login-page .lux-login-shell {
    display: block !important;
    width: 100% !important;
    height: 100svh !important;
    min-height: 100svh !important;
    overflow: hidden !important;
  }

  body[data-login-mobile-mode="video"] .lux-video-login {
    position: absolute;
    inset: 0;
    z-index: 10;
    display: block;
    overflow: hidden;
    background: #000;
  }

  body.line-login-leaving {
    position: fixed !important;
    inset: 0 !important;
    width: var(--line-login-locked-width, 100vw) !important;
    height: var(--line-login-locked-height, 100svh) !important;
    overflow: hidden !important;
    overscroll-behavior: none;
  }

  body[data-login-mobile-mode="video"].line-login-leaving .lux-video-login {
    position: fixed;
    inset: 0 auto auto 0;
    z-index: 2147483647;
    display: block !important;
    width: var(--line-login-locked-width, 100vw);
    height: var(--line-login-locked-height, 100svh);
    background: #000;
    contain: strict;
  }

  body.line-login-leaving .lux-login-page .login-language,
  body.line-login-leaving .lux-login-page .lux-login-brand,
  body.line-login-leaving .lux-login-page .lux-login-action {
    display: none !important;
  }

  body[data-login-mobile-mode="video"].line-login-leaving .lux-video-login-stage {
  width: min(var(--line-login-locked-width, 100vw), calc(var(--line-login-locked-height, 100svh) * 720 / 1076));
  height: min(var(--line-login-locked-height, 100svh), calc(var(--line-login-locked-width, 100vw) * 1076 / 720));
  }

  body[data-login-mobile-mode="video"].line-login-leaving .lux-video-line-hotspot {
    filter: brightness(.94);
    pointer-events: none;
  }

  body[data-login-mobile-mode="video"] .lux-video-login-stage {
    position: absolute;
    top: 50%;
    left: 50%;
    width: min(100vw, calc(100svh * 720 / 1076));
    height: min(100svh, calc(100vw * 1076 / 720));
    transform: translate(-50%, -50%);
    isolation: isolate;
  }

  body[data-login-mobile-mode="video"] .lux-video-login-stage::after {
    position: absolute;
    top: clamp(10px, 3vw, 16px);
    left: 0;
    z-index: 1;
    width: clamp(74px, 15vw, 96px);
    height: clamp(16px, 3.6vw, 22px);
    background: #000;
    content: "";
    pointer-events: none;
  }

  body[data-login-mobile-mode="video"] .lux-video-login-stage.has-custom-media {
    width: 100vw;
    height: 100svh;
    background: #000;
  }

  body[data-login-mobile-mode="video"].line-login-leaving .lux-video-login-stage.has-custom-media {
    width: var(--line-login-locked-width, 100vw);
    height: var(--line-login-locked-height, 100svh);
  }

  body[data-login-mobile-mode="video"] .lux-video-login-stage.has-custom-media::after {
    display: none;
  }

  body[data-login-mobile-mode="video"] .lux-video-login-fallback,
  body[data-login-mobile-mode="video"] .lux-video-login video,
  body[data-login-mobile-mode="video"] .lux-video-login-background {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: 50% 50%;
    image-rendering: auto;
    filter: none;
    transform: translateZ(0);
    transform-origin: 50% 50%;
    backface-visibility: hidden;
    pointer-events: none;
  }

  /* Keep every dealership's login video fully visible. Mismatched aspect
     ratios are letterboxed/pillarboxed by the black stage instead of cropped. */
  body[data-login-mobile-mode="video"] .lux-video-login-stage.has-custom-media video {
    object-fit: contain;
    object-position: 50% 50%;
    transform: translateZ(0);
  }

  body[data-login-mobile-mode="video"] .lux-video-login-stage.has-custom-media .lux-video-login-background {
    object-fit: cover;
    object-position: 50% 50%;
    transform: translateZ(0) scale(1.04);
  }

  body[data-login-mobile-mode="video"] .lux-video-login-fallback {
    z-index: 1;
    opacity: 1;
    overflow: hidden;
    background:
      radial-gradient(circle at 72% 18%, rgba(255, 222, 142, .88) 0 1.5%, rgba(255, 199, 91, .3) 2%, transparent 14%),
      radial-gradient(ellipse at 50% 57%, rgba(255, 244, 212, .95) 0, rgba(225, 210, 175, .66) 28%, transparent 61%),
      linear-gradient(180deg, #e9e3d5 0%, #f4ecd9 44%, #c9aa73 67%, #161b1d 100%);
  }

  /* During the LINE handoff mobile browsers briefly detach the video layer.
     Keep the real login artwork underneath so the synthetic road placeholder
     never becomes visible between pages. */
  body[data-login-mobile-mode="video"][data-tenant-login-brand-mode="legacy-video"] .lux-video-login-stage:not(.has-custom-media) .lux-video-login-fallback {
    background: #000 url("./login-assets/login-mobile-video-poster-20260905.png?v=20260905-login-frame-poster-2") center / contain no-repeat;
  }

  body[data-login-mobile-mode="video"][data-tenant-login-brand-mode="legacy-video"] .lux-video-login-stage:not(.has-custom-media) .lux-neutral-horizon,
  body[data-login-mobile-mode="video"][data-tenant-login-brand-mode="legacy-video"] .lux-video-login-stage:not(.has-custom-media) .lux-neutral-road {
    display: none;
  }

  body[data-login-mobile-mode="video"] .lux-neutral-horizon,
  body[data-login-mobile-mode="video"] .lux-neutral-road {
    position: absolute;
    pointer-events: none;
  }

  body[data-login-mobile-mode="video"] .lux-neutral-horizon {
    right: -14%;
    bottom: 14%;
    left: -14%;
    height: 29%;
    opacity: .82;
    background:
      linear-gradient(153deg, transparent 0 43%, rgba(25, 29, 30, .82) 43.3% 45%, transparent 45.3%) 0 0 / 42% 100%,
      linear-gradient(27deg, transparent 0 43%, rgba(25, 29, 30, .7) 43.3% 45%, transparent 45.3%) 100% 0 / 42% 100%,
      linear-gradient(180deg, transparent 0 56%, rgba(19, 24, 25, .72) 57% 100%);
    filter: blur(.35px);
  }

  body[data-login-mobile-mode="video"] .lux-neutral-road {
    right: -28%;
    bottom: -18%;
    left: -28%;
    height: 46%;
    border-radius: 50% 50% 0 0;
    opacity: .78;
    background:
      linear-gradient(106deg, transparent 0 47.8%, rgba(241, 204, 121, .64) 48% 48.35%, transparent 48.55%),
      linear-gradient(74deg, transparent 0 47.8%, rgba(241, 204, 121, .64) 48% 48.35%, transparent 48.55%),
      linear-gradient(180deg, rgba(49, 54, 53, .42), #080b0d 66%);
    box-shadow: 0 -30px 60px rgba(20, 26, 27, .32);
  }

  body[data-login-mobile-mode="video"] .lux-video-login video {
    z-index: 0;
    opacity: 1;
  }

  body[data-login-mobile-mode="video"] .lux-video-login-background {
    z-index: 0;
    opacity: 1;
  }

  body[data-login-mobile-mode="video"] .lux-video-login-stage.has-custom-media .lux-video-login-fallback,
  body[data-login-mobile-mode="video"] .lux-video-login-stage.has-custom-media .lux-video-tenant-brand {
    opacity: 0;
    pointer-events: none;
  }

  body[data-login-mobile-mode="video"] .lux-video-login-stage.is-video-playing .lux-video-login-fallback {
    opacity: 0;
  }

  body[data-login-mobile-mode="video"] .lux-video-tenant-brand {
    display: none;
  }

  body[data-login-mobile-mode="video"][data-tenant-login-brand-mode="tenant-neutral"] .lux-video-login-stage:not(.has-custom-media)::after,
  body[data-login-mobile-mode="video"][data-tenant-login-brand-mode="tenant-neutral"] .lux-video-login-stage:not(.has-custom-media) video,
  body[data-login-mobile-mode="video"][data-tenant-login-brand-mode="tenant-neutral"] .lux-video-login-stage:not(.has-custom-media) .lux-video-audio-toggle {
    display: none !important;
  }

  body[data-login-mobile-mode="video"][data-tenant-login-brand-mode="tenant-neutral"] .lux-video-login-stage:not(.has-custom-media).is-video-playing .lux-video-login-fallback {
    opacity: 1;
  }

  body[data-login-mobile-mode="video"][data-tenant-login-brand-mode="tenant-neutral"] .lux-video-login-stage:not(.has-custom-media) .lux-video-tenant-brand {
    position: absolute;
    top: 21%;
    left: 50%;
    z-index: 2;
    display: flex;
    width: min(82%, 340px);
    align-items: center;
    flex-direction: column;
    color: #17212a;
    font-family: "Noto Sans TC", "Microsoft JhengHei", sans-serif;
    text-align: center;
    transform: translateX(-50%);
  }

  body[data-login-mobile-mode="video"][data-tenant-login-brand-mode="tenant-neutral"] .lux-video-tenant-mark {
    display: grid;
    width: clamp(74px, 22vw, 98px);
    height: clamp(74px, 22vw, 98px);
    margin-bottom: clamp(16px, 4vw, 24px);
    border: 1px solid rgba(118, 78, 18, .34);
    border-radius: 28%;
    place-items: center;
    background: linear-gradient(145deg, rgba(255, 244, 207, .98), rgba(196, 139, 48, .98));
    box-shadow: 0 13px 28px rgba(62, 40, 10, .24), inset 0 1px 0 rgba(255, 255, 255, .72);
    color: #35230d;
    font-size: clamp(28px, 8vw, 38px);
    font-weight: 900;
    letter-spacing: -.08em;
  }

  body[data-login-mobile-mode="video"][data-tenant-login-brand-mode="tenant-neutral"] .lux-video-tenant-brand strong {
    font-size: clamp(30px, 9vw, 44px);
    font-weight: 900;
    letter-spacing: .08em;
    line-height: 1.2;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .72);
  }

  body[data-login-mobile-mode="video"][data-tenant-login-brand-mode="tenant-neutral"] .lux-video-tenant-brand small {
    margin-top: 8px;
    color: #8e641f;
    font-size: clamp(10px, 3vw, 13px);
    font-weight: 800;
    letter-spacing: .3em;
  }

  body[data-login-mobile-mode="video"][data-tenant-login-brand-mode="tenant-neutral"] .lux-video-tenant-brand i {
    width: min(68%, 220px);
    height: 1px;
    margin: 20px 0 16px;
    background: linear-gradient(90deg, transparent, rgba(142, 100, 31, .76), transparent);
  }

  body[data-login-mobile-mode="video"][data-tenant-login-brand-mode="tenant-neutral"] .lux-video-tenant-brand p {
    margin: 0;
    color: rgba(39, 37, 32, .86);
    font-size: clamp(14px, 4vw, 18px);
    font-weight: 750;
    letter-spacing: .09em;
  }

  body[data-login-mobile-mode="video"][data-tenant-login-brand-mode="tenant-neutral"] .lux-video-login-stage:not(.has-custom-media) .lux-video-line-hotspot,
  body[data-login-mobile-mode="video"][data-tenant-login-brand-mode="tenant-neutral"] .lux-video-login-stage:not(.has-custom-media):not(.is-video-playing) .lux-video-line-hotspot {
    top: auto;
    bottom: 15%;
    width: min(58%, 240px);
    height: clamp(40px, 5.4svh, 48px);
    padding: 0 clamp(11px, 2svh, 15px);
    border: 1px solid rgba(255, 255, 255, .42);
    opacity: 1;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, .25) 0 2%, transparent 24%),
      linear-gradient(180deg, #35bd31 0%, #169f20 45%, #087914 100%);
    box-shadow:
      0 9px 20px rgba(0, 57, 12, .34),
      0 2px 0 #05610e,
      inset 0 1px 0 rgba(255, 255, 255, .42),
      inset 0 -2px 4px rgba(0, 67, 13, .25);
  }

  body[data-login-mobile-mode="video"] .lux-video-login video::-webkit-media-controls,
  body[data-login-mobile-mode="video"] .lux-video-login video::-webkit-media-controls-start-playback-button,
  body[data-login-mobile-mode="video"] .lux-video-login video::-webkit-media-controls-overlay-play-button {
    display: none !important;
    opacity: 0 !important;
    -webkit-appearance: none;
  }

  body[data-login-mobile-mode="video"] .lux-video-line-hotspot {
    position: absolute;
    top: var(--login-button-y, 68.4%);
    left: var(--login-button-x, 50%);
    z-index: 2;
    display: flex;
    width: var(--login-button-width, 49%);
    max-width: 92%;
    height: auto;
    aspect-ratio: 4.6 / 1;
    padding: 0 clamp(10px, 2svh, 14px);
    border: 0;
    border-radius: 13px;
    opacity: 1;
    align-items: center;
    justify-content: center;
    gap: clamp(5px, .9svh, 7px);
    background:
      linear-gradient(180deg, rgba(255, 255, 255, .22) 0 2%, transparent 22%),
      linear-gradient(180deg, #35bd31 0%, #169f20 45%, #087914 100%);
    box-shadow:
      0 7px 13px rgba(0, 57, 12, .34),
      0 2px 0 #05610e,
      inset 0 1px 0 rgba(255, 255, 255, .34),
      inset 0 -2px 4px rgba(0, 67, 13, .25);
    color: #fff;
    font-family: "Noto Sans TC", "Microsoft JhengHei", sans-serif;
    cursor: pointer;
    transform: translateX(-50%);
    transition: filter .16s ease, transform .16s ease, box-shadow .16s ease;
    outline: 0;
    appearance: none;
    -webkit-appearance: none;
    -webkit-tap-highlight-color: transparent;
  }

  /* Keep the real login control visible even when mobile Safari blocks video
     autoplay, the network is slow, or the poster is being shown. */
  body[data-login-mobile-mode="video"] .lux-video-login-stage:not(.has-custom-media):not(.is-video-playing) .lux-video-line-hotspot {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  body[data-login-mobile-mode="video"] .lux-video-line-hotspot.has-custom-image {
    height: auto;
    aspect-ratio: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  body[data-login-mobile-mode="video"] .lux-video-line-image {
    display: block;
    width: 100%;
    height: auto;
    transform-origin: 50% 70%;
    will-change: transform, filter;
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: none;
  }

  body[data-login-mobile-mode="video"] .lux-video-line-hotspot.is-pressing .lux-video-line-image {
    animation: lux-line-click-down 360ms cubic-bezier(.2, .8, .25, 1);
  }

  @keyframes lux-line-click-down {
    0% { transform: translateY(0) scale(1); filter: brightness(1); }
    38% { transform: translateY(8px) scale(.975, .94); filter: brightness(.92); }
    68% { transform: translateY(-2px) scale(1.012, 1.018); filter: brightness(1.04); }
    100% { transform: translateY(0) scale(1); filter: brightness(1); }
  }

  @media (prefers-reduced-motion: reduce) {
    body[data-login-mobile-mode="video"] .lux-video-line-hotspot.is-pressing .lux-video-line-image {
      animation-duration: 1ms;
    }
  }

  body[data-login-mobile-mode="video"] .lux-video-line-hotspot:active {
    filter: brightness(.94);
    transform: translate(-50%, 2px);
    box-shadow:
      0 3px 7px rgba(0, 57, 12, .28),
      0 1px 0 #05610e,
      inset 0 1px 0 rgba(255, 255, 255, .5);
  }

  body[data-login-mobile-mode="video"] .lux-video-line-hotspot.has-custom-image:active {
    filter: none;
    transform: translateX(-50%);
    box-shadow: none;
  }

  body[data-login-mobile-mode="video"] .lux-video-line-hotspot:focus,
  body[data-login-mobile-mode="video"] .lux-video-line-hotspot:focus-visible {
    outline: 0;
  }

  body[data-login-mobile-mode="video"].line-login-leaving .lux-video-audio-toggle {
    display: none !important;
  }

  body[data-login-mobile-mode="video"] .lux-video-audio-toggle {
    position: absolute;
    top: clamp(10px, 3vw, 16px);
    right: clamp(10px, 3vw, 16px);
    z-index: 3;
    display: inline-flex;
    min-width: 58px;
    height: 27px;
    padding: 0 10px;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 999px;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .62);
    box-shadow: 0 3px 10px rgba(0, 0, 0, .28);
    color: rgba(255, 255, 255, .92);
    font: 700 11px/1 "Noto Sans TC", "Microsoft JhengHei", sans-serif;
    letter-spacing: .04em;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
  }

  body[data-login-mobile-mode="video"] .lux-video-audio-toggle[aria-pressed="true"] {
    border-color: rgba(94, 221, 102, .58);
    background: rgba(5, 112, 20, .78);
  }

  body[data-login-mobile-mode="video"] .lux-video-line-mark {
    position: relative;
    display: grid;
    flex: 0 0 clamp(23px, 3.3svh, 27px);
    width: clamp(23px, 3.3svh, 27px);
    height: clamp(20px, 2.8svh, 24px);
    border-radius: 50% 50% 48% 50%;
    place-items: center;
    background: #fff;
    color: #149b22;
    font-family: Arial, sans-serif;
    font-size: clamp(6.5px, .9svh, 8px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.35px;
  }

  body[data-login-mobile-mode="video"] .lux-video-line-mark::after {
    position: absolute;
    right: 2px;
    bottom: -4px;
    width: 9px;
    height: 8px;
    background: #fff;
    clip-path: polygon(0 0, 100% 0, 84% 100%);
    content: "";
    transform: rotate(18deg);
    transform-origin: 50% 0;
  }

  body[data-login-mobile-mode="video"] .lux-video-line-hotspot strong {
    color: #fff;
    font-size: clamp(11px, 1.45svh, 13px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: .015em;
    text-shadow: 0 1px 1px rgba(0, 70, 11, .58);
    white-space: nowrap;
  }

  body[data-mobile-page="login"] #hongyi-mobile-shell .app-header,
  body[data-mobile-page="login"] .mobile-bottom-nav {
    display: none !important;
  }

  body:has(.lux-login-page.active) {
    overflow-x: hidden !important;
    background: #03070a !important;
  }

  .lux-login-page.active {
    width: 100% !important;
    height: 100svh !important;
    min-height: 100svh !important;
    padding: 0 !important;
    overflow: hidden !important;
    background:
      radial-gradient(circle at 50% 18%, rgba(74, 103, 122, 0.13) 0, transparent 31%),
      radial-gradient(circle at 50% 69%, rgba(37, 123, 180, 0.08) 0, transparent 28%),
      linear-gradient(180deg, #11171b 0%, #070b0e 36%, #020405 100%) !important;
  }

  .lux-login-page.active::before,
  .lux-login-page.active::after {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    content: "";
  }

  .lux-login-page.active::before {
    opacity: 0.42;
    background:
      linear-gradient(rgba(218, 178, 105, 0.07) 1px, transparent 1px) 50% 0 / 100% 46px,
      linear-gradient(90deg, rgba(218, 178, 105, 0.05) 1px, transparent 1px) 0 50% / 44px 100%;
    -webkit-mask-image: radial-gradient(ellipse 75% 66% at 50% 34%, #000 0, transparent 82%);
    mask-image: radial-gradient(ellipse 75% 66% at 50% 34%, #000 0, transparent 82%);
  }

  .lux-login-page.active::after {
    opacity: 0.7;
    background:
      radial-gradient(circle at 9% 21%, #e8bd69 0 1px, transparent 2px),
      radial-gradient(circle at 91% 21%, #e8bd69 0 1px, transparent 2px),
      radial-gradient(circle at 5% 34%, #5bc5ff 0 1px, transparent 2px),
      radial-gradient(circle at 95% 34%, #5bc5ff 0 1px, transparent 2px);
    animation: lux-stars-breathe 3.8s ease-in-out infinite;
  }

  .lux-login-page .lux-login-shell {
    position: relative !important;
    z-index: 1;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    min-height: 100svh !important;
    overflow: hidden !important;
    background: transparent !important;
  }

  .lux-login-page .lux-login-shell::before,
  .lux-login-page .lux-login-shell::after,
  .lux-login-page .login-language {
    display: none !important;
  }

  .lux-login-page .lux-login-brand {
    display: grid !important;
    flex: 0 0 auto !important;
    min-height: 0 !important;
    padding: max(25px, env(safe-area-inset-top)) 18px 6px !important;
    align-content: start !important;
    background: transparent !important;
  }

  .lux-login-page .lux-brand-card {
    display: grid !important;
    width: 100% !important;
    max-width: 390px !important;
    margin: 0 auto !important;
    justify-items: center !important;
  }

  .lux-login-page .lux-future-logo-stage {
    position: relative;
    display: grid;
    width: clamp(202px, 57vw, 242px);
    height: clamp(185px, 46vw, 218px);
    margin: -2px auto -9px;
    place-items: center;
    isolation: isolate;
  }

  .lux-login-page .lux-reference-logo-art {
    position: absolute;
    inset: 0 auto auto 50%;
    z-index: 2;
    display: block;
    width: 100%;
    height: 88%;
    object-fit: cover;
    object-position: center top;
    transform: translateX(-50%);
    filter: contrast(1.08) brightness(1.02);
  }

  .lux-login-page .lux-generated-logo-art {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    display: block;
    width: 202px;
    height: 202px;
    object-fit: contain;
    transform: translate(-50%, -50%);
    filter: drop-shadow(0 8px 8px rgba(0, 0, 0, 0.72)) drop-shadow(0 0 10px rgba(83, 174, 231, 0.12));
    pointer-events: none;
  }

  .lux-login-page .lux-future-logo-stage::after {
    display: none !important;
  }

  .lux-login-page .lux-logo-edge-runner {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
  }

  .lux-login-page .lux-logo-edge-runner path {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .lux-login-page .lux-logo-runner-glow {
    stroke-width: 8;
    opacity: 0.5;
    filter: url(#luxLogoEdgeGlow);
  }

  .lux-login-page .lux-logo-runner-core {
    stroke-width: 2.2;
    opacity: 0.96;
  }

  .lux-login-page .lux-logo-runner-gold {
    stroke: #42bfff;
    stroke-dasharray: 18 82;
    animation: lux-edge-dash-forward 6.2s linear infinite;
  }

  .lux-login-page .lux-logo-runner-blue {
    display: none;
  }

  .lux-login-page .lux-future-logo-stage::before,
  .lux-login-page .lux-future-radar,
  .lux-login-page .lux-future-orbit-dot,
  .lux-login-page .lux-future-logo-sweep {
    display: none;
  }

  .lux-future-logo-stage::before,
  .lux-future-logo-stage::after {
    position: absolute;
    inset: 5%;
    z-index: -2;
    border: 1px solid rgba(157, 188, 205, 0.12);
    border-radius: 50%;
    content: "";
  }

  .lux-future-logo-stage::before {
    background:
      repeating-conic-gradient(from 0deg, rgba(218, 178, 105, 0.33) 0 0.35deg, transparent 0.35deg 13deg),
      radial-gradient(circle, transparent 48%, rgba(73, 170, 224, 0.11) 49% 50%, transparent 51%);
    -webkit-mask-image: radial-gradient(circle, transparent 42%, #000 43% 68%, transparent 69%);
    mask-image: radial-gradient(circle, transparent 42%, #000 43% 68%, transparent 69%);
    animation: lux-radar-spin 26s linear infinite;
  }

  .lux-future-logo-stage::after {
    inset: 14%;
    border-color: rgba(64, 165, 224, 0.18);
    box-shadow: inset 0 0 22px rgba(41, 138, 194, 0.1), 0 0 25px rgba(41, 138, 194, 0.06);
    animation: lux-radar-spin-reverse 19s linear infinite;
  }

  .lux-future-radar {
    position: absolute;
    z-index: -1;
    border: 1px solid transparent;
    border-radius: 50%;
  }

  .lux-future-radar-one {
    inset: 1%;
    border-top-color: rgba(227, 188, 111, 0.26);
    border-right-color: rgba(91, 197, 255, 0.16);
    animation: lux-radar-spin 16s linear infinite;
  }

  .lux-future-radar-two {
    inset: 22%;
    border-bottom-color: rgba(227, 188, 111, 0.28);
    border-left-color: rgba(91, 197, 255, 0.18);
    animation: lux-radar-spin-reverse 11s linear infinite;
  }

  .lux-future-logo {
    position: relative;
    z-index: 2;
    display: none;
    width: 122%;
    max-height: none;
    overflow: visible;
    filter: drop-shadow(0 9px 8px rgba(0, 0, 0, 0.88)) drop-shadow(0 0 11px rgba(100, 188, 239, 0.18));
  }

  .lux-future-logo-sweep {
    position: absolute;
    z-index: 3;
    top: 21%;
    left: 27%;
    width: 46%;
    height: 58%;
    overflow: hidden;
    transform: skewX(-19deg);
    opacity: 0.66;
    mix-blend-mode: screen;
    pointer-events: none;
  }

  .lux-future-logo-sweep::after {
    position: absolute;
    inset: -35% auto -35% -70%;
    width: 25%;
    transform: rotate(12deg);
    background: linear-gradient(90deg, transparent, rgba(255, 243, 210, 0.88), transparent);
    content: "";
    animation: lux-logo-sweep 3.6s ease-in-out infinite;
  }

  .lux-future-flare,
  .lux-future-orbit-dot {
    position: absolute;
    z-index: 4;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #c9f3ff;
    box-shadow:
      0 0 4px 1px #fff,
      0 0 10px 4px #199eff,
      0 0 24px 8px rgba(24, 134, 255, 0.58);
    offset-path: path("M 101 16 L 172 66 L 172 138 L 157 151 L 143 165 L 101 181 L 59 165 L 45 151 L 33 138 L 33 66 Z");
    offset-rotate: 0deg;
    animation: lux-logo-light-orbit 8.4s linear infinite;
  }

  .lux-future-flare::before,
  .lux-future-flare::after {
    position: absolute;
    top: 50%;
    left: 50%;
    background: linear-gradient(90deg, transparent, rgba(168, 226, 255, 0.95), transparent);
    content: "";
    transform: translate(-50%, -50%);
  }

  .lux-future-flare::before {
    width: 32px;
    height: 1px;
  }

  .lux-future-flare::after {
    width: 1px;
    height: 24px;
  }

  .lux-future-flare-left { top: 0; left: 0; animation-delay: 0s; }
  .lux-future-flare-right { top: 0; left: 0; animation-delay: -2.8s; }
  .lux-future-flare-bottom { top: 0; left: 0; animation-delay: -5.6s; }

  .lux-login-page .lux-future-flare {
    display: none !important;
  }

  .lux-future-orbit-dot {
    z-index: 1;
    width: 3px;
    height: 3px;
    background: #f7d08c;
    box-shadow: 0 0 8px 3px rgba(241, 188, 89, 0.58);
  }

  .lux-future-orbit-dot-one { top: 24%; left: 13%; animation-delay: -1.1s; }
  .lux-future-orbit-dot-two { top: 22%; right: 12%; animation-delay: -2s; }

  .lux-login-page .lux-brand-monogram,
  .lux-login-page .lux-brand-en,
  .lux-login-page .lux-copy {
    display: none !important;
  }

  .lux-login-page .lux-brand-card h1 {
    margin: 1px 0 5px !important;
    color: #ead5ae !important;
    font-family: "Noto Serif TC", "Songti TC", "PMingLiU", serif !important;
    font-size: clamp(28px, 7.8vw, 32px) !important;
    font-weight: 500 !important;
    letter-spacing: 0.28em !important;
    line-height: 1.28 !important;
    text-align: center !important;
    text-shadow: 0 1px 0 #fff6df, 0 4px 18px rgba(226, 178, 92, 0.24);
  }

  .lux-login-page .lux-brand-subtitle {
    color: rgba(220, 221, 219, 0.68) !important;
    font-size: clamp(10px, 3vw, 12px) !important;
    font-weight: 400 !important;
    letter-spacing: 0.36em !important;
    text-align: center !important;
  }

  .lux-login-page .lux-brand-rule {
    position: relative;
    display: block !important;
    width: min(270px, 72vw) !important;
    height: 1px !important;
    margin: 14px auto 16px !important;
    background: linear-gradient(90deg, transparent, rgba(211, 173, 104, 0.52) 25%, rgba(211, 173, 104, 0.52) 75%, transparent) !important;
  }

  .lux-login-page .lux-brand-rule::after,
  .lux-login-page .lux-action-line::after {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    border-right: 1px solid #d9ad64;
    border-bottom: 1px solid #d9ad64;
    content: "";
    transform: translate(-50%, -50%) rotate(45deg);
  }

  .lux-login-page .lux-brand-tags {
    display: flex !important;
    width: min(330px, 88vw) !important;
    margin: 0 auto !important;
    justify-content: space-between !important;
    gap: 0 !important;
    color: #e1c595 !important;
    font-family: "Noto Serif TC", "Songti TC", serif !important;
    font-size: clamp(12px, 3.5vw, 14px) !important;
    letter-spacing: 0.23em !important;
  }

  .lux-login-page .lux-brand-tags span {
    position: relative;
    padding: 0 10px;
  }

  .lux-login-page .lux-brand-tags span + span::before {
    position: absolute;
    top: 50%;
    left: -3px;
    color: rgba(225, 197, 149, 0.48);
    content: "|";
    transform: translateY(-52%);
  }

  .lux-login-page .lux-login-action {
    position: relative !important;
    display: flex !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    padding: 10px 20px calc(28px + env(safe-area-inset-bottom)) !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: center !important;
    overflow: hidden !important;
    border: 0 !important;
    background: transparent !important;
  }

  .lux-login-page .lux-line-tech-field {
    position: absolute;
    top: -52px;
    left: 50%;
    z-index: 0;
    display: none;
    width: min(370px, 95vw);
    aspect-ratio: 1;
    border-radius: 50%;
    transform: translateX(-50%);
    opacity: 0.7;
    background:
      repeating-conic-gradient(from 5deg, rgba(225, 188, 119, 0.22) 0 0.28deg, transparent 0.28deg 11deg),
      repeating-radial-gradient(circle, transparent 0 24px, rgba(102, 155, 183, 0.1) 25px, transparent 26px 39px);
    -webkit-mask-image: radial-gradient(circle, transparent 0 23%, #000 28% 65%, transparent 73%);
    mask-image: radial-gradient(circle, transparent 0 23%, #000 28% 65%, transparent 73%);
    animation: lux-tech-field-spin 42s linear infinite;
    pointer-events: none;
  }

  .lux-login-page .lux-login-action::before,
  .lux-login-page .lux-login-action::after {
    position: absolute;
    top: 31%;
    z-index: -1;
    width: 32%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(211, 173, 104, 0.32));
    content: "";
  }

  .lux-login-page .lux-login-action::before { left: 0; }
  .lux-login-page .lux-login-action::after { right: 0; transform: scaleX(-1); }

  .lux-login-page .lux-line-login {
    position: relative !important;
    width: clamp(180px, 52vw, 205px) !important;
    height: clamp(180px, 52vw, 205px) !important;
    aspect-ratio: 1 / 1 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: transparent !important;
    box-shadow: none !important;
    animation: lux-line-ring-float 4.2s ease-in-out infinite !important;
    z-index: 2 !important;
  }

  .lux-login-page .lux-reference-line-art {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    pointer-events: none;
    filter: contrast(1.08) brightness(1.02);
  }

  .lux-login-page .lux-generated-line-art {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    display: block;
    width: 200px !important;
    max-width: none !important;
    height: 200px !important;
    object-fit: cover;
    object-position: center;
    transform: translate(-50%, -50%) rotate(0deg);
    transform-origin: center center;
    clip-path: circle(80px at 50% 50%);
    animation: lux-line-image-orbit 8.8s linear infinite;
    pointer-events: none;
  }

  .lux-login-page .lux-line-light {
    position: absolute;
    inset: auto;
    top: 8px;
    left: calc(50% - 78px);
    z-index: 3;
    display: block;
    width: 156px;
    height: 156px;
    border: 4px solid transparent;
    border-radius: 50%;
    pointer-events: none;
  }

  .lux-login-page .lux-line-light-gold {
    border-width: 2px;
    border-top-color: rgba(255, 229, 176, 0.72);
    border-left-color: rgba(206, 151, 58, 0.42);
    filter: drop-shadow(-2px -1px 3px rgba(255, 221, 154, 0.5)) drop-shadow(1px 3px 5px rgba(213, 151, 49, 0.34));
    transform: rotate(-38deg);
    animation: lux-ring-light-gold 5.8s ease-in-out infinite;
  }

  .lux-login-page .lux-line-light-blue {
    top: 14px;
    left: calc(50% - 72px);
    width: 144px;
    height: 144px;
    border-width: 2px;
    border-right-color: rgba(99, 199, 255, 0.58);
    border-bottom-color: rgba(47, 135, 206, 0.36);
    filter: drop-shadow(2px 1px 4px rgba(69, 178, 244, 0.42));
    transform: rotate(-18deg);
    animation: lux-ring-light-blue 7.4s ease-in-out infinite;
  }

  .lux-login-page .lux-line-light-spark {
    top: 50%;
    left: 50%;
    width: 5px;
    height: 5px;
    margin: -2.5px 0 0 -2.5px;
    border: 0;
    background: #fff0c9;
    box-shadow: 0 0 5px 2px #fff, 0 0 14px 6px rgba(235, 175, 70, 0.72);
    animation: lux-line-spark-orbit 5.8s linear infinite;
  }

  .lux-login-page .lux-line-light-spark-two {
    top: 50%;
    left: 50%;
    right: auto;
    bottom: auto;
    width: 5px;
    height: 5px;
    margin: -2.5px 0 0 -2.5px;
    border: 0;
    background: #ffe4aa;
    box-shadow: 0 0 5px 2px #fff4da, 0 0 14px 6px rgba(223, 162, 52, 0.68);
    animation: lux-line-spark-orbit 5.8s -2.9s linear infinite;
  }

  .lux-login-page .lux-line-light-spark::before,
  .lux-login-page .lux-line-light-spark::after,
  .lux-login-page .lux-line-light-spark-two::before,
  .lux-login-page .lux-line-light-spark-two::after {
    position: absolute;
    top: 50%;
    left: 50%;
    background: linear-gradient(90deg, transparent, rgba(255, 244, 215, 0.94), transparent);
    content: "";
    transform: translate(-50%, -50%);
  }

  .lux-login-page .lux-line-light-spark::before,
  .lux-login-page .lux-line-light-spark-two::before {
    width: 24px;
    height: 1px;
  }

  .lux-login-page .lux-line-light-spark::after,
  .lux-login-page .lux-line-light-spark-two::after {
    width: 1px;
    height: 18px;
  }

  .lux-login-page .lux-line-login::before,
  .lux-login-page .lux-line-login::after {
    display: block !important;
    position: absolute !important;
    inset: 8% !important;
    border: 1px solid rgba(227, 184, 104, 0.55) !important;
    border-radius: 50% !important;
    background: conic-gradient(from 0deg, transparent 0 10%, rgba(255, 225, 165, 0.08) 19%, #f4cf86 25%, rgba(235, 194, 117, 0.15) 31%, transparent 43% 60%, rgba(93, 189, 241, 0.08) 68%, #70c6f1 75%, rgba(70, 176, 233, 0.12) 82%, transparent 92%) !important;
    content: "" !important;
    -webkit-mask-image: radial-gradient(circle, transparent 0 70%, #000 71% 73%, transparent 74%) !important;
    mask-image: radial-gradient(circle, transparent 0 70%, #000 71% 73%, transparent 74%) !important;
    animation: lux-radar-spin 12s linear infinite !important;
  }

  .lux-login-page .lux-line-login::before,
  .lux-login-page .lux-line-login::after,
  .lux-login-page .lux-line-light-gold,
  .lux-login-page .lux-line-light-blue,
  .lux-login-page .lux-line-orbit {
    display: none !important;
  }

  .lux-login-page .lux-line-login::before,
  .lux-login-page .lux-line-login::after {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    z-index: 3 !important;
    display: block !important;
    border: 0 !important;
    border-radius: 50% !important;
    content: "" !important;
    pointer-events: none !important;
  }

  .lux-login-page .lux-line-login::before {
    width: 184px !important;
    height: 184px !important;
    background: conic-gradient(from 0deg, transparent 0 68%, rgba(214, 151, 53, 0.18) 72%, rgba(255, 224, 151, 0.98) 78%, rgba(221, 152, 42, 0.72) 84%, transparent 90% 100%) !important;
    filter: drop-shadow(0 0 5px rgba(225, 169, 69, 0.58));
    transform: translate(-50%, -50%);
    -webkit-mask-image: radial-gradient(circle, transparent 0 91%, #000 92% 95%, transparent 96%);
    mask-image: radial-gradient(circle, transparent 0 91%, #000 92% 95%, transparent 96%);
    animation: lux-ring-band-orbit 5.6s linear infinite !important;
  }

  .lux-login-page .lux-line-login::after {
    width: 164px !important;
    height: 164px !important;
    background: conic-gradient(from 180deg, transparent 0 55%, rgba(55, 157, 220, 0.2) 61%, rgba(123, 211, 255, 0.9) 67%, rgba(51, 145, 209, 0.62) 74%, transparent 81% 100%) !important;
    filter: drop-shadow(0 0 4px rgba(75, 176, 237, 0.48));
    transform: translate(-50%, -50%);
    -webkit-mask-image: radial-gradient(circle, transparent 0 91%, #000 92% 95%, transparent 96%);
    mask-image: radial-gradient(circle, transparent 0 91%, #000 92% 95%, transparent 96%);
    animation: lux-ring-band-orbit-reverse 7.4s linear infinite !important;
  }

  .lux-login-page .lux-line-light-spark,
  .lux-login-page .lux-line-light-spark-two {
    display: none !important;
  }

  .lux-login-page .lux-line-login::before,
  .lux-login-page .lux-line-login::after {
    display: none !important;
  }

  .lux-login-page .lux-line-edge-runner {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: none !important;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
  }

  .lux-login-page .lux-line-edge-runner circle {
    fill: none;
    stroke-linecap: round;
  }

  .lux-login-page .lux-line-runner-glow {
    stroke-width: 18;
    opacity: 0.72;
    filter: url(#luxLineEdgeGlow);
  }

  .lux-login-page .lux-line-runner-band {
    stroke-width: 12;
    opacity: 0.96;
  }

  .lux-login-page .lux-line-runner-fill {
    stroke-width: 7;
    opacity: 1;
  }

  .lux-login-page .lux-line-runner-core {
    stroke-width: 2.25;
    opacity: 1;
  }

  .lux-login-page .lux-line-runner-gold {
    stroke-dasharray: 24 76;
    animation: lux-edge-dash-forward 5.2s linear infinite;
  }

  .lux-login-page .lux-line-runner-glow.lux-line-runner-gold {
    stroke: #ffad19;
  }

  .lux-login-page .lux-line-runner-band.lux-line-runner-gold {
    stroke: #b96f0b;
  }

  .lux-login-page .lux-line-runner-fill.lux-line-runner-gold {
    stroke: #ffb51d;
    filter: drop-shadow(0 0 2px rgba(255, 201, 80, 0.95));
  }

  .lux-login-page .lux-line-runner-core.lux-line-runner-gold {
    stroke: #fff5cc;
    filter: drop-shadow(0 0 2px #ffffff);
  }

  .lux-login-page .lux-line-runner-gold-secondary {
    animation-delay: -2.6s;
  }

  .lux-login-page .lux-line-login::after {
    inset: 16% !important;
    border-color: rgba(72, 178, 239, 0.45) !important;
    animation-duration: 8s !important;
    animation-direction: reverse !important;
  }

  .lux-login-page .lux-line-orbit {
    position: absolute !important;
    inset: auto !important;
    top: 50% !important;
    left: 50% !important;
    z-index: 4 !important;
    display: grid !important;
    width: 106px !important;
    height: 106px !important;
    border: 2px solid #138fff !important;
    border-radius: 50% !important;
    place-items: center !important;
    background: radial-gradient(circle at 48% 38%, #11171c 0, #05080b 66%, #010203 100%) !important;
    transform: translate(-50%, -50%) !important;
    box-shadow:
      inset 0 0 20px rgba(0, 0, 0, 0.92),
      inset 0 0 6px rgba(46, 154, 229, 0.22),
      0 0 0 4px rgba(2, 6, 9, 0.96),
      0 0 0 6px rgba(22, 139, 226, 0.72),
      0 0 4px rgba(19, 143, 255, 0.32) !important;
  }

  .lux-login-page .lux-line-orbit::before,
  .lux-login-page .lux-line-orbit::after {
    display: none !important;
  }

  .lux-login-page .lux-line-orbit::before {
    inset: -20px;
    border: 1px solid rgba(177, 207, 219, 0.22);
    background: conic-gradient(from 218deg, transparent 0 8%, rgba(219, 172, 93, 0.78) 14%, rgba(255, 237, 198, 0.95) 21%, transparent 28% 47%, rgba(78, 181, 235, 0.82) 55%, transparent 64% 82%, rgba(214, 162, 76, 0.72) 91%, transparent 100%);
    box-shadow: inset 0 0 0 5px rgba(5, 10, 13, 0.84), 0 0 9px rgba(220, 168, 77, 0.2);
    -webkit-mask-image: radial-gradient(circle, transparent 0 76%, #000 77% 80%, transparent 81%);
    mask-image: radial-gradient(circle, transparent 0 76%, #000 77% 80%, transparent 81%);
    animation: lux-radar-spin 13s linear infinite;
  }

  .lux-login-page .lux-line-orbit::after {
    inset: -30px;
    border: 1px solid rgba(86, 143, 173, 0.16);
    background: repeating-conic-gradient(from 0deg, rgba(226, 182, 105, 0.28) 0 0.6deg, transparent 0.6deg 13deg);
    -webkit-mask-image: radial-gradient(circle, transparent 0 84%, #000 85% 86%, transparent 87%);
    mask-image: radial-gradient(circle, transparent 0 84%, #000 85% 86%, transparent 87%);
    animation: lux-radar-spin-reverse 21s linear infinite;
  }

  .lux-login-page .lux-line-orbit b {
    color: #f4f3ef !important;
    font-size: clamp(22px, 6.4vw, 27px) !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
    text-shadow: 0 0 12px rgba(255, 255, 255, 0.16) !important;
  }

  /* Crisp, mathematically centered LINE ring. Only the gold reflection moves. */
  .lux-login-page .lux-generated-line-art,
  .lux-login-page .lux-line-edge-runner {
    display: none !important;
    animation: none !important;
  }

  .lux-login-page .lux-line-login::before,
  .lux-login-page .lux-line-login::after {
    position: absolute !important;
    inset: auto !important;
    top: 50% !important;
    left: 50% !important;
    display: block !important;
    width: 184px !important;
    height: 184px !important;
    border: 0 !important;
    border-radius: 50% !important;
    content: "" !important;
    pointer-events: none !important;
  }

  .lux-login-page .lux-line-login::before {
    z-index: 1 !important;
    background: conic-gradient(from 18deg,
      #10161a 0deg,
      #596268 34deg,
      #a4abad 62deg,
      #343d42 96deg,
      #141b1f 134deg,
      #70797d 172deg,
      #b0b6b8 202deg,
      #40494e 238deg,
      #171e22 284deg,
      #687176 326deg,
      #10161a 360deg) !important;
    filter: none !important;
    transform: translate(-50%, -50%) !important;
    -webkit-mask-image: radial-gradient(circle, transparent 0 57px, #000 59px 88px, transparent 91px) !important;
    mask-image: radial-gradient(circle, transparent 0 57px, #000 59px 88px, transparent 91px) !important;
    animation: none !important;
  }

  .lux-login-page .lux-line-login::after {
    z-index: 3 !important;
    background: conic-gradient(from -34deg,
      transparent 0deg,
      rgba(181, 128, 55, 0.03) 7deg,
      rgba(204, 153, 82, 0.25) 14deg,
      #d7aa66 23deg,
      #f4d9a8 31deg,
      #fff0cf 36deg,
      #d7a45b 44deg,
      rgba(177, 117, 38, 0.18) 62deg,
      transparent 80deg 180deg,
      rgba(181, 128, 55, 0.03) 187deg,
      rgba(204, 153, 82, 0.25) 194deg,
      #d7aa66 203deg,
      #f4d9a8 211deg,
      #fff0cf 216deg,
      #d7a45b 224deg,
      rgba(177, 117, 38, 0.18) 242deg,
      transparent 260deg 360deg) !important;
    filter: drop-shadow(0 0 2px rgba(214, 164, 91, 0.28)) !important;
    transform: translate(-50%, -50%) rotate(0deg);
    -webkit-mask-image: radial-gradient(circle, transparent 0 59px, rgba(0,0,0,.3) 61px, #000 65px 84px, rgba(0,0,0,.32) 88px, transparent 91px) !important;
    mask-image: radial-gradient(circle, transparent 0 59px, rgba(0,0,0,.3) 61px, #000 65px 84px, rgba(0,0,0,.32) 88px, transparent 91px) !important;
    animation: lux-line-gold-orbit 8.8s linear infinite !important;
  }

  .lux-login-page .lux-line-orbit {
    width: 112px !important;
    height: 112px !important;
    border: 1px solid rgba(38, 76, 95, 0.72) !important;
    border-radius: 50% !important;
    background: radial-gradient(circle at 46% 38%, #11171b 0, #060a0d 61%, #020405 100%) !important;
    box-shadow:
      inset 0 0 18px rgba(0, 0, 0, 0.96),
      0 0 0 3px #020609,
      0 0 0 4px rgba(39, 67, 80, 0.64),
      0 0 0 6px #080d10 !important;
  }

  .lux-login-page .lux-line-orbit::before {
    position: absolute !important;
    inset: -5px !important;
    z-index: 1 !important;
    display: block !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: conic-gradient(from 208deg,
      transparent 0 31%,
      rgba(27, 111, 153, 0.08) 37%,
      #225f7d 46%,
      #439bc2 52%,
      #2583ad 60%,
      rgba(31, 99, 131, 0.28) 72%,
      transparent 82% 100%) !important;
    box-shadow: none !important;
    content: "" !important;
    -webkit-mask-image: radial-gradient(circle, transparent 0 94%, #000 95% 97%, transparent 98%) !important;
    mask-image: radial-gradient(circle, transparent 0 94%, #000 95% 97%, transparent 98%) !important;
    animation: none !important;
  }

  .lux-login-page .lux-line-orbit::after {
    position: absolute !important;
    inset: -42px !important;
    z-index: 0 !important;
    display: block !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: radial-gradient(circle,
      transparent 0 88px,
      rgba(115, 127, 133, 0.3) 89px,
      transparent 90px 92px,
      rgba(184, 139, 69, 0.28) 93px,
      transparent 94px 96px,
      rgba(88, 102, 109, 0.24) 97px,
      transparent 98px) !important;
    box-shadow: none !important;
    content: "" !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
    animation: none !important;
  }

  .lux-login-page .lux-line-orbit b {
    position: relative;
    z-index: 2;
    font-size: clamp(25px, 7vw, 30px) !important;
  }

  /* Use the finished generated ring artwork itself as the moving ring. */
  .lux-login-page .lux-generated-line-art {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    z-index: 2 !important;
    display: block !important;
    width: 198px !important;
    height: 198px !important;
    max-width: none !important;
    object-fit: contain !important;
    clip-path: none !important;
    filter: none !important;
    transform: translate(-49.681%, -48.565%) rotate(0deg) scaleY(1.011);
    transform-origin: 49.681% 48.565% !important;
    animation: lux-line-image-orbit 8.8s linear infinite !important;
    pointer-events: none !important;
  }

  .lux-login-page .lux-line-login::before,
  .lux-login-page .lux-line-login::after,
  .lux-login-page .lux-line-edge-runner {
    display: none !important;
    animation: none !important;
  }

  .lux-login-page .lux-line-orbit {
    z-index: 4 !important;
    width: 104px !important;
    height: 104px !important;
    border: 0 !important;
    background: radial-gradient(circle at 47% 38%, #12181d 0, #05080b 64%, #010203 100%) !important;
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.94) !important;
  }

  .lux-login-page .lux-line-orbit::before,
  .lux-login-page .lux-line-orbit::after {
    display: none !important;
  }

  .lux-login-page .lux-line-login:active {
    transform: scale(0.97) !important;
  }

  .lux-login-page .lux-login-action h2 {
    margin: 7px 0 2px !important;
    color: #dfc08c !important;
    font-family: "Noto Serif TC", "Songti TC", serif !important;
    font-size: clamp(22px, 6vw, 25px) !important;
    font-weight: 500 !important;
    letter-spacing: 0.1em !important;
    line-height: 1.3 !important;
    text-shadow: 0 2px 14px rgba(225, 176, 91, 0.2);
    z-index: 2 !important;
  }

  .lux-login-page .lux-login-action p {
    position: relative !important;
    color: rgba(224, 218, 204, 0.62) !important;
    font-size: clamp(11px, 3vw, 13px) !important;
    letter-spacing: 0.07em !important;
    z-index: 2 !important;
  }

  .lux-login-page .lux-login-action p::after {
    display: block;
    width: min(190px, 50vw);
    height: 12px;
    margin: 10px auto 0;
    background:
      linear-gradient(90deg, transparent, rgba(216, 177, 107, 0.48) 35%, transparent 35% 65%, rgba(216, 177, 107, 0.48) 65%, transparent) 50% 4px / 100% 1px no-repeat,
      linear-gradient(45deg, transparent 43%, #d9ad64 44% 51%, transparent 52%) calc(50% - 4px) 0 / 8px 8px no-repeat,
      linear-gradient(-45deg, transparent 43%, #d9ad64 44% 51%, transparent 52%) calc(50% + 4px) 0 / 8px 8px no-repeat;
    content: "";
    opacity: 0.78;
  }

  .lux-login-page .lux-guest-login {
    display: none !important;
  }

  .lux-login-page .lux-action-line,
  .lux-login-page .lux-login-action > small {
    display: none !important;
  }

  .lux-login-page .lux-future-waves {
    position: absolute;
    right: -10%;
    bottom: -1%;
    left: -10%;
    z-index: 0;
    display: block;
    height: 58%;
    pointer-events: none;
  }

  .lux-future-wave-svg {
    width: 100%;
    height: 100%;
    overflow: visible;
    filter: drop-shadow(0 -2px 8px rgba(224, 174, 85, 0.15));
  }

  .lux-wave-fill {
    opacity: 0.2;
    transform-origin: 50% 100%;
    animation: lux-wave-drift 6.8s ease-in-out infinite;
  }

  .lux-wave-fill-gold { fill: url(#luxWaveGold); }
  .lux-wave-fill-silver { fill: url(#luxWaveSilver); animation-delay: -2.7s; animation-direction: reverse; }

  .lux-wave-line {
    fill: none;
    stroke-linecap: round;
    stroke-width: 1.05;
    stroke-dasharray: none;
    animation: lux-wave-line-breathe 5.6s ease-in-out infinite;
  }

  .lux-wave-line-one { stroke: url(#luxWaveGold); filter: drop-shadow(0 0 4px rgba(232, 184, 96, 0.58)); }
  .lux-wave-line-two { stroke: url(#luxWaveSilver); stroke-width: 0.9; animation-delay: -2.2s; }
  .lux-wave-line-three { stroke: url(#luxWaveGold); stroke-width: 0.65; opacity: 0.62; animation-delay: -3.7s; }

  .lux-wave-glow {
    fill: none;
    stroke-width: 8;
    opacity: 0.15;
    filter: url(#luxWaveSoftGlow);
    animation: lux-wave-glow-breathe 4.8s ease-in-out infinite;
  }

  .lux-wave-glow-gold { stroke: url(#luxWaveGold); }
  .lux-wave-glow-silver { stroke: url(#luxWaveSilver); animation-delay: -2.1s; }

  .lux-wave-hair {
    fill: none;
    stroke: rgba(226, 203, 160, 0.2);
    stroke-width: 0.42;
    stroke-dasharray: 76 10 4 8;
    animation: lux-wave-travel 13s linear infinite;
  }

  .lux-wave-hair-two { stroke: rgba(92, 176, 219, 0.24); animation-direction: reverse; animation-duration: 16s; }
  .lux-wave-hair-three { stroke: rgba(234, 190, 108, 0.18); animation-duration: 18s; }
  .lux-wave-hair-four { stroke: rgba(217, 226, 225, 0.14); animation-direction: reverse; animation-duration: 20s; }
  .lux-wave-hair-five { stroke: rgba(226, 203, 160, 0.18); animation-duration: 17s; }
  .lux-wave-hair-six { stroke: rgba(114, 171, 196, 0.16); animation-direction: reverse; animation-duration: 19s; }
  .lux-wave-hair-seven { stroke: rgba(232, 190, 111, 0.16); animation-duration: 21s; }
  .lux-wave-hair-eight { stroke: rgba(205, 218, 220, 0.12); animation-direction: reverse; animation-duration: 23s; }

  .lux-register-panel:not(.hidden) {
    z-index: 320 !important;
  }

  @keyframes lux-radar-spin {
    to { transform: rotate(360deg); }
  }

  @keyframes lux-radar-spin-reverse {
    to { transform: rotate(-360deg); }
  }

  @keyframes lux-logo-sweep {
    0%, 24% { left: -70%; opacity: 0; }
    38%, 61% { opacity: 0.9; }
    76%, 100% { left: 145%; opacity: 0; }
  }

  @keyframes lux-flare-pulse {
    0%, 100% { opacity: 0.42; transform: scale(0.72); }
    50% { opacity: 1; transform: scale(1.18); }
  }

  @keyframes lux-line-ring-float {
    0%, 100% { filter: brightness(0.93); transform: translateY(0); }
    50% { filter: brightness(1.12); transform: translateY(-3px); }
  }

  @keyframes lux-line-image-orbit {
    from { transform: translate(-49.681%, -48.565%) rotate(0deg) scaleY(1.011); }
    to { transform: translate(-49.681%, -48.565%) rotate(360deg) scaleY(1.011); }
  }

  @keyframes lux-line-gold-orbit {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
  }

  @keyframes lux-tech-field-spin {
    from { transform: translateX(-50%) rotate(0deg); }
    to { transform: translateX(-50%) rotate(360deg); }
  }

  @keyframes lux-ring-light-gold {
    0%, 100% { opacity: 0.18; transform: rotate(-44deg); }
    50% { opacity: 0.42; transform: rotate(-20deg); }
  }

  @keyframes lux-ring-light-blue {
    0%, 100% { opacity: 0.16; transform: rotate(-18deg); }
    50% { opacity: 0.38; transform: rotate(-42deg); }
  }

  @keyframes lux-ring-spark {
    0%, 100% { opacity: 0.45; transform: scale(0.65); }
    50% { opacity: 1; transform: scale(1.25); }
  }

  @keyframes lux-logo-light-orbit {
    0% { offset-distance: 0%; opacity: 0.38; transform: scale(0.72); }
    8%, 42%, 75% { opacity: 1; transform: scale(1.18); }
    24%, 58%, 92% { opacity: 0.58; transform: scale(0.86); }
    100% { offset-distance: 100%; opacity: 0.38; transform: scale(0.72); }
  }

  @keyframes lux-logo-edge-flow {
    to { --lux-logo-light-angle: 360deg; }
  }

  @keyframes lux-edge-dash-forward {
    to { stroke-dashoffset: -100; }
  }

  @keyframes lux-edge-dash-reverse {
    to { stroke-dashoffset: 100; }
  }

  @keyframes lux-ring-band-orbit {
    to { transform: translate(-50%, -50%) rotate(360deg); }
  }

  @keyframes lux-ring-band-orbit-reverse {
    to { transform: translate(-50%, -50%) rotate(-360deg); }
  }

  @keyframes lux-line-spark-orbit {
    0% { opacity: 0.44; transform: rotate(-90deg) translateX(76px) rotate(90deg) scale(0.72); }
    25% { opacity: 1; transform: rotate(0deg) translateX(76px) rotate(0deg) scale(1.15); }
    50% { opacity: 0.56; transform: rotate(90deg) translateX(76px) rotate(-90deg) scale(0.84); }
    75% { opacity: 1; transform: rotate(180deg) translateX(76px) rotate(-180deg) scale(1.08); }
    100% { opacity: 0.44; transform: rotate(270deg) translateX(76px) rotate(-270deg) scale(0.72); }
  }

  @keyframes lux-wave-drift {
    0%, 100% { opacity: 0.11; transform: translateX(-1.5%) scaleY(0.95); }
    50% { opacity: 0.24; transform: translateX(1.5%) scaleY(1.04); }
  }

  @keyframes lux-wave-travel {
    to { stroke-dashoffset: -160; }
  }

  @keyframes lux-wave-line-breathe {
    0%, 100% { opacity: 0.56; }
    50% { opacity: 1; }
  }

  @keyframes lux-wave-glow-breathe {
    0%, 100% { opacity: 0.12; }
    50% { opacity: 0.3; }
  }

  @keyframes lux-stars-breathe {
    0%, 100% { opacity: 0.34; }
    50% { opacity: 0.82; }
  }
}

@media (max-width: 760px) and (max-height: 720px) {
  .lux-login-page .lux-login-brand { padding-top: max(18px, env(safe-area-inset-top)) !important; }
  .lux-login-page .lux-future-logo-stage { width: min(202px, 53vw); margin: 0 auto 10px; }
  .lux-login-page .lux-brand-card h1 { font-size: clamp(28px, 7.8vw, 32px) !important; }
  .lux-login-page .lux-brand-rule { margin: 11px auto 13px !important; }
  .lux-login-page .lux-login-action { padding-top: 22px !important; }
  .lux-login-page .lux-line-login { width: min(196px, 51vw) !important; height: min(196px, 51vw) !important; }
  .lux-login-page .lux-login-action h2 { font-size: 24px !important; }
}

@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
  .lux-login-page.active::after,
  .lux-future-logo-stage::before,
  .lux-future-logo-stage::after,
  .lux-future-radar,
  .lux-future-logo-sweep::after,
  .lux-future-flare,
  .lux-future-orbit-dot,
  .lux-login-page .lux-line-login,
  .lux-login-page .lux-line-login::before,
  .lux-login-page .lux-line-login::after,
  .lux-line-tech-field,
  .lux-line-light,
  .lux-wave-fill,
  .lux-wave-line,
  .lux-wave-glow,
  .lux-wave-hair {
    animation: none !important;
  }
}

/* Optional desktop version of the mobile technology login artwork. */
@media (min-width: 761px) {
  body[data-login-desktop-mode="future"] .lux-login-page.active {
    background:
      radial-gradient(circle at 24% 26%, rgba(51, 137, 191, .13), transparent 30%),
      radial-gradient(circle at 77% 55%, rgba(214, 155, 56, .1), transparent 30%),
      linear-gradient(135deg, #10171c, #05080a 48%, #010203) !important;
  }

  body[data-login-desktop-mode="future"] .lux-login-shell::before {
    width: 100%;
    border: 0;
    opacity: .38;
    background:
      linear-gradient(rgba(218, 178, 105, .05) 1px, transparent 1px) 0 0 / 100% 54px,
      linear-gradient(90deg, rgba(72, 170, 225, .04) 1px, transparent 1px) 0 0 / 54px 100%;
    -webkit-mask-image: radial-gradient(ellipse at center, #000, transparent 73%);
    mask-image: radial-gradient(ellipse at center, #000, transparent 73%);
  }

  body[data-login-desktop-mode="future"] .lux-login-shell::after {
    inset: 0;
    opacity: .5;
    filter: none;
    background:
      radial-gradient(circle at 8% 18%, #e8bd69 0 1px, transparent 2px),
      radial-gradient(circle at 92% 22%, #58c7ff 0 1px, transparent 2px),
      radial-gradient(circle at 48% 88%, #e8bd69 0 1px, transparent 2px);
  }

  body[data-login-desktop-mode="future"] .lux-login-brand,
  body[data-login-desktop-mode="future"] .lux-login-action {
    z-index: 1;
    background: transparent;
  }

  body[data-login-desktop-mode="future"] .lux-login-brand {
    padding: clamp(38px, 5vw, 76px);
  }

  body[data-login-desktop-mode="future"] .lux-brand-card {
    display: grid;
    width: min(620px, 88%);
    margin: auto;
    justify-items: center;
  }

  body[data-login-desktop-mode="future"] .lux-future-logo-stage {
    position: relative;
    display: grid;
    width: 290px;
    height: 270px;
    margin: -16px auto -10px;
    place-items: center;
  }

  body[data-login-desktop-mode="future"] .lux-generated-logo-art {
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    width: 258px;
    height: 258px;
    object-fit: contain;
    transform: translate(-50%, -50%);
    filter: drop-shadow(0 12px 14px rgba(0, 0, 0, .8)) drop-shadow(0 0 14px rgba(73, 177, 237, .18));
  }

  body[data-login-desktop-mode="future"] .lux-future-logo,
  body[data-login-desktop-mode="future"] .lux-logo-edge-runner,
  body[data-login-desktop-mode="future"] .lux-future-radar,
  body[data-login-desktop-mode="future"] .lux-future-orbit-dot,
  body[data-login-desktop-mode="future"] .lux-future-logo-sweep,
  body[data-login-desktop-mode="future"] .lux-line-tech-field,
  body[data-login-desktop-mode="future"] .lux-line-edge-runner,
  body[data-login-desktop-mode="future"] .lux-line-light,
  body[data-login-desktop-mode="future"] .lux-future-waves {
    display: none !important;
  }

  body[data-login-desktop-mode="future"] .lux-brand-monogram,
  body[data-login-desktop-mode="future"] .lux-brand-en {
    display: none;
  }

  body[data-login-desktop-mode="future"] .lux-brand-card h1 {
    font-size: clamp(36px, 3.15vw, 58px);
    font-weight: 650;
    letter-spacing: .14em;
  }

  body[data-login-desktop-mode="future"] .lux-brand-subtitle {
    margin-top: 18px;
    color: rgba(230, 234, 233, .54);
    letter-spacing: .42em;
  }

  body[data-login-desktop-mode="future"] .lux-brand-rule {
    margin-top: 27px;
  }

  body[data-login-desktop-mode="future"] .lux-brand-tags {
    margin-top: 26px;
  }

  body[data-login-desktop-mode="future"] .lux-login-action {
    border-left-color: rgba(218, 178, 105, .16);
    box-shadow: inset 40px 0 80px rgba(0, 0, 0, .18);
  }

  body[data-login-desktop-mode="future"] .lux-line-login {
    width: min(270px, 28vw);
    height: min(270px, 28vw);
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  body[data-login-desktop-mode="future"] .lux-line-login::before,
  body[data-login-desktop-mode="future"] .lux-line-login::after {
    display: none;
  }

  body[data-login-desktop-mode="future"] .lux-generated-line-art {
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    width: 265px;
    height: 265px;
    object-fit: cover;
    transform: translate(-50%, -50%);
    clip-path: circle(106px at 50% 50%);
    filter: drop-shadow(0 0 20px rgba(54, 154, 224, .25));
  }

  body[data-login-desktop-mode="future"] .lux-line-orbit {
    color: #f7f8f8;
    font-size: 30px;
    text-shadow: 0 2px 8px #000;
  }

  body[data-login-desktop-mode="future"] .lux-login-action h2 {
    margin-top: 34px;
  }
}