:root {
  color-scheme: light;
  --ink: #171717;
  --muted: #68645f;
  --line: #ded9d0;
  --paper: #fffaf1;
  --surface: #f5eee2;
  --deep: #25332e;
  --accent: #0f8f72;
  --accent-deep: #08624d;
  --warning: #a65f00;
  --danger: #b24032;
  --shadow: 0 24px 80px rgba(37, 51, 46, 0.16);
  --radius: 18px;
  font-family:
    ui-sans-serif,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    "PingFang SC",
    "Hiragino Sans GB",
    "Microsoft YaHei",
    sans-serif;
}

/* V31 stronger figurative stem card imagery */
.stem-orbit-home .stem-banner {
  grid-template-columns: 0.82fr 1.18fr;
}

.stem-orbit-home .stem-banner::before {
  opacity: 0.24;
}

.stem-orbit-home .stem-banner-copy {
  z-index: 5;
}

.stem-orbit-home .stem-art {
  position: absolute;
  inset: 0;
  z-index: 2;
  min-height: 0;
  overflow: hidden;
  border-radius: inherit;
}

.stem-orbit-home .stem-art b {
  right: 8%;
  top: 56%;
  color: color-mix(in srgb, var(--stem-accent) 66%, transparent);
  font-size: clamp(76px, 9vw, 116px);
  opacity: 0.68;
  text-shadow: 0 0 30px color-mix(in srgb, var(--stem-accent) 34%, transparent);
}

.stem-orbit-home .metal-art::before {
  content: "";
  position: absolute;
  right: 13%;
  top: 14%;
  width: 42%;
  height: 70%;
  clip-path: polygon(48% 0, 100% 13%, 62% 100%, 18% 82%, 0 26%);
  background:
    linear-gradient(128deg, rgba(255, 255, 255, 0.54), rgba(196, 215, 211, 0.12) 38%, rgba(255, 255, 255, 0.03) 39%),
    linear-gradient(32deg, rgba(157, 178, 175, 0.34), rgba(255, 255, 255, 0.04));
  filter: drop-shadow(0 0 30px rgba(216, 239, 232, 0.22));
}

.stem-orbit-home .metal-art::after {
  content: "";
  position: absolute;
  right: 24%;
  top: 24%;
  width: 52%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(248, 255, 252, 0.88), transparent);
  transform: rotate(-31deg);
  box-shadow:
    0 30px 0 rgba(216, 239, 232, 0.18),
    0 62px 0 rgba(216, 239, 232, 0.1);
}

.stem-orbit-home .metal-art i:nth-child(1) {
  right: 10%;
  top: 55%;
  width: 74%;
  height: 34%;
  clip-path: polygon(12% 82%, 54% 0, 82% 14%, 44% 100%);
  background: linear-gradient(120deg, transparent, rgba(245, 255, 250, 0.28), transparent 62%);
}

.stem-orbit-home .metal-art i:nth-child(2),
.stem-orbit-home .metal-art i:nth-child(3),
.stem-orbit-home .metal-art i:nth-child(4),
.stem-orbit-home .metal-art i:nth-child(5) {
  left: auto;
  right: 16%;
  width: 38%;
  height: 1px;
  background: rgba(235, 255, 247, 0.2);
  transform: rotate(-32deg);
}

.stem-orbit-home .metal-art i:nth-child(2) { top: 34%; }
.stem-orbit-home .metal-art i:nth-child(3) { top: 43%; opacity: 0.7; }
.stem-orbit-home .metal-art i:nth-child(4) { top: 66%; opacity: 0.5; }
.stem-orbit-home .metal-art i:nth-child(5) { top: 74%; opacity: 0.34; }

.stem-orbit-home .wood-art::before {
  content: "";
  position: absolute;
  right: 27%;
  bottom: 13%;
  width: 28px;
  height: 66%;
  border-radius: 999px 999px 10px 10px;
  background:
    linear-gradient(90deg, rgba(22, 63, 38, 0.98), rgba(126, 255, 163, 0.88) 44%, rgba(18, 51, 32, 0.94)),
    repeating-linear-gradient(90deg, transparent 0 6px, rgba(255, 255, 255, 0.12) 7px 8px);
  box-shadow:
    0 0 26px rgba(97, 255, 155, 0.22),
    inset 9px 0 18px rgba(6, 20, 12, 0.38);
}

.stem-orbit-home .wood-art::after {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: 12%;
  height: 28px;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 50% 100%, rgba(97, 255, 155, 0.24), transparent 62%),
    linear-gradient(90deg, transparent, rgba(119, 86, 53, 0.42), transparent);
}

.stem-orbit-home .wood-art i:nth-child(1),
.stem-orbit-home .wood-art i:nth-child(2),
.stem-orbit-home .wood-art i:nth-child(3),
.stem-orbit-home .wood-art i:nth-child(4) {
  right: 31%;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(126, 255, 164, 0.88), transparent);
  transform-origin: left center;
}

.stem-orbit-home .wood-art i:nth-child(1) {
  top: 34%;
  width: 38%;
  transform: rotate(-31deg);
}

.stem-orbit-home .wood-art i:nth-child(2) {
  top: 45%;
  width: 30%;
  transform: rotate(25deg);
}

.stem-orbit-home .wood-art i:nth-child(3) {
  top: 56%;
  width: 34%;
  transform: rotate(-18deg);
}

.stem-orbit-home .wood-art i:nth-child(4) {
  top: 67%;
  width: 26%;
  transform: rotate(20deg);
}

.stem-orbit-home .wood-art i:nth-child(5) {
  right: 16%;
  top: 22%;
  width: 26%;
  height: 26%;
  border-radius: 44% 56% 42% 58%;
  background: radial-gradient(circle at 36% 34%, rgba(159, 255, 190, 0.46), rgba(46, 156, 87, 0.14) 48%, transparent 68%);
  transform: rotate(-18deg);
}

.stem-orbit-home .water-art::before {
  content: "";
  position: absolute;
  right: 12%;
  top: 24%;
  width: 50%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(142, 209, 255, 0.22);
  background:
    radial-gradient(circle at 48% 46%, transparent 0 25%, rgba(142, 209, 255, 0.16) 26% 28%, transparent 46%),
    radial-gradient(circle, rgba(142, 209, 255, 0.12), transparent 64%);
  box-shadow: 0 0 34px rgba(64, 150, 255, 0.14);
}

.stem-orbit-home .water-art::after {
  content: "";
  position: absolute;
  left: 6%;
  right: 6%;
  top: 34%;
  height: 50%;
  border-radius: 50%;
  background:
    linear-gradient(180deg, transparent 0 18%, rgba(142, 209, 255, 0.1) 19%, transparent 22%),
    repeating-radial-gradient(ellipse at 70% 38%, transparent 0 26px, rgba(142, 209, 255, 0.16) 27px 28px);
  transform: rotate(-8deg);
}

.stem-orbit-home .water-art i:nth-child(1),
.stem-orbit-home .water-art i:nth-child(2),
.stem-orbit-home .water-art i:nth-child(3) {
  left: 12%;
  right: 8%;
  height: 42px;
  border-radius: 50%;
  border-top: 1px solid rgba(142, 209, 255, 0.34);
}

.stem-orbit-home .water-art i:nth-child(1) { top: 36%; }
.stem-orbit-home .water-art i:nth-child(2) { top: 50%; opacity: 0.72; }
.stem-orbit-home .water-art i:nth-child(3) { top: 64%; opacity: 0.44; }
.stem-orbit-home .water-art i:nth-child(4),
.stem-orbit-home .water-art i:nth-child(5) {
  display: none;
}

@media (prefers-reduced-motion: no-preference) {
  .stem-orbit-home .metal-art::before {
    animation: metalFacet 6.4s ease-in-out infinite;
  }

  .stem-orbit-home .wood-art::before {
    animation: woodRise 6.2s ease-in-out infinite;
  }

  .stem-orbit-home .wood-art i:nth-child(1),
  .stem-orbit-home .wood-art i:nth-child(2),
  .stem-orbit-home .wood-art i:nth-child(3),
  .stem-orbit-home .wood-art i:nth-child(4) {
    animation: woodBranch 6.2s ease-in-out infinite;
  }

  .stem-orbit-home .water-art::before {
    animation: waterVortex 9s linear infinite;
  }
}

@media (max-width: 560px) {
  .stem-orbit-home .stem-banner {
    grid-template-columns: 0.92fr 1.08fr;
  }

  .stem-orbit-home .stem-art b {
    right: 6%;
    font-size: 76px;
    opacity: 0.6;
  }

  .stem-orbit-home .wood-art::before {
    right: 25%;
    width: 20px;
  }

  .stem-orbit-home .metal-art::before {
    right: 9%;
    width: 45%;
  }

  .stem-orbit-home .water-art::before {
    right: 8%;
    width: 54%;
  }
}

/* V42 final app page corrections: placed last to beat legacy duplicated rules. */
body[data-route="mine"] .account-summary {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
}

body[data-route="mine"] .account-lines {
  display: grid !important;
  gap: 7px !important;
  min-width: 0 !important;
}

body[data-route="mine"] .account-lines article,
body[data-route="mine"] .account-lines article:last-child {
  display: grid !important;
  grid-template-columns: 34px minmax(0, 1fr) !important;
  column-gap: 10px !important;
  align-items: baseline !important;
  justify-items: start !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body[data-route="mine"] .account-lines span {
  width: 34px !important;
  color: rgba(184, 255, 213, 0.52) !important;
  font-size: 10px !important;
  line-height: 1 !important;
}

body[data-route="mine"] .account-lines strong {
  min-width: 0 !important;
  color: rgba(234, 255, 244, 0.94) !important;
  font-size: 14px !important;
  line-height: 1.2 !important;
}

body[data-route="mine"] .account-status,
body[data-route="mine"] .account-summary > .account-status:last-child {
  display: grid !important;
  gap: 6px !important;
  justify-items: end !important;
  align-self: center !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body[data-route="mine"] .account-status span {
  color: rgba(184, 255, 213, 0.52) !important;
  font-size: 10px !important;
}

body[data-route="mine"] .account-state {
  min-height: 28px !important;
  padding: 0 10px !important;
  font-size: 13px !important;
}

body[data-route="profiles"] .profile-list {
  gap: 8px !important;
}

body[data-route="profiles"] .profile-row {
  min-height: 72px !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 12px !important;
  padding: 12px 14px !important;
  border-radius: 14px !important;
  border-color: rgba(53, 255, 141, 0.14) !important;
  background: rgba(3, 14, 10, 0.72) !important;
  box-shadow: none !important;
}

body[data-route="profiles"] .profile-main {
  display: grid !important;
  gap: 7px !important;
  min-width: 0 !important;
}

body[data-route="profiles"] .profile-title-line {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: 0 !important;
}

body[data-route="profiles"] .profile-title-line h3 {
  margin: 0 !important;
  color: rgba(234, 255, 244, 0.96) !important;
  font-size: 17px !important;
  line-height: 1.2 !important;
}

body[data-route="profiles"] .profile-title-line span {
  display: inline-flex !important;
  min-height: 20px !important;
  align-items: center !important;
  border: 1px solid rgba(53, 255, 141, 0.14) !important;
  border-radius: 999px !important;
  padding: 0 7px !important;
  color: rgba(184, 255, 213, 0.8) !important;
  background: rgba(53, 255, 141, 0.08) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
}

body[data-route="profiles"] .profile-meta-line {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  color: rgba(234, 255, 244, 0.52) !important;
  font-size: 12px !important;
}

body[data-route="profiles"] .row-actions {
  align-items: center !important;
  gap: 8px !important;
}

body[data-route="profiles"] .report-main-action {
  min-height: 32px !important;
  padding: 0 13px !important;
  font-size: 13px !important;
  box-shadow: 0 0 16px rgba(53, 255, 141, 0.1) !important;
}

@media (max-width: 560px) {
  body[data-route="mine"] .account-summary {
    align-items: flex-start !important;
  }

  body[data-route="profiles"] .profile-row {
    grid-template-columns: 1fr !important;
  }

body[data-route="profiles"] .row-actions {
    justify-content: flex-start !important;
  }
}

/* V58 account entry: keep mine page focused on reports, move status into account page. */
html body.is-authed[data-route="mine"] #mine-view {
  display: grid !important;
  gap: 14px !important;
}

html body.is-authed[data-route="mine"] .mine-account-entry {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: 52px minmax(0, 1fr) 24px !important;
  align-items: center !important;
  gap: 12px !important;
  min-height: 76px !important;
  margin: 0 0 2px !important;
  padding: 12px 14px !important;
  border: 1px solid rgba(53, 255, 141, 0.14) !important;
  border-radius: 18px !important;
  color: rgba(235, 255, 245, 0.94) !important;
  background:
    linear-gradient(135deg, rgba(53, 255, 141, 0.1), rgba(53, 255, 141, 0.02) 42%, rgba(3, 12, 9, 0.88)),
    rgba(3, 13, 9, 0.86) !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.18) !important;
  cursor: pointer !important;
  text-align: left !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
}

html body.is-authed[data-route="mine"] .mine-account-entry:active {
  transform: scale(0.992) !important;
}

html body.is-authed[data-route="mine"] .mine-avatar,
html body.is-authed[data-route="account"] .account-avatar {
  display: inline-grid !important;
  width: 52px !important;
  height: 52px !important;
  place-items: center !important;
  border: 1px solid rgba(53, 255, 141, 0.26) !important;
  border-radius: 50% !important;
  color: #041109 !important;
  background: linear-gradient(135deg, #43f483, #00e86d) !important;
  box-shadow: 0 0 26px rgba(53, 255, 141, 0.22) !important;
  font-size: 21px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
}

html body.is-authed[data-route="mine"] .mine-account-text {
  display: grid !important;
  gap: 5px !important;
  min-width: 0 !important;
}

html body.is-authed[data-route="mine"] .mine-account-text strong {
  display: block !important;
  overflow: hidden !important;
  color: rgba(238, 255, 247, 0.96) !important;
  font-size: 19px !important;
  font-weight: 950 !important;
  line-height: 1.12 !important;
  letter-spacing: 0 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body.is-authed[data-route="mine"] .mine-account-text small {
  display: block !important;
  overflow: hidden !important;
  color: rgba(184, 255, 213, 0.5) !important;
  font-size: 12px !important;
  font-weight: 760 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body.is-authed[data-route="mine"] .mine-account-entry i {
  display: inline-grid !important;
  width: 24px !important;
  height: 24px !important;
  place-items: center !important;
  color: rgba(184, 255, 213, 0.52) !important;
  font-size: 24px !important;
  font-style: normal !important;
  line-height: 1 !important;
}

html body.is-authed[data-route="account"] #account-view {
  display: grid !important;
  gap: 14px !important;
}

html body.is-authed[data-route="account"] .account-mobile-nav {
  display: grid !important;
  grid-template-columns: 40px minmax(0, 1fr) 40px !important;
  align-items: center !important;
  min-height: 44px !important;
  margin: 0 0 4px !important;
}

html body.is-authed[data-route="account"] .account-mobile-nav button {
  display: inline-grid !important;
  width: 40px !important;
  height: 40px !important;
  place-items: center !important;
  border: 1px solid rgba(53, 255, 141, 0.12) !important;
  border-radius: 999px !important;
  color: rgba(235, 255, 245, 0.9) !important;
  background: rgba(3, 13, 9, 0.72) !important;
  font-size: 30px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  cursor: pointer !important;
}

html body.is-authed[data-route="account"] .account-mobile-nav h1 {
  margin: 0 !important;
  color: rgba(238, 255, 247, 0.96) !important;
  font-size: 17px !important;
  font-weight: 920 !important;
  line-height: 1.2 !important;
  text-align: center !important;
  letter-spacing: 0 !important;
}

html body.is-authed[data-route="account"] .account-page {
  display: grid !important;
  gap: 14px !important;
}

html body.is-authed[data-route="account"] .account-info-card {
  display: grid !important;
  gap: 18px !important;
  padding: 18px !important;
  border: 1px solid rgba(53, 255, 141, 0.14) !important;
  border-radius: 20px !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(53, 255, 141, 0.14), transparent 36%),
    rgba(3, 13, 9, 0.86) !important;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.2) !important;
}

html body.is-authed[data-route="account"] .account-info-hero {
  display: grid !important;
  grid-template-columns: 58px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 13px !important;
  padding-bottom: 16px !important;
  border-bottom: 1px solid rgba(184, 255, 213, 0.1) !important;
}

html body.is-authed[data-route="account"] .account-avatar {
  width: 58px !important;
  height: 58px !important;
  font-size: 24px !important;
}

html body.is-authed[data-route="account"] .account-info-hero div {
  display: grid !important;
  gap: 6px !important;
  min-width: 0 !important;
}

html body.is-authed[data-route="account"] .account-info-hero strong {
  overflow: hidden !important;
  color: rgba(238, 255, 247, 0.96) !important;
  font-size: 23px !important;
  font-weight: 950 !important;
  line-height: 1.1 !important;
  letter-spacing: 0 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body.is-authed[data-route="account"] .account-info-hero small {
  overflow: hidden !important;
  color: rgba(184, 255, 213, 0.52) !important;
  font-size: 13px !important;
  font-weight: 760 !important;
  line-height: 1.2 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body.is-authed[data-route="account"] .account-info-list {
  display: grid !important;
  gap: 0 !important;
}

html body.is-authed[data-route="account"] .account-info-list div {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 12px !important;
  min-height: 48px !important;
  border-bottom: 1px solid rgba(184, 255, 213, 0.08) !important;
}

html body.is-authed[data-route="account"] .account-info-list div:last-child {
  border-bottom: 0 !important;
}

html body.is-authed[data-route="account"] .account-info-list span {
  color: rgba(184, 255, 213, 0.58) !important;
  font-size: 13px !important;
  font-weight: 760 !important;
  line-height: 1.2 !important;
}

html body.is-authed[data-route="account"] .account-info-list strong {
  color: rgba(238, 255, 247, 0.9) !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
  text-align: right !important;
  white-space: nowrap !important;
}

html body.is-authed[data-route="account"] #account-page-status {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
}

html body.is-authed[data-route="account"] #account-page-status::before {
  content: "" !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: #43f483 !important;
  box-shadow: 0 0 16px rgba(67, 244, 131, 0.5) !important;
}

html body.is-authed[data-route="account"] .account-logout {
  width: 100% !important;
  min-height: 48px !important;
  border: 1px solid rgba(255, 88, 113, 0.18) !important;
  border-radius: 16px !important;
  color: rgba(255, 134, 152, 0.94) !important;
  background: rgba(255, 88, 113, 0.06) !important;
  font-size: 15px !important;
  font-weight: 880 !important;
  cursor: pointer !important;
  touch-action: manipulation !important;
}

html body.is-authed[data-route="account"] .account-logout:active {
  transform: scale(0.99) !important;
}

html body.is-authed:not([data-route="home"]):not([data-route="report"]) .bottom-tabs,
html body.is-authed:not([data-route="home"]):not([data-route="report"]) .app-nav {
  left: calc(var(--app-visual-width, 100vw) / 2) !important;
  bottom: calc(var(--app-viewport-bottom-gap, 0px) + max(14px, env(safe-area-inset-bottom))) !important;
  z-index: 9999 !important;
}

/* V60 promo gate preview: cyber shell, traditional BaZi core. */
html body[data-route="promo"] {
  overflow-x: hidden !important;
  background: #020906 !important;
}

html body[data-route="promo"] .site-shell {
  max-width: 430px !important;
  min-height: 100dvh !important;
  margin: 0 auto !important;
  overflow: hidden !important;
}

html body[data-route="promo"] main {
  min-height: calc(100dvh - 88px) !important;
  padding: 0 14px 18px !important;
}

html body[data-route="promo"] .topbar {
  height: 88px !important;
  min-height: 88px !important;
  max-height: 88px !important;
  align-items: center !important;
  padding: 12px 20px !important;
  overflow: hidden !important;
}

html body[data-route="promo"] .topbar .guest-nav {
  display: none !important;
}

html body[data-route="promo"] .topbar .brand {
  min-height: 64px !important;
  gap: 12px !important;
}

html body[data-route="promo"] .topbar .brand-mark {
  width: 56px !important;
  height: 56px !important;
  font-size: 24px !important;
}

html body[data-route="promo"] .topbar .brand strong {
  font-size: 23px !important;
  line-height: 1.1 !important;
}

html body[data-route="promo"] #promo-view.active {
  display: block !important;
}

html body[data-route="promo"] .promo-gate-shell {
  position: relative !important;
  display: grid !important;
  min-height: calc(100dvh - 106px) !important;
  grid-template-rows: auto auto auto !important;
  align-content: start !important;
  align-items: start !important;
  gap: 14px !important;
  padding: 18px 6px 6px !important;
  isolation: isolate !important;
}

html body[data-route="promo"] .promo-grid-field {
  position: absolute !important;
  inset: -120px -60px !important;
  z-index: -3 !important;
  background:
    radial-gradient(circle at 50% 40%, rgba(53, 255, 141, 0.14), transparent 30%),
    linear-gradient(rgba(53, 255, 141, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(53, 255, 141, 0.04) 1px, transparent 1px) !important;
  background-size: auto, 26px 26px, 26px 26px !important;
  opacity: 0.9 !important;
  mask-image: radial-gradient(circle at center, black 0%, black 56%, transparent 86%) !important;
}

html body[data-route="promo"] .promo-grid-field::before,
html body[data-route="promo"] .promo-grid-field::after {
  content: "" !important;
  position: absolute !important;
  inset: 18% 8% !important;
  border: 1px solid rgba(53, 255, 141, 0.1) !important;
  border-radius: 50% !important;
  transform: rotateX(64deg) !important;
}

html body[data-route="promo"] .promo-grid-field::after {
  inset: 24% 14% !important;
  border-color: rgba(184, 255, 213, 0.08) !important;
}

html body[data-route="promo"] .promo-symbol-rain {
  position: absolute !important;
  inset: 0 !important;
  z-index: -2 !important;
  pointer-events: none !important;
}

html body[data-route="promo"] .promo-symbol-rain span {
  position: absolute !important;
  left: calc((var(--n, 0) * 17%) - 6%) !important;
  top: calc((var(--n, 0) * 29%) - 10%) !important;
  display: grid !important;
  width: 36px !important;
  height: 36px !important;
  place-items: center !important;
  border: 1px solid rgba(53, 255, 141, 0.09) !important;
  border-radius: 12px !important;
  color: rgba(184, 255, 213, 0.16) !important;
  font-size: 18px !important;
  font-weight: 850 !important;
  animation: promo-float 8s ease-in-out infinite !important;
  animation-delay: calc(var(--n, 0) * -0.3s) !important;
}

html body[data-route="promo"] .promo-symbol-rain span:nth-child(1) { --n: 1; }
html body[data-route="promo"] .promo-symbol-rain span:nth-child(2) { --n: 2; }
html body[data-route="promo"] .promo-symbol-rain span:nth-child(3) { --n: 3; }
html body[data-route="promo"] .promo-symbol-rain span:nth-child(4) { --n: 4; }
html body[data-route="promo"] .promo-symbol-rain span:nth-child(5) { --n: 5; }
html body[data-route="promo"] .promo-symbol-rain span:nth-child(6) { --n: 6; }
html body[data-route="promo"] .promo-symbol-rain span:nth-child(7) { --n: 7; }
html body[data-route="promo"] .promo-symbol-rain span:nth-child(8) { --n: 8; }
html body[data-route="promo"] .promo-symbol-rain span:nth-child(9) { --n: 9; }
html body[data-route="promo"] .promo-symbol-rain span:nth-child(10) { --n: 10; }
html body[data-route="promo"] .promo-symbol-rain span:nth-child(11) { --n: 11; }
html body[data-route="promo"] .promo-symbol-rain span:nth-child(12) { --n: 12; }
html body[data-route="promo"] .promo-symbol-rain span:nth-child(13) { --n: 13; }
html body[data-route="promo"] .promo-symbol-rain span:nth-child(14) { --n: 14; }
html body[data-route="promo"] .promo-symbol-rain span:nth-child(15) { --n: 15; }
html body[data-route="promo"] .promo-symbol-rain span:nth-child(16) { --n: 16; }
html body[data-route="promo"] .promo-symbol-rain span:nth-child(17) { --n: 17; }
html body[data-route="promo"] .promo-symbol-rain span:nth-child(18) { --n: 18; }
html body[data-route="promo"] .promo-symbol-rain span:nth-child(19) { --n: 19; }
html body[data-route="promo"] .promo-symbol-rain span:nth-child(20) { --n: 20; }
html body[data-route="promo"] .promo-symbol-rain span:nth-child(21) { --n: 21; }
html body[data-route="promo"] .promo-symbol-rain span:nth-child(22) { --n: 22; }

html body[data-route="promo"] .promo-copy {
  display: grid !important;
  gap: 7px !important;
  padding: 0 2px !important;
}

html body[data-route="promo"] .promo-copy p {
  margin: 0 !important;
  color: rgba(67, 244, 131, 0.72) !important;
  font-size: 11px !important;
  font-weight: 850 !important;
  letter-spacing: 0.13em !important;
}

html body[data-route="promo"] .promo-copy h1 {
  margin: 0 !important;
  color: rgba(238, 255, 247, 0.98) !important;
  font-size: clamp(36px, 11vw, 48px) !important;
  font-weight: 980 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
}

html body[data-route="promo"] .promo-copy small {
  color: rgba(184, 255, 213, 0.66) !important;
  font-size: 17px !important;
  font-weight: 820 !important;
  line-height: 1.35 !important;
}

html body[data-route="promo"] .promo-engine {
  position: relative !important;
  width: min(348px, 100%) !important;
  aspect-ratio: 1 / 1.06 !important;
  margin: 4px auto 2px !important;
  border: 1px solid rgba(53, 255, 141, 0.15) !important;
  border-radius: 34px !important;
  background:
    radial-gradient(circle at 50% 52%, rgba(53, 255, 141, 0.18), transparent 28%),
    linear-gradient(180deg, rgba(7, 27, 18, 0.78), rgba(2, 9, 6, 0.88)) !important;
  box-shadow:
    inset 0 1px 0 rgba(184, 255, 213, 0.08),
    0 30px 80px rgba(0, 0, 0, 0.36) !important;
  overflow: hidden !important;
}

html body[data-route="promo"] .promo-engine::before {
  content: "" !important;
  position: absolute !important;
  inset: 22px !important;
  border: 1px solid rgba(184, 255, 213, 0.09) !important;
  border-radius: 50% !important;
  animation: promo-breathe 5s ease-in-out infinite !important;
}

html body[data-route="promo"] .promo-engine::after {
  content: "" !important;
  position: absolute !important;
  left: 14% !important;
  right: 14% !important;
  top: 50% !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(184, 255, 213, 0.42), transparent) !important;
  opacity: 0.65 !important;
}

html body[data-route="promo"] .promo-orbit {
  position: absolute !important;
  inset: 22px !important;
  border: 1px solid rgba(53, 255, 141, 0.12) !important;
  border-radius: 50% !important;
  animation: promo-rotate 28s linear infinite !important;
}

html body[data-route="promo"] .orbit-branches {
  inset: 52px !important;
  border-color: rgba(184, 255, 213, 0.09) !important;
  animation-duration: 36s !important;
  animation-direction: reverse !important;
}

html body[data-route="promo"] .promo-orbit i {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  display: grid !important;
  width: 28px !important;
  height: 28px !important;
  margin: -14px !important;
  place-items: center !important;
  border: 1px solid rgba(53, 255, 141, 0.12) !important;
  border-radius: 10px !important;
  color: rgba(210, 255, 229, 0.52) !important;
  background: rgba(2, 10, 7, 0.72) !important;
  font-style: normal !important;
  font-size: 14px !important;
  font-weight: 850 !important;
  transform: rotate(var(--a)) translateX(140px) rotate(calc(-1 * var(--a))) !important;
}

html body[data-route="promo"] .orbit-branches i {
  width: 24px !important;
  height: 24px !important;
  margin: -12px !important;
  border-radius: 9px !important;
  color: rgba(184, 255, 213, 0.36) !important;
  font-size: 12px !important;
  transform: rotate(var(--a)) translateX(102px) rotate(calc(-1 * var(--a))) !important;
}

html body[data-route="promo"] .promo-core {
  position: absolute !important;
  left: 50% !important;
  top: 39% !important;
  z-index: 3 !important;
  display: grid !important;
  width: 112px !important;
  height: 112px !important;
  place-items: center !important;
  padding: 14px !important;
  border: 1px solid rgba(67, 244, 131, 0.32) !important;
  border-radius: 50% !important;
  color: rgba(238, 255, 247, 0.96) !important;
  background:
    radial-gradient(circle, rgba(67, 244, 131, 0.28), rgba(2, 12, 8, 0.92) 68%) !important;
  box-shadow: 0 0 44px rgba(67, 244, 131, 0.22) !important;
  transform: translate(-50%, -50%) !important;
  animation: promo-core 4.8s ease-in-out infinite !important;
}

html body[data-route="promo"] .promo-core b {
  align-self: end !important;
  color: rgba(184, 255, 213, 0.62) !important;
  font-size: 12px !important;
  font-weight: 850 !important;
}

html body[data-route="promo"] .promo-core strong {
  color: #43f483 !important;
  font-size: 42px !important;
  font-weight: 980 !important;
  line-height: 0.86 !important;
}

html body[data-route="promo"] .promo-core span {
  align-self: start !important;
  color: rgba(184, 255, 213, 0.42) !important;
  font-size: 8px !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
}

html body[data-route="promo"] .promo-pillars {
  position: absolute !important;
  left: 24px !important;
  right: 24px !important;
  bottom: 78px !important;
  z-index: 4 !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 9px !important;
}

html body[data-route="promo"] .promo-pillars article {
  display: grid !important;
  min-height: 112px !important;
  place-items: center !important;
  padding: 10px 4px !important;
  border: 1px solid rgba(184, 255, 213, 0.13) !important;
  border-radius: 20px !important;
  background: rgba(2, 11, 8, 0.76) !important;
  box-shadow: inset 0 1px 0 rgba(184, 255, 213, 0.06) !important;
  animation: promo-card-rise 5.4s ease-in-out infinite !important;
  animation-delay: calc(var(--i) * -0.45s) !important;
}

html body[data-route="promo"] .promo-pillars article.active {
  border-color: rgba(67, 244, 131, 0.56) !important;
  background: linear-gradient(180deg, rgba(67, 244, 131, 0.22), rgba(2, 11, 8, 0.78)) !important;
  box-shadow: 0 0 34px rgba(67, 244, 131, 0.18) !important;
}

html body[data-route="promo"] .promo-pillars span {
  color: rgba(184, 255, 213, 0.62) !important;
  font-size: 12px !important;
  font-weight: 850 !important;
}

html body[data-route="promo"] .promo-pillars strong,
html body[data-route="promo"] .promo-pillars b {
  color: rgba(238, 255, 247, 0.92) !important;
  font-size: 30px !important;
  font-weight: 980 !important;
  line-height: 0.95 !important;
}

html body[data-route="promo"] .promo-pillars article.active strong {
  color: #43f483 !important;
}

html body[data-route="promo"] .promo-elements {
  position: absolute !important;
  left: 28px !important;
  right: 28px !important;
  bottom: 28px !important;
  z-index: 4 !important;
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 6px !important;
}

html body[data-route="promo"] .promo-elements span {
  position: relative !important;
  display: grid !important;
  height: 28px !important;
  place-items: center !important;
  border: 1px solid rgba(184, 255, 213, 0.09) !important;
  border-radius: 999px !important;
  color: rgba(184, 255, 213, 0.52) !important;
  background: rgba(2, 10, 7, 0.72) !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  overflow: hidden !important;
}

html body[data-route="promo"] .promo-elements span::before {
  content: "" !important;
  position: absolute !important;
  inset: auto 0 0 !important;
  height: 2px !important;
  background: #43f483 !important;
  transform: translateX(-70%) !important;
  animation: promo-element-flow 3.2s ease-in-out infinite !important;
}

html body[data-route="promo"] .promo-elements span:nth-child(2)::before { background: #ff6a5d !important; animation-delay: -0.35s !important; }
html body[data-route="promo"] .promo-elements span:nth-child(3)::before { background: #ffd66b !important; animation-delay: -0.7s !important; }
html body[data-route="promo"] .promo-elements span:nth-child(4)::before { background: #d7f3e6 !important; animation-delay: -1.05s !important; }
html body[data-route="promo"] .promo-elements span:nth-child(5)::before { background: #49a7ff !important; animation-delay: -1.4s !important; }

html body[data-route="promo"] .promo-actions {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 12px !important;
  padding: 0 2px !important;
  margin-top: 4px !important;
}

html body[data-route="promo"] .promo-actions button {
  min-height: 50px !important;
  border-radius: 999px !important;
  font-size: 17px !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
  touch-action: manipulation !important;
}

@keyframes promo-rotate {
  to { transform: rotate(360deg); }
}

@keyframes promo-breathe {
  0%, 100% { transform: scale(0.96); opacity: 0.42; }
  50% { transform: scale(1.03); opacity: 0.72; }
}

@keyframes promo-core {
  0%, 100% { transform: translate(-50%, -50%) scale(0.98); }
  50% { transform: translate(-50%, -50%) scale(1.04); }
}

@keyframes promo-card-rise {
  0%, 100% { transform: translateY(4px); opacity: 0.86; }
  50% { transform: translateY(-5px); opacity: 1; }
}

@keyframes promo-element-flow {
  0%, 100% { transform: translateX(-74%); opacity: 0.42; }
  50% { transform: translateX(74%); opacity: 0.9; }
}

@keyframes promo-float {
  0%, 100% { transform: translate3d(0, 0, 0) scale(0.95); opacity: 0.22; }
  50% { transform: translate3d(0, -14px, 0) scale(1.06); opacity: 0.44; }
}

@media (max-width: 390px) {
  html body[data-route="promo"] main {
    padding-inline: 10px !important;
  }

  html body[data-route="promo"] .promo-engine {
    width: min(336px, 100%) !important;
  }

  html body[data-route="promo"] .promo-orbit i {
    transform: rotate(var(--a)) translateX(134px) rotate(calc(-1 * var(--a))) !important;
  }

  html body[data-route="promo"] .orbit-branches i {
    transform: rotate(var(--a)) translateX(98px) rotate(calc(-1 * var(--a))) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body[data-route="promo"] *,
  html body[data-route="promo"] *::before,
  html body[data-route="promo"] *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* V58 mobile viewport correction: use the dynamic viewport, not the large layout viewport. */
@supports (width: 100dvw) {
  html body.is-authed:not([data-route="home"]):not([data-route="report"]) .bottom-tabs,
  html body.is-authed:not([data-route="home"]):not([data-route="report"]) .app-nav {
    left: 50dvw !important;
    bottom: calc((100vh - 100dvh) + max(14px, env(safe-area-inset-bottom))) !important;
  }
}

html body.is-authed:not([data-route="home"]):not([data-route="report"]) .bottom-tabs,
html body.is-authed:not([data-route="home"]):not([data-route="report"]) .app-nav {
  left: calc(var(--app-visual-width, 100vw) / 2) !important;
  bottom: calc(var(--app-viewport-bottom-gap, 0px) + max(14px, env(safe-area-inset-bottom))) !important;
}

@media (max-width: 430px) {
  html body.is-authed[data-route="mine"] .mine-account-entry {
    grid-template-columns: 48px minmax(0, 1fr) 22px !important;
    min-height: 72px !important;
    padding: 11px 13px !important;
  }

  html body.is-authed[data-route="mine"] .mine-avatar {
    width: 48px !important;
    height: 48px !important;
    font-size: 20px !important;
  }

  html body.is-authed[data-route="account"] .account-info-card {
    padding: 16px !important;
  }
}

/* V58 interaction lock: bottom navigation must sit above long H5 forms. */
html body.is-authed:not([data-route="home"]):not([data-route="report"]) .bottom-tabs,
html body.is-authed:not([data-route="home"]):not([data-route="report"]) .app-nav {
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  bottom: max(14px, env(safe-area-inset-bottom)) !important;
  z-index: 9999 !important;
  width: min(360px, calc(100% - 36px)) !important;
  transform: translateX(-50%) !important;
  pointer-events: auto !important;
  isolation: isolate !important;
}

html body.is-authed:not([data-route="home"]):not([data-route="report"]) .bottom-tabs .tab-button {
  position: relative !important;
  z-index: 1 !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
  cursor: pointer !important;
}

/* V55 real final lock: compact profile list and profile detail flow. */
/* V56 query page: compact H5 creation flow. */
html body.is-authed[data-route="query"] #query-view {
  display: none;
  padding: 0 12px 132px !important;
}

html body.is-authed[data-route="query"] #query-view.active {
  display: block !important;
}

html body.is-authed[data-route="query"] #query-view .query-head {
  display: grid !important;
  gap: 6px !important;
  margin: 8px 0 12px !important;
}

html body.is-authed[data-route="query"] #query-view .query-head .eyebrow {
  margin: 0 !important;
  color: rgba(184, 255, 213, 0.58) !important;
  font-size: 13px !important;
  font-weight: 850 !important;
}

html body.is-authed[data-route="query"] #query-view .query-head h1 {
  margin: 0 !important;
  color: rgba(239, 255, 248, 0.96) !important;
  font-size: 24px !important;
  line-height: 1.16 !important;
  letter-spacing: 0 !important;
}

html body.is-authed[data-route="query"] #query-view .query-head p {
  max-width: none !important;
  margin: 0 !important;
  color: rgba(213, 230, 221, 0.58) !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
}

html body.is-authed[data-route="query"] #query-view .form-card {
  display: grid !important;
  gap: 12px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body.is-authed[data-route="query"] #query-view .query-form-section,
html body.is-authed[data-route="query"] #query-view .query-more {
  display: grid !important;
  gap: 10px !important;
  padding: 13px !important;
  border: 1px solid rgba(53, 255, 141, 0.12) !important;
  border-radius: 17px !important;
  background: rgba(2, 13, 9, 0.72) !important;
}

html body.is-authed[data-route="query"] #query-view .query-form-section h2 {
  margin: 0 !important;
  color: rgba(184, 255, 213, 0.72) !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;
}

html body.is-authed[data-route="query"] #query-view .field-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(108px, 0.42fr) !important;
  gap: 9px !important;
}

html body.is-authed[data-route="query"] #query-view label {
  display: grid !important;
  gap: 7px !important;
  min-width: 0 !important;
}

html body.is-authed[data-route="query"] #query-view label > span {
  color: rgba(184, 255, 213, 0.58) !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
}

html body.is-authed[data-route="query"] #query-view input,
html body.is-authed[data-route="query"] #query-view select,
html body.is-authed[data-route="query"] #query-view .picker-field {
  width: 100% !important;
  min-height: 44px !important;
  padding: 0 12px !important;
  border: 1px solid rgba(53, 255, 141, 0.14) !important;
  border-radius: 13px !important;
  color: rgba(241, 255, 249, 0.95) !important;
  background: rgba(0, 8, 5, 0.74) !important;
  box-shadow: none !important;
  font-size: 15px !important;
  font-weight: 850 !important;
}

