/* 1847 × 852 is the pixel-comparison baseline, never the live viewport size. */
html:has(#authModal:not(.hidden)),
body:has(#authModal:not(.hidden)) {
  width: 100% !important;
  min-width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#authModal:not(:has(#securityPanel:not(.hidden))) .login-site,
#authModal:not(:has(#securityPanel:not(.hidden))) .login-site button {
  font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif !important;
}

#authModal:not(:has(#securityPanel:not(.hidden))) {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  min-width: 100% !important;
  max-width: none !important;
  height: 100dvh !important;
  min-height: 100dvh !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  overflow: hidden !important;
}

#authModal:not(:has(#securityPanel:not(.hidden))) .auth-landing-shell,
#authModal:not(:has(#securityPanel:not(.hidden))) .auth-story.login-site {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  transform: none !important;
  animation: none !important;
}

#authModal:not(:has(#securityPanel:not(.hidden))) .login-site-body,
#authModal:not(:has(#securityPanel:not(.hidden))) .login-site-copy,
#authModal:not(:has(#securityPanel:not(.hidden))) .login-site-visual {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  min-height: 100% !important;
  border-radius: 0 !important;
}

#authModal:not(:has(#securityPanel:not(.hidden))) .login-site-visual {
  pointer-events: auto !important;
}

#authModal:not(:has(#securityPanel:not(.hidden))) .login-site-visual > img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: 0 !important;
  transform: none !important;
  pointer-events: none !important;
}

#authModal:not(:has(#securityPanel:not(.hidden))) .login-site-float {
  pointer-events: auto !important;
  user-select: text !important;
}

/* The monitor screen is real selectable HTML/SVG, not text baked into the hero raster. */
#authModal:not(:has(#securityPanel:not(.hidden))) .login-site-monitor-ui {
  position: absolute !important;
  z-index: 3 !important;
  top: 16.432cqh !important;
  left: calc(50% + 10.035cqh) !important;
  display: grid !important;
  width: 71.831cqh !important;
  height: 56.338cqh !important;
  grid-template-rows: 13% minmax(0, 1fr) !important;
  overflow: hidden !important;
  clip-path: polygon(0 7%, 100% 0, 100% 98%, 0 91%) !important;
  border: 1px solid rgba(117, 164, 229, .22) !important;
  border-radius: 0 !important;
  background: linear-gradient(145deg, #0c1c37 0%, #071327 56%, #061020 100%) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.035) !important;
  color: #dceaff !important;
  filter: none !important;
  backdrop-filter: none !important;
  pointer-events: auto !important;
  user-select: text !important;
}

#authModal:not(:has(#securityPanel:not(.hidden))) .login-site-monitor-ui *,
#authModal:not(:has(#securityPanel:not(.hidden))) .login-site-monitor-ui *::before,
#authModal:not(:has(#securityPanel:not(.hidden))) .login-site-monitor-ui *::after {
  filter: none !important;
  text-shadow: none !important;
}

