.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;
}

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

@media (max-width: 760px) {
  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;
  }
}