html body.is-authed[data-route="query"] #query-view input::placeholder {
  color: rgba(184, 255, 213, 0.36) !important;
}

html body.is-authed[data-route="query"] #query-view .picker-field {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  text-align: left !important;
}

html body.is-authed[data-route="query"] #query-view .picker-field::after {
  content: "选择" !important;
  color: rgba(53, 255, 141, 0.88) !important;
  font-size: 13px !important;
  font-weight: 900 !important;
}

html body.is-authed[data-route="query"] #query-view .birth-date-field > span {
  min-width: 0;
  overflow: hidden;
  font-size: 13px !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html body.is-authed[data-route="query"] #query-view .birth-date-field::after {
  content: "›" !important;
  flex: 0 0 auto;
  margin-left: 8px;
  font-size: 20px !important;
  line-height: 1;
}

html body.is-authed[data-route="query"] #query-view .segmented {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 4px !important;
  min-height: 44px !important;
  padding: 4px !important;
  border: 1px solid rgba(53, 255, 141, 0.14) !important;
  border-radius: 999px !important;
  background: rgba(0, 8, 5, 0.72) !important;
}

html body.is-authed[data-route="query"] #query-view .segmented label {
  display: block !important;
  min-width: 0 !important;
}

html body.is-authed[data-route="query"] #query-view .segmented input {
  width: 1px !important;
  min-height: 1px !important;
}

html body.is-authed[data-route="query"] #query-view .segmented span {
  min-height: 36px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 999px !important;
  color: rgba(214, 232, 222, 0.62) !important;
  font-size: 14px !important;
  font-weight: 900 !important;
}

html body.is-authed[data-route="query"] #query-view .segmented input:checked + span {
  color: #04110b !important;
  background: linear-gradient(135deg, #36ff8d, #1bd978) !important;
}

html body.is-authed[data-route="query"] #query-view .query-more {
  gap: 11px !important;
}

html body.is-authed[data-route="query"] #query-view .query-more summary {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  color: rgba(184, 255, 213, 0.72) !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  list-style: none !important;
  cursor: pointer !important;
}

html body.is-authed[data-route="query"] #query-view .query-more summary::-webkit-details-marker {
  display: none !important;
}

html body.is-authed[data-route="query"] #query-view .query-more summary::after {
  content: "›" !important;
  color: rgba(184, 255, 213, 0.52) !important;
  font-size: 24px !important;
  transform: rotate(90deg) !important;
}

html body.is-authed[data-route="query"] #query-view .query-more[open] summary::after {
  transform: rotate(-90deg) !important;
}

html body.is-authed[data-route="query"] #query-view .draft-note {
  display: grid !important;
  gap: 4px !important;
  padding: 10px 12px !important;
  border: 1px solid rgba(53, 255, 141, 0.1) !important;
  border-radius: 14px !important;
  color: rgba(184, 255, 213, 0.62) !important;
  background: rgba(53, 255, 141, 0.055) !important;
  box-shadow: none !important;
}

html body.is-authed[data-route="query"] #query-view .draft-note span {
  color: rgba(238, 255, 247, 0.82) !important;
  font-size: 13px !important;
  font-weight: 900 !important;
}

html body.is-authed[data-route="query"] #query-view .draft-note small {
  color: rgba(184, 255, 213, 0.48) !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
}

html body.is-authed[data-route="query"] #query-view .query-submit-bar {
  position: static !important;
  z-index: auto !important;
  margin: 2px 0 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

html body.is-authed[data-route="query"] #query-view .query-submit-bar .primary {
  min-height: 48px !important;
  border-radius: 999px !important;
  font-size: 16px !important;
  font-weight: 950 !important;
}

@media (max-width: 380px) {
  html body.is-authed[data-route="query"] #query-view .field-row {
    grid-template-columns: 1fr !important;
  }

}

html body.is-authed[data-route="profiles"] #profiles-view .profile-list .profile-row {
  display: grid !important;
  grid-template-columns: 48px minmax(0, 1fr) 22px !important;
  align-items: center !important;
  gap: 12px !important;
  min-height: 74px !important;
  padding: 12px 14px !important;
}

html body.is-authed[data-route="profiles"] #profiles-view .profile-list .profile-row::after {
  content: none !important;
  display: none !important;
}

html body.is-authed[data-route="profiles"] #profiles-view .profile-list .profile-row .profile-main {
  display: grid !important;
  gap: 5px !important;
  min-width: 0 !important;
  padding-right: 0 !important;
}

html body.is-authed[data-route="profiles"] #profiles-view .profile-list .profile-row .profile-title-line {
  display: block !important;
}

html body.is-authed[data-route="profiles"] #profiles-view .profile-list .profile-row .profile-avatar {
  width: 48px !important;
  height: 48px !important;
}

html body.is-authed[data-route="profiles"] #profiles-view .profile-list .profile-row .profile-arrow {
  display: block !important;
  justify-self: end !important;
}

body[data-route="profiles"] #profiles-view {
  padding: 0 12px 28px !important;
}

body[data-route="profiles"] .profiles-page-head {
  display: grid !important;
  gap: 6px !important;
  margin: 10px 0 14px !important;
}

body[data-route="profiles"] .profiles-page-head p {
  margin: 0 !important;
  color: rgba(184, 255, 213, 0.58) !important;
  font-size: 13px !important;
  font-weight: 850 !important;
}

body[data-route="profiles"] .profiles-page-head h1 {
  margin: 0 !important;
  color: rgba(239, 255, 248, 0.96) !important;
  font-size: 24px !important;
  line-height: 1.16 !important;
}

body[data-route="profiles"] .profile-list {
  display: grid !important;
  gap: 10px !important;
}

body[data-route="profiles"] .profile-row,
html body[data-route="profiles"] .profile-row {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 48px minmax(0, 1fr) 22px !important;
  align-items: center !important;
  gap: 12px !important;
  min-height: 74px !important;
  padding: 12px 14px !important;
  border: 1px solid rgba(53, 255, 141, 0.12) !important;
  border-radius: 16px !important;
  background: linear-gradient(135deg, rgba(53, 255, 141, 0.055), transparent 42%), rgba(2, 13, 9, 0.74) !important;
  box-shadow: none !important;
  cursor: pointer !important;
  touch-action: manipulation !important;
}

body[data-route="profiles"] .profile-row::after,
html body[data-route="profiles"] .profile-row::after {
  content: none !important;
  display: none !important;
}