.monitor-ui-topbar {
  display: grid !important;
  grid-template-columns: 1.25fr .9fr .55fr .55fr .65fr !important;
  align-items: center !important;
  gap: 1.05cqh !important;
  padding: 2.35cqh 2.1cqh .4cqh 3.2cqh !important;
  border-bottom: 1px solid rgba(139, 181, 236, .12) !important;
  background: rgba(6, 17, 35, .96) !important;
  font-size: 1.056cqh !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

.monitor-ui-topbar strong { color: #42b5ff !important; font-size: 1.408cqh !important; font-weight: 900 !important; }
.monitor-ui-topbar > span { display: flex !important; align-items: center !important; gap: .45cqh !important; color: #a9bbd5 !important; font-weight: 700 !important; }
.monitor-ui-topbar svg,
.monitor-ui-tools svg,
.monitor-ui-assets svg { width: 1.525cqh !important; height: 1.525cqh !important; flex: 0 0 auto !important; fill: none !important; stroke: currentColor !important; stroke-width: 1.6 !important; stroke-linecap: round !important; stroke-linejoin: round !important; }
.monitor-ui-history { justify-content: center !important; gap: .8cqh !important; }
.monitor-ui-export { justify-self: end !important; justify-content: center !important; min-width: 7.5cqh !important; height: 3.75cqh !important; padding: 0 1cqh !important; border-radius: .7cqh !important; background: #0877ff !important; color: #fff !important; font-size: 1.174cqh !important; font-weight: 850 !important; }
.monitor-ui-export svg { width: 1.65cqh !important; height: 1.65cqh !important; }

.monitor-ui-body {
  display: grid !important;
  grid-template-columns: 24% 51% 25% !important;
  min-height: 0 !important;
  background: #08142a !important;
}

.monitor-ui-tools {
  display: grid !important;
  min-width: 0 !important;
  padding: 2.2cqh 1.4cqh 4cqh 2.5cqh !important;
  align-content: start !important;
  gap: .55cqh !important;
  border-right: 1px solid rgba(139,181,236,.1) !important;
  background: #09162b !important;
}

.monitor-ui-tools strong {
  display: flex !important;
  min-height: 4.1cqh !important;
  align-items: center !important;
  gap: 1cqh !important;
  padding: 0 1.1cqh !important;
  border-radius: .55cqh !important;
  color: #c7d4e8 !important;
  font-size: 1.174cqh !important;
  font-weight: 750 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

.monitor-ui-tools strong.active { background: linear-gradient(90deg, #0757d9, #087cf4) !important; color: #fff !important; }
.monitor-ui-tools strong span { user-select: text !important; }

.monitor-ui-canvas {
  display: grid !important;
  min-width: 0 !important;
  padding: 2.1cqh 2.25cqh 3.4cqh !important;
  place-items: center !important;
  background: #0c1a32 !important;
}

.monitor-ui-poster {
  position: relative !important;
  isolation: isolate !important;
  width: 100% !important;
  height: 100% !important;
  padding: 4.4cqh 2.5cqh 2.4cqh !important;
  overflow: hidden !important;
  border: 1px solid rgba(101, 184, 255, .45) !important;
  background: radial-gradient(circle at 58% 50%, rgba(84,185,255,.6), transparent 28%), linear-gradient(145deg, #062451, #0758c9 56%, #041c55) !important;
  color: #fff !important;
}

.monitor-ui-poster h3 { position: relative !important; z-index: 3 !important; margin: 0 !important; font-size: 2.75cqh !important; font-weight: 850 !important; line-height: 1.02 !important; letter-spacing: .02em !important; }
.monitor-ui-poster p { position: relative !important; z-index: 3 !important; margin: 1.15cqh 0 0 !important; color: #ddf4ff !important; font-size: 1.15cqh !important; font-weight: 700 !important; }
.monitor-ui-poster small { position: absolute !important; z-index: 3 !important; bottom: 2.4cqh !important; left: 2.5cqh !important; width: 10cqh !important; color: #d9efff !important; font-size: .82cqh !important; font-weight: 750 !important; line-height: 1.2 !important; letter-spacing: .04em !important; }
.monitor-ui-art { position: absolute !important; z-index: 2 !important; right: -1.4cqh !important; bottom: -1.5cqh !important; width: 28cqh !important; height: 32cqh !important; overflow: visible !important; fill: rgba(22,106,229,.72) !important; stroke: rgba(223,248,255,.88) !important; stroke-width: 1.2 !important; }
.monitor-ui-art text { fill: #fff !important; stroke: none !important; font-family: Arial, sans-serif !important; font-size: 4.1cqh !important; font-weight: 900 !important; text-anchor: middle !important; }

.monitor-ui-assets {
  display: grid !important;
  min-width: 0 !important;
  padding: 2.25cqh 1.6cqh 3cqh !important;
  align-content: start !important;
  gap: .48cqh !important;
  border-left: 1px solid rgba(139,181,236,.1) !important;
  background: #0a162a !important;
}

.monitor-ui-assets h3 { margin: 0 0 1.2cqh !important; color: #dceaff !important; font-size: 1.29cqh !important; font-weight: 850 !important; line-height: 1 !important; }
.monitor-ui-assets span { display: flex !important; min-height: 3.15cqh !important; align-items: center !important; gap: .75cqh !important; color: #c8d5e8 !important; font-size: 1.02cqh !important; font-weight: 700 !important; line-height: 1 !important; white-space: nowrap !important; user-select: text !important; }
.monitor-ui-assets span svg { color: #b8cbe5 !important; }

/* Fixed left copy and header coordinates from the 1847px reference. */
#authModal:not(:has(#securityPanel:not(.hidden))) .login-site-header {
  position: absolute !important;
  inset: 0 !important;
  width: 100vw !important;
  max-width: none !important;
  height: 94px !important;
  padding: 0 !important;
}

#authModal:not(:has(#securityPanel:not(.hidden))) .login-site-brand {
  top: 23px !important;
  left: 81px !important;
  width: 350px !important;
  height: 44px !important;
  gap: 23px !important;
}

#authModal:not(:has(#securityPanel:not(.hidden))) .login-site-brand strong {
  font-size: 32px !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
}

#authModal:not(:has(#securityPanel:not(.hidden))) .login-site-brand i {
  width: 1px !important;
  height: 21px !important;
}

#authModal:not(:has(#securityPanel:not(.hidden))) .login-site-brand span {
  font-size: 16px !important;
  transform: none !important;
}

#authModal:not(:has(#securityPanel:not(.hidden))) .login-site-nav {
  top: 41px !important;
  left: 609px !important;
  gap: 53px !important;
}

#authModal:not(:has(#securityPanel:not(.hidden))) .login-site-nav button,
#authModal:not(:has(#securityPanel:not(.hidden))) .login-site-nav button:hover,
#authModal:not(:has(#securityPanel:not(.hidden))) .login-site-nav button:focus-visible {
  font-size: 16px !important;
  line-height: 1 !important;
}

#authModal:not(:has(#securityPanel:not(.hidden))) .login-site-account {
  top: 25px !important;
  right: 108px !important;
  height: 44px !important;
  gap: 32px !important;
}

#authModal:not(:has(#securityPanel:not(.hidden))) .login-site-account > span {
  font-size: 16px !important;
  position: relative !important;
  top: 1px !important;
  transform: none !important;
}

#authModal:not(:has(#securityPanel:not(.hidden))) .login-site-account .auth-header-login,
#authModal:not(:has(#securityPanel:not(.hidden))) .login-site-account .auth-header-login:hover,
#authModal:not(:has(#securityPanel:not(.hidden))) .login-site-account .auth-header-login:active {
  width: 144px !important;
  height: 44px !important;
  border-radius: 22px !important;
  font-size: 16px !important;
}

#authModal:not(:has(#securityPanel:not(.hidden))) .login-site-kicker {
  top: 161px !important;
  left: 82px !important;
  font-size: 15px !important;
  line-height: 1 !important;
  letter-spacing: 3.6px !important;
}

#authModal:not(:has(#securityPanel:not(.hidden))) .login-site-copy h1 {
  top: 194px !important;
  left: 80px !important;
  width: 640px !important;
  font-size: 92px !important;
  line-height: 1.095 !important;
  letter-spacing: 2.3px !important;
  transform: none !important;
}

#authModal:not(:has(#securityPanel:not(.hidden))) .login-site-copy h1 em {
  letter-spacing: 9.2px !important;
  transform: none !important;
}

#authModal:not(:has(#securityPanel:not(.hidden))) .login-site-copy h1 em::after {
  left: 220px !important;
  top: 74px !important;
  width: 252px !important;
  height: 28px !important;
  border-bottom-width: 2.4px !important;
}