body[data-route="profiles"] .profile-avatar {
  width: 48px !important;
  height: 48px !important;
  display: grid !important;
  place-items: center !important;
  border: 1px solid rgba(53, 255, 141, 0.2) !important;
  border-radius: 999px !important;
  color: #04110b !important;
  background: linear-gradient(135deg, #36ff8d, #1bd978) !important;
  font-size: 18px !important;
  font-weight: 950 !important;
}

body[data-route="profiles"] .profile-main,
html body[data-route="profiles"] .profile-main {
  display: grid !important;
  gap: 5px !important;
  min-width: 0 !important;
  padding-right: 0 !important;
}

body[data-route="profiles"] .profile-title-line,
html body[data-route="profiles"] .profile-title-line {
  display: block !important;
  min-width: 0 !important;
}

body[data-route="profiles"] .profile-title-line h3 {
  margin: 0 !important;
  overflow: hidden !important;
  color: rgba(240, 255, 248, 0.98) !important;
  font-size: 18px !important;
  font-weight: 950 !important;
  line-height: 1.2 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body[data-route="profiles"] .profile-birthday {
  margin: 0 !important;
  overflow: hidden !important;
  color: rgba(184, 255, 213, 0.56) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body[data-route="profiles"] .profile-arrow {
  justify-self: end !important;
  color: rgba(184, 255, 213, 0.52) !important;
  font-size: 30px !important;
  line-height: 1 !important;
}

body[data-route="profiles"] .profile-row .row-actions,
body[data-route="profiles"] .profile-meta-line,
body[data-route="profiles"] .report-main-action {
  display: none !important;
}

body[data-route="profileDetail"] #profile-detail-view {
  padding: 0 12px 28px !important;
}

body[data-route="profileDetail"] .profile-detail-page {
  padding-bottom: 104px !important;
}

body[data-route="profileDetail"] .profile-mobile-nav {
  position: sticky !important;
  top: 0 !important;
  z-index: 28 !important;
  display: grid !important;
  grid-template-columns: 42px minmax(0, 1fr) 42px !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 54px !important;
  margin: 0 -12px 12px !important;
  padding: 8px 12px !important;
  border-bottom: 1px solid rgba(53, 255, 141, 0.1) !important;
  background: rgba(2, 8, 6, 0.94) !important;
  backdrop-filter: blur(18px) !important;
}

body[data-route="profileDetail"] .profile-mobile-nav button {
  width: 38px !important;
  height: 38px !important;
  border: 1px solid rgba(53, 255, 141, 0.14) !important;
  border-radius: 999px !important;
  color: rgba(235, 255, 245, 0.9) !important;
  background: rgba(53, 255, 141, 0.05) !important;
  font-size: 26px !important;
  line-height: 1 !important;
}

body[data-route="profileDetail"] .profile-mobile-nav h1 {
  margin: 0 !important;
  color: rgba(238, 255, 247, 0.94) !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  text-align: center !important;
}

body[data-route="profileDetail"] .profile-detail-card {
  display: grid !important;
  gap: 14px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body[data-route="profileDetail"] .profile-detail-hero {
  display: grid !important;
  grid-template-columns: 58px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 13px !important;
  padding: 16px !important;
  border: 1px solid rgba(53, 255, 141, 0.13) !important;
  border-radius: 18px !important;
  background: rgba(2, 13, 9, 0.78) !important;
}

body[data-route="profileDetail"] .profile-detail-avatar {
  width: 58px !important;
  height: 58px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 999px !important;
  color: #04110b !important;
  background: linear-gradient(135deg, #36ff8d, #1bd978) !important;
  font-size: 22px !important;
  font-weight: 950 !important;
}

body[data-route="profileDetail"] .profile-detail-hero h2 {
  margin: 0 0 5px !important;
  color: rgba(241, 255, 249, 0.98) !important;
  font-size: 25px !important;
  line-height: 1.1 !important;
}

body[data-route="profileDetail"] .profile-detail-hero p {
  margin: 0 !important;
  color: rgba(184, 255, 213, 0.62) !important;
  font-size: 14px !important;
  font-weight: 750 !important;
}

body[data-route="profileDetail"] .profile-section,
body[data-route="profileDetail"] .profile-related {
  display: grid !important;
  gap: 9px !important;
}

body[data-route="profileDetail"] .profile-section h3,
body[data-route="profileDetail"] .profile-related h3 {
  margin: 0 !important;
  color: rgba(184, 255, 213, 0.7) !important;
  font-size: 13px !important;
  font-weight: 900 !important;
}

body[data-route="profileDetail"] .profile-detail-grid {
  display: grid !important;
  gap: 0 !important;
  border: 1px solid rgba(53, 255, 141, 0.12) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  background: rgba(2, 13, 9, 0.72) !important;
}

body[data-route="profileDetail"] .profile-detail-grid div {
  display: grid !important;
  grid-template-columns: 86px minmax(0, 1fr) !important;
  align-items: start !important;
  gap: 10px !important;
  min-height: 43px !important;
  padding: 11px 13px !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(53, 255, 141, 0.08) !important;
  border-radius: 0 !important;
  background: transparent !important;
}

body[data-route="profileDetail"] .profile-detail-grid div:last-child {
  border-bottom: 0 !important;
}

body[data-route="profileDetail"] .profile-detail-grid b {
  color: rgba(184, 255, 213, 0.52) !important;
  font-size: 12px !important;
  font-weight: 850 !important;
}

body[data-route="profileDetail"] .profile-detail-grid span {
  color: rgba(235, 255, 245, 0.88) !important;
  font-size: 13px !important;
  font-weight: 750 !important;
  line-height: 1.4 !important;
  text-align: right !important;
}

body[data-route="profileDetail"] .profile-related > div {
  display: grid !important;
  gap: 8px !important;
}

body[data-route="profileDetail"] .profile-related-report {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto 18px !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 66px !important;
  padding: 12px 13px !important;
  border: 1px solid rgba(53, 255, 141, 0.12) !important;
  border-radius: 15px !important;
  background: rgba(2, 13, 9, 0.72) !important;
  cursor: pointer !important;
}

body[data-route="profileDetail"] .profile-related-report b {
  display: block !important;
  margin: 0 0 4px !important;
  color: rgba(239, 255, 248, 0.94) !important;
  font-size: 15px !important;
}

body[data-route="profileDetail"] .profile-related-report small {
  color: rgba(184, 255, 213, 0.52) !important;
  font-size: 12px !important;
}

body[data-route="profileDetail"] .profile-related-report > span:last-child {
  color: rgba(184, 255, 213, 0.48) !important;
  font-size: 25px !important;
}

body[data-route="profileDetail"] .profile-related-report.empty {
  display: block !important;
  min-height: auto !important;
  color: rgba(184, 255, 213, 0.52) !important;
  font-size: 13px !important;
  cursor: default !important;
}

body[data-route="profileDetail"] .profile-detail-actions {
  display: grid !important;
  margin-top: 2px !important;
}

body[data-route="profileDetail"] .profile-detail-actions .primary {
  min-height: 48px !important;
  border-radius: 999px !important;
}

/* V55 final lock: compact profile list and profile detail flow. */
body[data-route="profiles"] #profiles-view {
  padding: 0 12px 28px !important;
}

body[data-route="profiles"] .profiles-page-head {
  display: grid !important;
  gap: 6px !important;
  margin: 10px 0 14px !important;
}

body[data-route="profiles"] .profiles-page-head p {
  margin: 0 !important;
  color: rgba(184, 255, 213, 0.58) !important;
  font-size: 13px !important;
  font-weight: 850 !important;
}

body[data-route="profiles"] .profiles-page-head h1 {
  margin: 0 !important;
  color: rgba(239, 255, 248, 0.96) !important;
  font-size: 24px !important;
  line-height: 1.16 !important;
}

body[data-route="profiles"] .profile-list {
  display: grid !important;
  gap: 10px !important;
}

body[data-route="profiles"] .profile-row,
html body[data-route="profiles"] .profile-row {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 48px minmax(0, 1fr) 22px !important;
  align-items: center !important;
  gap: 12px !important;
  min-height: 74px !important;
  padding: 12px 14px !important;
  border: 1px solid rgba(53, 255, 141, 0.12) !important;
  border-radius: 16px !important;
  background: linear-gradient(135deg, rgba(53, 255, 141, 0.055), transparent 42%), rgba(2, 13, 9, 0.74) !important;
  box-shadow: none !important;
  cursor: pointer !important;
  touch-action: manipulation !important;
}

body[data-route="profiles"] .profile-row::after,
html body[data-route="profiles"] .profile-row::after {
  content: none !important;
  display: none !important;
}

body[data-route="profiles"] .profile-avatar {
  width: 48px !important;
  height: 48px !important;
  display: grid !important;
  place-items: center !important;
  border: 1px solid rgba(53, 255, 141, 0.2) !important;
  border-radius: 999px !important;
  color: #04110b !important;
  background: linear-gradient(135deg, #36ff8d, #1bd978) !important;
  font-size: 18px !important;
  font-weight: 950 !important;
}

body[data-route="profiles"] .profile-main,
html body[data-route="profiles"] .profile-main {
  display: grid !important;
  gap: 5px !important;
  min-width: 0 !important;
  padding-right: 0 !important;
}

body[data-route="profiles"] .profile-title-line,
html body[data-route="profiles"] .profile-title-line {
  display: block !important;
  min-width: 0 !important;
}

body[data-route="profiles"] .profile-title-line h3 {
  margin: 0 !important;
  overflow: hidden !important;
  color: rgba(240, 255, 248, 0.98) !important;
  font-size: 18px !important;
  font-weight: 950 !important;
  line-height: 1.2 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body[data-route="profiles"] .profile-birthday {
  margin: 0 !important;
  overflow: hidden !important;
  color: rgba(184, 255, 213, 0.56) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body[data-route="profiles"] .profile-arrow {
  justify-self: end !important;
  color: rgba(184, 255, 213, 0.52) !important;
  font-size: 30px !important;
  line-height: 1 !important;
}

body[data-route="profiles"] .profile-row .row-actions,
body[data-route="profiles"] .profile-meta-line,
body[data-route="profiles"] .report-main-action {
  display: none !important;
}

body[data-route="profileDetail"] #profile-detail-view {
  padding: 0 12px 28px !important;
}

body[data-route="profileDetail"] .profile-mobile-nav {
  position: sticky !important;
  top: 0 !important;
  z-index: 28 !important;
  display: grid !important;
  grid-template-columns: 42px minmax(0, 1fr) 42px !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 54px !important;
  margin: 0 -12px 12px !important;
  padding: 8px 12px !important;
  border-bottom: 1px solid rgba(53, 255, 141, 0.1) !important;
  background: rgba(2, 8, 6, 0.94) !important;
  backdrop-filter: blur(18px) !important;
}

body[data-route="profileDetail"] .profile-mobile-nav button {
  width: 38px !important;
  height: 38px !important;
  border: 1px solid rgba(53, 255, 141, 0.14) !important;
  border-radius: 999px !important;
  color: rgba(235, 255, 245, 0.9) !important;
  background: rgba(53, 255, 141, 0.05) !important;
  font-size: 26px !important;
  line-height: 1 !important;
}

body[data-route="profileDetail"] .profile-mobile-nav h1 {
  margin: 0 !important;
  color: rgba(238, 255, 247, 0.94) !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  text-align: center !important;
}

body[data-route="profileDetail"] .profile-detail-card {
  display: grid !important;
  gap: 14px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body[data-route="profileDetail"] .profile-detail-hero {
  display: grid !important;
  grid-template-columns: 58px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 13px !important;
  padding: 16px !important;
  border: 1px solid rgba(53, 255, 141, 0.13) !important;
  border-radius: 18px !important;
  background: rgba(2, 13, 9, 0.78) !important;
}

body[data-route="profileDetail"] .profile-detail-avatar {
  width: 58px !important;
  height: 58px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 999px !important;
  color: #04110b !important;
  background: linear-gradient(135deg, #36ff8d, #1bd978) !important;
  font-size: 22px !important;
  font-weight: 950 !important;
}

body[data-route="profileDetail"] .profile-detail-hero h2 {
  margin: 0 0 5px !important;
  color: rgba(241, 255, 249, 0.98) !important;
  font-size: 25px !important;
  line-height: 1.1 !important;
}

body[data-route="profileDetail"] .profile-detail-hero p {
  margin: 0 !important;
  color: rgba(184, 255, 213, 0.62) !important;
  font-size: 14px !important;
  font-weight: 750 !important;
}

body[data-route="profileDetail"] .profile-section,
body[data-route="profileDetail"] .profile-related {
  display: grid !important;
  gap: 9px !important;
}

body[data-route="profileDetail"] .profile-section h3,
body[data-route="profileDetail"] .profile-related h3 {
  margin: 0 !important;
  color: rgba(184, 255, 213, 0.7) !important;
  font-size: 13px !important;
  font-weight: 900 !important;
}

body[data-route="profileDetail"] .profile-detail-grid {
  display: grid !important;
  gap: 0 !important;
  border: 1px solid rgba(53, 255, 141, 0.12) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  background: rgba(2, 13, 9, 0.72) !important;
}

body[data-route="profileDetail"] .profile-detail-grid div {
  display: grid !important;
  grid-template-columns: 86px minmax(0, 1fr) !important;
  align-items: start !important;
  gap: 10px !important;
  min-height: 43px !important;
  padding: 11px 13px !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(53, 255, 141, 0.08) !important;
  border-radius: 0 !important;
  background: transparent !important;
}

body[data-route="profileDetail"] .profile-detail-grid div:last-child {
  border-bottom: 0 !important;
}

body[data-route="profileDetail"] .profile-detail-grid b {
  color: rgba(184, 255, 213, 0.52) !important;
  font-size: 12px !important;
  font-weight: 850 !important;
}

body[data-route="profileDetail"] .profile-detail-grid span {
  color: rgba(235, 255, 245, 0.88) !important;
  font-size: 13px !important;
  font-weight: 750 !important;
  line-height: 1.4 !important;
  text-align: right !important;
}

body[data-route="profileDetail"] .profile-related > div {
  display: grid !important;
  gap: 8px !important;
}

body[data-route="profileDetail"] .profile-related-report {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto 18px !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 66px !important;
  padding: 12px 13px !important;
  border: 1px solid rgba(53, 255, 141, 0.12) !important;
  border-radius: 15px !important;
  background: rgba(2, 13, 9, 0.72) !important;
  cursor: pointer !important;
}

body[data-route="profileDetail"] .profile-related-report b {
  display: block !important;
  margin: 0 0 4px !important;
  color: rgba(239, 255, 248, 0.94) !important;
  font-size: 15px !important;
}

body[data-route="profileDetail"] .profile-related-report small {
  color: rgba(184, 255, 213, 0.52) !important;
  font-size: 12px !important;
}

body[data-route="profileDetail"] .profile-related-report > span:last-child {
  color: rgba(184, 255, 213, 0.48) !important;
  font-size: 25px !important;
}

body[data-route="profileDetail"] .profile-related-report.empty {
  display: block !important;
  min-height: auto !important;
  color: rgba(184, 255, 213, 0.52) !important;
  font-size: 13px !important;
  cursor: default !important;
}

body[data-route="profileDetail"] .profile-detail-actions {
  display: grid !important;
  margin-top: 2px !important;
}

body[data-route="profileDetail"] .profile-detail-actions .primary {
  min-height: 48px !important;
  border-radius: 999px !important;
}

/* V55 profile page redesign: person list first, actions inside detail. */
body[data-route="profiles"] #profiles-view {
  display: none;
  padding: 0 12px 28px !important;
}

body[data-route="profiles"] #profiles-view.active {
  display: block !important;
}

body[data-route="profiles"] .profiles-page-head {
  display: grid !important;
  gap: 6px !important;
  margin: 10px 0 14px !important;
}

body[data-route="profiles"] .profiles-page-head p {
  margin: 0 !important;
  color: rgba(184, 255, 213, 0.58) !important;
  font-size: 13px !important;
  font-weight: 850 !important;
}

body[data-route="profiles"] .profiles-page-head h1 {
  margin: 0 !important;
  color: rgba(239, 255, 248, 0.96) !important;
  font-size: 24px !important;
  line-height: 1.16 !important;
  letter-spacing: 0 !important;
}

body[data-route="profiles"] .profile-list {
  display: grid !important;
  gap: 10px !important;
}

body[data-route="profiles"] .profile-row {
  display: grid !important;
  grid-template-columns: 48px minmax(0, 1fr) 22px !important;
  align-items: center !important;
  gap: 12px !important;
  min-height: 74px !important;
  padding: 12px 14px !important;
  border: 1px solid rgba(53, 255, 141, 0.12) !important;
  border-radius: 16px !important;
  background:
    linear-gradient(135deg, rgba(53, 255, 141, 0.055), transparent 42%),
    rgba(2, 13, 9, 0.74) !important;
  box-shadow: none !important;
  cursor: pointer !important;
  touch-action: manipulation !important;
}

body[data-route="profiles"] .profile-avatar {
  width: 48px !important;
  height: 48px !important;
  display: grid !important;
  place-items: center !important;
  border: 1px solid rgba(53, 255, 141, 0.2) !important;
  border-radius: 999px !important;
  color: #04110b !important;
  background: linear-gradient(135deg, #36ff8d, #1bd978) !important;
  font-size: 18px !important;
  font-weight: 950 !important;
}

body[data-route="profiles"] .profile-main {
  display: grid !important;
  gap: 5px !important;
  min-width: 0 !important;
}

body[data-route="profiles"] .profile-title-line {
  display: block !important;
  min-width: 0 !important;
}

body[data-route="profiles"] .profile-title-line h3 {
  margin: 0 !important;
  overflow: hidden !important;
  color: rgba(240, 255, 248, 0.98) !important;
  font-size: 18px !important;
  font-weight: 950 !important;
  line-height: 1.2 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body[data-route="profiles"] .profile-birthday {
  margin: 0 !important;
  overflow: hidden !important;
  color: rgba(184, 255, 213, 0.56) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body[data-route="profiles"] .profile-arrow {
  justify-self: end !important;
  color: rgba(184, 255, 213, 0.52) !important;
  font-size: 30px !important;
  line-height: 1 !important;
}

body[data-route="profiles"] .profile-row .row-actions,
body[data-route="profiles"] .profile-meta-line,
body[data-route="profiles"] .report-main-action {
  display: none !important;
}

body[data-route="profileDetail"] #profile-detail-view {
  display: none;
  padding: 0 12px 28px !important;
}

body[data-route="profileDetail"] #profile-detail-view.active {
  display: block !important;
}

body[data-route="profileDetail"] .profile-mobile-nav {
  position: sticky !important;
  top: 0 !important;
  z-index: 28 !important;
  display: grid !important;
  grid-template-columns: 42px minmax(0, 1fr) 42px !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 54px !important;
  margin: 0 -12px 12px !important;
  padding: 8px 12px !important;
  border-bottom: 1px solid rgba(53, 255, 141, 0.1) !important;
  background: rgba(2, 8, 6, 0.94) !important;
  backdrop-filter: blur(18px) !important;
}

body[data-route="profileDetail"] .profile-mobile-nav button {
  width: 38px !important;
  height: 38px !important;
  border: 1px solid rgba(53, 255, 141, 0.14) !important;
  border-radius: 999px !important;
  color: rgba(235, 255, 245, 0.9) !important;
  background: rgba(53, 255, 141, 0.05) !important;
  font-size: 26px !important;
  line-height: 1 !important;
}

body[data-route="profileDetail"] .profile-mobile-nav h1 {
  margin: 0 !important;
  overflow: hidden !important;
  color: rgba(238, 255, 247, 0.94) !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  text-align: center !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body[data-route="profileDetail"] .profile-detail-page {
  display: grid !important;
  gap: 12px !important;
}

body[data-route="profileDetail"] .profile-detail-card {
  display: grid !important;
  gap: 14px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body[data-route="profileDetail"] .profile-detail-hero {
  display: grid !important;
  grid-template-columns: 58px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 13px !important;
  padding: 16px !important;
  border: 1px solid rgba(53, 255, 141, 0.13) !important;
  border-radius: 18px !important;
  background: rgba(2, 13, 9, 0.78) !important;
}

body[data-route="profileDetail"] .profile-detail-avatar {
  width: 58px !important;
  height: 58px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 999px !important;
  color: #04110b !important;
  background: linear-gradient(135deg, #36ff8d, #1bd978) !important;
  font-size: 22px !important;
  font-weight: 950 !important;
}

body[data-route="profileDetail"] .profile-detail-hero h2 {
  margin: 0 0 5px !important;
  color: rgba(241, 255, 249, 0.98) !important;
  font-size: 25px !important;
  line-height: 1.1 !important;
}

body[data-route="profileDetail"] .profile-detail-hero p {
  margin: 0 !important;
  color: rgba(184, 255, 213, 0.62) !important;
  font-size: 14px !important;
  font-weight: 750 !important;
}

body[data-route="profileDetail"] .profile-section,
body[data-route="profileDetail"] .profile-related {
  display: grid !important;
  gap: 9px !important;
}

body[data-route="profileDetail"] .profile-section h3,
body[data-route="profileDetail"] .profile-related h3 {
  margin: 0 !important;
  color: rgba(184, 255, 213, 0.7) !important;
  font-size: 13px !important;
  font-weight: 900 !important;
}

body[data-route="profileDetail"] .profile-detail-grid {
  display: grid !important;
  gap: 0 !important;
  border: 1px solid rgba(53, 255, 141, 0.12) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  background: rgba(2, 13, 9, 0.72) !important;
}

body[data-route="profileDetail"] .profile-detail-grid div {
  display: grid !important;
  grid-template-columns: 86px minmax(0, 1fr) !important;
  align-items: start !important;
  gap: 10px !important;
  min-height: 43px !important;
  padding: 11px 13px !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(53, 255, 141, 0.08) !important;
  border-radius: 0 !important;
  background: transparent !important;
}

body[data-route="profileDetail"] .profile-detail-grid div:last-child {
  border-bottom: 0 !important;
}

body[data-route="profileDetail"] .profile-detail-grid b {
  color: rgba(184, 255, 213, 0.52) !important;
  font-size: 12px !important;
  font-weight: 850 !important;
}

body[data-route="profileDetail"] .profile-detail-grid span {
  color: rgba(235, 255, 245, 0.88) !important;
  font-size: 13px !important;
  font-weight: 750 !important;
  line-height: 1.4 !important;
  text-align: right !important;
}

body[data-route="profileDetail"] .profile-related > div {
  display: grid !important;
  gap: 8px !important;
}

body[data-route="profileDetail"] .profile-related-report {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto 18px !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 66px !important;
  padding: 12px 13px !important;
  border: 1px solid rgba(53, 255, 141, 0.12) !important;
  border-radius: 15px !important;
  background: rgba(2, 13, 9, 0.72) !important;
  cursor: pointer !important;
}

body[data-route="profileDetail"] .profile-related-report b {
  display: block !important;
  margin: 0 0 4px !important;
  color: rgba(239, 255, 248, 0.94) !important;
  font-size: 15px !important;
}

body[data-route="profileDetail"] .profile-related-report small {
  color: rgba(184, 255, 213, 0.52) !important;
  font-size: 12px !important;
}

body[data-route="profileDetail"] .profile-related-report > span:last-child {
  color: rgba(184, 255, 213, 0.48) !important;
  font-size: 25px !important;
}

body[data-route="profileDetail"] .profile-related-report.empty {
  display: block !important;
  min-height: auto !important;
  color: rgba(184, 255, 213, 0.52) !important;
  font-size: 13px !important;
  cursor: default !important;
}

body[data-route="profileDetail"] .profile-detail-actions {
  display: grid !important;
  margin-top: 2px !important;
}

body[data-route="profileDetail"] .profile-detail-actions .primary {
  min-height: 48px !important;
  border-radius: 999px !important;
}

/* V47 final lock: report detail as H5 reader. */
body[data-route="report"] .topbar {
  display: none !important;
}

body[data-route="report"] .site-shell {
  width: min(430px, 100%) !important;
  max-width: 430px !important;
}

body[data-route="report"] main {
  padding-top: 0 !important;
}

body[data-route="report"] #report-view {
  padding: 0 12px 28px !important;
}

body[data-route="report"] .report-mobile-nav {
  position: sticky !important;
  top: 0 !important;
  z-index: 30 !important;
  display: grid !important;
  grid-template-columns: 42px minmax(0, 1fr) 42px !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 56px !important;
  margin: 0 -12px 10px !important;
  padding: 8px 12px !important;
  border-bottom: 1px solid rgba(53, 255, 141, 0.12) !important;
  background: linear-gradient(180deg, rgba(2, 8, 6, 0.98), rgba(2, 8, 6, 0.86)) !important;
  backdrop-filter: blur(18px) !important;
  pointer-events: auto !important;
}

body[data-route="report"] .report-mobile-nav h1 {
  margin: 0 !important;
  overflow: hidden !important;
  color: rgba(238, 255, 247, 0.94) !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
  line-height: 1.2 !important;
  text-align: center !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body[data-route="report"] .report-icon-button {
  position: relative !important;
  z-index: 2 !important;
  display: inline-grid !important;
  width: 38px !important;
  height: 38px !important;
  min-height: 38px !important;
  place-items: center !important;
  border: 1px solid rgba(53, 255, 141, 0.14) !important;
  border-radius: 999px !important;
  padding: 0 !important;
  color: rgba(225, 255, 238, 0.9) !important;
  background: rgba(4, 19, 13, 0.74) !important;
  box-shadow: none !important;
  font-size: 24px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}

body[data-route="report"] .report-icon-button[data-report-menu-toggle] {
  font-size: 18px !important;
  letter-spacing: 1px !important;
}

body[data-route="report"] .report-info-strip {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
  margin: 10px 0 12px !important;
  padding: 12px !important;
  border: 1px solid rgba(53, 255, 141, 0.12) !important;
  border-radius: 14px !important;
  background: rgba(3, 15, 10, 0.72) !important;
}

body[data-route="report"] .report-info-strip div {
  display: grid !important;
  gap: 4px !important;
  min-width: 0 !important;
}

body[data-route="report"] .report-info-strip span {
  color: rgba(184, 255, 213, 0.45) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}

body[data-route="report"] .report-info-strip strong {
  min-width: 0 !important;
  overflow: hidden !important;
  color: rgba(238, 255, 247, 0.82) !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  letter-spacing: 0 !important;
  line-height: 1.25 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body[data-route="report"] .report-layout {
  display: block !important;
}

body[data-route="report"] .report-side {
  display: none !important;
}

body[data-route="report"] .report-document,
body[data-route="report"] .report-document.doc-reader {
  width: 100% !important;
  max-width: none !important;
  padding: 18px 14px 24px !important;
  border-radius: 16px !important;
}

body[data-route="report"] .doc-cover {
  padding-top: 8px !important;
}

body[data-route="report"] .doc-cover h1 {
  font-size: 24px !important;
  line-height: 1.18 !important;
}

body[data-route="report"] .doc-cover .eyebrow,
body[data-route="report"] .doc-cover .doc-meta-line,
body[data-route="report"] .doc-cover .doc-warning,
body[data-route="report"] .doc-cover .doc-note {
  display: none !important;
}

body[data-route="report"] .doc-cover h1 span,
body[data-route="report"] .doc-cover h1 small {
  display: block !important;
}

body[data-route="report"] .doc-cover h1 span {
  color: rgba(238, 255, 247, 0.98) !important;
  font-size: 30px !important;
  font-weight: 950 !important;
  letter-spacing: 0 !important;
  line-height: 1.08 !important;
}

body[data-route="report"] .doc-cover h1 small {
  margin-top: 8px !important;
  color: rgba(184, 255, 213, 0.62) !important;
  font-size: 14px !important;
  font-weight: 850 !important;
  letter-spacing: 0 !important;
  line-height: 1.2 !important;
}

body[data-route="report"] .report-action-sheet {
  position: fixed !important;
  inset: 0 !important;
  z-index: 80 !important;
  display: grid !important;
  align-items: end !important;
  pointer-events: none !important;
}

body[data-route="report"] .report-action-sheet.open {
  pointer-events: auto !important;
}

body[data-route="report"] .sheet-backdrop {
  position: absolute !important;
  inset: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: rgba(0, 0, 0, 0) !important;
  transition: background 0.2s ease !important;
}

body[data-route="report"] .report-action-sheet.open .sheet-backdrop {
  background: rgba(0, 0, 0, 0.48) !important;
}

body[data-route="report"] .sheet-panel {
  position: relative !important;
  display: grid !important;
  gap: 8px !important;
  width: min(430px, calc(100% - 20px)) !important;
  margin: 0 auto 10px !important;
  padding: 10px !important;
  border: 1px solid rgba(53, 255, 141, 0.16) !important;
  border-radius: 20px !important;
  background: rgba(3, 13, 9, 0.98) !important;
  box-shadow: 0 -18px 60px rgba(0, 0, 0, 0.42) !important;
  transform: translateY(calc(100% + 18px)) !important;
  transition: transform 0.22s ease !important;
}

body[data-route="report"] .report-action-sheet.open .sheet-panel {
  transform: translateY(0) !important;
}

body[data-route="report"] .sheet-panel button {
  min-height: 46px !important;
  border: 1px solid rgba(53, 255, 141, 0.13) !important;
  border-radius: 14px !important;
  color: rgba(236, 255, 246, 0.92) !important;
  background: rgba(8, 25, 18, 0.86) !important;
  font-size: 15px !important;
  font-weight: 850 !important;
}

body[data-route="report"] .sheet-panel button.danger {
  border-color: rgba(255, 88, 113, 0.22) !important;
  color: rgba(255, 128, 148, 0.96) !important;
  background: rgba(255, 88, 113, 0.08) !important;
}

body[data-route="report"] .sheet-panel .sheet-cancel {
  margin-top: 2px !important;
  color: rgba(184, 255, 213, 0.72) !important;
  background: transparent !important;
}

/* V47 report reader: H5 navigation and action sheet. */
body[data-route="report"] .topbar {
  display: none !important;
}

body[data-route="report"] .site-shell {
  width: min(430px, 100%) !important;
  max-width: 430px !important;
}

body[data-route="report"] main {
  padding-top: 0 !important;
}

body[data-route="report"] #report-view {
  padding: 0 12px 28px !important;
}

.report-mobile-nav {
  position: sticky;
  top: 0;
  z-index: 30;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 42px;
  align-items: center;
  gap: 8px;
  min-height: 56px;
  margin: 0 -12px 10px;
  padding: 8px 12px;
  border-bottom: 1px solid rgba(53, 255, 141, 0.12);
  background: linear-gradient(180deg, rgba(2, 8, 6, 0.98), rgba(2, 8, 6, 0.86));
  backdrop-filter: blur(18px);
}

.report-mobile-nav h1 {
  margin: 0;
  overflow: hidden;
  color: rgba(238, 255, 247, 0.94);
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1.2;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.report-icon-button {
  display: inline-grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid rgba(53, 255, 141, 0.14);
  border-radius: 999px;
  color: rgba(225, 255, 238, 0.9);
  background: rgba(4, 19, 13, 0.74);
  box-shadow: none;
  font-size: 24px;
  font-weight: 800;
  line-height: 1;
}

.report-icon-button[data-report-menu-toggle] {
  font-size: 18px;
  letter-spacing: 1px;
}

.report-info-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 10px 0 12px;
  padding: 12px;
  border: 1px solid rgba(53, 255, 141, 0.12);
  border-radius: 14px;
  background: rgba(3, 15, 10, 0.72);
}

.report-info-strip div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.report-info-strip span {
  color: rgba(184, 255, 213, 0.45);
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
}

.report-info-strip strong {
  min-width: 0;
  overflow: hidden;
  color: rgba(238, 255, 247, 0.82);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-route="report"] .report-layout {
  display: block !important;
}

body[data-route="report"] .report-side {
  display: none !important;
}

body[data-route="report"] .report-document,
body[data-route="report"] .report-document.doc-reader {
  width: 100% !important;
  max-width: none !important;
  padding: 18px 14px 24px !important;
  border-radius: 16px !important;
}

body[data-route="report"] .doc-cover {
  padding-top: 8px !important;
}

body[data-route="report"] .doc-cover h1 {
  font-size: 24px !important;
  line-height: 1.18 !important;
}

.report-action-sheet {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  align-items: end;
  pointer-events: none;
}

.report-action-sheet.open {
  pointer-events: auto;
}

.sheet-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  border-radius: 0;
  background: rgba(0, 0, 0, 0);
  transition: background 0.2s ease;
}

.report-action-sheet.open .sheet-backdrop {
  background: rgba(0, 0, 0, 0.48);
}

.sheet-panel {
  position: relative;
  display: grid;
  gap: 8px;
  width: min(430px, calc(100% - 20px));
  margin: 0 auto 10px;
  padding: 10px;
  border: 1px solid rgba(53, 255, 141, 0.16);
  border-radius: 20px;
  background: rgba(3, 13, 9, 0.98);
  box-shadow: 0 -18px 60px rgba(0, 0, 0, 0.42);
  transform: translateY(calc(100% + 18px));
  transition: transform 0.22s ease;
}

.report-action-sheet.open .sheet-panel {
  transform: translateY(0);
}

.sheet-panel button {
  min-height: 46px;
  border: 1px solid rgba(53, 255, 141, 0.13);
  border-radius: 14px;
  color: rgba(236, 255, 246, 0.92);
  background: rgba(8, 25, 18, 0.86);
  font-size: 15px;
  font-weight: 850;
}

.sheet-panel button.danger {
  border-color: rgba(255, 88, 113, 0.22);
  color: rgba(255, 128, 148, 0.96);
  background: rgba(255, 88, 113, 0.08);
}

.sheet-panel .sheet-cancel {
  margin-top: 2px;
  color: rgba(184, 255, 213, 0.72);
  background: transparent;
}

/* V45 final hard lock: mine account must be vertical. */
html body[data-route="mine"] .mine-account-card {
  position: relative !important;
}

html body[data-route="mine"] .mine-account-card .account-summary {
  display: grid !important;
  grid-template-columns: 1fr !important;
  align-items: stretch !important;
  gap: 12px !important;
}

html body[data-route="mine"] .mine-account-card .account-lines {
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-auto-flow: row !important;
  gap: 14px !important;
  width: 100% !important;
}

html body[data-route="mine"] .mine-account-card .account-lines article,
html body[data-route="mine"] .mine-account-card .account-lines article:last-child {
  display: block !important;
  grid-column: auto !important;
  grid-row: auto !important;
  width: 100% !important;
  padding: 0 !important;
  border: 0 !important;
}

html body[data-route="mine"] .mine-account-card .account-lines article:first-child {
  padding-right: 106px !important;
}

html body[data-route="mine"] .mine-account-card .account-lines span {
  display: block !important;
  width: auto !important;
  margin: 0 0 6px !important;
}

html body[data-route="mine"] .mine-account-card .account-lines strong {
  display: block !important;
}

html body[data-route="mine"] .mine-account-card .account-status,
html body[data-route="mine"] .mine-account-card .account-summary > .account-status:last-child {
  position: absolute !important;
  top: 15px !important;
  right: 15px !important;
  display: flex !important;
  width: auto !important;
}

/* V43 actual H5 app overrides: final layer for functional pages. */
body.is-authed:not([data-route="home"]):not([data-route="report"]) .site-shell {
  width: min(430px, calc(100% - 24px)) !important;
  max-width: 430px !important;
}

body.is-authed:not([data-route="home"]):not([data-route="report"]) .topbar {
  padding: 14px 0 10px !important;
}

body.is-authed:not([data-route="home"]):not([data-route="report"]) main {
  padding-top: 12px !important;
}

body.is-authed:not([data-route="home"]):not([data-route="report"]) .brand-mark {
  width: 44px !important;
  height: 44px !important;
  font-size: 20px !important;
}

body.is-authed:not([data-route="home"]):not([data-route="report"]) .brand strong {
  font-size: 18px !important;
}

body.is-authed:not([data-route="home"]):not([data-route="report"]) .brand small {
  font-size: 11px !important;
}

body[data-route="mine"] .mine-account-card {
  margin-bottom: 12px !important;
  padding: 14px !important;
  border-radius: 16px !important;
  background:
    radial-gradient(circle at 0% 0%, rgba(53, 255, 141, 0.1), transparent 36%),
    linear-gradient(180deg, rgba(4, 18, 13, 0.94), rgba(2, 10, 7, 0.96)) !important;
  box-shadow:
    inset 0 1px 0 rgba(184, 255, 213, 0.08),
    0 14px 34px rgba(0, 0, 0, 0.24) !important;
}

body[data-route="mine"] .account-summary {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 12px !important;
}

body[data-route="mine"] .account-lines {
  display: grid !important;
  gap: 8px !important;
  min-width: 0 !important;
}

body[data-route="mine"] .account-lines article,
body[data-route="mine"] .account-lines article:last-child {
  display: grid !important;
  grid-template-columns: 34px minmax(0, 1fr) !important;
  align-items: baseline !important;
  justify-items: start !important;
  column-gap: 10px !important;
  min-width: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body[data-route="mine"] .account-lines span {
  width: 34px !important;
  color: rgba(184, 255, 213, 0.56) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  text-align: left !important;
}

body[data-route="mine"] .account-lines strong {
  display: block !important;
  min-width: 0 !important;
  color: rgba(235, 255, 245, 0.96) !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  line-height: 1.12 !important;
  letter-spacing: 0 !important;
}

body[data-route="mine"] .account-status,
body[data-route="mine"] .account-summary > .account-status:last-child {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  align-self: center !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body[data-route="mine"] .account-status span {
  display: none !important;
}

body[data-route="mine"] .account-state {
  min-height: 28px !important;
  padding: 0 12px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(53, 255, 141, 0.24) !important;
  color: rgba(223, 255, 236, 0.98) !important;
  background: rgba(53, 255, 141, 0.1) !important;
  box-shadow: none !important;
  font-size: 13px !important;
  line-height: 28px !important;
}

body[data-route="mine"] .account-state::before {
  width: 7px !important;
  height: 7px !important;
  margin-right: 7px !important;
}

body[data-route="profiles"] .profile-list {
  gap: 9px !important;
}

body[data-route="profiles"] .profile-row {
  position: relative !important;
  min-height: 86px !important;
  grid-template-columns: minmax(0, 1fr) !important;
  align-items: stretch !important;
  gap: 12px !important;
  padding: 14px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(53, 255, 141, 0.14) !important;
  background:
    linear-gradient(180deg, rgba(5, 19, 14, 0.9), rgba(2, 10, 7, 0.92)) !important;
  box-shadow:
    inset 0 1px 0 rgba(184, 255, 213, 0.06),
    0 12px 28px rgba(0, 0, 0, 0.18) !important;
}

body[data-route="profiles"] .profile-row::after {
  content: "›";
  position: absolute;
  top: 16px;
  right: 14px;
  color: rgba(184, 255, 213, 0.48);
  font-size: 22px;
  line-height: 1;
}

body[data-route="profiles"] .profile-main {
  display: grid !important;
  gap: 7px !important;
  min-width: 0 !important;
  padding-right: 24px !important;
}

body[data-route="profiles"] .profile-title-line {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: 0 !important;
}

body[data-route="profiles"] .profile-title-line h3 {
  margin: 0 !important;
  color: rgba(235, 255, 245, 0.96) !important;
  font-size: 18px !important;
  line-height: 1.15 !important;
}

body[data-route="profiles"] .profile-title-line span {
  min-height: 20px !important;
  padding: 0 7px !important;
  border: 1px solid rgba(53, 255, 141, 0.14) !important;
  border-radius: 999px !important;
  color: rgba(184, 255, 213, 0.76) !important;
  background: rgba(53, 255, 141, 0.08) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
}

body[data-route="profiles"] .profile-meta-line {
  display: grid !important;
  gap: 3px !important;
  color: rgba(235, 255, 245, 0.5) !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
}

body[data-route="profiles"] .profile-row .row-actions {
  display: flex !important;
  justify-content: flex-start !important;
  gap: 8px !important;
}

body[data-route="profiles"] .profile-row .row-actions button {
  min-height: 30px !important;
  padding: 0 12px !important;
  border-radius: 999px !important;
  font-size: 12px !important;
}

body[data-route="profiles"] .profile-row .row-actions .text-action {
  border: 1px solid rgba(53, 255, 141, 0.16) !important;
  color: rgba(203, 255, 225, 0.82) !important;
  background: rgba(53, 255, 141, 0.05) !important;
}

body.is-authed .bottom-tabs {
  left: 50% !important;
  width: min(390px, calc(100% - 40px)) !important;
  transform: translateX(-50%) !important;
}

/* V43 lock: higher specificity beats the duplicated legacy page rules below. */
html body.is-authed:not([data-route="home"]):not([data-route="report"]) .site-shell {
  width: min(430px, calc(100% - 24px)) !important;
  max-width: 430px !important;
}

html body[data-route="login"] .site-shell {
  width: min(430px, calc(100% - 24px)) !important;
  max-width: 430px !important;
}

html body.is-authed:not([data-route="home"]):not([data-route="report"]) .topbar {
  padding: 14px 0 10px !important;
}

html body[data-route="login"] .topbar {
  padding: 14px 0 10px !important;
}

html body.is-authed:not([data-route="home"]):not([data-route="report"]) main {
  padding-top: 12px !important;
}

html body[data-route="login"] main {
  padding-top: 12px !important;
}

html body.is-authed .bottom-tabs {
  left: 50% !important;
  width: min(390px, calc(100% - 40px)) !important;
  transform: translateX(-50%) !important;
}

html body[data-route="mine"] .mine-account-card {
  margin-bottom: 12px !important;
  padding: 14px !important;
  border-radius: 16px !important;
}

html body[data-route="mine"] .account-summary {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 12px !important;
}

html body[data-route="mine"] .account-lines {
  display: grid !important;
  gap: 8px !important;
}

html body[data-route="mine"] .account-lines article,
html body[data-route="mine"] .account-lines article:last-child {
  display: grid !important;
  grid-template-columns: 34px minmax(0, 1fr) !important;
  align-items: baseline !important;
  justify-items: start !important;
  column-gap: 10px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body[data-route="mine"] .account-lines span {
  width: 34px !important;
  text-align: left !important;
}

html body[data-route="mine"] .account-status,
html body[data-route="mine"] .account-summary > .account-status:last-child {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  align-self: center !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body[data-route="mine"] .account-status span {
  display: none !important;
}

html body[data-route="profiles"] .profile-row {
  grid-template-columns: minmax(0, 1fr) !important;
  align-items: stretch !important;
  gap: 12px !important;
  min-height: 86px !important;
  padding: 14px !important;
  border-radius: 16px !important;
}

html body[data-route="profiles"] .profile-row::after {
  content: "›";
  position: absolute;
  top: 16px;
  right: 14px;
  color: rgba(184, 255, 213, 0.48);
  font-size: 22px;
  line-height: 1;
}

html body[data-route="profiles"] .profile-main {
  padding-right: 24px !important;
}

html body[data-route="profiles"] .profile-meta-line {
  display: grid !important;
  gap: 3px !important;
}

html body[data-route="profiles"] .profile-row .row-actions {
  display: flex !important;
  justify-content: flex-start !important;
  gap: 8px !important;
}

html body[data-route="profiles"] .profile-row .row-actions button {
  min-height: 30px !important;
  padding: 0 12px !important;
  border-radius: 999px !important;
  font-size: 12px !important;
}

/* V44 mine page rebuild: account fields and report rows. */
html body[data-route="mine"] .mine-account-card {
  margin: 2px 0 14px !important;
  padding: 15px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(53, 255, 141, 0.16) !important;
  background:
    linear-gradient(135deg, rgba(53, 255, 141, 0.1), transparent 42%),
    linear-gradient(180deg, rgba(5, 20, 14, 0.9), rgba(1, 8, 6, 0.96)) !important;
  box-shadow:
    inset 0 1px 0 rgba(184, 255, 213, 0.08),
    0 14px 34px rgba(0, 0, 0, 0.26) !important;
}

html body[data-route="mine"] .account-summary {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: start !important;
  gap: 14px !important;
}

html body[data-route="mine"] .account-lines {
  display: grid !important;
  gap: 12px !important;
  min-width: 0 !important;
}

html body[data-route="mine"] .account-lines article,
html body[data-route="mine"] .account-lines article:last-child {
  display: block !important;
  min-width: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body[data-route="mine"] .account-lines span {
  display: block !important;
  width: auto !important;
  margin-bottom: 6px !important;
  color: rgba(184, 255, 213, 0.48) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  text-align: left !important;
}

html body[data-route="mine"] .account-lines strong {
  display: block !important;
  min-width: 0 !important;
  color: rgba(239, 255, 248, 0.96) !important;
  overflow-wrap: anywhere !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
  line-height: 1.05 !important;
}

html body[data-route="mine"] .account-status,
html body[data-route="mine"] .account-summary > .account-status:last-child {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: flex-end !important;
  align-self: start !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body[data-route="mine"] .account-state {
  min-height: 28px !important;
  padding: 0 11px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(53, 255, 141, 0.24) !important;
  color: rgba(232, 255, 242, 0.96) !important;
  background: rgba(53, 255, 141, 0.09) !important;
  box-shadow: none !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 28px !important;
}

html body[data-route="mine"] .report-list {
  display: grid !important;
  gap: 10px !important;
}

html body[data-route="mine"] .report-row {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 12px !important;
  min-height: 86px !important;
  padding: 15px !important;
  border: 1px solid rgba(53, 255, 141, 0.13) !important;
  border-radius: 18px !important;
  background:
    linear-gradient(180deg, rgba(5, 18, 13, 0.86), rgba(2, 10, 7, 0.92)) !important;
  box-shadow:
    inset 0 1px 0 rgba(184, 255, 213, 0.05),
    0 12px 30px rgba(0, 0, 0, 0.18) !important;
  transform: none !important;
}

html body[data-route="mine"] .report-row[data-report-status="completed"] {
  border-color: rgba(184, 255, 213, 0.12) !important;
}

html body[data-route="mine"] .report-row[data-report-status="generating"],
html body[data-route="mine"] .report-row[data-report-status="pending"] {
  border-color: rgba(255, 211, 101, 0.2) !important;
}

html body[data-route="mine"] .report-row[data-report-status="failed"] {
  border-color: rgba(255, 88, 113, 0.22) !important;
}

html body[data-route="mine"] .report-row-main {
  display: grid !important;
  gap: 8px !important;
  min-width: 0 !important;
}

html body[data-route="mine"] .report-row-title {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 7px !important;
  min-width: 0 !important;
}

html body[data-route="mine"] .report-row h3 {
  margin: 0 !important;
  color: rgba(239, 255, 248, 0.98) !important;
  font-size: 20px !important;
  font-weight: 950 !important;
  letter-spacing: 0 !important;
  line-height: 1.05 !important;
}

html body[data-route="mine"] .gender-chip,
html body[data-route="mine"] .status-pill {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 22px !important;
  padding: 0 8px !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

html body[data-route="mine"] .gender-chip {
  border: 1px solid rgba(184, 255, 213, 0.14) !important;
  color: rgba(204, 255, 225, 0.74) !important;
  background: rgba(184, 255, 213, 0.06) !important;
}

html body[data-route="mine"] .status-pill {
  border: 1px solid rgba(255, 211, 101, 0.24) !important;
  color: rgba(255, 223, 141, 0.95) !important;
  background: rgba(255, 211, 101, 0.11) !important;
}

html body[data-route="mine"] .status-pill.failed {
  border-color: rgba(255, 88, 113, 0.28) !important;
  color: rgba(255, 129, 149, 0.96) !important;
  background: rgba(255, 88, 113, 0.1) !important;
}

html body[data-route="mine"] .report-row p {
  margin: 0 !important;
  color: rgba(235, 255, 245, 0.48) !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
}

html body[data-route="mine"] .report-row .row-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  min-width: 76px !important;
}

html body[data-route="mine"] .report-row .row-actions button {
  min-height: 32px !important;
  padding: 0 13px !important;
  border-radius: 999px !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
}

html body[data-route="mine"] .report-row .row-actions .primary {
  color: #03100a !important;
  background: linear-gradient(180deg, #42f783, #27dd69) !important;
  box-shadow: 0 8px 22px rgba(53, 255, 141, 0.18) !important;
}

html body[data-route="mine"] .report-row .row-actions .ghost,
html body[data-route="mine"] .report-row .row-actions .text-action {
  border: 1px solid rgba(184, 255, 213, 0.16) !important;
  color: rgba(219, 255, 234, 0.82) !important;
  background: rgba(2, 13, 9, 0.76) !important;
  box-shadow: none !important;
}

@media (max-width: 390px) {
  html body[data-route="mine"] .report-row {
    grid-template-columns: 1fr !important;
  }

  html body[data-route="mine"] .report-row .row-actions {
    justify-content: flex-start !important;
  }
}

/* V40 app-surface refinement: functional pages should scan like H5, not hero cards. */
body.is-authed:not([data-route="home"]):not([data-route="report"]) .topbar {
  padding: 9px 0 7px;
  border-bottom-color: rgba(53, 255, 141, 0.08);
}

body.is-authed:not([data-route="home"]):not([data-route="report"]) .brand-mark {
  width: 32px;
  height: 32px;
  font-size: 17px;
  box-shadow: 0 0 18px rgba(53, 255, 141, 0.22);
}

body.is-authed:not([data-route="home"]):not([data-route="report"]) .brand strong {
  font-size: 15px;
}

body.is-authed:not([data-route="home"]):not([data-route="report"]) .brand small {
  font-size: 10px;
}

body.is-authed:not([data-route="home"]):not([data-route="report"]) .view {
  padding-top: 22px;
}

body[data-route="mine"] .mine-account-card {
  margin-bottom: 10px;
  padding: 12px 14px;
  border-radius: 14px !important;
}

body[data-route="mine"] .account-summary {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
}

body[data-route="mine"] .account-lines {
  display: grid;
  gap: 8px;
}

body[data-route="mine"] .account-lines article {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 10px;
  align-items: baseline;
}

body[data-route="mine"] .account-summary article + article {
  padding-left: 0;
  border-left: 0;
}

body[data-route="mine"] .account-summary span {
  font-size: 10px;
}

body[data-route="mine"] .account-summary strong {
  font-size: 14px;
}

body[data-route="mine"] .account-status {
  justify-items: end;
  align-self: center;
}

body[data-route="mine"] .account-state {
  min-height: 28px;
  padding: 0 10px;
  font-size: 13px !important;
}

body[data-route="mine"] .report-list {
  gap: 8px;
}

body[data-route="mine"] .report-row {
  min-height: 78px;
  padding: 12px 14px;
  border-radius: 14px;
  border-color: rgba(53, 255, 141, 0.14);
  background: rgba(3, 14, 10, 0.74);
  box-shadow: none;
}

body[data-route="mine"] .report-row h3 {
  font-size: 18px;
}

body[data-route="mine"] .report-row p {
  color: rgba(234, 255, 244, 0.58);
  font-size: 12px;
}

body[data-route="mine"] .status-pill {
  min-height: 20px;
  padding: 0 7px;
  font-size: 10px;
  color: rgba(184, 255, 213, 0.92);
  background: rgba(53, 255, 141, 0.1);
}

body[data-route="mine"] .status-pill.processing {
  color: #ffd166;
  background: rgba(255, 209, 102, 0.12);
}

body[data-route="mine"] .status-pill.failed {
  color: #ff8a96;
  background: rgba(255, 97, 112, 0.12);
}

body[data-route="mine"] .row-actions {
  gap: 8px;
  align-items: center;
}

body[data-route="mine"] .report-main-action {
  min-height: 34px;
  padding: 0 14px;
  font-size: 13px;
  box-shadow: 0 0 18px rgba(53, 255, 141, 0.12);
}

body.is-authed .bottom-tabs {
  bottom: 12px;
  width: min(360px, calc(100% - 42px));
  padding: 5px;
  border-color: rgba(53, 255, 141, 0.18);
  background: rgba(2, 9, 7, 0.82);
  box-shadow: 0 12px 38px rgba(0, 0, 0, 0.42);
}

body.is-authed .tab-button {
  min-height: 40px;
  font-size: 14px;
  color: rgba(234, 255, 244, 0.56);
}

body.is-authed .tab-button.active {
  color: #03100a;
  background: rgba(53, 255, 141, 0.9);
}

@media (max-width: 560px) {
  body[data-route="mine"] .account-summary {
    grid-template-columns: 1fr auto;
  }

  body[data-route="mine"] .account-lines article {
    grid-template-columns: 34px minmax(0, 1fr);
  }

  body[data-route="mine"] .report-row {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  body[data-route="mine"] .row-actions {
    justify-content: flex-start;
  }
}

/* Web3 tech skin */
:root {
  color-scheme: dark;
  --ink: #eafff4;
  --muted: #8ca59a;
  --line: rgba(86, 255, 163, 0.22);
  --paper: rgba(8, 18, 14, 0.94);
  --surface: #020706;
  --deep: #07120e;
  --accent: #35ff8d;
  --accent-deep: #b8ffd5;
  --warning: #ffd166;
  --danger: #ff6170;
  --panel: rgba(7, 18, 14, 0.82);
  --panel-solid: #07120e;
  --panel-soft: rgba(13, 32, 25, 0.74);
  --line-strong: rgba(53, 255, 141, 0.46);
  --shadow: 0 26px 90px rgba(0, 0, 0, 0.58), 0 0 42px rgba(53, 255, 141, 0.08);
}

body {
  position: relative;
  color: var(--ink);
  background:
    radial-gradient(circle at 18% 12%, rgba(53, 255, 141, 0.18), transparent 28%),
    radial-gradient(circle at 84% 6%, rgba(46, 150, 255, 0.1), transparent 24%),
    linear-gradient(150deg, #020706 0%, #07120e 48%, #020504 100%);
}

body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

body::before {
  opacity: 0.24;
  background:
    linear-gradient(rgba(53, 255, 141, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(53, 255, 141, 0.08) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(to bottom, black, transparent 88%);
}

body::after {
  opacity: 0.16;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 7px,
    rgba(184, 255, 213, 0.18) 8px
  );
}

.site-shell {
  position: relative;
  z-index: 1;
}

.topbar {
  background: linear-gradient(to bottom, rgba(2, 7, 6, 0.96), rgba(2, 7, 6, 0.7));
  border-bottom: 1px solid rgba(53, 255, 141, 0.12);
}

.brand {
  color: var(--ink);
}

.brand-mark {
  color: #03100a;
  background: var(--accent);
  box-shadow: 0 0 24px rgba(53, 255, 141, 0.34);
}

.nav-actions button,
.ghost,
.back-link {
  color: var(--accent-deep);
  background: rgba(7, 18, 14, 0.72);
  border-color: var(--line);
  box-shadow: inset 0 1px 0 rgba(184, 255, 213, 0.08);
}

.primary {
  color: #03100a;
  border-color: rgba(53, 255, 141, 0.92);
  background: var(--accent);
  box-shadow: 0 0 28px rgba(53, 255, 141, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.primary:hover {
  color: #03100a;
  background: #8cffbd;
}

.ghost:hover,
.nav-actions button:hover,
.back-link:hover {
  color: #03100a;
  background: var(--accent);
  border-color: var(--accent);
}

.eyebrow,
.step-index,
.paper-top b,
.guide-status small,
.report-chapters a:hover {
  color: var(--accent);
}

h1,
h2,
h3,
.paper-card h2,
.doc-section strong,
.doc-row b,
.uid-card strong,
.guide-status strong,
.report-meta h2,
.report-chapters b {
  color: var(--ink);
}

.hero-lede,
.page-heading p,
.report-document p,
.form-card,
.product-logic p,
.workspace-heading p,
.guide-card p,
.report-meta p,
.report-row p,
.small-note,
.brand small {
  color: var(--muted);
}

.hero-panel::before {
  border: 1px solid rgba(53, 255, 141, 0.15);
  background:
    radial-gradient(circle at 30% 34%, rgba(53, 255, 141, 0.16), transparent 24%),
    repeating-linear-gradient(90deg, rgba(53, 255, 141, 0.08) 0 1px, transparent 1px 34px),
    rgba(4, 13, 10, 0.64);
  box-shadow: inset 0 0 38px rgba(53, 255, 141, 0.06);
}

.paper-card,
.product-logic article,
.form-card,
.login-card,
.report-document,
.report-side,
.reports-toolbar,
.report-row,
.profile-row,
.profile-detail-card,
.mine-account-card,
.account-summary article,
.draft-note,
.guide-card,
.uid-card,
.guide-status {
  border-color: var(--line);
  background: linear-gradient(180deg, rgba(9, 25, 19, 0.9), rgba(5, 13, 10, 0.88));
  box-shadow: var(--shadow);
}

.paper-card {
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.64), 0 0 54px rgba(53, 255, 141, 0.14);
}

.paper-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(184, 255, 213, 0.12), transparent 32%);
}

.score-ring {
  background:
    radial-gradient(circle, var(--panel-solid) 0 54%, transparent 55%),
    conic-gradient(var(--accent) 0 84%, rgba(53, 255, 141, 0.12) 84% 100%);
  box-shadow: 0 0 34px rgba(53, 255, 141, 0.14);
}

.score-ring span {
  color: var(--accent);
}

.paper-lines i {
  background: rgba(53, 255, 141, 0.18);
  box-shadow: inset 0 0 12px rgba(53, 255, 141, 0.12);
}

.mini-grid span,
.flow-strip,
.flow-strip span,
.backend-preview,
.report-chapters,
.doc-note,
.doc-warning,
.final-note,
.score-table div,
.status-item.done,
.status-pill,
.pillar-grid div {
  background: rgba(15, 39, 29, 0.76);
  color: var(--accent-deep);
}

.flow-strip {
  border-color: var(--line);
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.46);
}

.flow-strip span:nth-child(3),
.segmented input:checked + span,
.tab-button.active {
  color: #03100a;
  background: var(--accent);
}

input,
select,
.picker-field,
.segmented {
  color: var(--ink);
  border-color: var(--line);
  background: rgba(2, 9, 7, 0.9);
}

input::placeholder {
  color: #647d71;
}

input:focus,
select:focus,
.picker-field:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(53, 255, 141, 0.15), 0 0 26px rgba(53, 255, 141, 0.12);
}

label,
.segmented span,
.paper-top,
.status-item,
.report-chapters a,
.info-grid span,
.pillar-grid small,
.score-matrix span,
.element-bars b,
.split-panel ul,
.score-matrix small,
.account-summary span,
.profile-row small,
.draft-note small {
  color: var(--muted);
}

.picker-field::after {
  color: var(--accent);
}

.orbital-loader {
  border-color: var(--line);
  background: radial-gradient(circle, rgba(53, 255, 141, 0.08), rgba(2, 9, 7, 0.9));
}

.orbital-loader::after {
  background: var(--accent);
  box-shadow: 0 0 42px rgba(53, 255, 141, 0.4);
}

.progress-track {
  background: rgba(53, 255, 141, 0.14);
}

.progress-track i {
  background: var(--accent);
  box-shadow: 0 0 18px rgba(53, 255, 141, 0.5);
}

.status-item {
  border-color: var(--line);
  background: rgba(4, 13, 10, 0.82);
}

.report-document,
.report-document.doc-reader {
  background: rgba(4, 10, 8, 0.96);
}

.doc-reader {
  color: var(--ink);
}

.doc-cover {
  border-bottom-color: var(--line-strong);
}

.doc-section {
  border-bottom-color: rgba(86, 255, 163, 0.16);
}

.doc-section p,
.doc-note p,
.doc-row span,
.doc-list,
.doc-list span,
.doc-list li,
.insight-table span {
  color: #bdd2c8;
}

.doc-emphasis {
  color: var(--accent-deep) !important;
  border-left-color: var(--accent);
  background: rgba(53, 255, 141, 0.08);
}

.doc-row,
.info-grid div,
.pillar-grid div,
.insight-table div,
.split-panel > div,
.match-list div,
.score-matrix div,
.final-note,
.score-table div {
  border-color: var(--line);
  background: rgba(8, 23, 17, 0.84);
}

.doc-row span strong {
  color: var(--accent-deep);
}

.doc-list span,
.doc-list li,
.doc-code,
.doc-section code,
.doc-cover code {
  background: rgba(53, 255, 141, 0.08);
}

.doc-code {
  border-color: var(--line);
  color: #d9ffea;
}

.report-meta span,
.status-pill {
  color: #03100a;
  background: var(--accent);
}

.status-pill.processing {
  color: #161000;
  background: var(--warning);
}

.status-pill.failed {
  color: #21070b;
  background: var(--danger);
}

.bottom-tabs {
  border-color: var(--line);
  background: rgba(4, 13, 10, 0.88);
  box-shadow: 0 18px 70px rgba(0, 0, 0, 0.58), 0 0 28px rgba(53, 255, 141, 0.1);
}

.tab-button {
  color: var(--muted);
}

.toast,
.verdict-card,
.section-title > span,
.match-list span,
.score-matrix b {
  color: #03100a;
  background: var(--accent);
}

.score-table b,
.score-table span,
.account-summary strong,
.draft-note span {
  color: var(--ink);
}

@media (prefers-reduced-motion: no-preference) {
  .paper-card {
    animation: terminalFloat 7s ease-in-out infinite;
  }

  .primary,
  .brand-mark,
  .progress-track i {
    animation: glowPulse 3.8s ease-in-out infinite;
  }
}

@keyframes terminalFloat {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-8px);
  }
}

@keyframes glowPulse {
  0%,
  100% {
    filter: saturate(1);
  }

  50% {
    filter: saturate(1.35) brightness(1.08);
  }
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100dvh;
  color: var(--ink);
  background:
    linear-gradient(135deg, rgba(15, 143, 114, 0.08), transparent 36%),
    radial-gradient(circle at 88% 12%, rgba(255, 255, 255, 0.9), transparent 26%),
    var(--surface);
}

body.is-authed {
  padding-bottom: 78px;
}

body.is-authed[data-route="report"] {
  padding-bottom: 0;
}

button,
input,
select {
  font: inherit;
}

button {
  cursor: pointer;
}

.site-shell {
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 0 12px;
  background: linear-gradient(to bottom, rgba(245, 238, 226, 0.98), rgba(245, 238, 226, 0.78));
  backdrop-filter: blur(14px);
}

body.is-authed:not([data-route="home"]) .topbar {
  padding: 10px 0 8px;
}

body.is-authed:not([data-route="home"]) .brand {
  gap: 8px;
}

body.is-authed:not([data-route="home"]) .brand-mark {
  width: 34px;
  height: 34px;
  font-size: 18px;
}

body.is-authed:not([data-route="home"]) .brand strong {
  font-size: 16px;
}

body.is-authed:not([data-route="home"]) .brand small {
  font-size: 11px;
}

.brand,
.nav-actions,
.hero-actions,
.reports-toolbar,
.paper-top {
  display: flex;
  align-items: center;
}

.brand {
  gap: 10px;
  border: 0;
  background: transparent;
  color: var(--ink);
  padding: 0;
  text-align: left;
}

.brand-mark {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: var(--deep);
  font-weight: 800;
  box-shadow: 0 12px 30px rgba(37, 51, 46, 0.2);
}

.brand strong,
.brand small {
  display: block;
}

.brand small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
}

.nav-actions {
  gap: 8px;
}

.app-nav {
  display: none;
}

body.is-authed .guest-nav {
  display: none;
}

body.is-authed .app-nav {
  display: flex;
}

body[data-route="report"] .bottom-tabs {
  display: none;
}

.nav-actions button,
.ghost,
.primary,
.back-link {
  min-height: 42px;
  border-radius: 999px;
  border: 1px solid var(--line);
  padding: 0 18px;
  color: var(--ink);
  background: rgba(255, 250, 241, 0.72);
  transition:
    transform 160ms ease,
    background 160ms ease,
    box-shadow 160ms ease;
}

.primary {
  border-color: var(--accent);
  color: #fff;
  background: var(--accent);
  box-shadow: 0 12px 32px rgba(15, 143, 114, 0.22);
}

.primary:hover,
.ghost:hover,
.nav-actions button:hover,
.back-link:hover {
  transform: translateY(-1px);
}

.primary:hover {
  background: var(--accent-deep);
}

.ghost:hover,
.nav-actions button:hover,
.back-link:hover {
  background: #fff;
}

.small {
  min-height: 38px;
}

.wide {
  width: 100%;
  justify-content: center;
}

.view {
  display: none;
  padding: 56px 0 76px;
}

body.is-authed:not([data-route="home"]) .view {
  padding: 26px 0 44px;
}

.view.active {
  display: block;
}

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(360px, 0.94fr);
  gap: 54px;
  align-items: center;
  min-height: calc(100dvh - 106px);
}

.eyebrow {
  margin: 0 0 14px;
  color: var(--accent-deep);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: 22px;
  max-width: 760px;
  font-size: clamp(40px, 5.4vw, 68px);
  line-height: 1.08;
  letter-spacing: 0;
  word-break: keep-all;
}

h1 span {
  display: inline-block;
  max-width: 820px;
}

.hero-lede,
.page-heading p,
.report-document p,
.form-card,
.product-logic p {
  color: var(--muted);
  line-height: 1.8;
}

.hero-lede {
  max-width: 670px;
  font-size: 18px;
}

.hero-actions {
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 32px;
}

.hero-actions button {
  min-width: 138px;
}

.hero-panel {
  position: relative;
  min-height: 560px;
  display: grid;
  align-items: center;
}

.hero-panel::before {
  content: "";
  position: absolute;
  inset: 28px 36px 24px 8px;
  border-radius: 40px;
  background:
    linear-gradient(145deg, rgba(37, 51, 46, 0.08), transparent),
    repeating-linear-gradient(90deg, rgba(37, 51, 46, 0.06) 0 1px, transparent 1px 36px);
  transform: rotate(-3deg);
}

.paper-card {
  position: relative;
  width: min(100%, 440px);
  margin-left: auto;
  padding: 28px;
  border: 1px solid rgba(37, 51, 46, 0.14);
  border-radius: 28px;
  background: rgba(255, 250, 241, 0.94);
  box-shadow: var(--shadow);
}

.paper-top {
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 34px;
  color: var(--muted);
  font-size: 13px;
}

.paper-top b {
  color: var(--accent-deep);
}

.paper-card h2 {
  margin-bottom: 18px;
  font-size: 28px;
  line-height: 1.16;
}

.score-ring {
  display: grid;
  width: 154px;
  height: 154px;
  place-items: center;
  margin: 24px auto 26px;
  border-radius: 50%;
  background:
    radial-gradient(circle, var(--paper) 0 54%, transparent 55%),
    conic-gradient(var(--accent) 0 84%, #e5ded2 84% 100%);
}

.score-ring span {
  font-size: 42px;
  font-weight: 850;
  line-height: 1;
}

.score-ring small {
  color: var(--muted);
  font-size: 12px;
}

.paper-lines {
  display: grid;
  gap: 10px;
}

.paper-lines i {
  display: block;
  width: var(--w);
  height: 10px;
  border-radius: 999px;
  background: #ddd4c6;
}

.mini-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 24px;
}

.mini-grid span {
  min-height: 44px;
  padding: 12px;
  border-radius: 14px;
  color: var(--deep);
  background: #edf5ef;
  font-size: 13px;
  font-weight: 700;
}

.flow-strip {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  width: min(100%, 520px);
  margin: -34px 0 0 auto;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 250, 241, 0.9);
  box-shadow: 0 18px 50px rgba(37, 51, 46, 0.12);
}

.flow-strip span {
  min-width: 0;
  padding: 10px 8px;
  border-radius: 999px;
  text-align: center;
  color: var(--muted);
  background: #f4efe7;
  font-size: 13px;
  font-weight: 700;
}

.flow-strip span:nth-child(3) {
  color: #fff;
  background: var(--deep);
}

.product-logic {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 10px;
}

.product-logic article,
.form-card,
.login-card,
.report-document,
.report-side,
.reports-toolbar,
.report-row,
.profile-row,
.profile-detail-card,
.mine-account-card,
.account-summary article,
.draft-note {
  border: 1px solid rgba(37, 51, 46, 0.13);
  border-radius: var(--radius);
  background: rgba(255, 250, 241, 0.8);
  box-shadow: 0 18px 52px rgba(37, 51, 46, 0.08);
}

.product-logic article {
  padding: 22px;
}

.step-index {
  color: var(--accent-deep);
  font-size: 13px;
  font-weight: 850;
}

.product-logic h3 {
  margin: 18px 0 10px;
  font-size: 22px;
}

.page-heading {
  margin-bottom: 28px;
}

.page-heading h1 {
  font-size: clamp(34px, 5vw, 58px);
}

.page-heading.compact h1 {
  max-width: 650px;
}

.form-card {
  display: grid;
  gap: 18px;
  max-width: 780px;
  padding: 26px;
}

.login-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 440px);
  gap: 40px;
  align-items: start;
  min-height: calc(100dvh - 156px);
}

.login-card {
  display: grid;
  gap: 18px;
  padding: 26px;
}

.small-note {
  margin: 0;
  font-size: 13px;
  line-height: 1.7;
}

label {
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
}

input,
select,
.picker-field {
  width: 100%;
  min-height: 48px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0 14px;
  color: var(--ink);
  background: #fffdf8;
  outline: none;
}

input:focus,
select:focus,
.picker-field:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(15, 143, 114, 0.12);
}

.picker-field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: left;
}

.picker-field::after {
  content: "选择";
  color: var(--accent-deep);
  font-size: 13px;
  font-weight: 850;
}

.field-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.location-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.segmented {
  display: inline-grid;
  grid-template-columns: repeat(2, 1fr);
  width: min(100%, 320px);
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fffdf8;
}

.segmented label {
  display: block;
  cursor: pointer;
}

.segmented input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.segmented span {
  display: grid;
  min-height: 38px;
  place-items: center;
  border-radius: 999px;
  color: var(--muted);
}

.segmented input:checked + span {
  color: #fff;
  background: var(--deep);
}

.backend-preview {
  display: grid;
  gap: 10px;
  padding: 16px 18px;
  border-radius: 16px;
  background: #edf5ef;
  color: var(--deep);
}

.backend-preview ol {
  display: grid;
  gap: 7px;
  margin: 0;
  padding-left: 20px;
  color: #4d5d57;
}

.workspace-heading,
.guide-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  gap: 20px;
  align-items: end;
  margin-bottom: 28px;
}

.workspace-heading h1,
.guide-card h1 {
  font-size: clamp(34px, 5vw, 58px);
}

.workspace-heading p,
.guide-card p {
  color: var(--muted);
  line-height: 1.8;
}

.guide-card {
  align-items: stretch;
  padding: 22px;
  border: 1px solid rgba(37, 51, 46, 0.13);
  border-radius: 24px;
  background:
    linear-gradient(135deg, rgba(237, 245, 239, 0.9), rgba(255, 250, 241, 0.82)),
    rgba(255, 250, 241, 0.82);
  box-shadow: 0 18px 52px rgba(37, 51, 46, 0.08);
}

.guide-card h1 {
  margin-bottom: 14px;
}

.guide-card p {
  margin-bottom: 0;
}

.uid-card,
.guide-status {
  display: grid;
  gap: 8px;
  padding: 18px;
  border: 1px solid rgba(37, 51, 46, 0.13);
  border-radius: var(--radius);
  background: rgba(255, 250, 241, 0.82);
  box-shadow: 0 18px 52px rgba(37, 51, 46, 0.08);
}

.guide-status {
  align-content: center;
}

.uid-card span,
.guide-status span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.uid-card strong,
.guide-status strong {
  color: var(--deep);
  font-size: 22px;
}

.guide-status small {
  color: var(--accent-deep);
  font-size: 13px;
  font-weight: 850;
}

#loading-view.active {
  display: grid;
}

.loading-v8 {
  --loading-panel: rgba(3, 17, 10, 0.74);
  --loading-line: rgba(59, 238, 132, 0.18);
  --loading-soft-line: rgba(196, 255, 220, 0.08);
  --loading-text: rgba(238, 255, 247, 0.96);
  --loading-muted: rgba(194, 220, 207, 0.68);
  --loading-faint: rgba(194, 220, 207, 0.42);
  --loading-green: #3af084;
  --loading-gold: #e8d16b;
  display: grid;
  align-content: center;
  gap: 14px;
  min-height: calc(100dvh - 160px);
  max-width: 430px;
  margin: 0 auto;
  padding: 4px 0 calc(var(--bottom-nav-offset, 0px) + 18px);
  color: var(--loading-text);
}

.loading-v8-head {
  display: grid;
  justify-items: center;
  gap: 7px;
  text-align: center;
}

.loading-v8-head h1 {
  margin: 0;
  color: var(--loading-text);
  font-size: clamp(29px, 8vw, 38px);
  font-weight: 980;
  line-height: 1.06;
  letter-spacing: 0;
}

.loading-v8-head p {
  width: min(286px, 100%);
  margin: 0;
  color: var(--loading-muted);
  font-size: 13px;
  font-weight: 760;
  line-height: 1.5;
}

.loading-bazi-loader {
  position: relative;
  width: min(294px, 78vw);
  aspect-ratio: 1;
  margin: 0 auto;
  border-radius: 50%;
  filter: drop-shadow(0 20px 58px rgba(0, 0, 0, 0.22));
}

.loading-bazi-loader::before {
  content: "";
  position: absolute;
  inset: 20px;
  border-radius: 50%;
  background:
    linear-gradient(rgba(58, 240, 132, 0.13), rgba(58, 240, 132, 0.13)) 50% 0 / 1px 100% no-repeat,
    linear-gradient(90deg, rgba(58, 240, 132, 0.13), rgba(58, 240, 132, 0.13)) 0 50% / 100% 1px no-repeat;
  opacity: 0.52;
}

.loading-orbit {
  position: absolute;
  inset: var(--inset);
  border: 1px solid var(--stroke);
  border-radius: 50%;
  animation: loading-spin var(--speed) linear infinite;
  will-change: transform;
}

.loading-orbit::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: conic-gradient(from 20deg, transparent 0 34deg, rgba(58, 240, 132, 0.72) 35deg 43deg, transparent 44deg 360deg);
  opacity: var(--glow);
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), black calc(100% - 2px));
}

.loading-stems {
  --inset: 4px;
  --stroke: rgba(58, 240, 132, 0.22);
  --speed: 28s;
  --glow: 0.86;
}

.loading-branches {
  --inset: 42px;
  --stroke: rgba(196, 255, 220, 0.1);
  --speed: 42s;
  --glow: 0.34;
  animation-direction: reverse;
}

.loading-palace {
  --inset: 76px;
  --stroke: rgba(58, 240, 132, 0.16);
  --speed: 18s;
  --glow: 0.24;
}

.loading-glyph {
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  width: var(--size);
  height: var(--size);
  place-items: center;
  margin: calc(var(--size) / -2);
  border-radius: 50%;
  color: var(--color);
  background: rgba(2, 10, 7, var(--bg-alpha));
  font-size: var(--font);
  font-weight: 880;
  line-height: 1;
  transform: rotate(var(--a)) translateY(calc(var(--radius) * -1)) rotate(calc(var(--a) * -1));
}

.loading-stems .loading-glyph {
  --size: 26px;
  --font: 13px;
  --radius: calc((min(294px, 78vw) - 34px) / 2);
  --color: rgba(225, 255, 238, 0.34);
  --bg-alpha: 0.18;
}

.loading-stems .loading-glyph.hot {
  color: rgba(238, 255, 247, 0.82);
  background: rgba(8, 38, 23, 0.58);
  box-shadow: inset 0 0 0 1px rgba(58, 240, 132, 0.16);
}

.loading-branches .loading-glyph {
  --size: 22px;
  --font: 11px;
  --radius: calc((min(294px, 78vw) - 94px) / 2);
  --color: rgba(225, 255, 238, 0.24);
  --bg-alpha: 0.1;
}

.loading-pillars {
  position: absolute;
  inset: 0;
}

.loading-pillar {
  position: absolute;
  display: grid;
  width: 66px;
  height: 58px;
  place-items: center;
  padding: 7px 8px;
  border: 1px solid rgba(196, 255, 220, 0.12);
  border-radius: 16px;
  background:
    radial-gradient(circle at 50% 0%, rgba(58, 240, 132, 0.1), transparent 50%),
    rgba(2, 10, 7, 0.82);
  box-shadow: inset 0 1px 0 rgba(196, 255, 220, 0.05);
  text-align: center;
  animation: loading-pillar-breath 4.8s ease-in-out infinite;
}

.loading-pillar small {
  display: block;
  color: rgba(196, 255, 220, 0.56);
  font-size: 10px;
  font-weight: 820;
  line-height: 1;
}

.loading-pillar b {
  display: block;
  margin-top: 5px;
  color: rgba(238, 255, 247, 0.94);
  font-size: 18px;
  font-weight: 950;
  line-height: 1;
}

.loading-pillar.month {
  left: 50%;
  top: 24px;
  transform: translateX(-50%);
}

.loading-pillar.year {
  left: 4px;
  top: 50%;
  transform: translateY(-50%);
}

.loading-pillar.day {
  right: 4px;
  top: 50%;
  border-color: rgba(58, 240, 132, 0.5);
  background:
    radial-gradient(circle at 50% 0%, rgba(58, 240, 132, 0.24), transparent 54%),
    rgba(10, 44, 26, 0.82);
  transform: translateY(-50%);
}

.loading-pillar.day b {
  color: var(--loading-green);
}

.loading-pillar.hour {
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
}

.loading-center {
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  width: 126px;
  height: 126px;
  place-items: center;
  border: 1px solid rgba(58, 240, 132, 0.36);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 38%, rgba(58, 240, 132, 0.26), transparent 56%),
    linear-gradient(180deg, rgba(8, 36, 22, 0.94), rgba(2, 10, 7, 0.96));
  box-shadow:
    inset 0 1px 0 rgba(196, 255, 220, 0.1),
    inset 0 -18px 40px rgba(0, 0, 0, 0.24),
    0 0 54px rgba(58, 240, 132, 0.14);
  transform: translate(-50%, -50%);
  animation: loading-center-breath 3.6s ease-in-out infinite;
}

.loading-center::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px dashed rgba(196, 255, 220, 0.18);
  border-radius: 50%;
}

.loading-center-text {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 6px;
}

.loading-center-text strong {
  color: var(--loading-green);
  font-size: 27px;
  font-weight: 980;
  line-height: 1;
}

.loading-center-text span {
  color: rgba(196, 255, 220, 0.6);
  font-size: 12px;
  font-weight: 820;
}

.loading-phase-strip {
  display: grid;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--loading-line);
  border-radius: 18px;
  background:
    radial-gradient(circle at 50% 0%, rgba(58, 240, 132, 0.08), transparent 52%),
    rgba(3, 17, 10, 0.58);
}

.loading-phase-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 8px;
}

.loading-phase-head small {
  color: var(--loading-faint);
  font-size: 11px;
  font-weight: 760;
  white-space: nowrap;
}

.loading-phase-head strong {
  overflow: hidden;
  color: var(--loading-text);
  font-size: 17px;
  font-weight: 920;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.loading-phase-head b {
  color: var(--loading-green);
  font-size: 20px;
  font-weight: 950;
  line-height: 1;
}

.progress-track {
  overflow: hidden;
  height: 6px;
  border-radius: 999px;
  background: rgba(196, 255, 220, 0.08);
}

.progress-track i {
  display: block;
  width: 58%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--loading-green), rgba(232, 209, 107, 0.92));
  box-shadow: 0 0 16px rgba(58, 240, 132, 0.22);
  transition: width 360ms ease;
  animation: loading-progress-breath 3s ease-in-out infinite;
}

.status-list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 5px;
}

.status-list span {
  min-width: 0;
  color: rgba(194, 220, 207, 0.38);
  font-size: 10px;
  font-weight: 760;
  line-height: 1.2;
  text-align: center;
}

.status-list span.done,
.status-list span.active {
  color: rgba(238, 255, 247, 0.82);
}

.status-list span.active {
  color: var(--loading-green);
}

.loading-report-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  color: var(--loading-faint);
  font-size: 13px;
  font-weight: 760;
}

.loading-report-meta strong {
  color: var(--loading-text);
  font-size: 16px;
  font-weight: 900;
}

.loading-live {
  display: inline-flex;
  height: 24px;
  align-items: center;
  padding: 0 9px;
  border: 1px solid rgba(232, 209, 107, 0.24);
  border-radius: 999px;
  color: rgba(255, 233, 150, 0.96);
  background: rgba(232, 209, 107, 0.08);
  font-size: 11px;
  font-weight: 860;
  white-space: nowrap;
}

.loading-hint {
  margin: -1px 0 0;
  color: var(--loading-muted);
  font-size: 13px;
  font-weight: 730;
  line-height: 1.45;
  text-align: center;
}

.loading-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.loading-actions button {
  min-height: 50px;
}

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

@keyframes loading-pillar-breath {
  0%, 100% {
    filter: brightness(0.9);
  }
  50% {
    filter: brightness(1.06);
  }
}

@keyframes loading-center-breath {
  0%, 100% {
    transform: translate(-50%, -50%) scale(0.985);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.025);
  }
}

@keyframes loading-progress-breath {
  0%, 100% {
    filter: brightness(0.92);
  }
  50% {
    filter: brightness(1.08);
  }
}

@media (max-width: 390px) {
  .loading-v8 {
    gap: 13px;
  }

  .loading-bazi-loader {
    width: min(286px, 78vw);
  }

  .loading-stems .loading-glyph {
    --radius: calc((min(286px, 78vw) - 34px) / 2);
  }

  .loading-branches .loading-glyph {
    --radius: calc((min(286px, 78vw) - 94px) / 2);
  }

  .loading-pillar {
    width: 62px;
    height: 54px;
    padding: 6px 7px;
  }

  .loading-pillar.month {
    top: 22px;
  }

  .loading-pillar.year {
    left: 3px;
  }

  .loading-pillar.day {
    right: 3px;
  }

  .loading-pillar.hour {
    bottom: 22px;
  }

  .loading-pillar b {
    font-size: 17px;
  }

  .loading-center {
    width: 120px;
    height: 120px;
  }

  .loading-center-text strong {
    font-size: 26px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .loading-orbit,
  .loading-pillar,
  .loading-center,
  .progress-track i {
    animation: none !important;
  }
}

.report-layout {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

.report-side,
.report-document {
  padding: 24px;
}

.report-side {
  position: sticky;
  top: 96px;
  display: grid;
  gap: 18px;
}

.back-link {
  justify-self: start;
}

.report-meta span,
.status-pill {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  color: var(--accent-deep);
  background: #edf5ef;
  font-size: 12px;
  font-weight: 850;
}

.report-meta h2 {
  margin: 16px 0 8px;
  font-size: 30px;
}

.report-meta p {
  color: var(--muted);
  line-height: 1.6;
}

.report-chapters {
  display: grid;
  gap: 8px;
  max-height: calc(100dvh - 360px);
  overflow: auto;
  padding: 14px;
  border-radius: 16px;
  background: #edf5ef;
}

.report-chapters b {
  margin-bottom: 4px;
  color: var(--deep);
  font-size: 13px;
}

.report-chapters a {
  min-height: 34px;
  display: flex;
  align-items: center;
  padding: 0 10px;
  border-radius: 999px;
  color: #4d5d57;
  text-decoration: none;
  font-size: 13px;
  font-weight: 750;
}

.report-chapters a:hover {
  color: var(--accent-deep);
  background: rgba(255, 250, 241, 0.8);
}

.report-document {
  background: #fffdf8;
}

.report-document.doc-reader {
  padding: 36px;
  background: #fffdf8;
}

.doc-reader {
  color: #22201d;
}

.doc-cover {
  padding-bottom: 28px;
  border-bottom: 2px solid var(--deep);
}

.doc-cover h1 {
  max-width: 880px;
  margin-bottom: 14px;
  font-size: clamp(34px, 4.6vw, 56px);
  line-height: 1.12;
}

.doc-meta-line,
.doc-warning {
  max-width: 840px;
  color: var(--muted);
  line-height: 1.85;
}

.doc-warning {
  margin-top: 14px;
  padding: 14px 16px;
  border-left: 4px solid var(--accent);
  background: #edf5ef;
}

.doc-note {
  display: grid;
  gap: 8px;
  max-width: 880px;
  margin: 16px 0 0;
  padding: 16px 18px;
  border-left: 4px solid var(--accent);
  background: #edf5ef;
}

.doc-note p {
  margin: 0;
  color: #4f4a44;
  line-height: 1.85;
}

.doc-section {
  padding: 32px 0;
  border-bottom: 1px solid var(--line);
}

.doc-section:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.doc-section h2 {
  margin: 0 0 18px;
  font-size: 28px;
  line-height: 1.25;
}

.doc-section h3 {
  margin: 26px 0 10px;
  color: var(--deep);
  font-size: 20px;
  line-height: 1.35;
}

.doc-section p {
  max-width: 840px;
  margin-bottom: 14px;
  color: #4f4a44;
  font-size: 16px;
  line-height: 1.95;
}

.doc-section strong {
  color: var(--deep);
}

.doc-emphasis {
  padding: 16px 18px;
  border-left: 4px solid var(--deep);
  background: rgba(237, 245, 239, 0.72);
  color: var(--deep) !important;
  font-weight: 750;
}

.doc-table {
  display: grid;
  gap: 12px;
  overflow: visible;
  margin: 16px 0 20px;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.doc-table.two-col,
.doc-table.five-col {
  grid-template-columns: 1fr;
}

.doc-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 7px;
  padding: 15px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 250, 241, 0.8);
}

.doc-row:nth-child(2n),
.doc-table:not(.two-col):not(.five-col) .doc-row {
  border-right: 1px solid var(--line);
}

.doc-row.wide-row {
  grid-column: auto;
}

.doc-row b {
  color: var(--deep);
  font-size: 17px;
  line-height: 1.6;
}

.doc-row span {
  color: #4f4a44;
  font-size: 15px;
  line-height: 1.75;
}

.doc-row span strong {
  color: #2b3833;
  font-weight: 850;
}

.doc-list {
  display: grid;
  gap: 8px;
  margin: 14px 0 20px;
  max-width: 680px;
  padding-left: 22px;
  color: #4f4a44;
  line-height: 1.7;
}

.doc-list span,
.doc-list li {
  padding: 10px 12px;
  border-left: 3px solid var(--accent);
  background: rgba(245, 238, 226, 0.62);
  color: #4f4a44;
  line-height: 1.6;
}

.doc-list li::marker {
  color: var(--accent-deep);
  font-weight: 850;
}

.doc-code {
  overflow: auto;
  max-width: 100%;
  margin: 16px 0 22px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #f4efe7;
  color: #2b3833;
  line-height: 1.7;
}

.doc-section code,
.doc-cover code {
  padding: 2px 6px;
  border-radius: 6px;
  background: #f4efe7;
  color: var(--deep);
  font-size: 0.94em;
}

.report-loading {
  display: grid;
  gap: 8px;
  min-height: 260px;
  place-items: center;
  padding: 28px;
  color: var(--muted);
  text-align: center;
  line-height: 1.8;
}

.report-loading::before {
  content: "";
  width: 34px;
  height: 34px;
  border: 3px solid #e5ded2;
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
}

.report-loading.error::before {
  display: none;
}

.report-loading strong,
.report-loading span {
  display: block;
}

.report-document.doc-reader .doc-cover h1 {
  max-width: 880px;
  margin-bottom: 14px;
  font-size: clamp(34px, 4.6vw, 56px);
  line-height: 1.12;
}

.report-document.doc-reader .doc-section h2 {
  margin: 0 0 18px;
  font-size: 28px;
  line-height: 1.25;
}

.report-document.doc-reader .doc-section h3 {
  margin: 26px 0 10px;
  color: var(--deep);
  font-size: 20px;
  line-height: 1.35;
}

.report-document.doc-reader .doc-section p {
  max-width: 840px;
  margin-bottom: 14px;
  color: #4f4a44;
  font-size: 16px;
  line-height: 1.95;
}

.report-document h1 {
  font-size: clamp(34px, 5vw, 60px);
}

.report-document h2 {
  margin: 30px 0 10px;
  font-size: 24px;
}

.report-hero-block {
  padding-bottom: 26px;
  border-bottom: 1px solid var(--line);
}

.report-lead {
  max-width: 760px;
  font-size: 17px;
}

.verdict-card {
  display: grid;
  gap: 10px;
  margin-top: 22px;
  padding: 22px;
  border-radius: 18px;
  color: #fff;
  background: var(--deep);
}

.verdict-card span {
  color: rgba(255, 255, 255, 0.68);
  font-size: 13px;
  font-weight: 800;
}

.verdict-card strong {
  max-width: 800px;
  font-size: clamp(22px, 3vw, 34px);
  line-height: 1.28;
}

.report-section {
  padding: 30px 0;
  border-bottom: 1px solid var(--line);
}

.report-section:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.section-title {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  margin-bottom: 18px;
}

.section-title > span {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: var(--accent);
  font-weight: 900;
}

.section-title h2 {
  margin: 0 0 6px;
}

.section-title p {
  margin: 0;
}

.info-grid,
.pillar-grid,
.insight-table,
.split-panel,
.match-list,
.score-matrix {
  display: grid;
  gap: 12px;
}

.info-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.info-grid div,
.pillar-grid div,
.insight-table div,
.split-panel > div,
.match-list div,
.score-matrix div,
.final-note {
  border: 1px solid rgba(37, 51, 46, 0.12);
  border-radius: 16px;
  background: rgba(245, 238, 226, 0.48);
}

.info-grid div {
  display: grid;
  gap: 8px;
  min-height: 86px;
  padding: 14px;
}

.info-grid span,
.pillar-grid small,
.score-matrix span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.info-grid b {
  color: var(--deep);
  font-size: 15px;
  line-height: 1.45;
}

.pillar-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.pillar-grid div {
  display: grid;
  gap: 8px;
  min-height: 138px;
  padding: 18px;
  background: #edf5ef;
}

.pillar-grid strong {
  color: var(--deep);
  font-size: 34px;
  line-height: 1;
}

.pillar-grid em {
  color: var(--muted);
  font-style: normal;
  font-size: 13px;
}

.analysis-copy {
  margin-top: 18px;
  padding: 2px 0 0;
}

.analysis-copy p {
  max-width: 780px;
}

.element-bars {
  display: grid;
  gap: 12px;
  margin-bottom: 18px;
}

.element-bars div {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) minmax(180px, 0.9fr);
  gap: 12px;
  align-items: center;
}

.element-bars span {
  color: var(--deep);
  font-weight: 900;
}

.element-bars i {
  position: relative;
  display: block;
  overflow: hidden;
  height: 12px;
  border-radius: 999px;
  background: #e5ded2;
}

.element-bars i::after {
  content: "";
  display: block;
  width: var(--v);
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
}

.element-bars b {
  color: var(--muted);
  font-size: 13px;
}

.insight-table {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.insight-table div {
  padding: 16px;
}

.insight-table b,
.match-list b,
.final-note b {
  display: block;
  margin-bottom: 8px;
  color: var(--deep);
}

.insight-table span {
  color: var(--muted);
  line-height: 1.65;
}

.split-panel {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.split-panel > div {
  padding: 18px;
}

.split-panel h3 {
  margin-bottom: 10px;
  font-size: 22px;
}

.split-panel ul {
  display: grid;
  gap: 8px;
  margin: 16px 0 0;
  padding-left: 20px;
  color: var(--muted);
  line-height: 1.6;
}

.match-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.match-list div {
  position: relative;
  min-height: 136px;
  padding: 18px 84px 18px 18px;
}

.match-list span {
  position: absolute;
  top: 18px;
  right: 18px;
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: var(--accent);
  font-weight: 900;
}

.match-list p {
  margin: 0;
}

.score-matrix {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.score-matrix div {
  display: grid;
  gap: 8px;
  min-height: 126px;
  padding: 16px;
}

.score-matrix b {
  color: var(--accent-deep);
  font-size: 34px;
  line-height: 1;
}

.score-matrix small {
  color: var(--muted);
  font-size: 13px;
}

.final-note {
  margin-top: 18px;
  padding: 18px;
  background: #edf5ef;
}

.final-note p {
  margin: 0;
}

.score-table {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 18px 0;
}

.score-table div {
  padding: 16px;
  border-radius: 16px;
  background: #edf5ef;
}

.score-table b,
.score-table span {
  display: block;
}

.score-table span {
  margin-top: 12px;
  color: var(--accent-deep);
  font-size: 30px;
  font-weight: 850;
}

.muted {
  color: var(--muted);
}

.reports-toolbar {
  gap: 14px;
  max-width: 680px;
  margin-bottom: 20px;
  padding: 16px;
}

.reports-toolbar label {
  flex: 1;
}

.report-list {
  display: grid;
  gap: 10px;
}

.report-row,
.profile-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
}

.report-row h3,
.profile-row h3 {
  margin: 0;
  font-size: 17px;
  line-height: 1.25;
}

.empty-row {
  border-style: dashed;
}

.report-row p,
.profile-row p,
.profile-row small {
  margin: 0;
  color: var(--muted);
}

.report-row-main {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.report-row-title {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.report-row-title h3 {
  min-width: 0;
}

.report-row p {
  font-size: 13px;
  line-height: 1.45;
}

.profile-list {
  display: grid;
  gap: 10px;
}

.profiles-view {
  padding-top: 24px;
}

.profile-row {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  padding: 16px;
  cursor: pointer;
}

.profile-row:hover {
  border-color: var(--line-strong);
  transform: translateY(-1px);
}

.profile-main h3 {
  margin: 0 0 10px;
}

.profile-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.profile-meta span {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0 10px;
  color: var(--muted);
  background: rgba(53, 255, 141, 0.06);
  font-size: 12px;
  font-weight: 800;
}

.profile-detail {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.profile-detail div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.profile-detail b {
  color: var(--muted);
  font-size: 12px;
}

.profile-detail span {
  color: var(--ink);
  line-height: 1.5;
}

.profile-detail-view {
  padding-top: 24px;
}

.profile-detail-page {
  margin-top: 16px;
}

.profile-detail-card {
  display: grid;
  gap: 22px;
  padding: 22px;
}

.profile-detail-card header h2 {
  margin: 12px 0 8px;
  font-size: clamp(30px, 5vw, 48px);
}

.profile-detail-card header p {
  margin: 0;
  color: var(--muted);
}

.profile-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.profile-detail-grid div,
.profile-related-report {
  display: grid;
  gap: 6px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px;
  background: rgba(53, 255, 141, 0.06);
}

.profile-detail-grid b,
.profile-related h3 {
  color: var(--muted);
}

.profile-detail-grid span {
  color: var(--ink);
  line-height: 1.55;
}

.profile-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.profile-detail-actions button {
  min-width: 150px;
}

.profile-delete-button {
  min-height: 44px;
  border: 1px solid rgba(178, 64, 50, 0.55);
  border-radius: 10px;
  color: var(--danger);
  background: transparent;
  font-weight: 800;
  padding: 0 18px;
}

.page-disclaimer {
  margin: 18px auto 0;
  padding: 0 20px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
  text-align: center;
}

.home-disclaimer {
  max-width: 720px;
}

.report-disclaimer {
  max-width: 960px;
  margin-bottom: 24px;
}

.profile-related {
  display: grid;
  gap: 12px;
}

.profile-related h3 {
  margin: 0;
  font-size: 18px;
}

.profile-related > div {
  display: grid;
  gap: 10px;
}

.profile-related-report {
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
}

.profile-related-report.empty {
  display: block;
  color: var(--muted);
}

.profile-row small {
  display: block;
  margin-top: 8px;
  font-size: 12px;
}

.account-summary {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr) auto;
  gap: 18px;
  align-items: center;
}

.account-summary article {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none !important;
}

.account-summary article + article {
  padding-left: 18px;
  border-left: 1px solid rgba(53, 255, 141, 0.14);
}

.account-summary article:last-child {
  padding-left: 0;
  border-left: 0;
  justify-items: end;
}

.mine-account-card {
  display: grid;
  margin-bottom: 14px;
  padding: 16px 18px;
  border-color: rgba(53, 255, 141, 0.18) !important;
  border-radius: 18px !important;
  background:
    radial-gradient(circle at 8% 0%, rgba(53, 255, 141, 0.1), transparent 34%),
    linear-gradient(180deg, rgba(5, 18, 13, 0.96), rgba(2, 9, 7, 0.94)) !important;
  box-shadow:
    inset 0 1px 0 rgba(184, 255, 213, 0.08),
    0 16px 46px rgba(0, 0, 0, 0.38),
    0 0 22px rgba(53, 255, 141, 0.06) !important;
}

.mine-account-card header h1 {
  margin-bottom: 10px;
  font-size: clamp(32px, 5vw, 52px);
}

.mine-account-card header p {
  margin: 0;
  color: var(--muted);
  line-height: 1.7;
}

.account-summary span {
  color: rgba(184, 255, 213, 0.58);
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}

.account-summary strong {
  color: #eafff4;
  overflow-wrap: anywhere;
  font-size: 16px;
  line-height: 1.25;
}

.account-state {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 30px;
  border: 1px solid rgba(53, 255, 141, 0.2);
  border-radius: 999px;
  padding: 0 11px;
  background: rgba(53, 255, 141, 0.08);
  font-size: 14px !important;
}

.account-state::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 14px rgba(53, 255, 141, 0.55);
}

.agreement-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  line-height: 1.5;
}

.agreement-row input {
  width: 18px;
  min-height: 18px;
  margin-top: 2px;
  accent-color: var(--accent);
}

.draft-note {
  display: grid;
  gap: 6px;
  padding: 14px 16px;
}

.draft-note span {
  color: var(--ink);
  font-size: 14px;
  font-weight: 850;
}

.draft-note small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
}

.row-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.text-action {
  min-height: 30px;
  border: 0;
  border-radius: 999px;
  padding: 0 4px;
  color: rgba(184, 255, 213, 0.68);
  background: transparent;
  font-size: 13px;
  font-weight: 800;
}

.text-action:hover {
  color: var(--accent);
}

.status-pill.processing {
  color: var(--warning);
  background: #fff0d8;
}

.status-pill.failed {
  color: var(--danger);
  background: #ffe9e5;
}

.bottom-tabs {
  position: fixed;
  left: 50%;
  bottom: 18px;
  z-index: 40;
  transform: translateX(-50%);
  width: min(420px, calc(100% - 32px));
  padding: 8px;
  border: 1px solid rgba(37, 51, 46, 0.14);
  border-radius: 999px;
  background: rgba(255, 250, 241, 0.9);
  box-shadow: 0 18px 52px rgba(37, 51, 46, 0.16);
  backdrop-filter: blur(18px);
}

.tab-button {
  flex: 1;
  min-height: 48px;
  border: 0;
  border-radius: 999px;
  color: var(--muted);
  background: transparent;
  font-weight: 850;
}

.tab-button.active {
  color: #fff;
  background: var(--deep);
}

.toast {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 18px);
  left: 50%;
  z-index: 50;
  width: max-content;
  max-width: min(360px, calc(100% - 40px));
  padding: 14px 16px;
  border: 1px solid rgba(37, 51, 46, 0.14);
  border-radius: 16px;
  color: #fff;
  background: var(--deep);
  box-shadow: var(--shadow);
  opacity: 0;
  transform: translate(-50%, -10px);
  pointer-events: none;
  transition:
    opacity 180ms ease,
    transform 180ms ease;
}

.toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

@media (max-width: 860px) {
  .site-shell {
    width: min(100% - 24px, 720px);
  }

  .topbar {
    align-items: flex-start;
  }

  .nav-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .hero,
  .report-layout,
  .product-logic,
  .login-layout,
  .workspace-heading,
  .guide-card,
  .profile-row {
    grid-template-columns: 1fr;
  }

  .hero {
    gap: 24px;
    min-height: auto;
  }

  .hero-panel {
    min-height: 470px;
  }

  .paper-card,
  .flow-strip {
    margin-left: 0;
  }

  .field-row,
  .location-grid,
  .profile-detail-grid,
  .profile-detail,
  .score-table,
  .info-grid,
  .pillar-grid,
  .insight-table,
  .split-panel,
  .match-list,
  .score-matrix {
    grid-template-columns: 1fr;
  }

  .report-side {
    position: static;
  }

  .report-chapters {
    display: none;
  }

  .profile-row .row-actions {
    justify-content: flex-start;
  }

  .profile-related-report {
    grid-template-columns: 1fr;
  }

  .account-summary {
    grid-template-columns: 1fr auto;
    gap: 14px;
  }

  .account-summary article + article {
    padding-left: 0;
    border-left: 0;
  }

  .account-summary article:nth-child(2) {
    grid-column: 1;
  }

  .account-summary article:last-child {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
  }
}

@media (max-width: 560px) {
  .topbar {
    position: static;
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .brand small {
    display: none;
  }

  .nav-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .nav-actions button {
    min-width: 126px;
    padding: 0 12px;
  }

  h1,
  .page-heading h1,
  .report-document h1,
  .guide-card h1 {
    font-size: 36px;
    word-break: normal;
  }

  .guide-card h1 {
    font-size: 32px;
    line-height: 1.14;
  }

  .guide-card p {
    font-size: 15px;
    line-height: 1.7;
  }

  .view {
    padding: 32px 0 54px;
  }

  .hero-panel {
    min-height: 430px;
  }

  .paper-card,
  .form-card,
  .report-side,
  .report-document,
  .guide-card {
    padding: 20px;
  }

  .report-document.doc-reader {
    padding: 22px 18px;
  }

  .report-document.doc-reader .doc-cover h1 {
    font-size: 30px;
    line-height: 1.16;
  }

  .report-document.doc-reader .doc-section h2 {
    font-size: 24px;
  }

  .report-document.doc-reader .doc-section h3 {
    font-size: 18px;
  }

  .report-document.doc-reader .doc-section p,
  .doc-row span {
    font-size: 15px;
    line-height: 1.82;
  }

  .doc-row b {
    font-size: 16px;
  }

  .section-title {
    grid-template-columns: 1fr;
  }

  .element-bars div {
    grid-template-columns: 32px minmax(0, 1fr);
  }

  .element-bars b {
    grid-column: 1 / -1;
  }

  .flow-strip {
    grid-template-columns: repeat(2, 1fr);
    border-radius: 24px;
  }

  .reports-toolbar,
  .report-row {
    grid-template-columns: 1fr;
  }

  .reports-toolbar {
    display: grid;
  }

  .row-actions {
    justify-content: stretch;
  }

  .row-actions button {
    flex: 1;
  }
}

/* Final Web3 theme overrides */
body {
  color: var(--ink);
  background:
    radial-gradient(circle at 18% 12%, rgba(53, 255, 141, 0.18), transparent 28%),
    radial-gradient(circle at 84% 6%, rgba(46, 150, 255, 0.1), transparent 24%),
    linear-gradient(150deg, #020706 0%, #07120e 48%, #020504 100%);
}

.topbar {
  background: linear-gradient(to bottom, rgba(2, 7, 6, 0.96), rgba(2, 7, 6, 0.7));
  border-bottom: 1px solid rgba(53, 255, 141, 0.12);
}

.brand,
h1,
h2,
h3,
.paper-card h2,
.doc-row b,
.report-meta h2,
.report-chapters b,
.guide-status strong,
.uid-card strong {
  color: var(--ink);
}

.brand-mark,
.primary,
.tab-button.active,
.flow-strip span:nth-child(3),
.segmented input:checked + span,
.report-meta span,
.status-pill,
.section-title > span,
.match-list span {
  color: #03100a;
  background: var(--accent);
  border-color: var(--accent);
}

.brand-mark,
.primary {
  box-shadow: 0 0 28px rgba(53, 255, 141, 0.26);
}

.ghost,
.back-link,
.nav-actions button {
  color: var(--accent-deep);
  background: rgba(7, 18, 14, 0.72);
  border-color: var(--line);
}

.primary,
.nav-actions button.primary {
  color: #03100a;
  background: var(--accent);
  border-color: var(--accent);
}

.ghost:hover,
.back-link:hover,
.nav-actions button:hover,
.primary:hover {
  color: #03100a;
  background: #8cffbd;
  border-color: #8cffbd;
}

.paper-card,
.product-logic article,
.form-card,
.login-card,
.report-document,
.report-document.doc-reader,
.report-side,
.reports-toolbar,
.report-row,
.guide-card,
.uid-card,
.guide-status {
  border-color: var(--line);
  background: linear-gradient(180deg, rgba(9, 25, 19, 0.9), rgba(5, 13, 10, 0.9));
  box-shadow: var(--shadow);
}

.doc-reader,
.report-document.doc-reader {
  color: var(--ink);
  background-color: rgba(4, 10, 8, 0.96);
}

.paper-card {
  background:
    linear-gradient(135deg, rgba(53, 255, 141, 0.08), transparent 36%),
    linear-gradient(180deg, rgba(9, 25, 19, 0.94), rgba(5, 13, 10, 0.94));
}

.hero-panel::before {
  border: 1px solid rgba(53, 255, 141, 0.15);
  background:
    radial-gradient(circle at 30% 34%, rgba(53, 255, 141, 0.16), transparent 24%),
    repeating-linear-gradient(90deg, rgba(53, 255, 141, 0.08) 0 1px, transparent 1px 34px),
    rgba(4, 13, 10, 0.64);
  box-shadow: inset 0 0 38px rgba(53, 255, 141, 0.06);
}

.score-ring {
  background:
    radial-gradient(circle, var(--panel-solid) 0 54%, transparent 55%),
    conic-gradient(var(--accent) 0 84%, rgba(53, 255, 141, 0.12) 84% 100%);
  box-shadow: 0 0 34px rgba(53, 255, 141, 0.14);
}

.score-ring span,
.eyebrow,
.step-index,
.paper-top b,
.guide-status small,
.picker-field::after,
.report-chapters a:hover,
.score-matrix b {
  color: var(--accent);
}

.paper-lines i,
.progress-track {
  background: rgba(53, 255, 141, 0.14);
}

.mini-grid span,
.flow-strip,
.flow-strip span,
.backend-preview,
.report-chapters,
.doc-note,
.doc-warning,
.final-note,
.score-table div,
.status-item.done,
.pillar-grid div {
  color: var(--accent-deep);
  background: rgba(15, 39, 29, 0.76);
}

input,
select,
.picker-field,
.segmented {
  color: var(--ink);
  border-color: var(--line);
  background: rgba(2, 9, 7, 0.9);
}

input::placeholder {
  color: #647d71;
}

input:focus,
select:focus,
.picker-field:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(53, 255, 141, 0.15), 0 0 26px rgba(53, 255, 141, 0.12);
}

.hero-lede,
.page-heading p,
.report-document p,
.form-card,
.product-logic p,
.workspace-heading p,
.guide-card p,
.report-meta p,
.report-row p,
.small-note,
.brand small,
label,
.segmented span,
.paper-top,
.status-item,
.report-chapters a,
.info-grid span,
.pillar-grid small,
.score-matrix span,
.element-bars b,
.split-panel ul,
.score-matrix small {
  color: var(--muted);
}

.orbital-loader {
  border-color: var(--line);
  background: radial-gradient(circle, rgba(53, 255, 141, 0.08), rgba(2, 9, 7, 0.9));
}

.orbital-loader::after,
.progress-track i {
  background: var(--accent);
  box-shadow: 0 0 42px rgba(53, 255, 141, 0.4);
}

.status-item,
.doc-row,
.info-grid div,
.pillar-grid div,
.insight-table div,
.split-panel > div,
.match-list div,
.score-matrix div,
.final-note,
.score-table div {
  border-color: var(--line);
  background: rgba(8, 23, 17, 0.84);
}

.doc-cover {
  border-bottom-color: var(--line-strong);
}

.doc-section {
  border-bottom-color: rgba(86, 255, 163, 0.16);
}

.doc-section p,
.doc-note p,
.doc-row span,
.doc-list,
.doc-list span,
.doc-list li,
.insight-table span {
  color: #bdd2c8;
}

.doc-section strong,
.doc-row span strong {
  color: var(--accent-deep);
}

.doc-emphasis {
  color: var(--accent-deep) !important;
  border-left-color: var(--accent);
  background: rgba(53, 255, 141, 0.08);
}

.doc-list span,
.doc-list li,
.doc-code,
.doc-section code,
.doc-cover code {
  background: rgba(53, 255, 141, 0.08);
}

.doc-code {
  color: #d9ffea;
  border-color: var(--line);
}

.status-pill.processing {
  color: #161000;
  background: var(--warning);
}

.status-pill.failed {
  color: #21070b;
  background: var(--danger);
}

.bottom-tabs {
  border-color: var(--line);
  background: rgba(4, 13, 10, 0.88);
  box-shadow: 0 18px 70px rgba(0, 0, 0, 0.58), 0 0 28px rgba(53, 255, 141, 0.1);
}

.toast,
.verdict-card {
  color: #03100a;
  background: var(--accent);
}

/* Typography contrast pass */
:root {
  --ink: #f2f5f1;
  --muted: #a0aaa4;
  --body: #d5ddd8;
  --body-soft: #b8c4bd;
  --heading: #f7faf6;
  --quote-text: #f4fbf6;
  --accent: #44e981;
  --accent-deep: #9df7bd;
  --line: rgba(68, 233, 129, 0.24);
  --line-strong: rgba(68, 233, 129, 0.5);
}

body {
  color: var(--body);
}

.brand,
h1,
h2,
h3,
.paper-card h2,
.doc-row b,
.report-meta h2,
.report-chapters b,
.guide-status strong,
.uid-card strong,
.doc-cover h1,
.doc-section h2,
.doc-section h3 {
  color: var(--heading);
}

.hero-lede,
.page-heading p,
.form-card,
.product-logic p,
.workspace-heading p,
.guide-card p,
.report-meta p,
.report-row p,
.small-note,
.brand small,
label,
.segmented span,
.paper-top,
.status-item,
.report-chapters a,
.info-grid span,
.pillar-grid small,
.score-matrix span,
.element-bars b,
.split-panel ul,
.score-matrix small {
  color: var(--muted);
}

.report-document p,
.report-document.doc-reader .doc-section p,
.doc-section p,
.doc-note p,
.doc-row span,
.doc-list,
.doc-list span,
.doc-list li,
.insight-table span {
  color: var(--body);
}

.doc-meta-line,
.doc-warning,
.doc-warning p {
  color: var(--body-soft);
}

.eyebrow,
.step-index,
.paper-top b,
.guide-status small,
.picker-field::after,
.report-chapters a:hover,
.score-matrix b,
.score-ring span {
  color: var(--accent);
}

.doc-section strong,
.doc-row span strong {
  color: #d9ffe6;
}

.doc-emphasis {
  color: var(--quote-text) !important;
  border-left: 4px solid var(--accent);
  background:
    linear-gradient(90deg, rgba(68, 233, 129, 0.16), rgba(68, 233, 129, 0.05)),
    rgba(10, 20, 16, 0.96);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.doc-emphasis strong {
  color: #b9ffd1;
}

.doc-note,
.doc-warning {
  color: var(--body);
  border-left-color: rgba(68, 233, 129, 0.72);
  background: rgba(8, 20, 15, 0.92);
}

.doc-row,
.doc-list span,
.doc-list li,
.doc-code,
.doc-section code,
.doc-cover code {
  background: rgba(8, 18, 14, 0.92);
}

.doc-row {
  border-color: rgba(105, 255, 164, 0.18);
}

.ghost,
.back-link,
.nav-actions button {
  color: #c8f7d6;
}

.primary,
.nav-actions button.primary {
  color: #021109;
  background: var(--accent);
  border-color: var(--accent);
}

.report-document.doc-reader .doc-cover h1,
.report-document.doc-reader .doc-section h2 {
  color: var(--heading);
}

.report-document.doc-reader .doc-section h3 {
  color: #b8d6c6;
}

.report-document.doc-reader .doc-section p:not(.doc-emphasis),
.report-document.doc-reader .doc-row span,
.report-document.doc-reader .doc-list li,
.report-document.doc-reader .doc-list span {
  color: var(--body);
}

.report-document.doc-reader .doc-emphasis {
  color: var(--quote-text) !important;
}

/* Minimal cyber hero */
#home-view {
  min-height: calc(100dvh - 74px);
  padding-bottom: 32px;
}

#home-view .hero {
  min-height: calc(100dvh - 118px);
  grid-template-columns: minmax(0, 1.16fr) minmax(430px, 0.84fr);
  gap: 34px;
}