#authModal:not(:has(#securityPanel:not(.hidden))) .login-site-description {
  top: 437px !important;
  left: 80px !important;
  width: 640px !important;
  font-size: 20px !important;
  line-height: 1.45 !important;
  letter-spacing: .8px !important;
  transform: none !important;
}

/* Prompt card: the reference plane is rotated 2.3 degrees clockwise. */
#authModal:not(:has(#securityPanel:not(.hidden))) .login-site-prompt-card {
  top: 152px !important;
  left: 701px !important;
  width: 348px !important;
  height: 162px !important;
  padding: 24px 18px 12px !important;
  border-radius: 17px !important;
  transform: rotate(2.3deg) !important;
  transform-origin: center center !important;
  background: linear-gradient(135deg, rgba(255,255,255,.74), rgba(214,232,252,.78)) !important;
  backdrop-filter: blur(6px) !important;
}

#authModal:not(:has(#securityPanel:not(.hidden))) .login-site-prompt-card > b {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  position: relative !important;
  top: -2px !important;
  left: -2px !important;
  font-size: 17px !important;
  line-height: 20px !important;
  transform: none !important;
}

#authModal:not(:has(#securityPanel:not(.hidden))) .login-site-prompt-card .card-title-icon,
#authModal:not(:has(#securityPanel:not(.hidden))) .login-site-result-card .card-title-icon {
  width: 18px !important;
  height: 18px !important;
  flex: 0 0 auto !important;
  fill: none !important;
  stroke: #0877f4 !important;
  stroke-width: 1.7 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

#authModal:not(:has(#securityPanel:not(.hidden))) .login-site-prompt-card p {
  height: 49px !important;
  margin: 10px 0 9px !important;
  padding: 0 11px 0 13px !important;
  border-radius: 13px !important;
  font-size: 13px !important;
}

#authModal:not(:has(#securityPanel:not(.hidden))) .login-site-prompt-card p span {
  width: 28px !important;
  height: 28px !important;
  font-size: 16px !important;
}

#authModal:not(:has(#securityPanel:not(.hidden))) .login-site-prompt-card p span svg {
  width: 16px !important;
  height: 16px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.8 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

#authModal:not(:has(#securityPanel:not(.hidden))) .login-site-prompt-card > small {
  gap: 7px !important;
}

#authModal:not(:has(#securityPanel:not(.hidden))) .login-site-prompt-card em {
  padding: 5px 8px !important;
  font-size: 10px !important;
}

/* Breakdown card uses the stronger counter-clockwise perspective in the reference. */
#authModal:not(:has(#securityPanel:not(.hidden))) .login-site-breakdown-card {
  top: 229px !important;
  right: auto !important;
  left: 1572px !important;
  width: 203px !important;
  height: 250px !important;
  padding: 18px 18px 5px !important;
  border-radius: 17px !important;
  transform: rotate(-5deg) !important;
  transform-origin: center center !important;
  background: linear-gradient(135deg, rgba(255,255,255,.95), rgba(218,235,253,.9)) !important;
  backdrop-filter: blur(4px) !important;
}

#authModal:not(:has(#securityPanel:not(.hidden))) .login-site-breakdown-card > b {
  font-size: 17px !important;
  line-height: 20px !important;
}

#authModal:not(:has(#securityPanel:not(.hidden))) .login-site-breakdown-card > div {
  grid-template-columns: 76px 1fr !important;
  gap: 10px !important;
  margin-top: 23px !important;
}

#authModal:not(:has(#securityPanel:not(.hidden))) .login-site-breakdown-card > div > strong {
  position: relative !important;
  isolation: isolate !important;
  height: 134px !important;
  padding: 9px !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  background: linear-gradient(145deg, #09285d, #086ddd 62%, #8edcff) !important;
  overflow: hidden !important;
}

#authModal:not(:has(#securityPanel:not(.hidden))) .login-site-breakdown-card > div > strong > span {
  position: relative !important;
  z-index: 2 !important;
}

#authModal:not(:has(#securityPanel:not(.hidden))) .breakdown-art {
  position: absolute !important;
  z-index: 1 !important;
  inset: 0 !important;
  width: 76px !important;
  height: 134px !important;
  flex-shrink: 0 !important;
}

#authModal:not(:has(#securityPanel:not(.hidden))) .login-site-breakdown-card > div > span {
  gap: 4px !important;
}

#authModal:not(:has(#securityPanel:not(.hidden))) .login-site-breakdown-card em {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 0 7px !important;
  border-radius: 6px !important;
  font-size: 9px !important;
  min-height: 22px !important;
}