#home-view .hero-copy {
  max-width: 760px;
}

#home-view .eyebrow {
  color: #84f6aa;
  font-size: 12px;
  letter-spacing: 0.12em;
}

#home-view h1 {
  max-width: 680px;
  margin-bottom: 18px;
  color: #f6faf6;
  font-size: clamp(52px, 6.4vw, 78px);
  line-height: 0.98;
}

#home-view .hero-lede {
  max-width: 560px;
  color: #a9b5ae;
  font-size: 18px;
}

#home-view .hero-actions {
  margin-top: 34px;
}

#home-view .hero-actions button {
  min-width: 150px;
}

.signal-panel {
  min-height: 580px;
  place-items: center;
}

.signal-panel::before {
  inset: 26px 18px;
  border-radius: 50%;
  opacity: 0.86;
  transform: none;
}

.signal-field {
  position: relative;
  width: min(78vw, 500px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(68, 233, 129, 0.16), transparent 18%),
    radial-gradient(circle, rgba(68, 233, 129, 0.07), transparent 54%),
    rgba(2, 8, 6, 0.24);
  box-shadow:
    inset 0 0 80px rgba(68, 233, 129, 0.08),
    0 0 80px rgba(68, 233, 129, 0.1);
}

.signal-orbit,
.signal-scan,
.signal-node,
.bagua-ring,
.bagua-mark {
  position: absolute;
  display: block;
  pointer-events: none;
}

.signal-orbit {
  inset: var(--inset);
  border: 1px solid rgba(120, 255, 171, var(--alpha));
  border-radius: 50%;
}

.signal-orbit::before {
  content: "";
  position: absolute;
  top: -4px;
  left: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 18px rgba(68, 233, 129, 0.72);
}

.orbit-one {
  --inset: 18%;
  --alpha: 0.32;
}

.orbit-two {
  --inset: 28%;
  --alpha: 0.22;
}

.orbit-three {
  --inset: 38%;
  --alpha: 0.18;
}

.signal-core {
  position: relative;
  z-index: 2;
  display: grid;
  width: 112px;
  height: 112px;
  place-items: center;
  border: 1px solid rgba(148, 255, 187, 0.52);
  border-radius: 50%;
  color: #06150d;
  background: var(--accent);
  font-size: 42px;
  font-weight: 900;
  box-shadow: 0 0 46px rgba(68, 233, 129, 0.32);
}

.taiji-core {
  overflow: hidden;
  border-color: rgba(220, 255, 232, 0.58);
  background:
    radial-gradient(circle at 50% 25%, #e7fff0 0 7%, transparent 8%),
    radial-gradient(circle at 50% 75%, #06120c 0 7%, transparent 8%),
    linear-gradient(90deg, #e7fff0 0 50%, #07140d 50% 100%);
  box-shadow:
    0 0 46px rgba(68, 233, 129, 0.34),
    inset 0 0 28px rgba(68, 233, 129, 0.16);
}

.taiji-core::before,
.taiji-core::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 50%;
  height: 50%;
  border-radius: 50%;
  transform: translateX(-50%);
}

.taiji-core::before {
  top: 0;
  background: #e7fff0;
}

.taiji-core::after {
  bottom: 0;
  background: #07140d;
}

.taiji-yin,
.taiji-yang {
  position: absolute;
  z-index: 2;
  left: 50%;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  transform: translateX(-50%);
}

.taiji-yin {
  top: 24px;
  background: #07140d;
  box-shadow: 0 0 12px rgba(7, 20, 13, 0.48);
}

.taiji-yang {
  bottom: 24px;
  background: #e7fff0;
  box-shadow: 0 0 12px rgba(231, 255, 240, 0.48);
}

.bagua-ring {
  inset: 5%;
  z-index: 2;
}

.hexagram-cloud {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  pointer-events: none;
}

.hexagram-mark {
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 1px solid rgba(120, 255, 171, 0.14);
  border-radius: 9px;
  color: rgba(226, 255, 235, 0.74);
  background: rgba(5, 17, 11, 0.46);
  font-family:
    "PingFang SC",
    "Hiragino Sans GB",
    "Microsoft YaHei",
    sans-serif;
  font-size: 17px;
  line-height: 1;
  transform: translate(-50%, -50%) rotate(var(--angle)) translateY(calc(var(--radius) * -1)) rotate(var(--reverse-angle));
  box-shadow: inset 0 0 12px rgba(68, 233, 129, 0.04);
  opacity: var(--mark-opacity);
}

.hexagram-ring-0 {
  --radius: 116px;
  --mark-opacity: 0.9;
}

.hexagram-ring-1 {
  --radius: 164px;
  --mark-opacity: 0.72;
}

.hexagram-ring-2 {
  --radius: 210px;
  --mark-opacity: 0.56;
}

.hexagram-ring-3 {
  --radius: 248px;
  --mark-opacity: 0.42;
}

.bagua-mark {
  left: 50%;
  top: 50%;
  display: grid;
  min-width: 46px;
  min-height: 46px;
  place-items: center;
  padding: 5px 7px;
  border: 1px solid rgba(120, 255, 171, 0.22);
  border-radius: 12px;
  color: #d7ffe3;
  background: rgba(5, 17, 11, 0.64);
  font-size: 23px;
  line-height: 1;
  box-shadow: inset 0 0 18px rgba(68, 233, 129, 0.05);
}

.bagua-mark b {
  margin-top: 2px;
  color: #9df7bd;
  font-size: 11px;
  font-weight: 800;
}

.bagua-qian {
  transform: translate(-50%, -50%) rotate(0deg) translateY(-218px);
}

.bagua-dui {
  transform: translate(-50%, -50%) rotate(45deg) translateY(-218px) rotate(-45deg);
}

.bagua-li {
  transform: translate(-50%, -50%) rotate(90deg) translateY(-218px) rotate(-90deg);
}

.bagua-zhen {
  transform: translate(-50%, -50%) rotate(135deg) translateY(-218px) rotate(-135deg);
}

.bagua-xun {
  transform: translate(-50%, -50%) rotate(180deg) translateY(-218px) rotate(-180deg);
}

.bagua-kan {
  transform: translate(-50%, -50%) rotate(225deg) translateY(-218px) rotate(-225deg);
}

.bagua-gen {
  transform: translate(-50%, -50%) rotate(270deg) translateY(-218px) rotate(-270deg);
}

.bagua-kun {
  transform: translate(-50%, -50%) rotate(315deg) translateY(-218px) rotate(-315deg);
}

.signal-scan {
  inset: 7%;
  border-radius: 50%;
  background: conic-gradient(from 12deg, transparent 0 72%, rgba(68, 233, 129, 0.32) 80%, transparent 90% 100%);
  mask-image: radial-gradient(circle, transparent 0 34%, black 35% 66%, transparent 67%);
}

.signal-node {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #d8ffe5;
  box-shadow: 0 0 22px rgba(68, 233, 129, 0.8);
}

.node-one {
  top: 17%;
  right: 28%;
}

.node-two {
  left: 18%;
  bottom: 31%;
}

.node-three {
  right: 18%;
  bottom: 22%;
}

@media (prefers-reduced-motion: no-preference) {
  .signal-scan {
    animation: signalSpin 5.8s linear infinite;
  }

  .orbit-one {
    animation: signalSpin 12s linear infinite;
  }

  .orbit-two {
    animation: signalSpin 16s linear infinite reverse;
  }

  .orbit-three {
    animation: signalPulse 4s ease-in-out infinite;
  }

  .signal-core {
    animation: signalBreath 3.8s ease-in-out infinite;
  }

  .taiji-core {
    animation: taijiFloat 6s ease-in-out infinite;
  }

  .bagua-ring {
    animation: baguaDrift 18s linear infinite;
  }

  .bagua-mark {
    animation: baguaGlow 3.6s ease-in-out infinite;
  }

  .hexagram-cloud {
    animation: hexagramDrift 34s linear infinite;
  }

  .hexagram-mark {
    animation: hexagramPulse 4.8s ease-in-out infinite;
    animation-delay: var(--delay);
  }

  .bagua-dui,
  .bagua-kan {
    animation-delay: 0.4s;
  }

  .bagua-li,
  .bagua-gen {
    animation-delay: 0.9s;
  }

  .bagua-zhen,
  .bagua-kun {
    animation-delay: 1.3s;
  }

  .signal-node {
    animation: signalBlink 2.4s ease-in-out infinite;
  }

  .node-two {
    animation-delay: 0.6s;
  }

  .node-three {
    animation-delay: 1.1s;
  }
}

@keyframes signalSpin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes signalPulse {
  0%,
  100% {
    opacity: 0.45;
    transform: scale(1);
  }

  50% {
    opacity: 1;
    transform: scale(1.04);
  }
}

@keyframes signalBreath {
  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.045);
  }
}

@keyframes signalBlink {
  0%,
  100% {
    opacity: 0.45;
  }

  45% {
    opacity: 1;
  }
}

@keyframes baguaDrift {
  to {
    transform: rotate(360deg);
  }
}

@keyframes baguaGlow {
  0%,
  100% {
    opacity: 0.62;
    border-color: rgba(120, 255, 171, 0.18);
  }

  45% {
    opacity: 1;
    border-color: rgba(120, 255, 171, 0.58);
    box-shadow:
      inset 0 0 18px rgba(68, 233, 129, 0.08),
      0 0 22px rgba(68, 233, 129, 0.2);
  }
}

@keyframes hexagramDrift {
  to {
    transform: rotate(-360deg);
  }
}

@keyframes hexagramPulse {
  0%,
  100% {
    color: rgba(226, 255, 235, 0.52);
    border-color: rgba(120, 255, 171, 0.1);
    opacity: var(--mark-opacity);
  }

  44% {
    color: rgba(245, 255, 248, 0.96);
    border-color: rgba(120, 255, 171, 0.42);
    opacity: 1;
    box-shadow:
      inset 0 0 12px rgba(68, 233, 129, 0.08),
      0 0 18px rgba(68, 233, 129, 0.16);
  }
}

@keyframes taijiFloat {
  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.035);
  }
}

@media (max-width: 860px) {
  #home-view .hero {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .signal-panel {
    min-height: 420px;
  }

  .signal-field {
    width: min(92vw, 430px);
  }
}

@media (max-width: 560px) {
  #home-view h1 {
    font-size: 46px;
    line-height: 1.04;
  }

  #home-view .hero-lede {
    font-size: 16px;
  }

  .signal-panel {
    min-height: 340px;
  }

  .signal-core {
    width: 86px;
    height: 86px;
    font-size: 32px;
  }

  .bagua-mark {
    min-width: 38px;
    min-height: 38px;
    font-size: 19px;
  }

  .bagua-mark b {
    font-size: 10px;
  }

  .hexagram-mark {
    width: 22px;
    height: 22px;
    border-radius: 7px;
    font-size: 14px;
  }

  .hexagram-ring-0 {
    --radius: 78px;
  }

  .hexagram-ring-1 {
    --radius: 112px;
  }

  .hexagram-ring-2 {
    --radius: 146px;
  }

  .hexagram-ring-3 {
    --radius: 174px;
  }

  .bagua-qian {
    transform: translate(-50%, -50%) rotate(0deg) translateY(-150px);
  }

  .bagua-dui {
    transform: translate(-50%, -50%) rotate(45deg) translateY(-150px) rotate(-45deg);
  }

  .bagua-li {
    transform: translate(-50%, -50%) rotate(90deg) translateY(-150px) rotate(-90deg);
  }

  .bagua-zhen {
    transform: translate(-50%, -50%) rotate(135deg) translateY(-150px) rotate(-135deg);
  }

  .bagua-xun {
    transform: translate(-50%, -50%) rotate(180deg) translateY(-150px) rotate(-180deg);
  }

  .bagua-kan {
    transform: translate(-50%, -50%) rotate(225deg) translateY(-150px) rotate(-225deg);
  }

  .bagua-gen {
    transform: translate(-50%, -50%) rotate(270deg) translateY(-150px) rotate(-270deg);
  }

  .bagua-kun {
    transform: translate(-50%, -50%) rotate(315deg) translateY(-150px) rotate(-315deg);
  }
}

/* Full-page 64 hexagram matrix */
.matrix-home {
  position: relative;
  min-height: calc(100dvh - 74px);
  overflow: hidden;
}

.matrix-home .hero {
  position: relative;
  z-index: 2;
  display: grid;
  min-height: calc(100dvh - 118px);
  align-content: center;
  grid-template-columns: minmax(0, 720px);
}

.matrix-home .hero-copy {
  position: relative;
  max-width: 680px;
  padding: 34px 0;
}

.matrix-home .hero-copy::before {
  content: "";
  position: absolute;
  inset: -38px -34px;
  z-index: -1;
  border-radius: 32px;
  background: radial-gradient(circle at 35% 44%, rgba(1, 8, 5, 0.86), rgba(1, 8, 5, 0.58) 44%, transparent 72%);
  filter: blur(2px);
}

.matrix-home .signal-panel {
  display: none;
}

body[data-route="home"]:not(.is-authed) .guest-nav {
  display: none;
}

.hexagram-matrix {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  grid-template-rows: repeat(8, minmax(72px, 1fr));
  gap: 10px;
  padding: clamp(86px, 10vw, 132px) clamp(18px, 4vw, 56px) clamp(28px, 5vw, 64px);
  pointer-events: none;
  opacity: 0.72;
  mask-image: radial-gradient(circle at 28% 48%, transparent 0 17%, black 38%, black 72%, transparent 100%);
}

.hexagram-matrix::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 0 34%, rgba(68, 233, 129, 0.22) 44%, transparent 54% 100%);
  pointer-events: none;
  transform: translateX(-72%);
}

.hexagram-tile {
  display: grid;
  min-width: 0;
  min-height: 0;
  place-items: center;
  border: 1px solid rgba(105, 255, 164, 0.13);
  border-radius: 12px;
  color: rgba(224, 255, 234, 0.42);
  background:
    radial-gradient(circle at 50% 0%, rgba(68, 233, 129, 0.1), transparent 52%),
    rgba(4, 14, 9, 0.52);
  box-shadow: inset 0 0 18px rgba(68, 233, 129, 0.04);
  font-size: clamp(22px, 2.4vw, 38px);
  line-height: 1;
  transform: translateY(0) scale(0.985);
}

#home-view h1 {
  text-shadow: 0 0 34px rgba(0, 0, 0, 0.74);
}

#home-view .hero-lede {
  text-shadow: 0 0 24px rgba(0, 0, 0, 0.7);
}

@media (prefers-reduced-motion: no-preference) {
  .hexagram-matrix::before {
    animation: matrixSweep 6.8s ease-in-out infinite;
  }

  .hexagram-tile {
    animation: matrixWave 5.6s ease-in-out infinite;
    animation-delay: var(--delay);
  }
}

@keyframes matrixWave {
  0%,
  100% {
    border-color: rgba(105, 255, 164, 0.1);
    color: rgba(224, 255, 234, 0.34);
    opacity: 0.34;
    transform: translateY(0) scale(0.985);
  }

  45% {
    border-color: rgba(105, 255, 164, 0.38);
    color: rgba(248, 255, 250, 0.92);
    opacity: 0.98;
    box-shadow:
      inset 0 0 18px rgba(68, 233, 129, 0.08),
      0 0 22px rgba(68, 233, 129, 0.12);
    transform: translateY(-10px) scale(1.02);
  }
}

@keyframes matrixSweep {
  0% {
    opacity: 0;
    transform: translateX(-72%);
  }

  35% {
    opacity: 0.85;
  }

  65% {
    opacity: 0.65;
  }

  100% {
    opacity: 0;
    transform: translateX(72%);
  }
}

@media (max-width: 860px) {
  .matrix-home .hero {
    min-height: calc(100dvh - 100px);
  }

  .matrix-home .hero-copy {
    padding-top: 18px;
  }

  .matrix-home .hero-copy::before {
    inset: -28px -18px;
    border-radius: 24px;
  }

  .hexagram-matrix {
    grid-template-columns: repeat(8, minmax(44px, 1fr));
    grid-template-rows: repeat(8, minmax(58px, 1fr));
    gap: 7px;
    padding: 112px 12px 26px;
    opacity: 0.58;
  }

  .hexagram-tile {
    border-radius: 10px;
    font-size: 22px;
  }
}

/* BaZi cyber hero */
.bazi-home {
  position: relative;
  min-height: calc(100dvh - 74px);
  overflow: hidden;
}

.bazi-home::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(rgba(113, 255, 166, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(113, 255, 166, 0.025) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: radial-gradient(circle at 62% 44%, black 0 46%, transparent 78%);
  pointer-events: none;
}

.bazi-home::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(112deg, transparent 0 42%, rgba(104, 255, 162, 0.1) 48%, transparent 55% 100%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 5px);
  mix-blend-mode: screen;
  pointer-events: none;
  transform: translateX(-64%);
}

.bazi-home .hero {
  position: relative;
  z-index: 2;
  min-height: calc(100dvh - 118px);
  align-items: center;
}

.bazi-home .hero-copy {
  position: relative;
  z-index: 3;
  max-width: 680px;
}

.bazi-home .hero-copy::before {
  content: "";
  position: absolute;
  inset: -36px -34px;
  z-index: -1;
  border-radius: 30px;
  background: radial-gradient(circle at 32% 44%, rgba(1, 8, 5, 0.88), rgba(1, 8, 5, 0.58) 48%, transparent 74%);
  filter: blur(2px);
}

.bazi-ambient {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.64;
}

.bazi-token {
  position: absolute;
  left: var(--x);
  top: var(--y);
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid rgba(105, 255, 164, 0.12);
  border-radius: 11px;
  color: rgba(214, 255, 228, 0.2);
  background: rgba(3, 14, 9, 0.34);
  box-shadow:
    inset 0 0 14px rgba(68, 233, 129, 0.03),
    0 0 18px rgba(68, 233, 129, 0.04);
  font-size: 17px;
  line-height: 1;
  transform: translate(-50%, -50%) scale(var(--scale));
}

.bazi-panel {
  position: relative;
  display: flex;
  min-height: 610px;
  align-items: center;
  justify-content: center;
}

.bazi-panel::before {
  inset: 18px 10px;
  border-radius: 28px;
  opacity: 0.72;
  transform: none;
}

.bazi-scope {
  position: relative;
  isolation: isolate;
  width: min(100%, 520px);
  min-width: 430px;
  aspect-ratio: 0.92;
  display: grid;
  place-items: center;
  border: 1px solid rgba(105, 255, 164, 0.18);
  border-radius: 30px;
  background:
    radial-gradient(circle at 50% 36%, rgba(68, 233, 129, 0.12), transparent 28%),
    radial-gradient(circle at 72% 72%, rgba(77, 167, 255, 0.08), transparent 34%),
    rgba(2, 10, 7, 0.7);
  box-shadow:
    inset 0 0 80px rgba(68, 233, 129, 0.06),
    0 0 90px rgba(68, 233, 129, 0.1);
  overflow: hidden;
}

.bazi-scope::before,
.bazi-scope::after {
  content: "";
  position: absolute;
  border: 1px solid rgba(105, 255, 164, 0.12);
  border-radius: 50%;
  pointer-events: none;
}

.bazi-scope::before {
  width: 82%;
  aspect-ratio: 1;
}

.bazi-scope::after {
  width: 58%;
  aspect-ratio: 1;
  border-color: rgba(105, 255, 164, 0.18);
}

.time-engine-glow {
  position: absolute;
  inset: -24%;
  z-index: 0;
  border-radius: 50%;
  background:
    conic-gradient(from 0deg, transparent 0 10%, rgba(68, 233, 129, 0.24) 17%, transparent 26% 52%, rgba(77, 167, 255, 0.16) 61%, transparent 72% 100%);
  filter: blur(16px);
  opacity: 0.72;
  pointer-events: none;
}

.scope-scan {
  position: absolute;
  inset: 0;
  z-index: 6;
  background: linear-gradient(90deg, transparent 0 38%, rgba(141, 255, 184, 0.18) 47%, transparent 56% 100%);
  mix-blend-mode: screen;
  pointer-events: none;
  transform: translateX(-70%);
}

.structure-lines {
  position: absolute;
  left: 50%;
  top: 48%;
  z-index: 2;
  width: min(82%, 400px);
  height: 180px;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.structure-lines span {
  position: absolute;
  display: block;
  border-radius: 999px;
}

.line-year,
.line-month,
.line-hour {
  top: 50%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(117, 255, 171, 0.64), transparent);
  box-shadow: 0 0 16px rgba(68, 233, 129, 0.28);
  opacity: 0.72;
}

.line-year {
  left: 0;
  width: 56%;
}

.line-month {
  left: 21%;
  width: 34%;
}

.line-hour {
  right: 0;
  width: 45%;
}

.core-beam {
  left: 61.5%;
  top: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(180deg, transparent, rgba(119, 255, 170, 0.86), transparent);
  box-shadow: 0 0 24px rgba(68, 233, 129, 0.52);
  opacity: 0.82;
}

.stem-track,
.branch-track {
  position: absolute;
  inset: 24px;
  border-radius: 50%;
  pointer-events: none;
}

.branch-track {
  inset: 54px;
}

.stem-track span,
.branch-track span {
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  color: rgba(219, 255, 232, 0.42);
  font-size: 15px;
  line-height: 1;
  transform:
    translate(-50%, -50%)
    rotate(calc(var(--i) * 36deg))
    translateY(-210px)
    rotate(calc(var(--i) * -36deg));
}

.stem-track span:nth-child(1) { --i: 0; }
.stem-track span:nth-child(2) { --i: 1; }
.stem-track span:nth-child(3) { --i: 2; }
.stem-track span:nth-child(4) { --i: 3; }
.stem-track span:nth-child(5) { --i: 4; }
.stem-track span:nth-child(6) { --i: 5; }
.stem-track span:nth-child(7) { --i: 6; }
.stem-track span:nth-child(8) { --i: 7; }
.stem-track span:nth-child(9) { --i: 8; }
.stem-track span:nth-child(10) { --i: 9; }

.branch-track span {
  color: rgba(132, 246, 170, 0.36);
  font-size: 13px;
  transform:
    translate(-50%, -50%)
    rotate(calc(var(--i) * 30deg))
    translateY(-158px)
    rotate(calc(var(--i) * -30deg));
}

.branch-track span:nth-child(1) { --i: 0; }
.branch-track span:nth-child(2) { --i: 1; }
.branch-track span:nth-child(3) { --i: 2; }
.branch-track span:nth-child(4) { --i: 3; }
.branch-track span:nth-child(5) { --i: 4; }
.branch-track span:nth-child(6) { --i: 5; }
.branch-track span:nth-child(7) { --i: 6; }
.branch-track span:nth-child(8) { --i: 7; }
.branch-track span:nth-child(9) { --i: 8; }
.branch-track span:nth-child(10) { --i: 9; }
.branch-track span:nth-child(11) { --i: 10; }
.branch-track span:nth-child(12) { --i: 11; }

.pillar-deck {
  position: relative;
  z-index: 3;
  display: grid;
  width: min(88%, 410px);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.pillar-card {
  position: relative;
  display: grid;
  min-height: 178px;
  place-items: center;
  align-content: center;
  gap: 12px;
  border: 1px solid rgba(105, 255, 164, 0.18);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(22, 51, 34, 0.48), rgba(2, 12, 8, 0.72)),
    rgba(3, 13, 9, 0.8);
  box-shadow: inset 0 0 28px rgba(68, 233, 129, 0.04);
  overflow: hidden;
}

.pillar-card::before {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 12px;
  border: 1px solid rgba(105, 255, 164, 0.08);
  pointer-events: none;
}

.pillar-card::after {
  content: "";
  position: absolute;
  inset: -50% 0 auto;
  height: 48%;
  background: linear-gradient(180deg, transparent, rgba(153, 255, 190, 0.13), transparent);
  pointer-events: none;
  transform: translateY(-120%);
}

.pillar-label {
  color: rgba(157, 247, 189, 0.7);
  font-size: 12px;
  font-weight: 800;
}

.pillar-card strong,
.pillar-card b {
  color: #f1fff5;
  font-size: clamp(36px, 4vw, 48px);
  line-height: 0.9;
}

.pillar-card b {
  color: rgba(199, 236, 211, 0.74);
  font-weight: 700;
}

.pillar-card.day-master {
  border-color: rgba(119, 255, 170, 0.7);
  background:
    radial-gradient(circle at 50% 24%, rgba(119, 255, 170, 0.28), transparent 46%),
    linear-gradient(180deg, rgba(53, 255, 141, 0.18), rgba(2, 12, 8, 0.72));
  box-shadow:
    inset 0 0 34px rgba(68, 233, 129, 0.12),
    0 0 34px rgba(68, 233, 129, 0.18);
}

.pillar-card.day-master::before {
  border-color: rgba(145, 255, 185, 0.32);
  box-shadow:
    inset 0 0 24px rgba(68, 233, 129, 0.14),
    0 0 28px rgba(68, 233, 129, 0.16);
}

.pillar-card.day-master strong {
  color: var(--accent);
  text-shadow: 0 0 24px rgba(68, 233, 129, 0.58);
}

.element-spectrum {
  position: absolute;
  z-index: 4;
  left: 34px;
  right: 34px;
  bottom: 76px;
  display: grid;
  gap: 7px;
}

.element-spectrum span {
  position: relative;
  display: block;
  height: 8px;
  border-radius: 999px;
  background: rgba(215, 255, 230, 0.07);
  overflow: hidden;
}

.element-spectrum span::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--level);
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, var(--element));
  box-shadow: 0 0 18px color-mix(in srgb, var(--element) 48%, transparent);
}

.element-spectrum b {
  position: absolute;
  right: 0;
  top: -5px;
  color: rgba(229, 255, 238, 0.42);
  font-size: 10px;
}

.annual-scan {
  position: absolute;
  z-index: 4;
  left: 34px;
  right: 34px;
  bottom: 28px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border-top: 1px solid rgba(105, 255, 164, 0.16);
  color: rgba(214, 255, 228, 0.52);
  font-size: 11px;
}

.annual-scan::before {
  content: "";
  position: absolute;
  top: -2px;
  left: 0;
  width: 26%;
  height: 3px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 18px rgba(68, 233, 129, 0.7);
}

.annual-scan span {
  padding-top: 10px;
}

.decode-rail {
  position: absolute;
  left: 28px;
  right: 28px;
  top: 22px;
  z-index: 7;
  display: flex;
  justify-content: space-between;
  gap: 18px;
  color: rgba(153, 255, 190, 0.44);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .bazi-home::after {
    animation: homeLightSweep 7.2s ease-in-out infinite;
  }

  .bazi-token {
    animation: baziTokenFloat 6.4s ease-in-out infinite;
    animation-delay: var(--delay);
  }

  .time-engine-glow {
    animation: engineOrbit 18s linear infinite;
  }

  .scope-scan {
    animation: scopeCurtainScan 4.2s ease-in-out infinite;
  }

  .structure-lines span {
    animation: structurePulse 3.4s ease-in-out infinite;
  }

  .stem-track {
    animation: signalSpin 28s linear infinite;
  }

  .branch-track {
    animation: signalSpin 36s linear infinite reverse;
  }

  .pillar-card {
    animation: pillarDecode 4.8s ease-in-out infinite;
  }

  .pillar-card::after {
    animation: cardScan 3.6s ease-in-out infinite;
  }

  .pillar-card:nth-child(2) {
    animation-delay: 0.24s;
  }

  .pillar-card:nth-child(3) {
    animation-delay: 0.48s;
  }

  .pillar-card.day-master strong {
    animation: coreTextPulse 2.6s ease-in-out infinite;
  }

  .pillar-card:nth-child(4) {
    animation-delay: 0.72s;
  }

  .element-spectrum span::before {
    animation: elementPulse 4.6s ease-in-out infinite;
  }

  .annual-scan::before {
    animation: annualSweep 5.2s ease-in-out infinite;
  }

  .decode-rail {
    animation: railFlicker 4.8s steps(2, end) infinite;
  }
}

@keyframes homeLightSweep {
  0% {
    opacity: 0;
    transform: translateX(-72%);
  }

  45% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translateX(72%);
  }
}

@keyframes baziTokenFloat {
  0%,
  100% {
    opacity: 0.18;
    transform: translate(-50%, -50%) scale(var(--scale));
  }

  48% {
    opacity: 0.58;
    transform: translate(-50%, calc(-50% - 10px)) scale(calc(var(--scale) + 0.08));
  }
}

@keyframes engineOrbit {
  to {
    transform: rotate(360deg);
  }
}

@keyframes scopeCurtainScan {
  0% {
    opacity: 0;
    transform: translateX(-76%);
  }

  42% {
    opacity: 0.85;
  }

  100% {
    opacity: 0;
    transform: translateX(76%);
  }
}

@keyframes structurePulse {
  0%,
  100% {
    opacity: 0.28;
  }

  46% {
    opacity: 0.92;
  }
}

@keyframes pillarDecode {
  0%,
  100% {
    transform: translateY(0);
  }

  46% {
    transform: translateY(-7px);
  }
}

@keyframes cardScan {
  0% {
    transform: translateY(-120%);
  }

  46% {
    transform: translateY(320%);
  }

  100% {
    transform: translateY(320%);
  }
}

@keyframes coreTextPulse {
  0%,
  100% {
    filter: brightness(1);
    text-shadow: 0 0 22px rgba(68, 233, 129, 0.48);
  }

  48% {
    filter: brightness(1.24);
    text-shadow:
      0 0 24px rgba(68, 233, 129, 0.72),
      0 0 54px rgba(68, 233, 129, 0.34);
  }
}

@keyframes elementPulse {
  0%,
  100% {
    opacity: 0.68;
  }

  48% {
    opacity: 1;
  }
}

@keyframes annualSweep {
  0% {
    left: 0;
  }

  50% {
    left: 74%;
  }

  100% {
    left: 0;
  }
}

@keyframes railFlicker {
  0%,
  100% {
    opacity: 0.42;
  }

  50% {
    opacity: 0.78;
  }
}

@media (max-width: 860px) {
  .bazi-home .hero {
    min-height: auto;
    padding-top: 28px;
  }

  .bazi-home .hero-copy::before {
    inset: -28px -18px;
    border-radius: 24px;
  }

  .bazi-panel {
    min-height: 480px;
    margin-top: 18px;
  }

  .bazi-scope {
    width: min(100%, 430px);
    min-width: 0;
  }

  .structure-lines {
    width: calc(100% - 46px);
    height: 150px;
  }

  .stem-track span {
    transform:
      translate(-50%, -50%)
      rotate(calc(var(--i) * 36deg))
      translateY(-174px)
      rotate(calc(var(--i) * -36deg));
  }

  .branch-track span {
    transform:
      translate(-50%, -50%)
      rotate(calc(var(--i) * 30deg))
      translateY(-132px)
      rotate(calc(var(--i) * -30deg));
  }
}

@media (max-width: 560px) {
  .bazi-home .hero {
    padding-top: 12px;
  }

  .bazi-home #home-title {
    font-size: 42px;
    line-height: 1.02;
  }

  .bazi-panel {
    min-height: 420px;
  }

  .bazi-scope {
    aspect-ratio: 0.9;
    border-radius: 24px;
  }

  .decode-rail {
    display: none;
  }

  .structure-lines {
    height: 124px;
  }

  .pillar-deck {
    width: calc(100% - 28px);
    gap: 7px;
  }

  .pillar-card {
    min-height: 124px;
    border-radius: 14px;
    gap: 7px;
  }

  .pillar-label {
    font-size: 10px;
  }

  .pillar-card strong,
  .pillar-card b {
    font-size: 29px;
  }

  .stem-track,
  .branch-track {
    opacity: 0.54;
  }

  .stem-track span {
    width: 24px;
    height: 24px;
    font-size: 13px;
    transform:
      translate(-50%, -50%)
      rotate(calc(var(--i) * 36deg))
      translateY(-150px)
      rotate(calc(var(--i) * -36deg));
  }

  .branch-track span {
    font-size: 12px;
    transform:
      translate(-50%, -50%)
      rotate(calc(var(--i) * 30deg))
      translateY(-112px)
      rotate(calc(var(--i) * -30deg));
  }

  .element-spectrum {
    left: 20px;
    right: 20px;
    bottom: 72px;
    gap: 5px;
  }

  .element-spectrum span {
    height: 6px;
  }

  .annual-scan {
    left: 20px;
    right: 20px;
    bottom: 26px;
    font-size: 9px;
  }

  .annual-scan span {
    padding-top: 8px;
  }
}

/* V22 Web3 graph remix */
.bazi-home {
  background:
    radial-gradient(circle at 70% 23%, rgba(107, 92, 255, 0.18), transparent 28%),
    radial-gradient(circle at 78% 62%, rgba(0, 216, 255, 0.12), transparent 34%),
    radial-gradient(circle at 25% 54%, rgba(92, 255, 170, 0.1), transparent 32%);
}

.bazi-home::before {
  background:
    linear-gradient(rgba(176, 206, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(176, 206, 255, 0.026) 1px, transparent 1px);
  background-size: 30px 30px;
}

.bazi-home::after {
  background:
    radial-gradient(circle at 76% 38%, rgba(132, 107, 255, 0.16), transparent 22%),
    radial-gradient(circle at 62% 62%, rgba(0, 216, 255, 0.12), transparent 26%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 5px);
  opacity: 0.82;
  transform: none;
}

.scope-scan {
  display: none;
}

.bazi-token:nth-child(3n) {
  border-color: rgba(0, 216, 255, 0.16);
  color: rgba(178, 232, 255, 0.22);
  box-shadow: 0 0 18px rgba(0, 216, 255, 0.05);
}

.bazi-token:nth-child(4n) {
  border-color: rgba(151, 117, 255, 0.16);
  color: rgba(217, 203, 255, 0.22);
  box-shadow: 0 0 18px rgba(151, 117, 255, 0.06);
}

.bazi-scope {
  border-color: rgba(173, 202, 255, 0.18);
  background:
    radial-gradient(circle at 52% 42%, rgba(105, 255, 164, 0.1), transparent 24%),
    radial-gradient(circle at 78% 28%, rgba(111, 92, 255, 0.16), transparent 34%),
    radial-gradient(circle at 28% 72%, rgba(0, 216, 255, 0.1), transparent 36%),
    rgba(2, 8, 12, 0.78);
  box-shadow:
    inset 0 0 80px rgba(0, 216, 255, 0.06),
    inset 0 0 80px rgba(111, 92, 255, 0.04),
    0 0 90px rgba(0, 216, 255, 0.08),
    0 0 90px rgba(111, 92, 255, 0.06);
}

.bazi-scope::before {
  border-color: rgba(0, 216, 255, 0.14);
}

.bazi-scope::after {
  border-color: rgba(151, 117, 255, 0.16);
}

.time-engine-glow {
  background:
    conic-gradient(from 24deg, transparent 0 8%, rgba(0, 216, 255, 0.18) 16%, transparent 26% 50%, rgba(151, 117, 255, 0.18) 60%, transparent 72% 84%, rgba(105, 255, 164, 0.16) 92%, transparent 100%);
  opacity: 0.8;
}

.bazi-network {
  position: absolute;
  inset: 24px;
  z-index: 1;
  pointer-events: none;
}

.net-edge {
  position: absolute;
  left: 50%;
  top: 50%;
  display: block;
  height: 1px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(179, 210, 255, 0.38), transparent);
  transform-origin: left center;
}

.edge-a {
  width: 78%;
  transform: rotate(18deg) translateX(-50%);
}

.edge-b {
  width: 72%;
  transform: rotate(-34deg) translateX(-50%);
}

.edge-c {
  width: 62%;
  transform: rotate(74deg) translateX(-50%);
}

.edge-d {
  width: 68%;
  transform: rotate(142deg) translateX(-50%);
}

.net-node {
  position: absolute;
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid rgba(219, 235, 255, 0.22);
  border-radius: 50%;
  color: rgba(239, 249, 255, 0.76);
  background:
    radial-gradient(circle, var(--node-color), transparent 60%),
    rgba(5, 13, 22, 0.7);
  box-shadow:
    inset 0 0 18px rgba(255, 255, 255, 0.04),
    0 0 22px color-mix(in srgb, var(--node-color) 48%, transparent);
  font-size: 12px;
  font-weight: 900;
}

.node-wood {
  --node-color: rgba(105, 255, 164, 0.28);
  left: 18%;
  top: 34%;
}