#authModal:not(:has(#securityPanel:not(.hidden))) .login-site-breakdown-card em svg {
  width: 12px !important;
  height: 12px !important;
  flex-shrink: 0 !important;
  fill: none !important;
  stroke: #4e83be !important;
  stroke-width: 1.4 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

#authModal:not(:has(#securityPanel:not(.hidden))) .login-site-breakdown-card > small {
  height: 32px !important;
  margin-top: 12px !important;
  padding: 8px !important;
  font-size: 10px !important;
}

/* Export card follows the clockwise glass plane in the reference. */
#authModal:not(:has(#securityPanel:not(.hidden))) .login-site-export-card {
  top: 545px !important;
  right: auto !important;
  left: 1432px !important;
  width: 325px !important;
  height: 140px !important;
  padding: 17px !important;
  border-radius: 17px !important;
  transform: rotate(2deg) !important;
  transform-origin: center center !important;
  background: linear-gradient(135deg, rgba(255,255,255,.86), rgba(218,235,253,.8)) !important;
  backdrop-filter: blur(8px) !important;
}

#authModal:not(:has(#securityPanel:not(.hidden))) .login-site-export-card > b {
  margin-left: 5px !important;
  font-size: 17px !important;
  line-height: 20px !important;
}

#authModal:not(:has(#securityPanel:not(.hidden))) .login-site-export-card > div {
  grid-template-columns: repeat(6, 43px) !important;
  margin-top: 14px !important;
  gap: 7px !important;
  position: relative !important;
  top: -7px !important;
  left: 3px !important;
  transform: none !important;
}

#authModal:not(:has(#securityPanel:not(.hidden))) .login-site-export-card > div > span {
  position: relative !important;
  display: grid !important;
  place-items: start center !important;
  height: 68px !important;
  border-radius: 6px !important;
  color: #0c68d7 !important;
  font-size: 12px !important;
  background: transparent !important;
  overflow: hidden !important;
}

#authModal:not(:has(#securityPanel:not(.hidden))) .login-site-export-card > div > span::before,
#authModal:not(:has(#securityPanel:not(.hidden))) .login-site-export-card > div > span::after {
  display: none !important;
}

#authModal:not(:has(#securityPanel:not(.hidden))) .format-file-icon {
  width: 43px !important;
  height: 58px !important;
  flex-shrink: 0 !important;
  fill: rgba(255,255,255,.92) !important;
  stroke: rgba(190,216,246,.9) !important;
  stroke-width: 1 !important;
  stroke-linejoin: round !important;
}

#authModal:not(:has(#securityPanel:not(.hidden))) .login-site-export-card > div > span > b {
  position: absolute !important;
  top: 17px !important;
  left: 11px !important;
  min-width: 20px !important;
  padding: 3px 2px !important;
  border-radius: 3px !important;
  transform: none !important;
  color: #fff !important;
  font-size: 11px !important;
  line-height: 1 !important;
  text-align: center !important;
}

#authModal:not(:has(#securityPanel:not(.hidden))) .format-psd > b { background: #06274a !important; color: #22b8ff !important; }
#authModal:not(:has(#securityPanel:not(.hidden))) .format-ai > b { background: #351607 !important; color: #ff9d12 !important; }
#authModal:not(:has(#securityPanel:not(.hidden))) .format-svg .format-file-icon path:last-child { fill: none !important; stroke: #17b959 !important; stroke-width: 2 !important; }
#authModal:not(:has(#securityPanel:not(.hidden))) .format-jpg .format-file-icon path:last-of-type,
#authModal:not(:has(#securityPanel:not(.hidden))) .format-png .format-file-icon path:last-of-type { fill: #4d96ec !important; stroke: #4d96ec !important; }
#authModal:not(:has(#securityPanel:not(.hidden))) .format-jpg .format-file-icon circle,
#authModal:not(:has(#securityPanel:not(.hidden))) .format-png .format-file-icon circle { fill: #fff !important; stroke: none !important; }
#authModal:not(:has(#securityPanel:not(.hidden))) .format-pdf .format-file-icon path:last-child { fill: none !important; stroke: #ef5b61 !important; stroke-width: 1.8 !important; }

#authModal:not(:has(#securityPanel:not(.hidden))) .login-site-export-card small {
  position: absolute !important;
  right: 0 !important;
  bottom: 4px !important;
  left: 0 !important;
  color: #4a6f9e !important;
  font-size: 8px !important;
  font-weight: 800 !important;
}

#authModal:not(:has(#securityPanel:not(.hidden))) .login-site-breakdown-card > b,
#authModal:not(:has(#securityPanel:not(.hidden))) .login-site-export-card > b {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  filter: none !important;
}

#authModal:not(:has(#securityPanel:not(.hidden))) .login-site-breakdown-card .card-title-icon,
#authModal:not(:has(#securityPanel:not(.hidden))) .login-site-export-card .card-title-icon {
  width: 18px !important;
  height: 18px !important;
  flex-shrink: 0 !important;
  fill: none !important;
  stroke: #0877f4 !important;
  stroke-width: 1.7 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

#authModal:not(:has(#securityPanel:not(.hidden))) .login-site-result-card .result-art {
  position: absolute !important;
  z-index: 0 !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  overflow: visible !important;
  fill: rgba(39, 127, 235, .58) !important;
  stroke: rgba(225, 248, 255, .86) !important;
  stroke-width: 1.4 !important;
  pointer-events: none !important;
}

#authModal:not(:has(#securityPanel:not(.hidden))) .login-site-result-card > div > span {
  padding: 10px 8px !important;
  border: 1px solid rgba(211, 239, 255, .32) !important;
  background: linear-gradient(155deg, #123d82, #0878e8 58%, #8fd2ff) !important;
}

#authModal:not(:has(#securityPanel:not(.hidden))) .login-site-result-card > div > span:nth-child(2) {
  background: linear-gradient(155deg, #194b91, #0b78df 58%, #abdfff) !important;
}

#authModal:not(:has(#securityPanel:not(.hidden))) .login-site-result-card > div > span:nth-child(3) {
  background: linear-gradient(155deg, #0e285d, #347ed0 56%, #d8efff) !important;
}

#authModal:not(:has(#securityPanel:not(.hidden))) .login-site-result-card > div > span > em {
  position: relative !important;
  z-index: 2 !important;
  color: #eef9ff !important;
  font-size: 8px !important;
  font-style: normal !important;
  font-weight: 750 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

#authModal:not(:has(#securityPanel:not(.hidden))) .login-site-result-card > div > span {
  position: relative !important;
  z-index: 1 !important;
}

#authModal:not(:has(#securityPanel:not(.hidden))) .login-site-result-card > div > span::before {
  display: none !important;
}

#authModal:not(:has(#securityPanel:not(.hidden))) .login-site-result-card > div > span > strong {
  z-index: 2 !important;
  top: 35px !important;
  left: 8px !important;
  font-size: 14px !important;
  line-height: 1.02 !important;
}

#authModal:not(:has(#securityPanel:not(.hidden))) .login-site-result-card > div > span:nth-child(2) > strong {
  top: 36px !important;
  font-size: 8px !important;
  line-height: 1.05 !important;
}

#authModal:not(:has(#securityPanel:not(.hidden))) .login-site-result-card {
  top: 365px !important;
  left: 759px !important;
  width: 301px !important;
  height: 212px !important;
  transform: none !important;
  background: linear-gradient(135deg, rgba(255,255,255,.72), rgba(218,235,253,.9)) !important;
  backdrop-filter: none !important;
}

#authModal:not(:has(#securityPanel:not(.hidden))) .login-site-result-card > b {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
}



/* Fixed four-column feature strip. */
#authModal:not(:has(#securityPanel:not(.hidden))) .login-site-features {
  top: 594px !important;
  left: 61px !important;
  width: 811px !important;
  height: 113px !important;
  grid-template-columns: 165px 201px 206px minmax(0, 1fr) !important;
  padding: 23px 22px !important;
  border-radius: 20px !important;
}

#authModal:not(:has(#securityPanel:not(.hidden))) .login-site-features > span {
  grid-template-columns: 62px minmax(0, 1fr) !important;
  padding: 0 !important;
}

#authModal:not(:has(#securityPanel:not(.hidden))) .login-site-features > span:not(:first-child) {
  padding-left: 13px !important;
}

#authModal:not(:has(#securityPanel:not(.hidden))) .login-site-features i {
  width: 46px !important;
  height: 46px !important;
}

#authModal:not(:has(#securityPanel:not(.hidden))) .login-site-features i svg {
  width: 32px !important;
  height: 32px !important;
}

#authModal:not(:has(#securityPanel:not(.hidden))) .login-site-features b {
  font-size: 15px !important;
  position: relative !important;
  top: 3px !important;
}

#authModal:not(:has(#securityPanel:not(.hidden))) .login-site-features small {
  position: relative !important;
  top: -2px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  transform: none !important;
}

/* Fixed platform-statistics row. */
#authModal:not(:has(#securityPanel:not(.hidden))) .login-site-stats {
  top: 749px !important;
  left: 80px !important;
  height: 56px !important;
}

#authModal:not(:has(#securityPanel:not(.hidden))) .login-site-stats > span {
  width: 120px !important;
  gap: 4px !important;
  padding: 0 21px !important;
  height: 56px !important;
  align-content: start !important;
}

#authModal:not(:has(#securityPanel:not(.hidden))) .login-site-stats > span:first-child {
  width: 338px !important;
  padding-left: 0 !important;
}

#authModal:not(:has(#securityPanel:not(.hidden))) .login-site-stats > span:first-child small {
  font-size: 12px !important;
  line-height: 14px !important;
  margin-top: 0 !important;
}

#authModal:not(:has(#securityPanel:not(.hidden))) .login-site-stats > span:first-child b {
  font-size: 17px !important;
  margin-top: 2px !important;
}

#authModal:not(:has(#securityPanel:not(.hidden))) .login-site-stats b {
  font-size: 24px !important;
  line-height: 28px !important;
}

#authModal:not(:has(#securityPanel:not(.hidden))) .login-site-stats small {
  font-size: 11px !important;
  margin-top: 4px !important;
}


/* CTA geometry and sampled reference gradients. */
#authModal:not(:has(#securityPanel:not(.hidden))) .login-site-actions {
  top: 496px !important;
  left: 80px !important;
  gap: 21px !important;
}

#authModal:not(:has(#securityPanel:not(.hidden))) .login-site-actions .auth-landing-login,
#authModal:not(:has(#securityPanel:not(.hidden))) .login-site-actions .auth-landing-login:hover,
#authModal:not(:has(#securityPanel:not(.hidden))) .login-site-actions .auth-landing-login:active {
  width: 208px !important;
  height: 63px !important;
  border-radius: 32px !important;
  background: linear-gradient(110deg, #001b78 0%, #064da9 63%, #1798f8 100%) !important;
  box-shadow: 0 12px 29px rgba(7, 67, 163, .20) !important;
  font-size: 20px !important;
}