.node-fire {
  --node-color: rgba(255, 106, 95, 0.28);
  right: 18%;
  top: 34%;
}

.node-earth {
  --node-color: rgba(214, 180, 95, 0.28);
  left: 50%;
  top: 18%;
  transform: translateX(-50%);
}

.node-metal {
  --node-color: rgba(217, 247, 255, 0.24);
  right: 20%;
  bottom: 22%;
}

.node-water {
  --node-color: rgba(77, 167, 255, 0.3);
  left: 20%;
  bottom: 22%;
}

.structure-lines span {
  background: linear-gradient(90deg, transparent, rgba(179, 210, 255, 0.58), rgba(105, 255, 164, 0.46), transparent);
  box-shadow:
    0 0 16px rgba(0, 216, 255, 0.18),
    0 0 16px rgba(151, 117, 255, 0.12);
}

.core-beam {
  background: linear-gradient(180deg, transparent, rgba(105, 255, 164, 0.7), rgba(0, 216, 255, 0.38), transparent);
}

.pillar-card {
  border-color: rgba(179, 210, 255, 0.18);
  background:
    linear-gradient(180deg, rgba(23, 38, 56, 0.58), rgba(2, 10, 16, 0.76)),
    rgba(3, 13, 20, 0.82);
}

.pillar-card small {
  color: rgba(178, 232, 255, 0.42);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.pillar-card.pillar-year {
  box-shadow:
    inset 0 0 28px rgba(0, 216, 255, 0.05),
    0 0 18px rgba(0, 216, 255, 0.06);
}

.pillar-card.pillar-month {
  box-shadow:
    inset 0 0 28px rgba(151, 117, 255, 0.06),
    0 0 18px rgba(151, 117, 255, 0.06);
}

.pillar-card.pillar-hour {
  box-shadow:
    inset 0 0 28px rgba(77, 167, 255, 0.06),
    0 0 18px rgba(77, 167, 255, 0.06);
}

.pillar-card.day-master {
  border-color: rgba(105, 255, 164, 0.72);
  background:
    radial-gradient(circle at 50% 24%, rgba(105, 255, 164, 0.24), transparent 46%),
    linear-gradient(180deg, rgba(0, 216, 255, 0.1), rgba(2, 12, 16, 0.76));
  box-shadow:
    inset 0 0 34px rgba(105, 255, 164, 0.12),
    0 0 32px rgba(105, 255, 164, 0.18),
    0 0 46px rgba(0, 216, 255, 0.1);
}

.element-spectrum span {
  background: rgba(198, 219, 255, 0.07);
}

.annual-scan {
  border-top: 0;
  gap: 6px;
}

.annual-scan::before {
  top: auto;
  bottom: -7px;
  width: 18%;
  height: 2px;
  background: linear-gradient(90deg, #69ffa4, #00d8ff);
}

.annual-scan span {
  min-height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(179, 210, 255, 0.12);
  border-radius: 999px;
  padding-top: 0;
  background: rgba(4, 14, 24, 0.54);
}

.decode-rail {
  color: rgba(178, 232, 255, 0.48);
}

@media (prefers-reduced-motion: no-preference) {
  .bazi-home::after {
    animation: none;
  }

  .net-node {
    animation: nodePulse 4s ease-in-out infinite;
  }

  .net-edge {
    animation: graphEdgePulse 5.4s ease-in-out infinite;
  }
}

@keyframes nodePulse {
  0%,
  100% {
    opacity: 0.55;
    transform: translateY(0) scale(1);
  }

  48% {
    opacity: 1;
    transform: translateY(-4px) scale(1.08);
  }
}

@keyframes graphEdgePulse {
  0%,
  100% {
    opacity: 0.22;
  }

  48% {
    opacity: 0.75;
  }
}

@media (max-width: 560px) {
  .bazi-network {
    inset: 18px;
  }

  .net-node {
    width: 28px;
    height: 28px;
    font-size: 10px;
  }

  .pillar-card small {
    display: none;
  }

  .annual-scan {
    gap: 4px;
  }

  .annual-scan span {
    min-height: 26px;
    font-size: 8px;
  }
}

/* V23 return to the clean green BaZi engine */
.bazi-home {
  background: transparent;
}

.bazi-home::after,
.time-engine-glow,
.scope-scan,
.bazi-network,
.structure-lines,
.decode-rail {
  display: none;
}

.bazi-home::before {
  background:
    linear-gradient(rgba(113, 255, 166, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(113, 255, 166, 0.025) 1px, transparent 1px);
  background-size: 32px 32px;
}

.bazi-token {
  border-color: rgba(105, 255, 164, 0.12);
  color: rgba(214, 255, 228, 0.2);
  background: rgba(3, 14, 9, 0.34);
  box-shadow:
    inset 0 0 14px rgba(68, 233, 129, 0.03),
    0 0 18px rgba(68, 233, 129, 0.04);
}

.bazi-token:nth-child(3n),
.bazi-token:nth-child(4n) {
  border-color: rgba(105, 255, 164, 0.12);
  color: rgba(214, 255, 228, 0.2);
  box-shadow:
    inset 0 0 14px rgba(68, 233, 129, 0.03),
    0 0 18px rgba(68, 233, 129, 0.04);
}

.bazi-scope {
  border-color: rgba(105, 255, 164, 0.18);
  background:
    radial-gradient(circle at 50% 36%, rgba(68, 233, 129, 0.12), transparent 28%),
    radial-gradient(circle at 72% 72%, rgba(77, 167, 255, 0.08), transparent 34%),
    rgba(2, 10, 7, 0.7);
  box-shadow:
    inset 0 0 80px rgba(68, 233, 129, 0.06),
    0 0 90px rgba(68, 233, 129, 0.1);
}

.bazi-scope::before {
  border-color: rgba(105, 255, 164, 0.12);
}

.bazi-scope::after {
  border-color: rgba(105, 255, 164, 0.18);
}

.pillar-card,
.pillar-card.pillar-year,
.pillar-card.pillar-month,
.pillar-card.pillar-hour {
  border-color: rgba(105, 255, 164, 0.18);
  background:
    linear-gradient(180deg, rgba(22, 51, 34, 0.48), rgba(2, 12, 8, 0.72)),
    rgba(3, 13, 9, 0.8);
  box-shadow: inset 0 0 28px rgba(68, 233, 129, 0.04);
}

.pillar-card::after {
  background: linear-gradient(180deg, transparent, rgba(153, 255, 190, 0.13), transparent);
}

.pillar-card.day-master {
  border-color: rgba(119, 255, 170, 0.7);
  background:
    radial-gradient(circle at 50% 24%, rgba(119, 255, 170, 0.28), transparent 46%),
    linear-gradient(180deg, rgba(53, 255, 141, 0.18), rgba(2, 12, 8, 0.72));
  box-shadow:
    inset 0 0 34px rgba(68, 233, 129, 0.12),
    0 0 34px rgba(68, 233, 129, 0.18);
}

.pillar-card.day-master strong {
  color: var(--accent);
  text-shadow: 0 0 24px rgba(68, 233, 129, 0.58);
}

.element-spectrum span {
  height: 8px;
  background: rgba(215, 255, 230, 0.07);
}

.annual-scan {
  gap: 0;
  border-top: 1px solid rgba(105, 255, 164, 0.16);
}

.annual-scan::before {
  top: -2px;
  bottom: auto;
  left: 0;
  width: 26%;
  height: 3px;
  background: var(--accent);
  box-shadow: 0 0 18px rgba(68, 233, 129, 0.7);
}

.annual-scan span {
  min-height: 0;
  display: block;
  border: 0;
  border-radius: 0;
  padding-top: 10px;
  background: transparent;
}

@media (max-width: 560px) {
  .annual-scan {
    gap: 0;
  }

  .annual-scan span {
    min-height: 0;
    padding-top: 8px;
    font-size: 9px;
  }
}

/* V24 celestial observatory concept */
.observatory-home {
  position: relative;
  min-height: calc(100dvh - 74px);
  overflow: hidden;
  background:
    radial-gradient(circle at 72% 28%, rgba(109, 149, 255, 0.16), transparent 31%),
    radial-gradient(circle at 40% 74%, rgba(203, 172, 97, 0.1), transparent 30%),
    linear-gradient(155deg, #020711 0%, #07121d 48%, #02050b 100%);
}

.observatory-home::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(rgba(220, 236, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(220, 236, 255, 0.025) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(circle at 68% 48%, black 0 46%, transparent 78%);
  pointer-events: none;
}

.observatory-home .hero {
  position: relative;
  z-index: 2;
  min-height: calc(100dvh - 118px);
}

.observatory-home .hero-copy {
  position: relative;
  z-index: 3;
}

.observatory-home .hero-copy::before {
  content: "";
  position: absolute;
  inset: -38px -34px;
  z-index: -1;
  border-radius: 32px;
  background: radial-gradient(circle at 28% 44%, rgba(2, 7, 17, 0.9), rgba(2, 7, 17, 0.58) 48%, transparent 74%);
  filter: blur(2px);
}

.observatory-home .eyebrow {
  color: #c8dcff;
}

.observatory-home h1 {
  color: #f8fbff;
  text-shadow: 0 0 34px rgba(4, 12, 28, 0.8);
}

.observatory-home .hero-lede {
  color: #b6c3d6;
}

.observatory-sky {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.star-layer {
  position: absolute;
  inset: 0;
  opacity: 0.72;
  background-repeat: repeat;
}

.layer-a {
  background-image:
    radial-gradient(circle, rgba(255,255,255,.86) 0 1px, transparent 1.4px),
    radial-gradient(circle, rgba(160,190,255,.54) 0 1px, transparent 1.6px);
  background-size: 98px 98px, 151px 151px;
  background-position: 12px 18px, 40px 70px;
}

.layer-b {
  opacity: 0.36;
  background-image: radial-gradient(circle, rgba(213, 190, 132, 0.72) 0 1px, transparent 1.5px);
  background-size: 133px 133px;
  background-position: 20px 50px;
}

.layer-c {
  opacity: 0.16;
  background:
    radial-gradient(ellipse at 72% 46%, transparent 0 34%, rgba(172, 197, 255, 0.18) 35%, transparent 36%),
    radial-gradient(ellipse at 72% 46%, transparent 0 48%, rgba(172, 197, 255, 0.12) 49%, transparent 50%),
    radial-gradient(ellipse at 72% 46%, transparent 0 62%, rgba(172, 197, 255, 0.08) 63%, transparent 64%);
}

.observatory-panel {
  position: relative;
  display: flex;
  min-height: 620px;
  align-items: center;
  justify-content: center;
}

.observatory-panel::before {
  inset: 28px 0 18px;
  border-radius: 50% 50% 26px 26px;
  background:
    radial-gradient(circle at 50% 42%, rgba(149, 181, 255, 0.08), transparent 44%),
    linear-gradient(180deg, transparent 0 64%, rgba(7, 18, 31, 0.72) 65% 100%);
  transform: none;
}

.observatory-device {
  position: relative;
  isolation: isolate;
  width: min(100%, 550px);
  min-width: 430px;
  aspect-ratio: 1.02;
  display: grid;
  place-items: center;
  border: 1px solid rgba(196, 215, 255, 0.18);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 45%, rgba(230, 241, 255, 0.1), transparent 18%),
    radial-gradient(circle at 50% 48%, rgba(105, 255, 164, 0.06), transparent 32%),
    rgba(3, 10, 20, 0.5);
  box-shadow:
    inset 0 0 80px rgba(143, 174, 255, 0.08),
    0 0 100px rgba(117, 148, 220, 0.1);
}

.celestial-rings,
.celestial-rings span,
.sky-marks,
.birth-core,
.coordinate-readouts,
.year-orbit,
.element-constellation {
  position: absolute;
}

.celestial-rings {
  inset: 0;
  pointer-events: none;
}

.ring {
  left: 50%;
  top: 50%;
  display: block;
  aspect-ratio: 1;
  border: 1px solid rgba(202, 220, 255, 0.18);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.ring-outer {
  width: 92%;
}

.ring-mid {
  width: 68%;
}

.ring-inner {
  width: 42%;
  border-color: rgba(215, 187, 121, 0.25);
}

.meridian,
.horizon {
  left: 50%;
  top: 50%;
  width: 1px;
  height: 86%;
  background: linear-gradient(180deg, transparent, rgba(224, 236, 255, 0.28), transparent);
  transform: translate(-50%, -50%);
}

.horizon {
  width: 86%;
  height: 1px;
  transform: translate(-50%, -50%);
}

.sky-marks {
  inset: 0;
  pointer-events: none;
}

.sky-marks span {
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  color: rgba(218, 230, 255, 0.52);
  font-size: 14px;
  transform:
    translate(-50%, -50%)
    rotate(calc(var(--i) * 40deg))
    translateY(-225px)
    rotate(calc(var(--i) * -40deg));
}

.sky-marks span:nth-child(1) { --i: 0; }
.sky-marks span:nth-child(2) { --i: 1; }
.sky-marks span:nth-child(3) { --i: 2; }
.sky-marks span:nth-child(4) { --i: 3; }
.sky-marks span:nth-child(5) { --i: 4; }
.sky-marks span:nth-child(6) { --i: 5; }
.sky-marks span:nth-child(7) { --i: 6; }
.sky-marks span:nth-child(8) { --i: 7; }
.sky-marks span:nth-child(9) { --i: 8; }

.birth-core {
  z-index: 4;
  display: grid;
  width: 118px;
  height: 118px;
  place-items: center;
  border: 1px solid rgba(223, 198, 127, 0.46);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 38%, rgba(249, 227, 150, 0.24), transparent 48%),
    rgba(5, 14, 26, 0.8);
  box-shadow:
    inset 0 0 34px rgba(223, 198, 127, 0.1),
    0 0 42px rgba(223, 198, 127, 0.14);
}

.birth-core span,
.birth-core b {
  color: rgba(228, 238, 255, 0.66);
  font-size: 11px;
  font-weight: 800;
}

.birth-core strong {
  color: #f1da92;
  font-size: 54px;
  line-height: 0.8;
  text-shadow: 0 0 28px rgba(241, 218, 146, 0.36);
}

.coordinate-readouts {
  inset: auto 18px 70px;
  z-index: 5;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
}

.coordinate-readouts article {
  display: grid;
  min-height: 96px;
  place-items: center;
  align-content: center;
  gap: 4px;
  border: 1px solid rgba(197, 217, 255, 0.16);
  border-radius: 18px;
  background: rgba(6, 16, 30, 0.72);
  box-shadow: inset 0 0 20px rgba(196, 215, 255, 0.04);
}

.coordinate-readouts article.active {
  border-color: rgba(223, 198, 127, 0.5);
  background:
    radial-gradient(circle at 50% 0, rgba(223, 198, 127, 0.16), transparent 58%),
    rgba(6, 16, 30, 0.76);
}

.coordinate-readouts span {
  color: rgba(199, 217, 255, 0.72);
  font-size: 11px;
  font-weight: 800;
}

.coordinate-readouts strong,
.coordinate-readouts b {
  color: #f7fbff;
  font-size: 29px;
  line-height: 0.9;
}

.coordinate-readouts b {
  color: rgba(218, 230, 255, 0.72);
}

.year-orbit {
  left: 50%;
  top: 19%;
  z-index: 3;
  display: flex;
  width: min(74%, 380px);
  justify-content: space-between;
  color: rgba(205, 221, 255, 0.58);
  font-size: 10px;
  transform: translateX(-50%);
}

.year-orbit span {
  display: grid;
  width: 44px;
  height: 26px;
  place-items: center;
  border: 1px solid rgba(197, 217, 255, 0.12);
  border-radius: 999px;
  background: rgba(4, 13, 26, 0.58);
}

.element-constellation {
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.element-constellation span {
  position: absolute;
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid rgba(210, 229, 255, 0.16);
  border-radius: 50%;
  color: rgba(237, 244, 255, 0.72);
  background: rgba(4, 13, 26, 0.62);
  font-size: 12px;
  font-weight: 900;
}

.element-constellation .wood { left: 18%; top: 42%; color: #9ee7b5; }
.element-constellation .fire { right: 18%; top: 42%; color: #ffb3a8; }
.element-constellation .earth { left: 50%; bottom: 22%; color: #e8cf8d; transform: translateX(-50%); }
.element-constellation .metal { right: 29%; bottom: 30%; color: #eff8ff; }
.element-constellation .water { left: 29%; bottom: 30%; color: #9ecbff; }

@media (prefers-reduced-motion: no-preference) {
  .layer-a {
    animation: starDrift 34s linear infinite;
  }

  .layer-b {
    animation: starDrift 46s linear infinite reverse;
  }

  .ring-outer {
    animation: observatorySpin 38s linear infinite;
  }

  .ring-mid {
    animation: observatorySpin 52s linear infinite reverse;
  }

  .birth-core {
    animation: coreGlow 4.8s ease-in-out infinite;
  }
}

@keyframes starDrift {
  to {
    transform: translate3d(-36px, 24px, 0);
  }
}

@keyframes observatorySpin {
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

@keyframes coreGlow {
  0%,
  100% {
    box-shadow:
      inset 0 0 34px rgba(223, 198, 127, 0.1),
      0 0 42px rgba(223, 198, 127, 0.14);
  }

  50% {
    box-shadow:
      inset 0 0 44px rgba(223, 198, 127, 0.16),
      0 0 58px rgba(223, 198, 127, 0.24);
  }
}

@media (max-width: 860px) {
  .observatory-home .hero {
    min-height: auto;
    padding-top: 24px;
  }

  .observatory-panel {
    min-height: 520px;
    margin-top: 16px;
  }

  .observatory-device {
    width: min(100%, 470px);
    min-width: 0;
  }

  .sky-marks span {
    transform:
      translate(-50%, -50%)
      rotate(calc(var(--i) * 40deg))
      translateY(-190px)
      rotate(calc(var(--i) * -40deg));
  }
}

@media (max-width: 560px) {
  .observatory-home #home-title {
    font-size: 42px;
    line-height: 1.02;
  }

  .observatory-panel {
    min-height: 430px;
  }

  .observatory-device {
    aspect-ratio: 0.9;
    border-radius: 34px;
  }

  .ring-outer {
    width: 86%;
  }

  .ring-mid {
    width: 64%;
  }

  .ring-inner {
    width: 40%;
  }

  .sky-marks span {
    font-size: 12px;
    transform:
      translate(-50%, -50%)
      rotate(calc(var(--i) * 40deg))
      translateY(-152px)
      rotate(calc(var(--i) * -40deg));
  }

  .birth-core {
    width: 92px;
    height: 92px;
  }

  .birth-core strong {
    font-size: 42px;
  }

  .coordinate-readouts {
    inset: auto 14px 62px;
    gap: 6px;
  }

  .coordinate-readouts article {
    min-height: 82px;
    border-radius: 14px;
  }

  .coordinate-readouts strong,
  .coordinate-readouts b {
    font-size: 24px;
  }

  .coordinate-readouts span {
    font-size: 10px;
  }

  .year-orbit {
    top: 18px;
    width: calc(100% - 38px);
  }

  .year-orbit span {
    width: 38px;
    height: 22px;
    font-size: 8px;
  }

  .element-constellation span {
    width: 28px;
    height: 28px;
    font-size: 10px;
  }
}

/* V25 restrained celestial motion */
.observatory-device {
  transform-style: preserve-3d;
}

.celestial-rings::before,
.celestial-rings::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  display: block;
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.celestial-rings::before {
  width: 78%;
  aspect-ratio: 1;
  border: 1px dashed rgba(231, 219, 171, 0.18);
}

.celestial-rings::after {
  width: 52%;
  aspect-ratio: 1;
  border: 1px dashed rgba(165, 190, 255, 0.18);
}

.coordinate-readouts article {
  transform: translateY(0);
}

.year-orbit span:nth-child(1) { --year-delay: 0s; }
.year-orbit span:nth-child(2) { --year-delay: .35s; }
.year-orbit span:nth-child(3) { --year-delay: .7s; }
.year-orbit span:nth-child(4) { --year-delay: 1.05s; }
.year-orbit span:nth-child(5) { --year-delay: 1.4s; }

.coordinate-readouts article:nth-child(1) { --readout-delay: 0s; }
.coordinate-readouts article:nth-child(2) { --readout-delay: .28s; }
.coordinate-readouts article:nth-child(3) { --readout-delay: .56s; }
.coordinate-readouts article:nth-child(4) { --readout-delay: .84s; }

.element-constellation .wood { --float-x: -4px; --float-y: -6px; --float-delay: 0s; }
.element-constellation .fire { --float-x: 4px; --float-y: -5px; --float-delay: .4s; }
.element-constellation .earth { --float-x: 0px; --float-y: 6px; --float-delay: .8s; }
.element-constellation .metal { --float-x: 5px; --float-y: 4px; --float-delay: 1.2s; }
.element-constellation .water { --float-x: -5px; --float-y: 4px; --float-delay: 1.6s; }

@media (prefers-reduced-motion: no-preference) {
  .layer-c {
    animation: orbitMist 58s linear infinite;
  }

  .celestial-rings::before {
    animation: observatorySpin 64s linear infinite reverse;
  }

  .celestial-rings::after {
    animation: observatorySpin 44s linear infinite;
  }

  .sky-marks {
    animation: markPrecession 72s linear infinite;
  }

  .meridian {
    animation: meridianTilt 9s ease-in-out infinite;
  }

  .horizon {
    animation: horizonBreathe 8s ease-in-out infinite;
  }

  .coordinate-readouts article {
    animation: readoutFloat 6.6s ease-in-out infinite;
    animation-delay: var(--readout-delay);
  }

  .year-orbit span {
    animation: yearNodeBreathe 4.8s ease-in-out infinite;
    animation-delay: var(--year-delay);
  }

  .element-constellation span {
    animation: elementDrift 7.2s ease-in-out infinite;
    animation-delay: var(--float-delay);
  }
}

@keyframes orbitMist {
  to {
    transform: rotate(360deg);
  }
}

@keyframes markPrecession {
  to {
    transform: rotate(360deg);
  }
}

@keyframes meridianTilt {
  0%,
  100% {
    transform: translate(-50%, -50%) rotate(-1.5deg);
    opacity: 0.58;
  }

  50% {
    transform: translate(-50%, -50%) rotate(1.5deg);
    opacity: 0.9;
  }
}

@keyframes horizonBreathe {
  0%,
  100% {
    opacity: 0.44;
    transform: translate(-50%, -50%) scaleX(0.96);
  }

  50% {
    opacity: 0.8;
    transform: translate(-50%, -50%) scaleX(1.02);
  }
}

@keyframes readoutFloat {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-5px);
  }
}

@keyframes yearNodeBreathe {
  0%,
  100% {
    opacity: 0.52;
    border-color: rgba(197, 217, 255, 0.12);
  }

  45% {
    opacity: 0.92;
    border-color: rgba(223, 198, 127, 0.34);
    box-shadow: 0 0 18px rgba(223, 198, 127, 0.08);
  }
}

@keyframes elementDrift {
  0%,
  100% {
    transform: translate(0, 0);
  }

  50% {
    transform: translate(var(--float-x), var(--float-y));
  }
}

@media (max-width: 560px) {
  .coordinate-readouts article {
    animation-duration: 7.4s;
  }
}

/* V26 refined black-green BaZi engine */
.refined-bazi-home {
  background:
    radial-gradient(circle at 68% 36%, rgba(69, 255, 151, 0.09), transparent 30%),
    radial-gradient(circle at 28% 72%, rgba(53, 255, 141, 0.055), transparent 34%);
}

.refined-bazi-home::before {
  background:
    linear-gradient(rgba(98, 255, 161, 0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(98, 255, 161, 0.02) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: radial-gradient(circle at 64% 48%, black 0 47%, transparent 80%);
}

.refined-bazi-home .hero {
  min-height: calc(100dvh - 104px);
}

.refined-bazi-home .hero-copy::before {
  background: radial-gradient(circle at 34% 44%, rgba(1, 8, 5, 0.88), rgba(1, 8, 5, 0.52) 48%, transparent 75%);
}

.refined-bazi-home .eyebrow {
  color: #9cf8bd;
  letter-spacing: 0.1em;
}

.refined-bazi-home h1 {
  max-width: 660px;
  font-size: clamp(50px, 6vw, 74px);
}

.refined-bazi-home .hero-lede {
  color: rgba(215, 230, 221, 0.74);
}

.refined-bazi-home .bazi-ambient {
  opacity: 0.48;
}

.refined-bazi-home .bazi-token {
  border-color: rgba(105, 255, 164, 0.08);
  color: rgba(214, 255, 228, 0.16);
  background: rgba(3, 14, 9, 0.24);
}

.refined-bazi-home .bazi-panel {
  min-height: 584px;
}

.refined-bazi-home .bazi-scope {
  width: min(100%, 510px);
  border-color: rgba(116, 255, 174, 0.15);
  background:
    radial-gradient(circle at 50% 36%, rgba(69, 255, 151, 0.13), transparent 25%),
    radial-gradient(circle at 70% 74%, rgba(72, 169, 255, 0.045), transparent 34%),
    rgba(2, 10, 7, 0.68);
  box-shadow:
    inset 0 0 72px rgba(69, 255, 151, 0.05),
    0 0 76px rgba(69, 255, 151, 0.08);
}

.refined-bazi-home .bazi-scope::before {
  border-color: rgba(116, 255, 174, 0.11);
}

.refined-bazi-home .bazi-scope::after {
  border-color: rgba(116, 255, 174, 0.16);
}

.refined-bazi-home .stem-track,
.refined-bazi-home .branch-track {
  opacity: 0.72;
}

.refined-bazi-home .pillar-deck {
  width: min(86%, 394px);
  gap: 9px;
}

.refined-bazi-home .pillar-card {
  min-height: 172px;
  border-color: rgba(116, 255, 174, 0.15);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(20, 46, 31, 0.42), rgba(2, 12, 8, 0.74)),
    rgba(3, 13, 9, 0.78);
}

.refined-bazi-home .pillar-card::before {
  inset: 9px;
  border-color: rgba(116, 255, 174, 0.065);
}

.refined-bazi-home .pillar-label {
  color: rgba(157, 247, 189, 0.76);
}

.refined-bazi-home .pillar-card strong,
.refined-bazi-home .pillar-card b {
  color: rgba(242, 255, 246, 0.96);
}

.refined-bazi-home .pillar-card b {
  color: rgba(202, 226, 210, 0.74);
}

.refined-bazi-home .pillar-card.day-master {
  border-color: rgba(112, 255, 172, 0.76);
  background:
    radial-gradient(circle at 50% 20%, rgba(92, 255, 162, 0.28), transparent 48%),
    linear-gradient(180deg, rgba(53, 255, 141, 0.16), rgba(2, 12, 8, 0.72));
  box-shadow:
    inset 0 0 32px rgba(69, 255, 151, 0.12),
    0 0 30px rgba(69, 255, 151, 0.14);
}

.refined-bazi-home .pillar-card.day-master strong {
  color: #48f58d;
  text-shadow:
    0 0 18px rgba(72, 245, 141, 0.52),
    0 0 42px rgba(72, 245, 141, 0.18);
}

.refined-bazi-home .element-spectrum {
  bottom: 78px;
  gap: 6px;
}

.refined-bazi-home .element-spectrum span {
  height: 7px;
  background: rgba(215, 255, 230, 0.055);
}

.refined-bazi-home .element-spectrum span::before {
  opacity: 0.88;
}

.refined-bazi-home .element-spectrum b {
  color: rgba(220, 246, 229, 0.5);
}

.refined-bazi-home .annual-scan {
  color: rgba(214, 255, 228, 0.56);
}

.refined-bazi-home .annual-scan::before {
  background: #48f58d;
  box-shadow: 0 0 16px rgba(72, 245, 141, 0.62);
}

@media (prefers-reduced-motion: no-preference) {
  .refined-bazi-home .pillar-card {
    animation: refinedPillarBreath 6.2s ease-in-out infinite;
  }

  .refined-bazi-home .pillar-card::after {
    animation: none;
  }

  .refined-bazi-home .pillar-card.day-master {
    animation: refinedCoreBreath 4.8s ease-in-out infinite;
  }

  .refined-bazi-home .element-spectrum span::before {
    animation: refinedElementFlow 5.6s ease-in-out infinite;
  }

  .refined-bazi-home .annual-scan::before {
    animation: refinedYearTrace 7.2s ease-in-out infinite;
  }
}

@keyframes refinedPillarBreath {
  0%,
  100% {
    transform: translateY(0);
    border-color: rgba(116, 255, 174, 0.14);
  }

  50% {
    transform: translateY(-3px);
    border-color: rgba(116, 255, 174, 0.24);
  }
}

@keyframes refinedCoreBreath {
  0%,
  100% {
    transform: translateY(0);
    box-shadow:
      inset 0 0 32px rgba(69, 255, 151, 0.12),
      0 0 30px rgba(69, 255, 151, 0.14);
  }

  50% {
    transform: translateY(-3px);
    box-shadow:
      inset 0 0 38px rgba(69, 255, 151, 0.16),
      0 0 42px rgba(69, 255, 151, 0.2);
  }
}

@keyframes refinedElementFlow {
  0%,
  100% {
    filter: brightness(0.92);
  }

  50% {
    filter: brightness(1.12);
  }
}

@keyframes refinedYearTrace {
  0%,
  100% {
    left: 0;
    width: 18%;
  }

  50% {
    left: 72%;
    width: 24%;
  }
}

@media (max-width: 860px) {
  .refined-bazi-home .hero {
    padding-top: 18px;
  }

  .refined-bazi-home .bazi-panel {
    min-height: 462px;
    margin-top: 10px;
  }
}

@media (max-width: 560px) {
  .refined-bazi-home #home-title {
    font-size: 40px;
    line-height: 1.04;
  }

  .refined-bazi-home .hero-lede {
    font-size: 15px;
  }

  .refined-bazi-home .hero-actions {
    margin-top: 28px;
  }

  .refined-bazi-home .bazi-panel {
    min-height: 400px;
  }

  .refined-bazi-home .bazi-scope {
    aspect-ratio: 0.94;
  }

  .refined-bazi-home .pillar-deck {
    width: calc(100% - 30px);
    gap: 7px;
  }

  .refined-bazi-home .pillar-card {
    min-height: 118px;
  }

  .refined-bazi-home .pillar-card strong,
  .refined-bazi-home .pillar-card b {
    font-size: 28px;
  }

  .refined-bazi-home .element-spectrum {
    bottom: 68px;
  }
}

/* V27 replace five-element bars with a structural terrain curve */
.refined-bazi-home .element-terrain {
  left: 32px;
  right: 32px;
  bottom: 76px;
  display: block;
  height: 88px;
  padding: 0;
}

.refined-bazi-home .element-terrain svg {
  display: block;
  width: 100%;
  height: 72px;
  overflow: visible;
}

.terrain-fill {
  fill: url(#terrain-fill);
}

.terrain-line-main,
.terrain-line-ghost {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.terrain-line-main {
  stroke: url(#terrain-line);
  stroke-width: 3.2;
  filter: drop-shadow(0 0 10px rgba(79, 244, 154, 0.22));
}

.terrain-line-ghost {
  stroke: rgba(215, 255, 230, 0.14);
  stroke-width: 1.2;
  stroke-dasharray: 7 9;
}

.terrain-labels {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-top: -5px;
  color: rgba(220, 246, 229, 0.5);
  font-size: 10px;
  font-weight: 800;
}

.terrain-labels span {
  position: relative;
  text-align: center;
}

.terrain-labels span::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -9px;
  width: 1px;
  height: 7px;
  background: rgba(220, 246, 229, 0.18);
}

@media (prefers-reduced-motion: no-preference) {
  .terrain-line-main {
    animation: terrainBreathe 5.8s ease-in-out infinite;
  }

  .terrain-fill {
    animation: terrainFillBreathe 5.8s ease-in-out infinite;
  }

  .terrain-line-ghost {
    animation: terrainGhostDrift 12s linear infinite;
  }

  .refined-bazi-home .element-spectrum span::before {
    animation: none;
  }
}

@keyframes terrainBreathe {
  0%,
  100% {
    stroke-width: 3;
    opacity: 0.86;
  }

  50% {
    stroke-width: 3.8;
    opacity: 1;
  }
}

@keyframes terrainFillBreathe {
  0%,
  100% {
    opacity: 0.68;
  }

  50% {
    opacity: 0.96;
  }
}

@keyframes terrainGhostDrift {
  to {
    stroke-dashoffset: -64;
  }
}

@media (max-width: 560px) {
  .refined-bazi-home .element-terrain {
    left: 18px;
    right: 18px;
    bottom: 62px;
    height: 78px;
  }

  .refined-bazi-home .element-terrain svg {
    height: 64px;
  }

  .terrain-labels {
    margin-top: -7px;
    font-size: 9px;
  }
}

/* V28 five-element dust density field */
.refined-bazi-home .element-dust-field {
  left: 30px;
  right: 30px;
  bottom: 76px;
  display: block;
  height: 82px;
  padding: 0;
  overflow: visible;
  pointer-events: none;
}

.refined-bazi-home .element-dust-field::before {
  content: "";
  position: absolute;
  left: 4%;
  right: 4%;
  top: 44px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(215, 255, 230, 0.16), transparent);
}

.refined-bazi-home .dust-cluster {
  position: absolute;
  top: 8px;
  width: 72px;
  height: 58px;
  display: block;
  border-radius: 999px;
  background: transparent;
  overflow: visible;
}

.refined-bazi-home .dust-cluster b {
  position: absolute;
  left: 50%;
  right: auto;
  top: auto;
  bottom: -12px;
  transform: translateX(-50%);
  color: rgba(220, 246, 229, 0.56);
  font-size: 11px;
  font-weight: 800;
}

.refined-bazi-home .dust-cluster::before,
.refined-bazi-home .dust-cluster::after {
  content: "";
  position: absolute;
  inset: 0;
  width: auto;
  border-radius: inherit;
  opacity: var(--dust-opacity);
  background:
    radial-gradient(circle at 12% 62%, var(--dust-color) 0 1.6px, transparent 2.2px),
    radial-gradient(circle at 24% 28%, var(--dust-color) 0 1.2px, transparent 1.9px),
    radial-gradient(circle at 38% 48%, var(--dust-color) 0 1.5px, transparent 2.2px),
    radial-gradient(circle at 52% 18%, var(--dust-color) 0 1.1px, transparent 1.8px),
    radial-gradient(circle at 61% 68%, var(--dust-color) 0 1.7px, transparent 2.4px),
    radial-gradient(circle at 74% 36%, var(--dust-color) 0 1.3px, transparent 2px),
    radial-gradient(circle at 86% 58%, var(--dust-color) 0 1.1px, transparent 1.8px);
  filter: drop-shadow(0 0 8px var(--dust-glow));
  box-shadow: none;
}

.refined-bazi-home .dust-cluster::after {
  inset: 8px 10px;
  opacity: var(--dust-opacity-soft);
  transform: scale(0.86);
}

.refined-bazi-home .dust-cluster.wood {
  left: 2%;
  --dust-color: rgba(79, 244, 154, 0.82);
  --dust-glow: rgba(79, 244, 154, 0.28);
  --dust-opacity: 0.9;
  --dust-opacity-soft: 0.62;
}

.refined-bazi-home .dust-cluster.fire {
  left: 23%;
  --dust-color: rgba(255, 107, 95, 0.7);
  --dust-glow: rgba(255, 107, 95, 0.22);
  --dust-opacity: 0.78;
  --dust-opacity-soft: 0.54;
}

.refined-bazi-home .dust-cluster.earth {
  left: 44%;
  --dust-color: rgba(215, 189, 114, 0.62);
  --dust-glow: rgba(215, 189, 114, 0.18);
  --dust-opacity: 0.52;
  --dust-opacity-soft: 0.36;
}

.refined-bazi-home .dust-cluster.metal {
  left: 65%;
  --dust-color: rgba(223, 247, 255, 0.58);
  --dust-glow: rgba(223, 247, 255, 0.16);
  --dust-opacity: 0.42;
  --dust-opacity-soft: 0.28;
}

.refined-bazi-home .dust-cluster.water {
  left: 82%;
  --dust-color: rgba(72, 169, 255, 0.64);
  --dust-glow: rgba(72, 169, 255, 0.18);
  --dust-opacity: 0.5;
  --dust-opacity-soft: 0.34;
}

.refined-bazi-home .element-dust-field .dust-cluster {
  width: 72px;
  height: 58px;
  border-radius: 999px;
  background: transparent;
  overflow: visible;
}

.refined-bazi-home .element-dust-field .dust-cluster::before,
.refined-bazi-home .element-dust-field .dust-cluster::after {
  width: auto;
  background:
    radial-gradient(circle at 12% 62%, var(--dust-color) 0 1.6px, transparent 2.2px),
    radial-gradient(circle at 24% 28%, var(--dust-color) 0 1.2px, transparent 1.9px),
    radial-gradient(circle at 38% 48%, var(--dust-color) 0 1.5px, transparent 2.2px),
    radial-gradient(circle at 52% 18%, var(--dust-color) 0 1.1px, transparent 1.8px),
    radial-gradient(circle at 61% 68%, var(--dust-color) 0 1.7px, transparent 2.4px),
    radial-gradient(circle at 74% 36%, var(--dust-color) 0 1.3px, transparent 2px),
    radial-gradient(circle at 86% 58%, var(--dust-color) 0 1.1px, transparent 1.8px);
  box-shadow: none;
}

.refined-bazi-home .element-dust-field .dust-cluster b {
  right: auto;
  top: auto;
  color: rgba(220, 246, 229, 0.56);
}

@media (prefers-reduced-motion: no-preference) {
  .refined-bazi-home .dust-cluster::before {
    animation: dustFloat 6.8s ease-in-out infinite;
  }

  .refined-bazi-home .dust-cluster::after {
    animation: dustFloatAlt 7.8s ease-in-out infinite;
  }

  .refined-bazi-home .dust-cluster.fire::before,
  .refined-bazi-home .dust-cluster.fire::after {
    animation-delay: 0.4s;
  }

  .refined-bazi-home .dust-cluster.earth::before,
  .refined-bazi-home .dust-cluster.earth::after {
    animation-delay: 0.8s;
  }

  .refined-bazi-home .dust-cluster.metal::before,
  .refined-bazi-home .dust-cluster.metal::after {
    animation-delay: 1.2s;
  }

  .refined-bazi-home .dust-cluster.water::before,
  .refined-bazi-home .dust-cluster.water::after {
    animation-delay: 1.6s;
  }
}

@keyframes dustFloat {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }

  50% {
    transform: translateY(-5px) scale(1.04);
  }
}

@keyframes dustFloatAlt {
  0%,
  100% {
    transform: translateY(0) translateX(0) scale(0.86);
  }

  50% {
    transform: translateY(4px) translateX(3px) scale(0.9);
  }
}

@media (max-width: 560px) {
  .refined-bazi-home .element-dust-field {
    left: 18px;
    right: 18px;
    bottom: 62px;
    height: 76px;
  }

  .refined-bazi-home .dust-cluster {
    width: 58px;
    height: 50px;
  }

  .refined-bazi-home .element-dust-field .dust-cluster {
    width: 58px;
    height: 50px;
  }

  .refined-bazi-home .dust-cluster b {
    bottom: -10px;
    font-size: 10px;
  }

  .refined-bazi-home .dust-cluster.wood {
    left: 0%;
  }

  .refined-bazi-home .dust-cluster.fire {
    left: 21%;
  }

  .refined-bazi-home .dust-cluster.earth {
    left: 42%;
  }

  .refined-bazi-home .dust-cluster.metal {
    left: 63%;
  }

  .refined-bazi-home .dust-cluster.water {
    left: 80%;
  }
}

/* V29 stem banner carousel */
.stem-banner-home {
  position: relative;
  min-height: calc(100dvh - 72px);
  overflow: hidden;
  background:
    radial-gradient(circle at 74% 22%, rgba(74, 255, 152, 0.12), transparent 30%),
    radial-gradient(circle at 16% 76%, rgba(255, 255, 255, 0.06), transparent 28%),
    linear-gradient(145deg, rgba(3, 9, 8, 0.92), rgba(2, 6, 5, 0.98));
}

.stem-banner-home::before,
.stem-banner-home::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.stem-banner-home::before {
  opacity: 0.2;
  background:
    linear-gradient(rgba(103, 255, 165, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(103, 255, 165, 0.045) 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: radial-gradient(circle at 64% 45%, black 0 46%, transparent 78%);
}

.stem-banner-home::after {
  opacity: 0.28;
  background: linear-gradient(180deg, rgba(2, 6, 5, 0.06), rgba(2, 6, 5, 0.72));
}

.stem-banner-home .bazi-ambient {
  opacity: 0.24;
}

.stem-home-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(280px, 0.86fr) minmax(420px, 1.14fr);
  align-items: center;
  gap: clamp(28px, 5vw, 72px);
  min-height: calc(100dvh - 88px);
  width: min(1180px, calc(100% - 48px));
  margin: 0 auto;
  padding: 36px 0 48px;
}

.stem-copy {
  position: relative;
  z-index: 3;
  max-width: 480px;
}

.stem-copy .eyebrow {
  color: rgba(117, 255, 173, 0.86);
  letter-spacing: 0.11em;
}

.stem-copy h1 {
  max-width: 520px;
  font-size: clamp(46px, 6vw, 78px);
  line-height: 1.02;
  letter-spacing: 0;
}

.stem-copy .hero-lede {
  max-width: 320px;
  color: rgba(224, 238, 228, 0.72);
}

.stem-stage {
  position: relative;
  z-index: 2;
  min-height: 570px;
  display: grid;
  place-items: center;
}

.stem-carousel {
  position: relative;
  width: min(100%, 620px);
  aspect-ratio: 1.02;
  border-radius: 30px;
  isolation: isolate;
}

.stem-carousel::before {
  content: "";
  position: absolute;
  inset: 24px -18px -22px;
  border-radius: 34px;
  border: 1px solid rgba(92, 255, 157, 0.08);
  background: rgba(7, 18, 14, 0.22);
  transform: rotate(-2.5deg);
}

.stem-carousel::after {
  content: "";
  position: absolute;
  inset: 44px -34px -40px;
  z-index: -1;
  border-radius: 40px;
  border: 1px solid rgba(228, 255, 236, 0.04);
  transform: rotate(3deg);
}

.stem-banner {
  position: absolute;
  inset: 0;
  overflow: hidden;
  display: grid;
  grid-template-columns: 0.84fr 1.16fr;
  align-items: end;
  gap: 18px;
  padding: clamp(26px, 4vw, 42px);
  border: 1px solid rgba(213, 255, 229, 0.12);
  border-radius: 30px;
  opacity: 0;
  transform: translateX(24px) scale(0.98);
  background:
    radial-gradient(circle at 78% 22%, var(--stem-glow), transparent 34%),
    linear-gradient(145deg, var(--stem-surface-a), var(--stem-surface-b));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -1px 0 rgba(255, 255, 255, 0.04),
    0 34px 110px rgba(0, 0, 0, 0.48);
}

.stem-banner:first-child {
  opacity: 1;
  transform: translateX(0) scale(1);
}

.stem-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.44;
  background:
    radial-gradient(circle at 18% 20%, rgba(255, 255, 255, 0.12), transparent 21%),
    linear-gradient(115deg, transparent 0 46%, rgba(255, 255, 255, 0.07) 47% 48%, transparent 49% 100%);
}

.stem-banner::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 28px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  pointer-events: none;
}

.stem-metal {
  --stem-glow: rgba(226, 246, 255, 0.2);
  --stem-surface-a: #07110f;
  --stem-surface-b: #111716;
  --stem-accent: #d8efe8;
  --stem-soft: rgba(216, 239, 232, 0.46);
}

.stem-wood {
  --stem-glow: rgba(74, 255, 151, 0.18);
  --stem-surface-a: #06120d;
  --stem-surface-b: #0c1d12;
  --stem-accent: #61ff9b;
  --stem-soft: rgba(97, 255, 155, 0.44);
}

.stem-water {
  --stem-glow: rgba(76, 173, 255, 0.18);
  --stem-surface-a: #061015;
  --stem-surface-b: #071827;
  --stem-accent: #8ed1ff;
  --stem-soft: rgba(142, 209, 255, 0.42);
}

.stem-banner-copy {
  position: relative;
  z-index: 3;
  align-self: end;
}

.stem-banner-copy span {
  display: block;
  margin-bottom: 14px;
  color: var(--stem-soft);
  font-size: 16px;
  font-weight: 800;
}

.stem-banner-copy h2 {
  margin: 0;
  color: rgba(248, 255, 250, 0.96);
  font-size: clamp(34px, 5vw, 58px);
  line-height: 1;
  letter-spacing: 0;
}

.stem-banner-copy p {
  max-width: 14em;
  margin: 18px 0 0;
  color: rgba(224, 238, 228, 0.7);
  font-size: 16px;
  line-height: 1.7;
}

.stem-art {
  position: relative;
  z-index: 2;
  align-self: stretch;
  min-height: 360px;
}

.stem-art b {
  position: absolute;
  right: 6%;
  top: 46%;
  color: var(--stem-accent);
  font-size: clamp(112px, 16vw, 188px);
  line-height: 1;
  text-shadow: 0 0 38px color-mix(in srgb, var(--stem-accent) 36%, transparent);
  transform: translateY(-50%);
}

.stem-art i {
  position: absolute;
  display: block;
}

.metal-art i:nth-child(1) {
  right: 18%;
  top: 17%;
  width: 46%;
  height: 62%;
  background: linear-gradient(132deg, rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0.04) 44%, transparent 45%);
  clip-path: polygon(48% 0, 100% 16%, 58% 100%, 0 78%);
  filter: drop-shadow(0 0 26px rgba(216, 239, 232, 0.13));
}

.metal-art i:nth-child(2) {
  right: 36%;
  top: 28%;
  width: 42%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(235, 255, 247, 0.72), transparent);
  transform: rotate(-28deg);
}

.metal-art i:nth-child(3) {
  right: 12%;
  bottom: 18%;
  width: 68%;
  height: 32%;
  border: 1px solid rgba(235, 255, 247, 0.12);
  transform: skewX(-18deg);
}

.wood-art i:nth-child(1) {
  right: 34%;
  bottom: 16%;
  width: 3px;
  height: 68%;
  background: linear-gradient(180deg, transparent, rgba(97, 255, 155, 0.84), transparent);
  box-shadow: 0 0 30px rgba(97, 255, 155, 0.22);
}

.wood-art i:nth-child(2),
.wood-art i:nth-child(3) {
  right: 34%;
  width: 34%;
  height: 2px;
  background: linear-gradient(90deg, rgba(97, 255, 155, 0.88), transparent);
  transform-origin: left center;
}

.wood-art i:nth-child(2) {
  top: 34%;
  transform: rotate(-28deg);
}

.wood-art i:nth-child(3) {
  top: 48%;
  transform: rotate(24deg);
}

.water-art i:nth-child(1),
.water-art i:nth-child(2),
.water-art i:nth-child(3) {
  left: 4%;
  right: 0;
  height: 90px;
  border-radius: 50%;
  border-top: 1px solid rgba(142, 209, 255, 0.28);
  transform: rotate(-8deg);
}

.water-art i:nth-child(1) {
  top: 24%;
}

.water-art i:nth-child(2) {
  top: 43%;
  opacity: 0.7;
}

.water-art i:nth-child(3) {
  top: 62%;
  opacity: 0.44;
}

.stem-timeline {
  position: absolute;
  z-index: 4;
  left: 42px;
  right: 42px;
  bottom: 28px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}

.stem-timeline span {
  position: relative;
  height: 3px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(225, 255, 236, 0.13);
}

.stem-timeline span::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 100%;
  background: rgba(97, 255, 155, 0.9);
  transform: scaleX(0);
  transform-origin: left;
}

@media (prefers-reduced-motion: no-preference) {
  .stem-banner {
    animation: stemBannerCycle 18s cubic-bezier(0.16, 1, 0.3, 1) infinite;
    animation-delay: calc(var(--i) * 6s);
  }

  .stem-banner::before {
    animation: stemAtmosphere 6s ease-in-out infinite;
  }

  .metal-art i:nth-child(1) {
    animation: metalFacet 6s ease-in-out infinite;
  }

  .wood-art i:nth-child(1) {
    animation: woodRise 5.8s ease-in-out infinite;
  }

  .wood-art i:nth-child(2),
  .wood-art i:nth-child(3) {
    animation: woodBranch 5.8s ease-in-out infinite;
  }

  .water-art i {
    animation: waterDrift 7.4s ease-in-out infinite;
  }

  .stem-timeline span::before {
    animation: stemProgress 18s linear infinite;
  }

  .stem-timeline span:nth-child(2)::before {
    animation-delay: 6s;
  }

  .stem-timeline span:nth-child(3)::before {
    animation-delay: 12s;
  }
}

@keyframes stemBannerCycle {
  0%,
  29% {
    opacity: 1;
    transform: translateX(0) scale(1);
  }

  34%,
  100% {
    opacity: 0;
    transform: translateX(-24px) scale(0.985);
  }
}

@keyframes stemAtmosphere {
  0%,
  100% {
    opacity: 0.34;
    transform: translateX(0);
  }

  50% {
    opacity: 0.54;
    transform: translateX(12px);
  }
}

@keyframes metalFacet {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
    opacity: 0.76;
  }

  50% {
    transform: translateY(-8px) rotate(2deg);
    opacity: 1;
  }
}

@keyframes woodRise {
  0%,
  100% {
    transform: scaleY(0.86);
  }

  50% {
    transform: scaleY(1);
  }
}

@keyframes woodBranch {
  0%,
  100% {
    opacity: 0.42;
  }

  50% {
    opacity: 0.9;
  }
}

@keyframes waterDrift {
  0%,
  100% {
    transform: translateX(0) rotate(-8deg);
  }

  50% {
    transform: translateX(16px) rotate(-6deg);
  }
}

@keyframes stemProgress {
  0% {
    transform: scaleX(0);
  }

  29% {
    transform: scaleX(1);
  }

  34%,
  100% {
    transform: scaleX(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .stem-banner:first-child {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 900px) {
  .stem-home-grid {
    grid-template-columns: 1fr;
    gap: 26px;
    min-height: calc(100dvh - 78px);
    padding-top: 22px;
  }

  .stem-copy {
    max-width: none;
  }

  .stem-stage {
    min-height: auto;
  }

  .stem-carousel {
    width: min(100%, 620px);
    margin: 0 auto;
  }
}

@media (max-width: 560px) {
  .stem-home-grid {
    width: calc(100% - 24px);
    gap: 20px;
    padding: 22px 0 34px;
  }

  .stem-copy h1 {
    font-size: 42px;
  }

  .stem-copy .hero-lede {
    font-size: 15px;
  }

  .stem-copy .hero-actions {
    margin-top: 28px;
  }

  .stem-carousel {
    aspect-ratio: 0.84;
    border-radius: 24px;
  }

  .stem-carousel::before {
    inset: 16px -8px -16px;
    border-radius: 28px;
  }

  .stem-carousel::after {
    inset: 30px -16px -28px;
  }

  .stem-banner {
    grid-template-columns: 1fr;
    align-items: start;
    padding: 26px 24px 34px;
    border-radius: 24px;
  }

  .stem-banner::after {
    border-radius: 22px;
  }

  .stem-banner-copy {
    align-self: start;
  }

  .stem-banner-copy span {
    margin-bottom: 10px;
    font-size: 14px;
  }

  .stem-banner-copy h2 {
    font-size: 42px;
  }

  .stem-banner-copy p {
    max-width: 15em;
    margin-top: 14px;
    font-size: 14px;
  }

  .stem-art {
    position: absolute;
    inset: 28% 0 42px;
    min-height: 0;
  }

  .stem-art b {
    right: 5%;
    top: 56%;
    font-size: 128px;
  }

  .stem-timeline {
    left: 24px;
    right: 24px;
    bottom: 20px;
  }
}

/* V30 orbit device with centered stem cards */
.stem-orbit-home .stem-home-grid {
  grid-template-columns: minmax(280px, 0.9fr) minmax(430px, 1.1fr);
  gap: clamp(24px, 4vw, 58px);
}

.stem-orbit-home .stem-stage {
  min-height: 620px;
  width: 100%;
  overflow: visible;
}

.orbit-stage {
  isolation: isolate;
}

.destiny-orbit {
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 50%;
  width: min(100%, 620px);
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  translate: -50% -50%;
}

.orbit-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(112, 255, 172, 0.14);
  box-shadow:
    inset 0 0 50px rgba(53, 255, 141, 0.045),
    0 0 70px rgba(53, 255, 141, 0.06);
}

.ring-a {
  inset: 2%;
  border-style: solid;
}

.ring-b {
  inset: 14%;
  border-style: dashed;
  border-color: rgba(220, 255, 232, 0.13);
}

.ring-c {
  inset: 28%;
  border-color: rgba(112, 255, 172, 0.2);
  background: radial-gradient(circle, rgba(53, 255, 141, 0.07), transparent 58%);
}

.orbit-stems {
  position: absolute;
  inset: 0;
  border-radius: 50%;
}

.orbit-stems i {
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid rgba(160, 255, 194, 0.14);
  border-radius: 50%;
  color: rgba(220, 246, 229, 0.38);
  font-style: normal;
  font-weight: 800;
  background: rgba(3, 14, 9, 0.38);
  transform:
    rotate(calc((var(--n) - 1) * 36deg))
    translateY(-286px)
    rotate(calc((var(--n) - 1) * -36deg));
}

.orbit-stems i:nth-child(1) { --n: 1; }
.orbit-stems i:nth-child(2) { --n: 2; }
.orbit-stems i:nth-child(3) { --n: 3; }
.orbit-stems i:nth-child(4) { --n: 4; }
.orbit-stems i:nth-child(5) { --n: 5; }
.orbit-stems i:nth-child(6) { --n: 6; }
.orbit-stems i:nth-child(7) { --n: 7; }
.orbit-stems i:nth-child(8) { --n: 8; }
.orbit-stems i:nth-child(9) { --n: 9; }
.orbit-stems i:nth-child(10) { --n: 10; }

.stem-orbit-home .stem-carousel {
  z-index: 2;
  width: min(100%, 520px);
  aspect-ratio: 1.08;
  border-radius: 0;
  overflow: visible;
  margin: auto;
}

.stem-orbit-home .stem-carousel::before {
  inset: 12% 6%;
  z-index: -1;
  border-radius: 50%;
  border-color: rgba(112, 255, 172, 0.1);
  background: radial-gradient(circle, rgba(53, 255, 141, 0.08), transparent 63%);
  transform: none;
}

.stem-orbit-home .stem-carousel::after {
  display: none;
}

.stem-orbit-home .stem-banner {
  inset: 13% 13%;
  grid-template-columns: 0.9fr 1.1fr;
  min-height: 0;
  padding: 24px;
  border-radius: 22px;
  opacity: 0.58;
  transform: translateX(42%) scale(0.78);
  transform-origin: center;
  filter: saturate(0.75) brightness(0.72);
}

.stem-orbit-home .stem-banner:first-child {
  opacity: 1;
  transform: translateX(0) scale(1);
  filter: none;
}

.stem-orbit-home .stem-banner-copy span {
  margin-bottom: 8px;
  font-size: 13px;
}

.stem-orbit-home .stem-banner-copy h2 {
  font-size: clamp(28px, 3.6vw, 44px);
}

.stem-orbit-home .stem-banner-copy p {
  max-width: 12em;
  margin-top: 12px;
  font-size: 13px;
  line-height: 1.65;
}

.stem-orbit-home .stem-art {
  min-height: 250px;
}

.stem-orbit-home .stem-art b {
  right: 2%;
  top: 48%;
  font-size: clamp(84px, 10vw, 130px);
}

.stem-orbit-home .stem-timeline {
  left: 21%;
  right: 21%;
  bottom: 10%;
}

.stem-orbit-home .metal-art i:nth-child(1) {
  right: 18%;
  top: 22%;
  width: 46%;
  height: 48%;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.42), rgba(173, 196, 191, 0.08) 54%, transparent 55%),
    linear-gradient(40deg, rgba(216, 239, 232, 0.18), transparent 48%);
  clip-path: polygon(44% 0, 100% 20%, 68% 100%, 8% 74%, 0 28%);
}

.stem-orbit-home .metal-art i:nth-child(2) {
  right: 34%;
  top: 30%;
  width: 50%;
  height: 3px;
  background: linear-gradient(90deg, transparent, rgba(245, 255, 250, 0.86), transparent);
}

.stem-orbit-home .metal-art i:nth-child(3) {
  right: 18%;
  bottom: 24%;
  width: 56%;
  height: 22%;
  border-color: rgba(235, 255, 247, 0.16);
}

.stem-orbit-home .metal-art i:nth-child(4),
.stem-orbit-home .metal-art i:nth-child(5) {
  right: 24%;
  width: 42%;
  height: 1px;
  background: rgba(235, 255, 247, 0.34);
  transform: rotate(-36deg);
}

.stem-orbit-home .metal-art i:nth-child(4) {
  top: 44%;
}

.stem-orbit-home .metal-art i:nth-child(5) {
  top: 56%;
  opacity: 0.55;
}

.stem-orbit-home .wood-art i:nth-child(1) {
  right: 37%;
  bottom: 16%;
  width: 10px;
  height: 58%;
  border-radius: 999px 999px 0 0;
  background:
    linear-gradient(90deg, rgba(31, 88, 48, 0.98), rgba(119, 255, 160, 0.86), rgba(17, 56, 34, 0.96));
}

.stem-orbit-home .wood-art i:nth-child(2),
.stem-orbit-home .wood-art i:nth-child(3),
.stem-orbit-home .wood-art i:nth-child(4) {
  right: 37%;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(118, 255, 160, 0.9), transparent);
}

.stem-orbit-home .wood-art i:nth-child(2) {
  top: 34%;
  width: 38%;
}

.stem-orbit-home .wood-art i:nth-child(3) {
  top: 46%;
  width: 30%;
}

.stem-orbit-home .wood-art i:nth-child(4) {
  top: 58%;
  width: 34%;
  transform: rotate(-18deg);
}

.stem-orbit-home .wood-art i:nth-child(5) {
  left: 10%;
  right: 10%;
  bottom: 12%;
  height: 24px;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 50% 100%, rgba(97, 255, 155, 0.26), transparent 62%),
    linear-gradient(90deg, transparent, rgba(126, 92, 57, 0.34), transparent);
}

.stem-orbit-home .water-art i:nth-child(1),
.stem-orbit-home .water-art i:nth-child(2),
.stem-orbit-home .water-art i:nth-child(3) {
  left: 4%;
  right: 4%;
  height: 58px;
  border-top-color: rgba(142, 209, 255, 0.3);
}

.stem-orbit-home .water-art i:nth-child(4) {
  right: 14%;
  top: 28%;
  width: 46%;
  aspect-ratio: 1;
  border: 1px solid rgba(142, 209, 255, 0.2);
  border-radius: 50%;
  background: radial-gradient(circle at 42% 42%, transparent 0 28%, rgba(142, 209, 255, 0.12) 29% 30%, transparent 48%);
  transform: rotate(-18deg);
}

.stem-orbit-home .water-art i:nth-child(5) {
  right: 30%;
  top: 44%;
  width: 24%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(142, 209, 255, 0.2), transparent 64%);
}

@media (prefers-reduced-motion: no-preference) {
  .stem-orbit-home .ring-a {
    animation: orbitRotate 42s linear infinite;
  }

  .stem-orbit-home .ring-b {
    animation: orbitRotate 58s linear infinite reverse;
  }

  .stem-orbit-home .orbit-stems {
    animation: orbitRotate 64s linear infinite;
  }

  .stem-orbit-home .stem-banner {
    animation: stemOrbitCard 18s cubic-bezier(0.16, 1, 0.3, 1) infinite both;
    animation-delay: calc(var(--i) * -6s);
  }

  .stem-orbit-home .water-art i:nth-child(4) {
    animation: waterVortex 8s linear infinite;
  }
}

@keyframes orbitRotate {
  to {
    transform: rotate(360deg);
  }
}

@keyframes stemOrbitCard {
  0%,
  27% {
    z-index: 4;
    opacity: 1;
    filter: saturate(1) brightness(1);
    transform: translateX(0) scale(1);
  }

  33%,
  60% {
    z-index: 2;
    opacity: 0.56;
    filter: saturate(0.7) brightness(0.7);
    transform: translateX(42%) scale(0.78);
  }

  66%,
  94% {
    z-index: 1;
    opacity: 0.44;
    filter: saturate(0.6) brightness(0.62);
    transform: translateX(-42%) scale(0.76);
  }

  100% {
    z-index: 4;
    opacity: 1;
    filter: saturate(1) brightness(1);
    transform: translateX(0) scale(1);
  }
}

@keyframes waterVortex {
  to {
    transform: rotate(342deg);
  }
}

@media (max-width: 900px) {
  .stem-orbit-home .stem-home-grid {
    grid-template-columns: 1fr;
  }

  .stem-orbit-home .stem-stage {
    min-height: 520px;
  }

  .destiny-orbit {
    width: min(100%, 540px);
  }

  .orbit-stems i {
    transform:
      rotate(calc((var(--n) - 1) * 36deg))
      translateY(-246px)
      rotate(calc((var(--n) - 1) * -36deg));
  }
}

@media (max-width: 560px) {
  .stem-orbit-home .stem-home-grid {
    gap: 12px;
  }

  .stem-orbit-home .stem-stage {
    min-height: 438px;
  }

  .destiny-orbit {
    width: 392px;
    max-width: none;
  }

  .orbit-stems i {
    width: 28px;
    height: 28px;
    font-size: 12px;
    transform:
      rotate(calc((var(--n) - 1) * 36deg))
      translateY(-176px)
      rotate(calc((var(--n) - 1) * -36deg));
  }

  .stem-orbit-home .stem-carousel {
    width: 342px;
    aspect-ratio: 1.08;
  }

  .stem-orbit-home .stem-banner {
    inset: 15% 9%;
    grid-template-columns: 1fr 1fr;
    padding: 20px;
    border-radius: 20px;
  }

  .stem-orbit-home .stem-banner-copy h2 {
    font-size: 24px;
  }

  .stem-orbit-home .stem-banner-copy p {
    font-size: 12px;
  }

  .stem-orbit-home .stem-art {
    position: relative;
    inset: auto;
    min-height: 190px;
  }

  .stem-orbit-home .stem-art b {
    right: 0;
    top: 53%;
    font-size: 86px;
  }

  .stem-orbit-home .stem-timeline {
    bottom: 12%;
  }
}

/* V31 final figurative card layer */
.stem-orbit-home .stem-banner {
  grid-template-columns: 0.82fr 1.18fr;
}

.stem-orbit-home .stem-banner::before {
  opacity: 0.24;
}

.stem-orbit-home .stem-banner-copy {
  z-index: 5;
}

.stem-orbit-home .stem-art {
  position: absolute;
  inset: 0;
  z-index: 2;
  min-height: 0;
  overflow: hidden;
  border-radius: inherit;
}

.stem-orbit-home .stem-art b {
  right: 8%;
  top: 56%;
  color: color-mix(in srgb, var(--stem-accent) 66%, transparent);
  font-size: clamp(76px, 9vw, 116px);
  opacity: 0.68;
  text-shadow: 0 0 30px color-mix(in srgb, var(--stem-accent) 34%, transparent);
}

.stem-orbit-home .metal-art::before {
  content: "";
  position: absolute;
  right: 13%;
  top: 14%;
  width: 42%;
  height: 70%;
  clip-path: polygon(48% 0, 100% 13%, 62% 100%, 18% 82%, 0 26%);
  background:
    linear-gradient(128deg, rgba(255, 255, 255, 0.54), rgba(196, 215, 211, 0.12) 38%, rgba(255, 255, 255, 0.03) 39%),
    linear-gradient(32deg, rgba(157, 178, 175, 0.34), rgba(255, 255, 255, 0.04));
  filter: drop-shadow(0 0 30px rgba(216, 239, 232, 0.22));
}

.stem-orbit-home .metal-art::after {
  content: "";
  position: absolute;
  right: 24%;
  top: 24%;
  width: 52%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(248, 255, 252, 0.88), transparent);
  transform: rotate(-31deg);
  box-shadow:
    0 30px 0 rgba(216, 239, 232, 0.18),
    0 62px 0 rgba(216, 239, 232, 0.1);
}