#authModal:not(:has(#securityPanel:not(.hidden))) .login-site-actions .auth-landing-login b {
  margin-left: 15px !important;
  font-size: 24px !important;
}

#authModal:not(:has(#securityPanel:not(.hidden))) .login-site-actions .auth-landing-login > * {
  position: relative !important;
  left: 4px !important;
}

#authModal:not(:has(#securityPanel:not(.hidden))) .login-site-demo,
#authModal:not(:has(#securityPanel:not(.hidden))) .login-site-demo:hover,
#authModal:not(:has(#securityPanel:not(.hidden))) .login-site-demo:active {
  width: 200px !important;
  height: 63px !important;
  gap: 14px !important;
  border-radius: 32px !important;
  background: linear-gradient(90deg, rgba(255,255,255,.64), rgba(237,246,255,.52)) !important;
  font-size: 19px !important;
}

#authModal:not(:has(#securityPanel:not(.hidden))) .login-site-demo i {
  width: 24px !important;
  height: 24px !important;
  font-size: 9px !important;
}

#authModal:not(:has(#securityPanel:not(.hidden))) .login-site-demo i svg {
  width: 15px !important;
  height: 15px !important;
  fill: currentColor !important;
  stroke: none !important;
}

/* Screen chrome is real HTML/CSS; the center remains the untouched original AI artwork. */
#authModal:not(:has(#securityPanel:not(.hidden))) .monitor-ui-artwork {
  width: 100% !important;
  height: 100% !important;
  border: 1px solid rgba(101, 184, 255, .45) !important;
  background-image: url("/assets/auth/login-landing-clean-plate-v6.png") !important;
  background-repeat: no-repeat !important;
  background-size: 216.784cqh 100cqh !important;
  background-position: -137.91cqh -25.82cqh !important;
}

/* Result artwork remains raster; every readable poster label and headline is native HTML. */
#authModal:not(:has(#securityPanel:not(.hidden))) .login-site-result-card > div > span {
  position: relative !important;
  z-index: 1 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

#authModal:not(:has(#securityPanel:not(.hidden))) .login-site-result-card > div > span::before {
  display: none !important;
}

#authModal:not(:has(#securityPanel:not(.hidden))) .login-site-result-card > div > span > img {
  position: absolute !important;
  z-index: 0 !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: fill !important;
  pointer-events: none !important;
}

#authModal:not(:has(#securityPanel:not(.hidden))) .login-site-result-card > div > span > em {
  position: absolute !important;
  z-index: 2 !important;
  top: 9px !important;
  left: 8px !important;
  display: block !important;
  color: #f4fbff !important;
  font-size: 8px !important;
  font-style: normal !important;
  font-weight: 750 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  text-shadow: 0 1px 2px rgba(1, 31, 83, .72) !important;
}

#authModal:not(:has(#securityPanel:not(.hidden))) .login-site-result-card > div > span > strong {
  color: #fff !important;
  font-weight: 850 !important;
  letter-spacing: 0 !important;
  text-shadow: 0 1px 3px rgba(1, 31, 83, .58) !important;
}

#authModal:not(:has(#securityPanel:not(.hidden))) .login-site-result-card > div > span:nth-child(3) > strong {
  top: 36px !important;
  font-size: 25px !important;
}

/* Breakdown text is native HTML; the preview reuses the existing text-free artwork asset. */
#authModal:not(:has(#securityPanel:not(.hidden))) .login-site-breakdown-card .breakdown-artwork {
  position: relative !important;
  display: block !important;
  height: 134px !important;
  padding: 0 !important;
  border-radius: 8px !important;
  background: url("/assets/auth/login-reference-layers-v1/breakdown-preview.png") center / cover no-repeat !important;
}

#authModal:not(:has(#securityPanel:not(.hidden))) .login-site-breakdown-card .breakdown-artwork > span {
  position: absolute !important;
  z-index: 2 !important;
  top: 12px !important;
  left: 8px !important;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  line-height: 1.05 !important;
  letter-spacing: 0 !important;
  text-shadow: 0 1px 3px rgba(1, 31, 83, .6) !important;
}

#authModal:not(:has(#securityPanel:not(.hidden))) .login-site-breakdown-card > div > span {
  gap: 4px !important;
}

#authModal:not(:has(#securityPanel:not(.hidden))) .login-site-breakdown-card em {
  min-height: 22px !important;
}

/* Export artwork remains image-based; format names are transparent, selectable HTML. */
#authModal:not(:has(#securityPanel:not(.hidden))) .login-site-export-card > div > span {
  position: relative !important;
  display: grid !important;
  height: 68px !important;
  place-items: start center !important;
  overflow: visible !important;
  background: transparent !important;
}

#authModal:not(:has(#securityPanel:not(.hidden))) .login-site-export-card > div > span > img {
  display: block !important;
  width: 43px !important;
  height: 58px !important;
  object-fit: contain !important;
}

#authModal:not(:has(#securityPanel:not(.hidden))) .login-site-export-card > div > span > small {
  position: absolute !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  color: #345f98 !important;
  font-size: 8px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  text-align: center !important;
  background: transparent !important;
}