.stem-orbit-home .metal-art i:nth-child(1) {
  right: 10%;
  top: 55%;
  width: 74%;
  height: 34%;
  clip-path: polygon(12% 82%, 54% 0, 82% 14%, 44% 100%);
  background: linear-gradient(120deg, transparent, rgba(245, 255, 250, 0.28), transparent 62%);
}

.stem-orbit-home .metal-art i:nth-child(2),
.stem-orbit-home .metal-art i:nth-child(3),
.stem-orbit-home .metal-art i:nth-child(4),
.stem-orbit-home .metal-art i:nth-child(5) {
  left: auto;
  right: 16%;
  width: 38%;
  height: 1px;
  background: rgba(235, 255, 247, 0.2);
  transform: rotate(-32deg);
}

.stem-orbit-home .metal-art i:nth-child(2) { top: 34%; }
.stem-orbit-home .metal-art i:nth-child(3) { top: 43%; opacity: 0.7; }
.stem-orbit-home .metal-art i:nth-child(4) { top: 66%; opacity: 0.5; }
.stem-orbit-home .metal-art i:nth-child(5) { top: 74%; opacity: 0.34; }

.stem-orbit-home .wood-art::before {
  content: "";
  position: absolute;
  right: 27%;
  bottom: 13%;
  width: 28px;
  height: 66%;
  border-radius: 999px 999px 10px 10px;
  background:
    linear-gradient(90deg, rgba(22, 63, 38, 0.98), rgba(126, 255, 163, 0.88) 44%, rgba(18, 51, 32, 0.94)),
    repeating-linear-gradient(90deg, transparent 0 6px, rgba(255, 255, 255, 0.12) 7px 8px);
  box-shadow:
    0 0 26px rgba(97, 255, 155, 0.22),
    inset 9px 0 18px rgba(6, 20, 12, 0.38);
}

.stem-orbit-home .wood-art::after {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: 12%;
  height: 28px;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 50% 100%, rgba(97, 255, 155, 0.24), transparent 62%),
    linear-gradient(90deg, transparent, rgba(119, 86, 53, 0.42), transparent);
}

.stem-orbit-home .wood-art i:nth-child(1),
.stem-orbit-home .wood-art i:nth-child(2),
.stem-orbit-home .wood-art i:nth-child(3),
.stem-orbit-home .wood-art i:nth-child(4) {
  right: 31%;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(126, 255, 164, 0.88), transparent);
  transform-origin: left center;
}

.stem-orbit-home .wood-art i:nth-child(1) {
  top: 34%;
  width: 38%;
  transform: rotate(-31deg);
}

.stem-orbit-home .wood-art i:nth-child(2) {
  top: 45%;
  width: 30%;
  transform: rotate(25deg);
}

.stem-orbit-home .wood-art i:nth-child(3) {
  top: 56%;
  width: 34%;
  transform: rotate(-18deg);
}

.stem-orbit-home .wood-art i:nth-child(4) {
  top: 67%;
  width: 26%;
  transform: rotate(20deg);
}

.stem-orbit-home .wood-art i:nth-child(5) {
  right: 16%;
  top: 22%;
  width: 26%;
  height: 26%;
  border-radius: 44% 56% 42% 58%;
  background: radial-gradient(circle at 36% 34%, rgba(159, 255, 190, 0.46), rgba(46, 156, 87, 0.14) 48%, transparent 68%);
  transform: rotate(-18deg);
}

.stem-orbit-home .water-art::before {
  content: "";
  position: absolute;
  right: 12%;
  top: 24%;
  width: 50%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(142, 209, 255, 0.22);
  background:
    radial-gradient(circle at 48% 46%, transparent 0 25%, rgba(142, 209, 255, 0.16) 26% 28%, transparent 46%),
    radial-gradient(circle, rgba(142, 209, 255, 0.12), transparent 64%);
  box-shadow: 0 0 34px rgba(64, 150, 255, 0.14);
}

.stem-orbit-home .water-art::after {
  content: "";
  position: absolute;
  left: 6%;
  right: 6%;
  top: 34%;
  height: 50%;
  border-radius: 50%;
  background:
    linear-gradient(180deg, transparent 0 18%, rgba(142, 209, 255, 0.1) 19%, transparent 22%),
    repeating-radial-gradient(ellipse at 70% 38%, transparent 0 26px, rgba(142, 209, 255, 0.16) 27px 28px);
  transform: rotate(-8deg);
}

.stem-orbit-home .water-art i:nth-child(1),
.stem-orbit-home .water-art i:nth-child(2),
.stem-orbit-home .water-art i:nth-child(3) {
  left: 12%;
  right: 8%;
  height: 42px;
  border-radius: 50%;
  border-top: 1px solid rgba(142, 209, 255, 0.34);
}

.stem-orbit-home .water-art i:nth-child(1) { top: 36%; }
.stem-orbit-home .water-art i:nth-child(2) { top: 50%; opacity: 0.72; }
.stem-orbit-home .water-art i:nth-child(3) { top: 64%; opacity: 0.44; }
.stem-orbit-home .water-art i:nth-child(4),
.stem-orbit-home .water-art i:nth-child(5) {
  display: none;
}

@media (prefers-reduced-motion: no-preference) {
  .stem-orbit-home .metal-art::before {
    animation: metalFacet 6.4s ease-in-out infinite;
  }

  .stem-orbit-home .wood-art::before {
    animation: woodRise 6.2s ease-in-out infinite;
  }

  .stem-orbit-home .wood-art i:nth-child(1),
  .stem-orbit-home .wood-art i:nth-child(2),
  .stem-orbit-home .wood-art i:nth-child(3),
  .stem-orbit-home .wood-art i:nth-child(4) {
    animation: woodBranch 6.2s ease-in-out infinite;
  }

  .stem-orbit-home .water-art::before {
    animation: waterVortex 9s linear infinite;
  }
}

@media (max-width: 560px) {
  .stem-orbit-home .stem-banner {
    grid-template-columns: 0.92fr 1.08fr;
  }

  .stem-orbit-home .stem-art b {
    right: 6%;
    font-size: 76px;
    opacity: 0.6;
  }

  .stem-orbit-home .wood-art::before {
    right: 25%;
    width: 20px;
  }

  .stem-orbit-home .metal-art::before {
    right: 9%;
    width: 45%;
  }

  .stem-orbit-home .water-art::before {
    right: 8%;
    width: 54%;
  }
}
/* V47 final lock near EOF: report detail as H5 reader. */
body[data-route="report"] .topbar {
  display: none !important;
}

body[data-route="report"] .site-shell {
  width: min(430px, 100%) !important;
  max-width: 430px !important;
}

body[data-route="report"] main {
  padding-top: 0 !important;
}

body[data-route="report"] #report-view {
  padding: 0 12px 28px !important;
}

body[data-route="report"] .report-mobile-nav {
  position: sticky !important;
  top: 0 !important;
  z-index: 30 !important;
  display: grid !important;
  grid-template-columns: 42px minmax(0, 1fr) 42px !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 56px !important;
  margin: 0 -12px 10px !important;
  padding: 8px 12px !important;
  border-bottom: 1px solid rgba(53, 255, 141, 0.12) !important;
  background: linear-gradient(180deg, rgba(2, 8, 6, 0.98), rgba(2, 8, 6, 0.86)) !important;
  backdrop-filter: blur(18px) !important;
}

body[data-route="report"] .report-mobile-nav h1 {
  margin: 0 !important;
  overflow: hidden !important;
  color: rgba(238, 255, 247, 0.94) !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
  line-height: 1.2 !important;
  text-align: center !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body[data-route="report"] .report-icon-button {
  display: inline-grid !important;
  width: 38px !important;
  height: 38px !important;
  min-height: 38px !important;
  place-items: center !important;
  border: 1px solid rgba(53, 255, 141, 0.14) !important;
  border-radius: 999px !important;
  padding: 0 !important;
  color: rgba(225, 255, 238, 0.9) !important;
  background: rgba(4, 19, 13, 0.74) !important;
  box-shadow: none !important;
  font-size: 24px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}

body[data-route="report"] .report-icon-button[data-report-menu-toggle] {
  font-size: 18px !important;
  letter-spacing: 1px !important;
}

body[data-route="report"] .report-info-strip {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
  margin: 10px 0 12px !important;
  padding: 12px !important;
  border: 1px solid rgba(53, 255, 141, 0.12) !important;
  border-radius: 14px !important;
  background: rgba(3, 15, 10, 0.72) !important;
}

body[data-route="report"] .report-info-strip div {
  display: grid !important;
  gap: 4px !important;
  min-width: 0 !important;
}

body[data-route="report"] .report-info-strip span {
  color: rgba(184, 255, 213, 0.45) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}

body[data-route="report"] .report-info-strip strong {
  min-width: 0 !important;
  overflow: hidden !important;
  color: rgba(238, 255, 247, 0.82) !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  letter-spacing: 0 !important;
  line-height: 1.25 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body[data-route="report"] .report-layout {
  display: block !important;
}

body[data-route="report"] .report-side {
  display: none !important;
}

body[data-route="report"] .report-document,
body[data-route="report"] .report-document.doc-reader {
  width: 100% !important;
  max-width: none !important;
  padding: 18px 14px 24px !important;
  border-radius: 16px !important;
}

body[data-route="report"] .doc-cover {
  padding-top: 8px !important;
}

body[data-route="report"] .doc-cover h1 {
  font-size: 24px !important;
  line-height: 1.18 !important;
}

body[data-route="report"] .report-action-sheet {
  position: fixed !important;
  inset: 0 !important;
  z-index: 80 !important;
  display: grid !important;
  align-items: end !important;
  pointer-events: none !important;
}

body[data-route="report"] .report-action-sheet.open {
  pointer-events: auto !important;
}

body[data-route="report"] .sheet-backdrop {
  position: absolute !important;
  inset: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: rgba(0, 0, 0, 0) !important;
  transition: background 0.2s ease !important;
}

body[data-route="report"] .report-action-sheet.open .sheet-backdrop {
  background: rgba(0, 0, 0, 0.48) !important;
}

body[data-route="report"] .sheet-panel {
  position: relative !important;
  display: grid !important;
  gap: 8px !important;
  width: min(430px, calc(100% - 20px)) !important;
  margin: 0 auto 10px !important;
  padding: 10px !important;
  border: 1px solid rgba(53, 255, 141, 0.16) !important;
  border-radius: 20px !important;
  background: rgba(3, 13, 9, 0.98) !important;
  box-shadow: 0 -18px 60px rgba(0, 0, 0, 0.42) !important;
  transform: translateY(calc(100% + 18px)) !important;
  transition: transform 0.22s ease !important;
}

body[data-route="report"] .report-action-sheet.open .sheet-panel {
  transform: translateY(0) !important;
}

body[data-route="report"] .sheet-panel button {
  min-height: 46px !important;
  border: 1px solid rgba(53, 255, 141, 0.13) !important;
  border-radius: 14px !important;
  color: rgba(236, 255, 246, 0.92) !important;
  background: rgba(8, 25, 18, 0.86) !important;
  font-size: 15px !important;
  font-weight: 850 !important;
}

body[data-route="report"] .sheet-panel button.danger {
  border-color: rgba(255, 88, 113, 0.22) !important;
  color: rgba(255, 128, 148, 0.96) !important;
  background: rgba(255, 88, 113, 0.08) !important;
}

body[data-route="report"] .sheet-panel .sheet-cancel {
  margin-top: 2px !important;
  color: rgba(184, 255, 213, 0.72) !important;
  background: transparent !important;
}

/* V49 mine reports: clean tappable rows with deferred actions. */
body[data-route="mine"] .report-list {
  display: grid !important;
  gap: 10px !important;
}

body[data-route="mine"] .report-row[data-report-card] {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 24px !important;
  align-items: center !important;
  gap: 12px !important;
  min-height: 82px !important;
  padding: 15px 14px 15px 16px !important;
  cursor: pointer !important;
}

body[data-route="mine"] .report-row[data-report-card]:active {
  transform: scale(0.992) !important;
}

body[data-route="mine"] .report-row[data-report-card] .row-actions {
  display: none !important;
}

body[data-route="mine"] .report-row-arrow {
  display: inline-grid !important;
  width: 24px !important;
  height: 24px !important;
  place-items: center !important;
  color: rgba(184, 255, 213, 0.46) !important;
  font-size: 24px !important;
  line-height: 1 !important;
}

body[data-route="mine"] .report-row[data-report-status="completed"] .report-row-arrow {
  color: rgba(184, 255, 213, 0.52) !important;
}

body[data-route="mine"] .report-row[data-report-status="generating"] .report-row-arrow,
body[data-route="mine"] .report-row[data-report-status="pending"] .report-row-arrow {
  color: rgba(255, 221, 132, 0.58) !important;
}

body[data-route="mine"] .report-row[data-report-status="failed"] .report-row-arrow {
  color: rgba(255, 128, 148, 0.58) !important;
}

body[data-route="mine"] #mine-report-sheet {
  position: fixed !important;
  inset: 0 !important;
  z-index: 90 !important;
  display: grid !important;
  align-items: center !important;
  justify-items: center !important;
  pointer-events: none !important;
}

body[data-route="mine"] #mine-report-sheet.open {
  pointer-events: auto !important;
}

body[data-route="mine"] #mine-report-sheet .sheet-backdrop {
  position: absolute !important;
  inset: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: rgba(0, 0, 0, 0) !important;
}