#authModal:not(:has(#securityPanel:not(.hidden))) .login-site-export-card > b {
  position: absolute !important;
  top: 17px !important;
  left: 17px !important;
  margin: 0 !important;
}

#authModal:not(:has(#securityPanel:not(.hidden))) .login-site-export-card > div {
  position: absolute !important;
  top: 52px !important;
  left: 20px !important;
  margin: 0 !important;
}

/* 1847 × 852 optical calibration against the supplied baseline. */
#authModal:not(:has(#securityPanel:not(.hidden))) .login-site-brand {
  top: 22px !important;
  gap: 24px !important;
}

#authModal:not(:has(#securityPanel:not(.hidden))) .login-site-brand strong {
  font-size: 33px !important;
}

#authModal:not(:has(#securityPanel:not(.hidden))) .login-site-kicker {
  top: 160px !important;
}

#authModal:not(:has(#securityPanel:not(.hidden))) .login-site-copy h1 {
  top: 194px !important;
  left: 80px !important;
  letter-spacing: 4.1px !important;
  text-shadow: 0 0 .35px currentColor !important;
}

#authModal:not(:has(#securityPanel:not(.hidden))) .login-site-copy h1 em {
  position: relative !important;
  left: 2px !important;
  letter-spacing: 11.5px !important;
}

#authModal:not(:has(#securityPanel:not(.hidden))) .login-site-copy h1 em::after {
  top: 86px !important;
  width: 266px !important;
  height: 30px !important;
}

#authModal:not(:has(#securityPanel:not(.hidden))) .login-site-description {
  top: 437px !important;
  letter-spacing: 1.15px !important;
}

#authModal:not(:has(#securityPanel:not(.hidden))) .login-site-prompt-card > b {
  top: -5px !important;
}

/* Locked-scope repair: export-card internals only; the card plane stays untouched. */
#authModal:not(:has(#securityPanel:not(.hidden))) .login-site-export-card > b {
  z-index: 5 !important;
  isolation: isolate !important;
  white-space: nowrap !important;
}

#authModal:not(:has(#securityPanel:not(.hidden))) .login-site-export-card > div {
  z-index: 1 !important;
  top: 52px !important;
}

#authModal:not(:has(#securityPanel:not(.hidden))) .login-site-export-card > div > span > img {
  position: relative !important;
  top: 0 !important;
  width: 43px !important;
  height: 68px !important;
  z-index: 1 !important;
}

#authModal:not(:has(#securityPanel:not(.hidden))) .login-site-export-card > div > span > small {
  top: 54px !important;
  right: 0 !important;
  bottom: auto !important;
  left: 0 !important;
  font-size: 10px !important;
  z-index: 2 !important;
}

/* Locked-scope repair: native screen chrome only; center artwork geometry is unchanged. */
#authModal:not(:has(#securityPanel:not(.hidden))) .monitor-ui-topbar {
  font-family: "Microsoft YaHei UI", "Microsoft YaHei", "PingFang SC", sans-serif !important;
  font-size: 10.5px !important;
  line-height: 13px !important;
  transform: translateY(8px) skewY(-5.5deg) !important;
  transform-origin: center center !important;
}

#authModal:not(:has(#securityPanel:not(.hidden))) .monitor-ui-tools {
  padding-top: calc(2.2cqh + 6px) !important;
}

#authModal:not(:has(#securityPanel:not(.hidden))) .monitor-ui-topbar strong {
  font-size: 14px !important;
  line-height: 16px !important;
}

#authModal:not(:has(#securityPanel:not(.hidden))) .monitor-ui-topbar > span {
  line-height: 13px !important;
}

#authModal:not(:has(#securityPanel:not(.hidden))) .monitor-ui-tools strong {
  gap: 8px !important;
  font-size: 12px !important;
  line-height: 14px !important;
}

#authModal:not(:has(#securityPanel:not(.hidden))) .monitor-ui-tools svg {
  width: 14px !important;
  height: 14px !important;
}

#authModal:not(:has(#securityPanel:not(.hidden))) .monitor-ui-assets h3 {
  font-size: 13px !important;
  line-height: 15px !important;
}

#authModal:not(:has(#securityPanel:not(.hidden))) .monitor-ui-assets span {
  gap: 7px !important;
  font-size: 11.5px !important;
  line-height: 14px !important;
}

#authModal:not(:has(#securityPanel:not(.hidden))) .monitor-ui-assets span svg {
  width: 14px !important;
  height: 14px !important;
}

#authModal:not(:has(#securityPanel:not(.hidden))) .monitor-ui-export {
  position: relative !important;
  z-index: 2 !important;
  background: #0877ff !important;
  color: #fff !important;
  font-size: 11.5px !important;
  line-height: 14px !important;
}

#authModal:not(:has(#securityPanel:not(.hidden))) .monitor-ui-export svg {
  width: 14px !important;
  height: 14px !important;
}

/* Locked-scope repair: exactly one continuous SVG brush stroke, with no border remnant. */
#authModal:not(:has(#securityPanel:not(.hidden))) .login-site-copy h1 em::after {
  left: 188px !important;
  top: 68px !important;
  display: block !important;
  width: 299px !important;
  height: 62px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 299 62'%3E%3Cpath d='M4 50C74 64 163 53 234 28C259 20 282 9 295 4' fill='none' stroke='%2369bff1' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat !important;
  opacity: .96 !important;
  transform: none !important;
}