body[data-route="mine"] #mine-report-sheet.open .sheet-backdrop {
  background: rgba(0, 0, 0, 0.56) !important;
}

body[data-route="mine"] #mine-report-sheet .sheet-panel {
  position: relative !important;
  display: grid !important;
  gap: 12px !important;
  width: min(340px, calc(100% - 40px)) !important;
  margin: 0 auto !important;
  padding: 16px !important;
  border: 1px solid rgba(53, 255, 141, 0.16) !important;
  border-radius: 18px !important;
  background: rgba(3, 13, 9, 0.98) !important;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.56) !important;
  opacity: 0 !important;
  transform: translateY(10px) scale(0.96) !important;
  transition: opacity 0.18s ease, transform 0.18s ease !important;
}

body[data-route="mine"] #mine-report-sheet.open .sheet-panel {
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
}

body[data-route="mine"] #mine-report-sheet .sheet-title {
  padding: 2px 2px 0 !important;
  color: rgba(238, 255, 247, 0.94) !important;
  font-size: 18px !important;
  font-weight: 950 !important;
  line-height: 1.25 !important;
}

body[data-route="mine"] #mine-report-sheet p {
  margin: 0 !important;
  padding: 0 2px 2px !important;
  color: rgba(184, 255, 213, 0.56) !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
}

body[data-route="mine"] #mine-report-sheet .sheet-actions {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
}

body[data-route="mine"] #mine-report-sheet .sheet-panel button {
  min-height: 44px !important;
  border: 1px solid rgba(53, 255, 141, 0.13) !important;
  border-radius: 14px !important;
  color: rgba(236, 255, 246, 0.92) !important;
  background: rgba(8, 25, 18, 0.86) !important;
  font-size: 15px !important;
  font-weight: 850 !important;
}

body[data-route="mine"] #mine-report-sheet .sheet-panel button.danger {
  border-color: rgba(255, 88, 113, 0.22) !important;
  color: rgba(255, 128, 148, 0.96) !important;
  background: rgba(255, 88, 113, 0.08) !important;
}

body[data-route="mine"] #mine-report-sheet .sheet-panel .sheet-cancel {
  min-height: 40px !important;
  color: rgba(184, 255, 213, 0.72) !important;
  background: transparent !important;
}

/* V51 root-level failure dialog: keep it clickable outside the mine view. */
#mine-report-sheet {
  position: fixed !important;
  inset: 0 !important;
  z-index: 120 !important;
  display: grid !important;
  align-items: center !important;
  justify-items: center !important;
  pointer-events: none !important;
}

#mine-report-sheet.open {
  pointer-events: auto !important;
}

#mine-report-sheet .sheet-backdrop {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: rgba(0, 0, 0, 0) !important;
}

#mine-report-sheet.open .sheet-backdrop {
  background: rgba(0, 0, 0, 0.56) !important;
}

#mine-report-sheet .sheet-panel {
  position: relative !important;
  z-index: 1 !important;
  display: grid !important;
  gap: 12px !important;
  width: min(340px, calc(100% - 40px)) !important;
  margin: 0 auto !important;
  padding: 16px !important;
  border: 1px solid rgba(53, 255, 141, 0.16) !important;
  border-radius: 18px !important;
  background: rgba(3, 13, 9, 0.98) !important;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.56) !important;
  opacity: 0 !important;
  transform: translateY(10px) scale(0.96) !important;
  transition: opacity 0.18s ease, transform 0.18s ease !important;
  pointer-events: none !important;
}

#mine-report-sheet.open .sheet-panel {
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
  pointer-events: auto !important;
}

#mine-report-sheet .sheet-title {
  padding: 2px 44px 0 2px !important;
  color: rgba(238, 255, 247, 0.94) !important;
  font-size: 18px !important;
  font-weight: 950 !important;
  line-height: 1.25 !important;
}

#mine-report-sheet .sheet-close {
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  width: 34px !important;
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  border: 1px solid rgba(184, 255, 213, 0.18) !important;
  border-radius: 999px !important;
  color: rgba(236, 255, 246, 0.82) !important;
  background: rgba(8, 25, 18, 0.92) !important;
  font-size: 22px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  cursor: pointer !important;
}

#mine-report-sheet p {
  margin: 0 !important;
  padding: 0 2px 2px !important;
  color: rgba(184, 255, 213, 0.56) !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
}

#mine-report-sheet .sheet-actions {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
}

#mine-report-sheet .sheet-panel button {
  min-height: 44px !important;
  border: 1px solid rgba(53, 255, 141, 0.13) !important;
  border-radius: 14px !important;
  color: rgba(236, 255, 246, 0.92) !important;
  background: rgba(8, 25, 18, 0.86) !important;
  font-size: 15px !important;
  font-weight: 850 !important;
  cursor: pointer !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
  transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease !important;
}

#mine-report-sheet .sheet-actions button:first-child {
  border-color: rgba(53, 255, 141, 0.35) !important;
  color: #03100a !important;
  background: linear-gradient(135deg, #36ff8d, #14df72) !important;
  box-shadow: 0 10px 28px rgba(20, 223, 114, 0.2) !important;
}

#mine-report-sheet .sheet-panel button:active {
  transform: scale(0.97) !important;
}

#mine-report-sheet .sheet-panel button.danger {
  border-color: rgba(255, 88, 113, 0.22) !important;
  color: rgba(255, 128, 148, 0.96) !important;
  background: rgba(255, 88, 113, 0.08) !important;
}

#mine-report-sheet .sheet-panel .sheet-cancel {
  min-height: 40px !important;
  color: rgba(184, 255, 213, 0.72) !important;
  background: transparent !important;
}

/* V54 interaction gate: keep H5 bottom tabs and failure dialog tappable. */
body.is-authed:not([data-route="home"]):not([data-route="report"]) .bottom-tabs {
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  bottom: max(14px, env(safe-area-inset-bottom)) !important;
  z-index: 110 !important;
  display: flex !important;
  width: min(360px, calc(100% - 36px)) !important;
  transform: translateX(-50%) !important;
  pointer-events: auto !important;
}

body.is-authed:not([data-route="home"]):not([data-route="report"]) .bottom-tabs .tab-button {
  pointer-events: auto !important;
  touch-action: manipulation !important;
  cursor: pointer !important;
}

body.is-authed:not([data-route="home"]):not([data-route="report"]) main {
  padding-bottom: 112px !important;
}

/* V42 effective final override: account alignment and profile list polish. */
body[data-route="mine"] .mine-account-card {
  position: relative !important;
}

body[data-route="mine"] .account-summary {
  display: grid !important;
  grid-template-columns: 1fr !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  gap: 12px !important;
}

body[data-route="mine"] .account-lines {
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-auto-flow: row !important;
  gap: 14px !important;
  width: 100% !important;
  min-width: 0 !important;
}

body[data-route="mine"] .account-lines article,
body[data-route="mine"] .account-lines article:last-child {
  display: block !important;
  grid-column: auto !important;
  grid-row: auto !important;
  width: 100% !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body[data-route="mine"] .account-lines article:first-child {
  padding-right: 88px !important;
}

body[data-route="mine"] .account-lines span {
  display: block !important;
  width: auto !important;
  margin: 0 0 6px !important;
  color: rgba(184, 255, 213, 0.52) !important;
  font-size: 10px !important;
  line-height: 1 !important;
  text-align: left !important;
}

body[data-route="mine"] .account-lines strong {
  display: block !important;
  min-width: 0 !important;
  color: rgba(234, 255, 244, 0.94) !important;
  font-size: 20px !important;
  font-weight: 950 !important;
  line-height: 1.08 !important;
  letter-spacing: 0 !important;
}

body[data-route="mine"] .account-lines article:nth-child(2) span {
  color: rgba(184, 255, 213, 0.42) !important;
}

body[data-route="mine"] .account-lines article:nth-child(2) strong {
  color: rgba(234, 255, 244, 0.68) !important;
  font-size: 14px !important;
  font-weight: 850 !important;
  line-height: 1.1 !important;
}

body[data-route="mine"] .account-status,
body[data-route="mine"] .account-summary > .account-status:last-child {
  position: absolute !important;
  top: 15px !important;
  right: 15px !important;
  display: flex !important;
  width: auto !important;
  align-items: center !important;
  justify-content: flex-end !important;
  align-self: start !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body[data-route="mine"] .account-status span {
  color: rgba(184, 255, 213, 0.52) !important;
  font-size: 10px !important;
}

body[data-route="mine"] .account-state {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  width: auto !important;
  min-width: 58px !important;
  max-width: none !important;
  height: 28px !important;
  min-height: 28px !important;
  padding: 0 10px !important;
  aspect-ratio: auto !important;
  border: 1px solid rgba(53, 255, 141, 0.24) !important;
  border-radius: 999px !important;
  color: rgba(232, 255, 242, 0.94) !important;
  background: rgba(53, 255, 141, 0.08) !important;
  box-shadow: none !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  writing-mode: horizontal-tb !important;
}

body[data-route="mine"] .account-state::before {
  flex: 0 0 auto !important;
  width: 7px !important;
  height: 7px !important;
  margin: 0 !important;
}

body[data-route="profiles"] .profile-list {
  gap: 8px !important;
}

body[data-route="profiles"] .profile-row {
  min-height: 72px !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 12px !important;
  padding: 12px 14px !important;
  border-radius: 14px !important;
  border-color: rgba(53, 255, 141, 0.14) !important;
  background: rgba(3, 14, 10, 0.72) !important;
  box-shadow: none !important;
}

body[data-route="profiles"] .profile-main {
  display: grid !important;
  gap: 7px !important;
  min-width: 0 !important;
}

body[data-route="profiles"] .profile-title-line {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: 0 !important;
}

body[data-route="profiles"] .profile-title-line h3 {
  margin: 0 !important;
  color: rgba(234, 255, 244, 0.96) !important;
  font-size: 17px !important;
  line-height: 1.2 !important;
}

body[data-route="profiles"] .profile-title-line span {
  display: inline-flex !important;
  min-height: 20px !important;
  align-items: center !important;
  border: 1px solid rgba(53, 255, 141, 0.14) !important;
  border-radius: 999px !important;
  padding: 0 7px !important;
  color: rgba(184, 255, 213, 0.8) !important;
  background: rgba(53, 255, 141, 0.08) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
}

body[data-route="profiles"] .profile-meta-line {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  color: rgba(234, 255, 244, 0.52) !important;
  font-size: 12px !important;
}

body[data-route="profiles"] .row-actions {
  align-items: center !important;
  gap: 8px !important;
}

body[data-route="profiles"] .report-main-action {
  min-height: 32px !important;
  padding: 0 13px !important;
  font-size: 13px !important;
  box-shadow: 0 0 16px rgba(53, 255, 141, 0.1) !important;
}

@media (max-width: 560px) {
  body[data-route="mine"] .account-summary {
    align-items: flex-start !important;
  }

  body[data-route="profiles"] .profile-row {
    grid-template-columns: 1fr !important;
  }

  body[data-route="profiles"] .row-actions {
    justify-content: flex-start !important;
  }
}

/* V58 final account page and tappable nav override. Keep this block at EOF. */
html body.is-authed:not([data-route="home"]):not([data-route="report"]) .bottom-tabs,
html body.is-authed:not([data-route="home"]):not([data-route="report"]) .app-nav {
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  bottom: max(14px, env(safe-area-inset-bottom)) !important;
  z-index: 9999 !important;
  display: flex !important;
  width: min(360px, calc(100% - 36px)) !important;
  transform: translateX(-50%) !important;
  pointer-events: auto !important;
  isolation: isolate !important;
}

html body.is-authed:not([data-route="home"]):not([data-route="report"]) .bottom-tabs .tab-button {
  position: relative !important;
  z-index: 1 !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
  cursor: pointer !important;
}

html body.is-authed[data-route="mine"] #mine-view {
  display: grid !important;
  gap: 14px !important;
}

html body.is-authed[data-route="mine"] .mine-account-entry {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: 52px minmax(0, 1fr) 24px !important;
  align-items: center !important;
  gap: 12px !important;
  min-height: 76px !important;
  margin: 0 0 2px !important;
  padding: 12px 14px !important;
  border: 1px solid rgba(53, 255, 141, 0.14) !important;
  border-radius: 18px !important;
  color: rgba(235, 255, 245, 0.94) !important;
  background:
    linear-gradient(135deg, rgba(53, 255, 141, 0.1), rgba(53, 255, 141, 0.02) 42%, rgba(3, 12, 9, 0.88)),
    rgba(3, 13, 9, 0.86) !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.18) !important;
  cursor: pointer !important;
  text-align: left !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
}

html body.is-authed[data-route="mine"] .mine-account-entry:active {
  transform: scale(0.992) !important;
}

html body.is-authed[data-route="mine"] .mine-avatar,
html body.is-authed[data-route="account"] .account-avatar {
  display: inline-grid !important;
  width: 52px !important;
  height: 52px !important;
  place-items: center !important;
  border: 1px solid rgba(53, 255, 141, 0.26) !important;
  border-radius: 50% !important;
  color: #041109 !important;
  background: linear-gradient(135deg, #43f483, #00e86d) !important;
  box-shadow: 0 0 26px rgba(53, 255, 141, 0.22) !important;
  font-size: 21px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
}

html body.is-authed[data-route="mine"] .mine-account-text {
  display: grid !important;
  gap: 5px !important;
  min-width: 0 !important;
}

html body.is-authed[data-route="mine"] .mine-account-text strong {
  display: block !important;
  overflow: hidden !important;
  color: rgba(238, 255, 247, 0.96) !important;
  font-size: 19px !important;
  font-weight: 950 !important;
  line-height: 1.12 !important;
  letter-spacing: 0 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body.is-authed[data-route="mine"] .mine-account-text small {
  display: block !important;
  overflow: hidden !important;
  color: rgba(184, 255, 213, 0.5) !important;
  font-size: 12px !important;
  font-weight: 760 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body.is-authed[data-route="mine"] .mine-account-entry i {
  display: inline-grid !important;
  width: 24px !important;
  height: 24px !important;
  place-items: center !important;
  color: rgba(184, 255, 213, 0.52) !important;
  font-size: 24px !important;
  font-style: normal !important;
  line-height: 1 !important;
}

html body.is-authed[data-route="account"] #account-view {
  display: grid !important;
  gap: 14px !important;
}

html body.is-authed[data-route="account"] .account-mobile-nav {
  display: grid !important;
  grid-template-columns: 40px minmax(0, 1fr) 40px !important;
  align-items: center !important;
  min-height: 44px !important;
  margin: 0 0 4px !important;
}

html body.is-authed[data-route="account"] .account-mobile-nav button {
  display: inline-grid !important;
  width: 40px !important;
  height: 40px !important;
  place-items: center !important;
  border: 1px solid rgba(53, 255, 141, 0.12) !important;
  border-radius: 999px !important;
  color: rgba(235, 255, 245, 0.9) !important;
  background: rgba(3, 13, 9, 0.72) !important;
  font-size: 30px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  cursor: pointer !important;
}

html body.is-authed[data-route="account"] .account-mobile-nav h1 {
  margin: 0 !important;
  color: rgba(238, 255, 247, 0.96) !important;
  font-size: 17px !important;
  font-weight: 920 !important;
  line-height: 1.2 !important;
  text-align: center !important;
  letter-spacing: 0 !important;
}

html body.is-authed[data-route="account"] .account-page {
  display: grid !important;
  gap: 14px !important;
}

html body.is-authed[data-route="account"] .account-info-card {
  display: grid !important;
  gap: 18px !important;
  padding: 18px !important;
  border: 1px solid rgba(53, 255, 141, 0.14) !important;
  border-radius: 20px !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(53, 255, 141, 0.14), transparent 36%),
    rgba(3, 13, 9, 0.86) !important;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.2) !important;
}

html body.is-authed[data-route="account"] .account-info-hero {
  display: grid !important;
  grid-template-columns: 58px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 13px !important;
  padding-bottom: 16px !important;
  border-bottom: 1px solid rgba(184, 255, 213, 0.1) !important;
}

html body.is-authed[data-route="account"] .account-avatar {
  width: 58px !important;
  height: 58px !important;
  font-size: 24px !important;
}

html body.is-authed[data-route="account"] .account-info-hero div {
  display: grid !important;
  gap: 6px !important;
  min-width: 0 !important;
}

html body.is-authed[data-route="account"] .account-info-hero strong {
  overflow: hidden !important;
  color: rgba(238, 255, 247, 0.96) !important;
  font-size: 23px !important;
  font-weight: 950 !important;
  line-height: 1.1 !important;
  letter-spacing: 0 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body.is-authed[data-route="account"] .account-info-hero small {
  overflow: hidden !important;
  color: rgba(184, 255, 213, 0.52) !important;
  font-size: 13px !important;
  font-weight: 760 !important;
  line-height: 1.2 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body.is-authed[data-route="account"] .account-info-list {
  display: grid !important;
  gap: 0 !important;
}

html body.is-authed[data-route="account"] .account-info-list div {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 12px !important;
  min-height: 48px !important;
  border-bottom: 1px solid rgba(184, 255, 213, 0.08) !important;
}

html body.is-authed[data-route="account"] .account-info-list div:last-child {
  border-bottom: 0 !important;
}

html body.is-authed[data-route="account"] .account-info-list span {
  color: rgba(184, 255, 213, 0.58) !important;
  font-size: 13px !important;
  font-weight: 760 !important;
  line-height: 1.2 !important;
}

html body.is-authed[data-route="account"] .account-info-list strong {
  color: rgba(238, 255, 247, 0.9) !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
  text-align: right !important;
  white-space: nowrap !important;
}

html body.is-authed[data-route="account"] #account-page-status {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
}

html body.is-authed[data-route="account"] #account-page-status::before {
  content: "" !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: #43f483 !important;
  box-shadow: 0 0 16px rgba(67, 244, 131, 0.5) !important;
}

html body.is-authed[data-route="account"] .account-logout {
  width: 100% !important;
  min-height: 48px !important;
  border: 1px solid rgba(255, 88, 113, 0.18) !important;
  border-radius: 16px !important;
  color: rgba(255, 134, 152, 0.94) !important;
  background: rgba(255, 88, 113, 0.06) !important;
  font-size: 15px !important;
  font-weight: 880 !important;
  cursor: pointer !important;
  touch-action: manipulation !important;
}

html body.is-authed[data-route="account"] .account-logout:active {
  transform: scale(0.99) !important;
}

html body.is-authed:not([data-route="home"]):not([data-route="report"]) .bottom-tabs,
html body.is-authed:not([data-route="home"]):not([data-route="report"]) .app-nav {
  left: calc(var(--app-visual-width, 100vw) / 2) !important;
  bottom: calc(var(--app-viewport-bottom-gap, 0px) + max(14px, env(safe-area-inset-bottom))) !important;
  z-index: 9999 !important;
}
/* Birthplace picker used by the production form. */
.location-dialog {
  width: min(480px, 100%);
  max-width: 100%;
  margin: auto auto 0;
  padding: 0;
  border: 1px solid rgba(232, 203, 104, 0.2);
  border-radius: 8px 8px 0 0;
  color: var(--ink);
  background: #11130f;
}

.location-dialog::backdrop {
  background: rgba(0, 0, 0, 0.66);
}

.location-sheet {
  padding: 12px 16px calc(18px + env(safe-area-inset-bottom));
}

.location-sheet header {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) 64px;
  align-items: center;
  min-height: 44px;
  border-bottom: 1px solid rgba(232, 203, 104, 0.14);
}

.location-sheet h2 {
  margin: 0;
  font-size: 17px;
  line-height: 1.3;
  text-align: center;
}

.location-sheet header button {
  min-height: 40px;
  padding: 0;
  border: 0;
  color: rgba(220, 230, 224, 0.68);
  background: transparent;
  font-size: 14px;
}

.location-sheet header button:first-child {
  text-align: left;
}

.location-sheet header button.confirm {
  color: var(--accent);
  font-weight: 850;
  text-align: right;
}

.location-columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 18px 0 6px;
}

.location-columns label {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.location-columns label > span {
  color: rgba(220, 230, 224, 0.58);
  font-size: 12px;
  text-align: center;
}

.location-columns select {
  width: 100%;
  min-width: 0;
  height: 52px;
  padding: 0 6px;
  overflow: hidden;
  border: 1px solid rgba(53, 255, 141, 0.16);
  border-radius: 8px;
  color: rgba(241, 255, 249, 0.95);
  background: rgba(0, 8, 5, 0.9);
  font-size: 14px;
  font-weight: 800;
  text-overflow: ellipsis;
}

.birth-date-dialog {
  width: min(480px, 100%);
  max-width: 100%;
  margin: auto auto 0;
  padding: 0;
  border: 1px solid rgba(232, 203, 104, 0.2);
  border-radius: 8px 8px 0 0;
  color: var(--ink);
  background: #11130f;
}

.birth-date-dialog::backdrop {
  background: rgba(0, 0, 0, 0.66);
}

.birth-date-sheet {
  padding: 12px 16px calc(18px + env(safe-area-inset-bottom));
}

.birth-date-sheet header {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) 64px;
  align-items: center;
  min-height: 44px;
  border-bottom: 1px solid rgba(232, 203, 104, 0.14);
}

.birth-date-sheet h2 {
  margin: 0;
  font-size: 17px;
  line-height: 1.3;
  text-align: center;
}

.birth-date-sheet header button {
  min-height: 40px;
  padding: 0;
  border: 0;
  color: rgba(220, 230, 224, 0.68);
  background: transparent;
  font-size: 14px;
}

.birth-date-sheet header button:first-child {
  text-align: left;
}

.birth-date-sheet header button.confirm {
  color: var(--accent);
  font-weight: 850;
  text-align: right;
}

.birth-date-columns {
  display: grid;
  grid-template-columns: 1.25fr 1fr 1fr;
  gap: 10px;
  padding: 18px 0 6px;
}

.birth-date-columns label {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.birth-date-columns label > span {
  color: rgba(220, 230, 224, 0.58);
  font-size: 12px;
  text-align: center;
}

.birth-date-columns select {
  width: 100%;
  height: 52px;
  padding: 0 10px;
  border: 1px solid rgba(53, 255, 141, 0.16);
  border-radius: 8px;
  color: rgba(241, 255, 249, 0.95);
  background: rgba(0, 8, 5, 0.9);
  font-size: 16px;
  font-weight: 800;
  text-align: center;
}

body[data-route="report"] .doc-section h4 {
  margin: 24px 0 10px;
  font-size: 16px;
  line-height: 1.5;
}

body[data-route="report"] .report-chapters .toc-level-3 {
  padding-left: 16px;
  font-size: 12px;
  opacity: 0.82;
}

body[data-route="report"] .doc-table {
  max-width: 100%;
  overflow-x: auto;
}

@media (max-width: 640px) {
  body[data-route="report"] .doc-table:not(.two-col) .doc-row {
    min-width: 680px;
  }
}

@media print {
  body[data-route="report"] .report-mobile-nav,
  body[data-route="report"] .report-side,
  body[data-route="report"] .report-action-sheet,
  body[data-route="report"] .bottom-nav {
    display: none !important;
  }

  body[data-route="report"],
  body[data-route="report"] .app-shell,
  body[data-route="report"] .report-layout,
  body[data-route="report"] .report-document {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    color: #111;
    background: #fff;
    box-shadow: none;
  }

  body[data-route="report"] .doc-section,
  body[data-route="report"] .doc-table,
  body[data-route="report"] .doc-row {
    break-inside: avoid;
  }
}

/* Markdown reader TOC: desktop sidebar, mobile dialog. */
body[data-route="report"] .report-toc-dialog {
  width: min(430px, calc(100% - 24px));
  max-height: min(76dvh, 680px);
  margin: auto;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(53, 255, 141, 0.2);
  border-radius: 8px;
  color: rgba(238, 255, 247, 0.94);
  background: #06110c;
}

body[data-route="report"] .report-toc-dialog::backdrop {
  background: rgba(0, 0, 0, 0.68);
}

body[data-route="report"] .report-toc-dialog[open] {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}

body[data-route="report"] .report-toc-dialog header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(53, 255, 141, 0.14);
}

body[data-route="report"] .report-toc-dialog h2 {
  margin: 0;
  font-size: 18px;
  letter-spacing: 0;
}

body[data-route="report"] .report-toc-dialog header button {
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  color: inherit;
  background: transparent;
  font-size: 26px;
  cursor: pointer;
}

body[data-route="report"] .report-mobile-chapters {
  display: grid;
  gap: 4px;
  min-height: 0;
  padding: 10px;
  overflow-y: auto;
}

body[data-route="report"] .report-mobile-chapters a {
  display: flex;
  min-height: 42px;
  align-items: center;
  padding: 8px 10px;
  border-radius: 6px;
  color: rgba(226, 255, 239, 0.86);
  text-decoration: none;
  line-height: 1.45;
}

body[data-route="report"] .report-mobile-chapters .toc-level-3 {
  padding-left: 24px;
  color: rgba(184, 255, 213, 0.7);
  font-size: 13px;
}

body[data-route="report"] .report-mobile-chapters a:focus-visible,
body[data-route="report"] .report-mobile-chapters a:hover {
  outline: 2px solid rgba(53, 255, 141, 0.5);
  background: rgba(53, 255, 141, 0.08);
}

body[data-route="report"] .report-document h2,
body[data-route="report"] .report-document h3 {
  scroll-margin-top: 72px;
}

@media (min-width: 901px) {
  body[data-route="report"] .site-shell {
    width: min(1180px, calc(100% - 48px)) !important;
    max-width: 1180px !important;
  }

  body[data-route="report"] #report-view {
    padding: 0 0 36px !important;
  }

  body[data-route="report"] .report-layout {
    display: grid !important;
    grid-template-columns: minmax(240px, 280px) minmax(0, 1fr) !important;
    gap: 24px !important;
    align-items: start !important;
  }

  body[data-route="report"] .report-side {
    position: sticky !important;
    top: 72px !important;
    display: grid !important;
    gap: 16px !important;
    max-height: calc(100dvh - 88px);
    overflow: hidden;
  }

  body[data-route="report"] .report-chapters {
    display: grid !important;
    min-height: 160px;
    max-height: calc(100dvh - 390px);
    overflow-y: auto;
  }
}

@media (max-width: 900px) {
  body[data-route="report"] .report-layout {
    display: block !important;
  }

  body[data-route="report"] .report-side {
    display: none !important;
  }
}

@media print {
  body[data-route="report"] .report-toc-dialog,
  body[data-route="report"] .report-mobile-nav,
  body[data-route="report"] .report-side {
    display: none !important;
  }
}

/* V65 profile detail reset: person first, grouped birth data, clean report links. */
html body[data-route="profileDetail"] #profile-detail-view {
  padding: 0 14px 118px !important;
}

html body[data-route="profileDetail"] .profile-mobile-nav {
  margin: 0 -14px 14px !important;
  min-height: 52px !important;
  padding: 8px 14px !important;
  border-bottom: 1px solid rgba(53, 255, 141, 0.08) !important;
  background: rgba(1, 8, 6, 0.96) !important;
}

html body[data-route="profileDetail"] .profile-mobile-nav button {
  width: 36px !important;
  height: 36px !important;
  border-color: rgba(235, 255, 245, 0.1) !important;
  background: rgba(255, 255, 255, 0.03) !important;
  color: rgba(238, 255, 247, 0.88) !important;
  font-size: 24px !important;
}

html body[data-route="profileDetail"] .profile-mobile-nav h1 {
  color: rgba(238, 255, 247, 0.9) !important;
  font-size: 15px !important;
  font-weight: 850 !important;
}

html body[data-route="profileDetail"] .profile-detail-page,
html body[data-route="profileDetail"] .profile-detail-card {
  display: grid !important;
  gap: 12px !important;
}

html body[data-route="profileDetail"] .profile-detail-card {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body[data-route="profileDetail"] .profile-person-card,
html body[data-route="profileDetail"] .profile-info-card,
html body[data-route="profileDetail"] .profile-related {
  border: 1px solid rgba(53, 255, 141, 0.12) !important;
  border-radius: 18px !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,.045), rgba(255,255,255,.012) 48%, rgba(53,255,141,.025)),
    rgba(2, 13, 9, 0.76) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05) !important;
}

html body[data-route="profileDetail"] .profile-person-card {
  position: relative !important;
  display: grid !important;
  gap: 14px !important;
  padding: 16px !important;
}

html body[data-route="profileDetail"] .profile-person-main {
  display: grid !important;
  grid-template-columns: 54px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 12px !important;
  min-width: 0 !important;
}

html body[data-route="profileDetail"] .profile-detail-avatar {
  display: grid !important;
  width: 54px !important;
  height: 54px !important;
  place-items: center !important;
  border-radius: 17px !important;
  color: #03120a !important;
  background: linear-gradient(135deg, #35ff8d, #24dd76) !important;
  box-shadow: 0 12px 30px rgba(53, 255, 141, 0.16) !important;
  font-size: 21px !important;
  font-weight: 950 !important;
}

html body[data-route="profileDetail"] .profile-person-main h2 {
  margin: 0 0 6px !important;
  color: rgba(241, 255, 249, 0.96) !important;
  font-size: 27px !important;
  font-weight: 950 !important;
  line-height: 1.06 !important;
}

html body[data-route="profileDetail"] .profile-person-main p {
  margin: 0 !important;
  color: rgba(203, 226, 215, 0.68) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
}

html body[data-route="profileDetail"] .profile-person-meta {
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  gap: 8px !important;
  align-items: center !important;
  min-width: 0 !important;
}

html body[data-route="profileDetail"] .profile-person-meta span {
  min-width: 0 !important;
  overflow: hidden !important;
  padding: 8px 10px !important;
  border: 1px solid rgba(235, 255, 245, 0.08) !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.025) !important;
  color: rgba(235, 255, 245, 0.76) !important;
  font-size: 12px !important;
  font-weight: 760 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body[data-route="profileDetail"] .profile-person-meta span:last-child {
  color: rgba(184, 255, 213, 0.78) !important;
}

html body[data-route="profileDetail"] .profile-person-actions {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 82px !important;
  gap: 9px !important;
}

html body[data-route="profileDetail"] .profile-person-actions .primary {
  min-height: 46px !important;
  border: 1px solid rgba(53, 255, 141, 0.28) !important;
  border-radius: 999px !important;
  color: rgba(230, 255, 241, 0.94) !important;
  background:
    linear-gradient(180deg, rgba(53, 255, 141, 0.18), rgba(53, 255, 141, 0.055)),
    rgba(5, 18, 13, 0.72) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.11),
    inset 0 -1px 0 rgba(53, 255, 141, 0.08),
    0 12px 26px rgba(0, 0, 0, 0.24) !important;
  text-shadow: none !important;
  backdrop-filter: blur(14px) !important;
  font-size: 15px !important;
}

html body[data-route="profileDetail"] .profile-person-actions .primary:active,
html body[data-route="profileDetail"] .profile-more summary:active,
html body[data-route="profileDetail"] .profile-more button:active {
  transform: scale(0.985) !important;
}

html body[data-route="profileDetail"] .profile-more {
  position: relative !important;
}

html body[data-route="profileDetail"] .profile-more summary {
  display: grid !important;
  min-height: 46px !important;
  place-items: center !important;
  border: 1px solid rgba(235, 255, 245, 0.11) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.025) !important;
  color: rgba(235, 255, 245, 0.72) !important;
  cursor: pointer !important;
  font-size: 14px !important;
  font-weight: 850 !important;
  list-style: none !important;
}

html body[data-route="profileDetail"] .profile-more summary::-webkit-details-marker {
  display: none !important;
}

html body[data-route="profileDetail"] .profile-more div {
  position: absolute !important;
  top: calc(100% + 8px) !important;
  right: 0 !important;
  z-index: 35 !important;
  width: 126px !important;
  padding: 6px !important;
  border: 1px solid rgba(255, 98, 122, 0.24) !important;
  border-radius: 14px !important;
  background: rgba(6, 11, 9, 0.98) !important;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.38) !important;
}

html body[data-route="profileDetail"] .profile-more button {
  width: 100% !important;
  min-height: 38px !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: rgba(255, 98, 122, 0.08) !important;
  color: #ff7186 !important;
  font-size: 13px !important;
  font-weight: 850 !important;
}

html body[data-route="profileDetail"] .profile-info-card,
html body[data-route="profileDetail"] .profile-related {
  display: grid !important;
  gap: 10px !important;
  padding: 14px !important;
}

html body[data-route="profileDetail"] .profile-info-card h3,
html body[data-route="profileDetail"] .profile-section-head h3 {
  margin: 0 !important;
  color: rgba(238, 255, 247, 0.92) !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  line-height: 1.25 !important;
}

html body[data-route="profileDetail"] .profile-info-list {
  display: grid !important;
  gap: 0 !important;
}

html body[data-route="profileDetail"] .profile-info-list div {
  display: grid !important;
  grid-template-columns: 76px minmax(0, 1fr) !important;
  gap: 10px !important;
  align-items: start !important;
  min-height: 42px !important;
  padding: 10px 0 !important;
  border-bottom: 1px solid rgba(235, 255, 245, 0.065) !important;
}

html body[data-route="profileDetail"] .profile-info-list div:last-child {
  border-bottom: 0 !important;
}

html body[data-route="profileDetail"] .profile-info-list span {
  color: rgba(203, 226, 215, 0.5) !important;
  font-size: 12px !important;
  font-weight: 760 !important;
}

html body[data-route="profileDetail"] .profile-info-list b {
  color: rgba(238, 255, 247, 0.86) !important;
  font-size: 13px !important;
  font-weight: 780 !important;
  line-height: 1.55 !important;
  overflow-wrap: anywhere !important;
  text-align: left !important;
}

html body[data-route="profileDetail"] .profile-section-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
}

html body[data-route="profileDetail"] .profile-section-head span {
  color: rgba(184, 255, 213, 0.58) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

html body[data-route="profileDetail"] .profile-related > div {
  display: grid !important;
  gap: 8px !important;
}

html body[data-route="profileDetail"] .profile-related-report {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto 14px !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 58px !important;
  padding: 11px 0 !important;
  border: 0 !important;
  border-top: 1px solid rgba(235, 255, 245, 0.065) !important;
  border-radius: 0 !important;
  background: transparent !important;
  cursor: pointer !important;
}

html body[data-route="profileDetail"] .profile-related-report:first-child {
  border-top: 0 !important;
}

html body[data-route="profileDetail"] .profile-related-report b {
  display: block !important;
  margin: 0 0 5px !important;
  color: rgba(238, 255, 247, 0.9) !important;
  font-size: 14px !important;
  font-weight: 900 !important;
}

html body[data-route="profileDetail"] .profile-related-report small {
  color: rgba(203, 226, 215, 0.5) !important;
  font-size: 12px !important;
  font-weight: 650 !important;
}

html body[data-route="profileDetail"] .profile-related-report .status-pill {
  min-height: 24px !important;
  padding: 0 9px !important;
  font-size: 11px !important;
}

html body[data-route="profileDetail"] .profile-related-report > span:last-child {
  color: rgba(184, 255, 213, 0.36) !important;
  font-size: 20px !important;
}

html body[data-route="profileDetail"] .profile-related-report.empty {
  display: block !important;
  padding: 11px 0 2px !important;
  border: 0 !important;
  color: rgba(203, 226, 215, 0.48) !important;
  cursor: default !important;
  font-size: 13px !important;
}

@media (max-width: 374px) {
  html body[data-route="profileDetail"] .profile-person-actions {
    grid-template-columns: 1fr !important;
  }

  html body[data-route="profileDetail"] .profile-more div {
    right: auto !important;
    left: 0 !important;
  }
}

/* Basic Markdown rendering: semantic structure without report decoration. */
body[data-route="report"] .report-document,
body[data-route="report"] .report-document.doc-reader {
  padding: 24px !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: #d8ddda !important;
  background: #101412 !important;
  box-shadow: none !important;
}

body[data-route="report"] .doc-cover {
  padding: 0 0 20px !important;
  border-bottom: 1px solid #39403c !important;
}

body[data-route="report"] .doc-cover h1,
body[data-route="report"] .doc-cover h1 span {
  margin: 0 !important;
  color: #eef1ef !important;
  font-size: 30px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
}

body[data-route="report"] .doc-section {
  padding: 24px 0 !important;
  border-bottom: 1px solid #303632 !important;
}

body[data-route="report"] .doc-section h2,
body[data-route="report"] .doc-section h3,
body[data-route="report"] .doc-section h4 {
  color: #eef1ef !important;
  font-weight: 700 !important;
}

body[data-route="report"] .doc-section h2 {
  margin: 0 0 16px !important;
  font-size: 24px !important;
}

body[data-route="report"] .doc-section h3 {
  margin: 24px 0 10px !important;
  font-size: 20px !important;
}

body[data-route="report"] .doc-section h4 {
  margin: 20px 0 8px !important;
  font-size: 17px !important;
}

body[data-route="report"] .doc-section p,
body[data-route="report"] .doc-note p {
  max-width: none !important;
  margin: 0 0 14px !important;
  padding: 0 !important;
  color: #d1d7d3 !important;
  background: transparent !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.75 !important;
}

body[data-route="report"] .doc-section strong {
  color: #eef1ef !important;
  font-weight: 700 !important;
}

body[data-route="report"] .doc-note {
  display: block !important;
  max-width: none !important;
  margin: 16px 0 !important;
  padding: 4px 0 4px 16px !important;
  border: 0 !important;
  border-left: 3px solid #737b76 !important;
  background: transparent !important;
}

body[data-route="report"] .doc-table-wrap {
  width: 100%;
  margin: 16px 0 20px;
  overflow-x: auto;
}

body[data-route="report"] .doc-table {
  display: table !important;
  width: 100% !important;
  min-width: 560px;
  margin: 0 !important;
  border-collapse: collapse !important;
  border: 1px solid #454c48 !important;
  border-radius: 0 !important;
  color: #d8ddda !important;
  background: #101412 !important;
}

body[data-route="report"] .doc-table th,
body[data-route="report"] .doc-table td {
  padding: 9px 10px;
  border: 1px solid #454c48;
  color: #d1d7d3;
  background: #101412;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.55;
  text-align: left;
  vertical-align: top;
}

body[data-route="report"] .doc-table th {
  color: #eef1ef;
  background: #202622;
  font-weight: 700;
}

body[data-route="report"] .doc-list {
  display: block !important;
  max-width: none !important;
  margin: 12px 0 18px !important;
  padding-left: 24px !important;
  color: #d1d7d3 !important;
  line-height: 1.7 !important;
}

body[data-route="report"] .doc-list li {
  margin: 6px 0 !important;
  padding: 0 !important;
  border: 0 !important;
  color: #d1d7d3 !important;
  background: transparent !important;
  font-weight: 400 !important;
}

@media (max-width: 640px) {
  body[data-route="report"] .report-document,
  body[data-route="report"] .report-document.doc-reader {
    padding: 18px 14px !important;
  }
}