/* User-confirmed static artwork: these two non-interactive regions use the exact reference pixels. */
#authModal:not(:has(#securityPanel:not(.hidden))) .login-site-monitor-ui {
  border: 0 !important;
  background: url("/assets/auth/login-reference-layers-v1/monitor-ui-reference-8k.png") center / 100% 100% no-repeat !important;
  box-shadow: none !important;
  pointer-events: none !important;
  user-select: none !important;
}

#authModal:not(:has(#securityPanel:not(.hidden))) .login-site-monitor-ui > * {
  display: none !important;
}

#authModal:not(:has(#securityPanel:not(.hidden))) .login-site-export-card {
  top: 539px !important;
  left: 1429px !important;
  width: 331px !important;
  height: 152px !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  transform: none !important;
  background: url("/assets/auth/login-reference-layers-v1/export-card-reference-8k.png") center / 100% 100% no-repeat !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  pointer-events: none !important;
  user-select: none !important;
}

#authModal:not(:has(#securityPanel:not(.hidden))) .login-site-export-card > b,
#authModal:not(:has(#securityPanel:not(.hidden))) .login-site-export-card > div {
  display: none !important;
}

/* User-confirmed static artwork: preserve the exact reference breakdown card and title brush. */
#authModal:not(:has(#securityPanel:not(.hidden))) .login-site-breakdown-card {
  top: 216px !important;
  right: auto !important;
  left: 1558px !important;
  width: 230px !important;
  height: 276px !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  transform: none !important;
  background: url("/assets/auth/login-reference-layers-v1/breakdown-card-reference-8k.png") center / 100% 100% no-repeat !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  pointer-events: none !important;
  user-select: none !important;
}

#authModal:not(:has(#securityPanel:not(.hidden))) .login-site-breakdown-card > b,
#authModal:not(:has(#securityPanel:not(.hidden))) .login-site-breakdown-card > div,
#authModal:not(:has(#securityPanel:not(.hidden))) .login-site-breakdown-card > small {
  display: none !important;
}

#authModal:not(:has(#securityPanel:not(.hidden))) .login-site-copy h1 em::after {
  left: -39px !important;
  top: 0 !important;
  z-index: 2 !important;
  width: 523px !important;
  height: 123px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: url("/assets/auth/login-reference-layers-v1/title-line-reference-8k.png") center / 100% 100% no-repeat !important;
  opacity: 1 !important;
  transform: none !important;
}

#authModal:not(:has(#securityPanel:not(.hidden))) .login-site-copy h1 em {
  color: transparent !important;
  text-shadow: none !important;
}

/* Keep every desktop layer independent, but lock all of them to one design coordinate system. */
@media (min-width: 761px) {
  #authModal:not(:has(#securityPanel:not(.hidden))) .auth-story.login-site {
    inset: auto !important;
    top: var(--login-desktop-stage-offset-y, 0px) !important;
    left: 50% !important;
    width: 1847px !important;
    min-width: 1847px !important;
    max-width: 1847px !important;
    height: 852px !important;
    min-height: 852px !important;
    max-height: 852px !important;
    aspect-ratio: auto !important;
    transform: translateX(-50%) scale(var(--login-desktop-stage-scale, 1)) !important;
    transform-origin: top center !important;
  }

  #authModal:not(:has(#securityPanel:not(.hidden))) .login-site-header {
    width: 100% !important;
  }
}

/* Desktop title clarity: use native text instead of the enlarged raster title slice. */
@media (min-width: 1200px) {
  #authModal:not(:has(#securityPanel:not(.hidden))) .login-site-copy {
    transform: translateX(28px) !important;
  }

  #authModal:not(:has(#securityPanel:not(.hidden))) .login-site-copy h1 {
    width: 600px !important;
    font-family: "Microsoft YaHei UI", "PingFang SC", sans-serif !important;
    font-size: 68px !important;
    font-weight: 700 !important;
    line-height: 1.18 !important;
    letter-spacing: 0 !important;
    text-shadow: none !important;
    -webkit-font-smoothing: antialiased;
    text-rendering: geometricPrecision;
  }

  #authModal:not(:has(#securityPanel:not(.hidden))) .login-site-copy h1 em {
    position: relative !important;
    left: 0 !important;
    display: inline-block !important;
    color: #0875ed !important;
    font-weight: 700 !important;
    letter-spacing: 2px !important;
    text-shadow: none !important;
  }

  #authModal:not(:has(#securityPanel:not(.hidden))) .login-site-copy h1 em::after {
    content: "" !important;
    position: absolute !important;
    left: 112px !important;
    top: 53px !important;
    z-index: -1 !important;
    display: block !important;
    width: 242px !important;
    height: 43px !important;
    border: 0 !important;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 299 62'%3E%3Cpath d='M4 50C74 64 163 53 234 28C259 20 282 9 295 4' fill='none' stroke='%2369bff1' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat !important;
    opacity: .9 !important;
    transform: none !important;
  }

  #authModal:not(:has(#securityPanel:not(.hidden))) .login-site-actions .auth-landing-login.is-guided {
    animation: authGuideButtonPulse 1.35s ease-in-out infinite !important;
  }
}

/* The launch headline is intentionally undecorated. */
#authModal:not(:has(#securityPanel:not(.hidden))) .login-site-copy h1 em::after{
  content:none!important;
  display:none!important;
  width:0!important;
  height:0!important;
  border:0!important;
  background:none!important;
}