:root {
      --paper: #f7f2ea;
      --paper-deep: #ede5d8;
      --ink: #181715;
      --ink-soft: #4c4a45;
      --line: rgba(24, 23, 21, 0.14);
      --hairline: rgba(24, 23, 21, 0.1);
      --seal: #a73427;
      --gold: #ad8a4d;
      --wood: #4c8b66;
      --fire: #a33a2c;
      --earth: #bd914b;
      --metal: #7e8582;
      --water: #2d7182;
      --surface: rgba(255, 252, 247, 0.82);
      --shadow: 0 28px 80px rgba(54, 44, 32, 0.12);
      --serif: "Songti SC", "STSong", "Noto Serif CJK SC", serif;
      --kai: "Kaiti SC", "STKaiti", "KaiTi", "BiauKai", "Songti SC", serif;
      --sans: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      --ease: cubic-bezier(0.22, 1, 0.36, 1);
      --nav-safe-bottom: max(12px, env(safe-area-inset-bottom));
      --nav-height: calc(88px + max(0px, env(safe-area-inset-bottom) - 12px));
      --screen-bottom-gutter: calc(var(--nav-height) + 30px);
      --screen-min-height: calc(100dvh - var(--nav-height));
    }

/* Report preferences and per-report style switching · 2026-07-18 */
.profile-preferences-screen {
  background:
    radial-gradient(circle at 88% 9%, rgba(77, 117, 98, 0.1), transparent 28%),
    linear-gradient(180deg, #f7f3eb 0%, #f3eee5 100%);
}

.profile-preference-sync-mark {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  color: #315f50;
  border: 1px solid rgba(49, 95, 80, 0.16);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.48);
}

.profile-preference-sync-mark svg,
.report-preference-sync-note svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
}

.report-preference-shell {
  display: grid;
  gap: 18px;
  padding: 12px 16px 112px;
}

.report-preference-section {
  overflow: hidden;
  border: 1px solid rgba(39, 49, 43, 0.1);
  border-radius: 20px 17px 22px 18px;
  background: rgba(255, 253, 248, 0.86);
  box-shadow: 0 12px 28px rgba(43, 38, 28, 0.055);
}

.report-preference-heading {
  padding: 18px 18px 13px;
}

.report-preference-heading h2 {
  margin: 0;
  font-family: "Noto Serif SC", "Songti SC", serif;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.report-preference-heading p {
  margin: 7px 0 0;
  color: rgba(39, 44, 40, 0.58);
  font-size: 12px;
  line-height: 1.55;
}

.report-preference-value-row,
.report-preference-style-list > button,
.report-preference-product-list > button {
  width: 100%;
  color: inherit;
  border: 0;
  background: transparent;
  font: inherit;
  text-align: left;
}

.report-preference-value-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
  min-height: 68px;
  padding: 0 18px 14px;
}

.report-preference-value-row span,
.report-preference-style-list > button span,
.report-preference-product-list > button span {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.report-preference-value-row strong,
.report-preference-style-list > button strong,
.report-preference-product-list > button strong {
  font-size: 14px;
  font-weight: 650;
}

.report-preference-value-row small,
.report-preference-style-list > button small,
.report-preference-product-list > button small {
  color: rgba(39, 44, 40, 0.53);
  font-size: 11px;
  line-height: 1.45;
}

.report-preference-value-row em,
.report-preference-product-list > button em {
  color: #315f50;
  font-size: 12px;
  font-style: normal;
  white-space: nowrap;
}

.report-preference-value-row > i,
.report-preference-product-list > button > i {
  color: rgba(39, 44, 40, 0.36);
  font-size: 22px;
  font-style: normal;
}

.report-preference-style-list {
  display: grid;
  gap: 8px;
  padding: 0 10px 12px;
}

.report-preference-style-list > button,
.report-style-choice-list > button {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 22px;
  gap: 12px;
  align-items: center;
  min-height: 62px;
  padding: 11px 12px;
  border: 1px solid transparent;
  border-radius: 14px 12px 15px 11px;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.report-preference-style-list > button.is-selected,
.report-style-choice-list > button.is-selected {
  border-color: rgba(49, 95, 80, 0.24);
  background: rgba(49, 95, 80, 0.075);
}

.report-preference-style-list > button:active,
.report-preference-product-list > button:active,
.report-style-choice-list > button:active {
  transform: scale(0.99);
}

.report-preference-style-list > button > i,
.report-style-choice-list > button > i {
  position: relative;
  width: 20px;
  height: 20px;
  border: 1px solid rgba(39, 44, 40, 0.24);
  border-radius: 50%;
}

.report-preference-style-list > button.is-selected > i,
.report-style-choice-list > button.is-selected > i {
  border-color: #315f50;
  box-shadow: inset 0 0 0 5px #f8f5ed;
  background: #315f50;
}

.report-preference-product-list {
  border-top: 1px solid rgba(39, 49, 43, 0.08);
}

.report-preference-product-list > button {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
  min-height: 72px;
  padding: 10px 16px;
  border-bottom: 1px solid rgba(39, 49, 43, 0.075);
}

.report-preference-product-list > button:last-child {
  border-bottom: 0;
}

.report-preference-product-list > button > svg {
  width: 23px;
  height: 23px;
  padding: 5px;
  color: #315f50;
  border-radius: 11px 9px 12px 8px;
  background: rgba(49, 95, 80, 0.08);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
}

.report-preference-product-list > button.has-override em::before {
  content: "· ";
  color: #a85c3d;
}

.report-preference-sync-note {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin: -4px 4px 0;
  color: rgba(49, 95, 80, 0.72);
  font-size: 11px;
  line-height: 1.5;
}

.report-preference-sync-note svg {
  flex: 0 0 auto;
  margin-top: 1px;
}

.report-style-toolbar {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
  width: calc(100% - 32px);
  min-height: 62px;
  margin: 12px 16px 14px;
  padding: 9px 12px;
  color: #20241f;
  border: 1px solid rgba(49, 95, 80, 0.17);
  border-radius: 16px 13px 17px 12px;
  background: linear-gradient(110deg, rgba(249, 247, 239, 0.97), rgba(238, 243, 237, 0.94));
  box-shadow: 0 8px 22px rgba(42, 48, 41, 0.05);
  font: inherit;
  text-align: left;
}

.report-style-toolbar-mark {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  color: #315f50;
  border: 1px solid rgba(49, 95, 80, 0.21);
  border-radius: 50%;
  font-family: "Songti SC", serif;
  font-size: 15px;
}

.report-style-toolbar > span:nth-child(2) {
  display: grid;
  gap: 2px;
}

.report-style-toolbar small {
  color: rgba(39, 44, 40, 0.51);
  font-size: 10px;
}

.report-style-toolbar strong {
  font-size: 14px;
  font-weight: 650;
}

.report-style-toolbar em {
  color: rgba(49, 95, 80, 0.69);
  font-size: 10px;
  font-style: normal;
  white-space: nowrap;
}

.report-style-toolbar > i {
  color: rgba(49, 95, 80, 0.58);
  font-size: 21px;
  font-style: normal;
}

.report-style-toolbar.is-loading .report-style-toolbar-mark {
  animation: reportStylePulse 1.3s ease-in-out infinite;
}

@keyframes reportStylePulse {
  50% { opacity: 0.42; transform: scale(0.92); }
}

.report-reader-layout > .report-style-toolbar {
  grid-column: 1 / -1;
}

.report-preference-modal,
.report-style-modal {
  position: fixed;
  z-index: 1250;
  inset: 0;
}

.report-preference-modal[hidden],
.report-style-modal[hidden] {
  display: none !important;
}

.report-style-scrim {
  position: absolute;
  inset: 0;
  background: rgba(24, 27, 23, 0.4);
  backdrop-filter: blur(5px);
}

.report-style-sheet {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  max-height: min(82vh, 720px);
  overflow: auto;
  padding: 10px 16px calc(18px + env(safe-area-inset-bottom));
  border: 1px solid rgba(39, 49, 43, 0.12);
  border-bottom: 0;
  border-radius: 27px 23px 0 0;
  background:
    radial-gradient(circle at 90% 4%, rgba(49, 95, 80, 0.1), transparent 30%),
    #f8f4eb;
  box-shadow: 0 -18px 50px rgba(25, 27, 23, 0.18);
}

.report-style-sheet::before {
  content: "";
  display: block;
  width: 42px;
  height: 4px;
  margin: 0 auto 12px;
  border-radius: 999px;
  background: rgba(43, 48, 43, 0.18);
}

.report-style-sheet > header {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  padding: 2px 3px 0;
}

.report-style-sheet > header small {
  color: #8a553d;
  font-size: 10px;
  letter-spacing: 0.14em;
}

.report-style-sheet > header h2 {
  margin: 4px 0 0;
  font-family: "Noto Serif SC", "Songti SC", serif;
  font-size: 21px;
}

.report-style-sheet > header > button {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  color: rgba(39, 44, 40, 0.62);
  border: 0;
  border-radius: 50%;
  background: rgba(39, 44, 40, 0.06);
  font-size: 24px;
  font-weight: 300;
}

.report-style-sheet-copy {
  margin: 9px 3px 12px;
  color: rgba(39, 44, 40, 0.58);
  font-size: 11px;
  line-height: 1.55;
}

.report-style-choice-list {
  display: grid;
  gap: 7px;
}

.report-style-choice-list > button {
  width: 100%;
  color: inherit;
  background: rgba(255, 253, 248, 0.72);
  font: inherit;
  text-align: left;
}

.report-style-choice-list > button span {
  display: grid;
  gap: 4px;
}

.report-style-choice-list > button strong {
  font-size: 14px;
}

.report-style-choice-list > button small {
  color: rgba(39, 44, 40, 0.53);
  font-size: 11px;
}

.report-style-sheet-actions {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.report-style-sheet-actions button {
  min-height: 46px;
  color: #315f50;
  border: 1px solid rgba(49, 95, 80, 0.2);
  border-radius: 14px 11px 15px 10px;
  background: rgba(255, 253, 248, 0.72);
  font: inherit;
  font-size: 13px;
  font-weight: 650;
}

.report-style-sheet-actions button.primary {
  color: #fffdf8;
  border-color: #315f50;
  background: #315f50;
  box-shadow: 0 8px 18px rgba(49, 95, 80, 0.18);
}

@media (min-width: 760px) {
  .report-preference-shell {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 920px;
    margin: 0 auto;
    padding-top: 22px;
  }

  .report-preference-section:last-of-type,
  .report-preference-sync-note {
    grid-column: 1 / -1;
  }

  .report-preference-product-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .report-preference-product-list > button:nth-child(odd) {
    border-right: 1px solid rgba(39, 49, 43, 0.075);
  }

  .report-style-sheet {
    right: 24px;
    bottom: 24px;
    left: auto;
    width: min(430px, calc(100vw - 48px));
    border-bottom: 1px solid rgba(39, 49, 43, 0.12);
    border-radius: 24px 20px 25px 19px;
    padding-bottom: 18px;
  }

  .report-style-sheet::before {
    display: none;
  }
}

    /* 完整用户协议与隐私政策 v1 */
    .legal-entry-rows + .about-disclosures {
      margin-top: 0;
    }

    .legal-document-screen {
      --legal-ink: #28231d;
      --legal-muted: rgba(40, 35, 29, 0.58);
      --legal-jade: #315f50;
      --legal-gold: #9b793e;
      padding-top: 18px;
      padding-bottom: calc(var(--screen-bottom-gutter) + 40px);
      background:
        radial-gradient(circle at 50% -2%, rgba(255, 255, 255, 0.92), transparent 30%),
        linear-gradient(180deg, #faf6ee 0%, #f3ecdf 100%);
    }

    .legal-document-topbar,
    .legal-document-shell {
      width: min(100%, 980px);
      margin-right: auto;
      margin-left: auto;
    }

    .legal-document-topbar {
      margin-bottom: 24px;
    }

    .legal-document-intro {
      position: relative;
      padding: 32px 34px 27px;
      overflow: hidden;
      border: 1px solid rgba(87, 72, 52, 0.14);
      border-radius: 20px;
      background:
        radial-gradient(circle at 100% 0%, rgba(155, 121, 62, 0.1), transparent 32%),
        rgba(255, 253, 248, 0.88);
      box-shadow: 0 18px 42px rgba(57, 43, 29, 0.045);
    }

    .legal-document-intro::after {
      content: "RULES";
      position: absolute;
      right: 22px;
      top: 10px;
      color: rgba(87, 72, 52, 0.035);
      font: 800 62px/1 Georgia, serif;
      letter-spacing: 0.05em;
      pointer-events: none;
    }

    .privacy-policy-intro::after {
      content: "PRIVACY";
    }

    .legal-document-intro > small {
      position: relative;
      z-index: 1;
      color: var(--legal-gold);
      font-family: var(--sans);
      font-size: 9px;
      font-weight: 800;
      letter-spacing: 0.16em;
    }

    .legal-document-intro h2 {
      position: relative;
      z-index: 1;
      max-width: 21em;
      margin: 8px 0 10px;
      color: var(--legal-ink);
      font-size: clamp(22px, 3vw, 30px);
      line-height: 1.3;
      letter-spacing: 0.05em;
      text-wrap: balance;
    }

    .legal-document-intro > p:not(.legal-release-note) {
      position: relative;
      z-index: 1;
      max-width: 67ch;
      margin: 0;
      color: var(--legal-muted);
      font-family: var(--sans);
      font-size: 11px;
      line-height: 1.8;
    }

    .legal-document-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 7px 18px;
      margin-top: 17px;
      padding-top: 14px;
      border-top: 1px solid rgba(87, 72, 52, 0.1);
      color: rgba(49, 95, 80, 0.76);
      font-family: var(--sans);
      font-size: 9px;
      letter-spacing: 0.03em;
    }

    .legal-document-meta span::before {
      content: "·";
      margin-right: 6px;
      color: var(--legal-gold);
      font-weight: 800;
    }

    .legal-release-note {
      position: relative;
      z-index: 1;
      margin: 15px 0 0;
      padding: 11px 13px;
      border-left: 2px solid rgba(167, 71, 56, 0.56);
      border-radius: 0 10px 10px 0;
      background: rgba(167, 71, 56, 0.05);
      color: rgba(91, 38, 31, 0.7);
      font-family: var(--sans);
      font-size: 10px;
      line-height: 1.7;
    }

    .legal-release-note b {
      margin-right: 5px;
      color: #8d3f34;
    }

    .legal-document-layout {
      display: grid;
      grid-template-columns: 168px minmax(0, 1fr);
      align-items: start;
      gap: 28px;
      margin-top: 30px;
    }

    .legal-document-index {
      position: sticky;
      top: 22px;
      display: grid;
      gap: 2px;
      padding: 14px 0;
      border-block: 1px solid rgba(87, 72, 52, 0.14);
    }

    .legal-document-index strong {
      padding: 0 10px 9px;
      color: var(--legal-gold);
      font-size: 10px;
      letter-spacing: 0.1em;
    }

    .legal-document-index button {
      width: 100%;
      padding: 7px 10px;
      border: 0;
      border-radius: 8px;
      background: transparent;
      color: rgba(40, 35, 29, 0.56);
      font-family: var(--sans);
      font-size: 9px;
      line-height: 1.35;
      text-align: left;
      transition: color 180ms var(--ease), background-color 180ms var(--ease), transform 180ms var(--ease);
    }

    .legal-document-body {
      min-width: 0;
      overflow: hidden;
      border: 1px solid rgba(87, 72, 52, 0.13);
      border-radius: 20px;
      background: rgba(255, 253, 248, 0.85);
      box-shadow: 0 16px 38px rgba(57, 43, 29, 0.04);
    }

    .legal-clause {
      padding: 27px 30px 30px;
      scroll-margin-top: 24px;
    }

    .legal-clause + .legal-clause {
      border-top: 1px solid rgba(87, 72, 52, 0.1);
    }

    .legal-clause > header {
      display: grid;
      grid-template-columns: 30px minmax(0, 1fr);
      align-items: baseline;
      gap: 8px;
      margin-bottom: 13px;
    }

    .legal-clause > header span {
      color: rgba(155, 121, 62, 0.72);
      font: 700 9px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
      font-variant-numeric: tabular-nums;
    }

    .legal-clause h2 {
      margin: 0;
      color: var(--legal-ink);
      font-size: 17px;
      line-height: 1.4;
      letter-spacing: 0.07em;
    }

    .legal-clause p,
    .legal-clause li {
      color: rgba(40, 35, 29, 0.63);
      font-family: var(--sans);
      font-size: 11px;
      line-height: 1.9;
    }

    .legal-clause p {
      max-width: 70ch;
      margin: 0 0 11px 38px;
      text-wrap: pretty;
    }

    .legal-clause p:last-child {
      margin-bottom: 0;
    }

    .legal-clause ul {
      display: grid;
      gap: 6px;
      max-width: 70ch;
      margin: 0 0 13px 38px;
      padding: 0;
      list-style: none;
    }

    .legal-clause li {
      position: relative;
      padding-left: 15px;
    }

    .legal-clause li::before {
      content: "—";
      position: absolute;
      left: 0;
      color: rgba(155, 121, 62, 0.78);
    }

    .legal-clause a {
      color: var(--legal-jade);
      text-underline-offset: 3px;
    }

    .legal-clause-important {
      background:
        linear-gradient(90deg, rgba(167, 71, 56, 0.045), transparent 70%),
        rgba(255, 252, 246, 0.48);
    }

    .legal-clause-important > header h2 {
      color: rgba(118, 47, 39, 0.92);
    }

    .legal-data-table {
      max-width: 100%;
      margin: 3px 0 15px 38px;
      overflow: hidden;
      border: 1px solid rgba(87, 72, 52, 0.12);
      border-radius: 13px;
    }

    .legal-data-row {
      display: grid;
      grid-template-columns: minmax(90px, 0.7fr) minmax(0, 1.5fr) minmax(0, 1.25fr);
      align-items: start;
    }

    .legal-data-row + .legal-data-row {
      border-top: 1px solid rgba(87, 72, 52, 0.09);
    }

    .legal-data-row > * {
      min-width: 0;
      padding: 10px 12px;
      color: rgba(40, 35, 29, 0.58);
      font-family: var(--sans);
      font-size: 9px;
      font-weight: 400;
      line-height: 1.65;
      overflow-wrap: anywhere;
    }

    .legal-data-row > * + * {
      border-left: 1px solid rgba(87, 72, 52, 0.08);
    }

    .legal-data-row strong {
      color: rgba(49, 95, 80, 0.86);
      font-weight: 700;
    }

    .legal-data-row.is-head {
      background: rgba(49, 95, 80, 0.055);
    }

    .legal-data-row.is-head b {
      color: rgba(40, 35, 29, 0.72);
      font-weight: 700;
      letter-spacing: 0.04em;
    }

    @media (hover: hover) and (pointer: fine) {
      .legal-document-index button:hover {
        background: rgba(49, 95, 80, 0.055);
        color: var(--legal-jade);
        transform: translateX(2px);
      }
    }

    .legal-document-index button:focus-visible,
    .legal-clause a:focus-visible {
      outline: 2px solid rgba(49, 95, 80, 0.45);
      outline-offset: 2px;
    }

    @media (max-width: 1024px) {
      .legal-document-screen {
        padding-top: max(14px, env(safe-area-inset-top));
        padding-right: 18px;
        padding-left: 18px;
      }

      .legal-document-topbar {
        margin-bottom: 18px;
      }

      .legal-document-intro {
        padding: 22px 18px 18px;
        border-radius: 17px;
      }

      .legal-document-intro::after {
        right: 8px;
        top: 16px;
        font-size: 38px;
      }

      .legal-document-intro h2 {
        font-size: 20px;
      }

      .legal-document-meta {
        display: grid;
        gap: 5px;
      }

      .legal-release-note {
        font-size: 9px;
      }

      .legal-document-layout {
        grid-template-columns: 1fr;
        gap: 14px;
        margin-top: 22px;
      }

      .legal-document-index {
        position: static;
        grid-auto-flow: column;
        grid-auto-columns: max-content;
        gap: 4px;
        margin-right: -18px;
        margin-left: -18px;
        padding: 10px 18px;
        overflow-x: auto;
        border-block: 1px solid rgba(87, 72, 52, 0.12);
        scrollbar-width: none;
      }

      .legal-document-index::-webkit-scrollbar {
        display: none;
      }

      .legal-document-index strong {
        display: none;
      }

      .legal-document-index button {
        width: auto;
        padding: 6px 9px;
        border: 1px solid rgba(87, 72, 52, 0.1);
        background: rgba(255, 253, 248, 0.54);
        white-space: nowrap;
      }

      .legal-document-body {
        margin-right: -1px;
        margin-left: -1px;
        border-radius: 16px;
      }

      .legal-clause {
        padding: 21px 16px 23px;
      }

      .legal-clause > header {
        grid-template-columns: 25px minmax(0, 1fr);
        gap: 6px;
        margin-bottom: 11px;
      }

      .legal-clause h2 {
        font-size: 15px;
      }

      .legal-clause p,
      .legal-clause ul {
        margin-left: 31px;
      }

      .legal-clause p,
      .legal-clause li {
        font-size: 10px;
        line-height: 1.85;
      }

      .legal-data-table {
        margin-left: 31px;
        overflow: visible;
        border: 0;
        border-radius: 0;
      }

      .legal-data-row,
      .legal-data-row.is-head {
        display: grid;
        grid-template-columns: 1fr;
        padding: 10px 12px;
        border: 1px solid rgba(87, 72, 52, 0.1);
        border-radius: 11px;
        background: rgba(255, 253, 248, 0.66);
      }

      .legal-data-row + .legal-data-row {
        margin-top: 7px;
        border-top: 1px solid rgba(87, 72, 52, 0.1);
      }

      .legal-data-row.is-head {
        display: none;
      }

      .legal-data-row > * {
        padding: 2px 0;
        border: 0 !important;
      }

      .legal-data-row strong {
        margin-bottom: 3px;
        font-size: 10px;
      }
    }

    * {
      box-sizing: border-box;
    }

    [hidden] {
      display: none !important;
    }

    .sr-only {
      position: absolute !important;
      width: 1px !important;
      height: 1px !important;
      padding: 0 !important;
      margin: -1px !important;
      overflow: hidden !important;
      clip: rect(0, 0, 0, 0) !important;
      white-space: nowrap !important;
      border: 0 !important;
    }

    html,
    body {
      width: 100%;
      min-height: 100%;
      margin: 0;
      overflow-x: hidden;
      color: var(--ink);
      background:
        radial-gradient(circle at 50% -8%, rgba(255, 255, 255, 0.86), transparent 42%),
        linear-gradient(135deg, rgba(116, 92, 53, 0.05), transparent 32%),
        var(--paper);
      font-family: var(--sans);
      scroll-behavior: smooth;
    }

    body::before {
      content: "";
      position: fixed;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      opacity: 0.42;
      background-image:
        repeating-linear-gradient(0deg, rgba(24, 23, 21, 0.026) 0 1px, transparent 1px 4px),
        repeating-linear-gradient(90deg, rgba(24, 23, 21, 0.018) 0 1px, transparent 1px 5px);
      mix-blend-mode: multiply;
    }

    button {
      color: inherit;
      font: inherit;
      -webkit-tap-highlight-color: transparent;
    }

    button:focus-visible,
    summary:focus-visible {
      outline: 2px solid rgba(167, 52, 39, 0.48);
      outline-offset: 3px;
    }

    .workspace {
      position: relative;
      z-index: 1;
      width: 100%;
      min-height: 100dvh;
      margin: 0 auto;
      background:
        radial-gradient(circle at 18% 7%, rgba(255, 255, 255, 0.78), transparent 30%),
        radial-gradient(circle at 82% 3%, rgba(173, 138, 77, 0.08), transparent 28%),
        linear-gradient(180deg, rgba(255, 252, 247, 0.66), rgba(247, 242, 234, 0.96));
      overflow: visible;
    }

    .svg-defs {
      position: absolute;
      width: 0;
      height: 0;
      overflow: hidden;
    }

    .screen {
      position: relative;
      z-index: 1;
      display: none;
      min-height: var(--screen-min-height);
      padding: 24px 22px var(--screen-bottom-gutter);
      animation: pageIn 360ms var(--ease) both;
    }

    .screen.is-active {
      display: block;
    }

    @media (min-width: 760px) and (hover: hover) and (pointer: fine) {
      body {
        padding: 24px 0;
      }

      .workspace,
      .nav {
        width: min(100%, 480px);
      }

      .workspace {
        min-height: calc(100dvh - 48px);
        border: 1px solid rgba(24, 23, 21, 0.08);
        box-shadow: var(--shadow);
      }

      .screen {
        min-height: calc(100dvh - 48px - var(--nav-height));
      }
    }

    body.app-booting .screen.is-active,
    body.app-booting .nav {
      display: none;
    }

    .auth-screen {
      min-height: 100dvh;
      padding: max(54px, env(safe-area-inset-top) + 24px) 26px max(28px, env(safe-area-inset-bottom) + 22px);
      overflow: hidden;
      background:
        radial-gradient(circle at 50% 5%, rgba(255, 255, 255, 0.88), transparent 34%),
        linear-gradient(180deg, rgba(255, 252, 247, 0.74), rgba(247, 242, 234, 0.9));
    }

    .auth-screen::after {
      content: "";
      position: absolute;
      right: -108px;
      bottom: -34px;
      left: -108px;
      height: min(300px, 36dvh);
      pointer-events: none;
      opacity: 0.56;
      background: url("/assets/auth-ink/auth-mist-mountains-v1.webp") center bottom / cover no-repeat;
      mix-blend-mode: multiply;
      -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.08) 14%, rgba(0, 0, 0, 0.72) 34%, #000 58%);
      mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.08) 14%, rgba(0, 0, 0, 0.72) 34%, #000 58%);
    }

    .auth-content {
      position: relative;
      z-index: 1;
      display: grid;
      gap: 24px;
      min-height: calc(100dvh - 94px);
      align-content: start;
    }

    .auth-brand {
      display: grid;
      justify-items: center;
      gap: 12px;
      padding-top: 8px;
      text-align: center;
    }

    .auth-seal {
      position: relative;
      display: grid;
      place-items: center;
      width: 48px;
      height: 74px;
      border: 0;
      color: #244d38;
      font-family: var(--serif);
      font-size: 18px;
      font-weight: 800;
      line-height: 1.05;
      background: url("/assets/auth-ink/auth-seal-jade-v2.webp") center / 100% 100% no-repeat;
      filter: drop-shadow(0 10px 22px rgba(54, 44, 32, 0.1));
      text-shadow: 0 1px 0 rgba(255, 252, 247, 0.7);
      writing-mode: vertical-rl;
    }

    .auth-title h1 {
      margin: 0;
      color: var(--ink);
      font-family: var(--serif);
      font-size: 36px;
      line-height: 1.1;
      letter-spacing: 0.08em;
    }

    .auth-title p {
      margin: 8px 0 0;
      color: rgba(24, 23, 21, 0.5);
      font-family: var(--serif);
      font-size: 15px;
      line-height: 1.5;
      letter-spacing: 0.1em;
    }

    .auth-panel {
      display: grid;
      gap: 13px;
      border: 1px solid rgba(173, 138, 77, 0.18);
      border-radius: 16px;
      padding: 18px;
      background:
        linear-gradient(180deg, rgba(255, 252, 247, 0.82), rgba(255, 252, 247, 0.54)),
        rgba(255, 252, 247, 0.62);
      box-shadow: 0 24px 56px rgba(54, 44, 32, 0.085);
    }

    .onboarding-content {
      gap: 16px;
      align-content: start;
      min-height: calc(100dvh - 94px);
      padding-top: 2px;
    }

    .onboarding-brand {
      gap: 10px;
      padding-top: 0;
    }

    .onboarding-screen .auth-title h1 {
      max-width: 340px;
      font-size: 32px;
      line-height: 1.14;
      letter-spacing: 0;
      text-indent: 0;
    }

    .onboarding-screen .auth-title p {
      margin-top: 8px;
      font-size: 14px;
      letter-spacing: 0.02em;
    }

    .onboarding-ritual {
      position: relative;
      z-index: 1;
      display: grid;
      place-items: center;
      min-height: 168px;
      margin: -4px 0 -8px;
    }

    .onboarding-ritual::before,
    .onboarding-ritual::after {
      content: "";
      position: absolute;
      left: 50%;
      width: 1px;
      height: 36px;
      background: linear-gradient(180deg, transparent, rgba(173, 138, 77, 0.38), transparent);
      transform: translateX(-50%);
    }

    .onboarding-ritual::before {
      top: 0;
    }

    .onboarding-ritual::after {
      bottom: 0;
    }

    .ritual-disc {
      position: relative;
      display: grid;
      place-items: center;
      width: min(190px, 48vw);
      aspect-ratio: 1;
      border-radius: 50%;
      filter: drop-shadow(0 18px 28px rgba(77, 58, 33, 0.13));
    }

    .ritual-disc::before,
    .ritual-disc::after {
      content: "";
      position: absolute;
      border-radius: 50%;
      pointer-events: none;
    }

    .ritual-disc::before {
      inset: 14%;
      z-index: 0;
      background:
        radial-gradient(circle, rgba(255, 252, 247, 0.68), rgba(221, 198, 154, 0.2) 54%, transparent 70%);
      filter: blur(12px);
    }

    .ritual-disc::after {
      inset: -4px;
      z-index: 0;
      border: 1px solid rgba(173, 138, 77, 0.14);
    }

    .ritual-disc img {
      position: relative;
      z-index: 1;
      display: block;
      width: 100%;
      height: 100%;
      object-fit: contain;
    }

    .onboarding-panel {
      position: relative;
      z-index: 1;
      display: grid;
      gap: 12px;
      border: 1px solid rgba(173, 138, 77, 0.26);
      border-radius: 10px;
      padding: 14px 20px 16px;
      background:
        linear-gradient(180deg, rgba(255, 252, 247, 0.9), rgba(255, 252, 247, 0.68)),
        linear-gradient(90deg, rgba(36, 77, 56, 0.06), transparent 24%, transparent 76%, rgba(167, 52, 39, 0.05));
      box-shadow:
        inset 0 1px 0 rgba(255, 252, 247, 0.86),
        0 18px 46px rgba(54, 44, 32, 0.075);
    }

    .onboarding-copy {
      display: grid;
      gap: 6px;
      text-align: center;
    }

    .onboarding-kicker {
      color: rgba(167, 52, 39, 0.74);
      font-family: var(--serif);
      font-size: 12px;
      font-weight: 800;
      letter-spacing: 0.18em;
      text-indent: 0.18em;
    }

    .onboarding-copy strong {
      color: var(--ink);
      font-family: var(--serif);
      font-size: 25px;
      line-height: 1.18;
      letter-spacing: 0.04em;
    }

    .onboarding-copy p {
      margin: 0;
      color: rgba(24, 23, 21, 0.6);
      font-size: 13px;
      line-height: 1.62;
      text-wrap: pretty;
    }

    .onboarding-steps {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 0;
      margin: 0;
      padding: 6px 0 0;
      border-top: 1px solid rgba(24, 23, 21, 0.08);
      list-style: none;
      counter-reset: ritual-step;
    }

    .onboarding-steps li {
      position: relative;
      display: grid;
      gap: 7px;
      justify-items: center;
      min-height: 72px;
      padding: 10px 6px 2px;
      text-align: center;
      counter-increment: ritual-step;
    }

    .onboarding-steps svg {
      width: 22px;
      height: 22px;
      color: rgba(96, 72, 42, 0.72);
      fill: none;
      stroke: currentColor;
      stroke-width: 1.5;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .onboarding-steps li::before {
      content: counter(ritual-step);
      position: absolute;
      top: 3px;
      right: 10px;
      color: rgba(167, 52, 39, 0.38);
      font: 700 11px/1 var(--serif);
    }

    .onboarding-steps li + li {
      border-left: 1px solid rgba(24, 23, 21, 0.08);
    }

    .onboarding-steps span {
      display: grid;
      gap: 4px;
    }

    .onboarding-steps b {
      color: rgba(24, 23, 21, 0.82);
      font-family: var(--serif);
      font-size: 14px;
      line-height: 1.15;
      letter-spacing: 0.08em;
    }

    .onboarding-steps small {
      color: rgba(24, 23, 21, 0.48);
      font-size: 11px;
      line-height: 1.45;
    }

    .onboarding-actions {
      display: grid;
      gap: 6px;
      justify-items: center;
      padding-top: 0;
    }

    .onboarding-actions .auth-primary {
      min-width: 172px;
    }

    .auth-field {
      position: relative;
      display: grid;
      grid-template-columns: 24px 1fr auto;
      align-items: center;
      min-height: 56px;
      border: 1px solid rgba(24, 23, 21, 0.12);
      border-radius: 8px;
      padding: 0 12px;
      background: rgba(255, 252, 247, 0.54);
      transition: border-color 180ms var(--ease), box-shadow 180ms var(--ease), background 180ms var(--ease);
    }

    .auth-field:focus-within {
      border-color: rgba(76, 139, 102, 0.58);
      background: rgba(255, 252, 247, 0.74);
      box-shadow: inset 0 -2px 0 rgba(76, 139, 102, 0.24);
    }

    .auth-field.is-invalid {
      border-color: rgba(167, 52, 39, 0.46);
      box-shadow: inset 0 -2px 0 rgba(167, 52, 39, 0.18);
    }

    .auth-field svg {
      width: 18px;
      height: 18px;
      color: rgba(24, 23, 21, 0.46);
      fill: none;
      stroke: currentColor;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .auth-field input {
      width: 100%;
      min-width: 0;
      border: 0;
      outline: 0;
      padding: 0 8px;
      color: var(--ink);
      font-size: 16px;
      background: transparent;
    }

    .auth-field input::placeholder {
      color: rgba(24, 23, 21, 0.34);
    }

    .auth-eye,
    .auth-code-button {
      border: 0;
      padding: 0;
      background: transparent;
      color: rgba(24, 23, 21, 0.5);
    }

    .auth-eye svg {
      width: 20px;
      height: 20px;
    }

    .auth-code-button {
      border-left: 1px solid rgba(24, 23, 21, 0.12);
      padding-left: 14px;
      color: var(--seal);
      font-size: 14px;
      font-weight: 700;
      white-space: nowrap;
    }

    .auth-primary {
      position: relative;
      min-height: 58px;
      border: 0;
      border-radius: 8px;
      overflow: hidden;
      color: rgba(255, 252, 247, 0.94);
      font-family: var(--serif);
      font-size: 19px;
      font-weight: 800;
      letter-spacing: 0.12em;
      background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.08), transparent 34%),
        linear-gradient(180deg, #1d2d28, #111c18);
      box-shadow: 0 16px 30px rgba(17, 28, 24, 0.16);
    }

    .auth-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-top: -2px;
      color: rgba(24, 23, 21, 0.58);
      font-size: 14px;
    }

    .auth-link {
      border: 0;
      padding: 0;
      background: transparent;
      color: var(--seal);
      font-weight: 650;
    }

    .auth-divider {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
      gap: 10px;
      margin: 5px 0 0;
      color: rgba(24, 23, 21, 0.42);
      font-family: var(--serif);
      font-size: 14px;
    }

    .auth-divider::before,
    .auth-divider::after {
      content: "";
      height: 1px;
      background: rgba(24, 23, 21, 0.08);
    }

    .auth-providers {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
      margin-top: 2px;
    }

    .auth-provider {
      display: grid;
      place-items: center;
      gap: 7px;
      border: 0;
      padding: 0;
      background: transparent;
      color: rgba(24, 23, 21, 0.7);
      font-size: 13px;
    }

    .auth-provider b {
      display: grid;
      place-items: center;
      width: 50px;
      height: 50px;
      border: 1px solid rgba(24, 23, 21, 0.1);
      border-radius: 50%;
      background: rgba(255, 252, 247, 0.72);
      box-shadow: 0 10px 24px rgba(54, 44, 32, 0.06);
      font-size: 21px;
      line-height: 1;
    }

    .auth-provider.google b {
      color: #d64b35;
      font-family: Inter, var(--sans);
      font-weight: 800;
    }

    .auth-provider.wechat b {
      color: #39a956;
      font-size: 18px;
    }

    .auth-check {
      display: grid;
      grid-template-columns: 18px 1fr;
      gap: 8px;
      align-items: start;
      color: rgba(24, 23, 21, 0.58);
      font-size: 13px;
      line-height: 1.6;
    }

    .auth-check.is-invalid {
      color: rgba(167, 52, 39, 0.82);
    }

    .auth-check input {
      width: 18px;
      height: 18px;
      margin: 2px 0 0;
      accent-color: var(--wood);
    }

    .auth-check.is-invalid input {
      outline: 2px solid rgba(167, 52, 39, 0.22);
      outline-offset: 2px;
    }

    .auth-switch {
      position: relative;
      z-index: 1;
      align-self: end;
      margin-top: auto;
      padding-bottom: 74px;
      text-align: center;
      color: rgba(24, 23, 21, 0.54);
      font-size: 14px;
    }

    @media (max-height: 760px) {
      .auth-screen {
        padding-top: max(28px, env(safe-area-inset-top) + 14px);
      }

      .auth-content {
        gap: 16px;
      }

      .auth-brand {
        gap: 10px;
        padding-top: 0;
      }

      .auth-seal {
        width: 42px;
        height: 64px;
        font-size: 16px;
      }

      .auth-title h1 {
        font-size: 32px;
      }

      .auth-title p {
        margin-top: 5px;
      }

      .auth-panel {
        gap: 10px;
        padding: 15px;
      }

      .auth-field {
        min-height: 50px;
      }

      .auth-primary {
        min-height: 52px;
      }

      .auth-switch {
        padding-bottom: 54px;
      }
    }

    @keyframes pageIn {
      from {
        opacity: 0;
        transform: translateY(14px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .topbar {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 16px;
      min-height: 48px;
    }

    .identity {
      display: grid;
      gap: 4px;
      min-width: 0;
    }

    .name {
      display: flex;
      align-items: center;
      gap: 7px;
      margin: 0;
      font-family: Georgia, var(--serif);
      font-size: 29px;
      font-weight: 600;
      letter-spacing: 0;
      line-height: 1;
    }

    .male {
      color: var(--water);
      font-size: 18px;
      transform: translateY(-3px);
    }

    .female {
      color: var(--seal);
      font-size: 18px;
      transform: translateY(-3px);
    }

    .muted {
      margin: 0;
      color: rgba(24, 23, 21, 0.64);
      font-size: 13px;
      line-height: 1.45;
    }

    .icon-button {
      display: grid;
      place-items: center;
      width: 40px;
      height: 40px;
      padding: 0;
      border: 1px solid rgba(24, 23, 21, 0.14);
      border-radius: 14px;
      background: rgba(255, 252, 247, 0.76);
      box-shadow: 0 10px 28px rgba(54, 44, 32, 0.1);
      cursor: pointer;
      transition: transform 420ms var(--ease), border-color 420ms var(--ease), background 420ms var(--ease), box-shadow 420ms var(--ease), color 420ms var(--ease);
    }

    .icon-button:active {
      transform: scale(0.96);
    }

    .icon-button svg {
      width: 20px;
      height: 20px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.9;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .page-head {
      display: grid;
      grid-template-columns: 42px 1fr 42px;
      align-items: start;
      gap: 8px;
      margin-bottom: 18px;
    }

    .page-title {
      display: grid;
      gap: 5px;
      justify-items: center;
      text-align: center;
    }

    .page-title h1 {
      margin: 0;
      font-family: var(--serif);
      font-size: 22px;
      font-weight: 700;
      letter-spacing: 0.14em;
      line-height: 1.16;
    }

    .page-title .seal {
      margin-left: 2px;
      vertical-align: 4px;
    }

    .sub {
      margin: 0;
      color: rgba(24, 23, 21, 0.58);
      font-family: var(--serif);
      font-size: 12px;
      letter-spacing: 0.18em;
      line-height: 1.2;
    }

    .seal {
      display: inline-grid;
      place-items: center;
      min-width: 18px;
      height: 22px;
      padding: 0 3px;
      border: 1px solid var(--seal);
      border-radius: 7px;
      color: var(--seal);
      font-family: var(--serif);
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0;
      line-height: 1;
    }

    .vertical-label {
      position: absolute;
      right: 20px;
      top: 88px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      color: var(--ink);
      font-family: var(--serif);
      font-size: 25px;
      font-weight: 650;
      letter-spacing: 0.12em;
      writing-mode: vertical-rl;
      line-height: 1.05;
    }

    .hero {
      position: relative;
      min-height: 430px;
      margin-top: 12px;
      display: grid;
      place-items: center;
      isolation: isolate;
    }

    .dragon-art {
      width: 300px;
      height: auto;
      color: var(--ink);
      object-fit: contain;
      mix-blend-mode: multiply;
      filter: drop-shadow(0 18px 24px rgba(24, 23, 21, 0.1));
    }

    .dragon-art.soft {
      opacity: 0.12;
      filter: none;
    }

    .hero .dragon-art {
      position: absolute;
      top: 0;
      left: 36px;
      z-index: -1;
      width: 264px;
      opacity: 0.94;
    }

    .seal-wheel {
      --wheel-active: var(--wood);
      position: relative;
      display: grid;
      place-items: center;
      width: 214px;
      height: 214px;
      border: 1px solid rgba(173, 138, 77, 0.34);
      border-radius: 50%;
      background:
        radial-gradient(circle at 50% 50%, rgba(255, 252, 247, 0.94) 0 28%, rgba(255, 252, 247, 0.64) 29% 44%, transparent 45%),
        conic-gradient(from -90deg,
          rgba(163, 58, 44, 0.12) 0 72deg,
          rgba(189, 145, 75, 0.12) 72deg 144deg,
          rgba(126, 133, 130, 0.12) 144deg 216deg,
          rgba(45, 113, 130, 0.12) 216deg 288deg,
          rgba(76, 139, 102, 0.12) 288deg 360deg),
        rgba(255, 252, 247, 0.56);
      box-shadow:
        inset 0 0 0 8px rgba(255, 252, 247, 0.56),
        inset 0 0 0 38px rgba(255, 252, 247, 0.22),
        0 22px 54px rgba(54, 44, 32, 0.13);
      backdrop-filter: blur(2px);
    }

    .seal-wheel::before,
    .seal-wheel::after {
      content: "";
      position: absolute;
      border-radius: 50%;
      pointer-events: none;
    }

    .seal-wheel::before {
      inset: 16px;
      border: 1px solid rgba(24, 23, 21, 0.08);
      box-shadow: inset 0 0 0 1px rgba(255, 252, 247, 0.64);
    }

    .seal-wheel::after {
      inset: 48px;
      border: 1px dashed rgba(173, 138, 77, 0.28);
      background:
        linear-gradient(90deg, transparent calc(50% - 0.5px), rgba(173, 138, 77, 0.15) 50%, transparent calc(50% + 0.5px)),
        linear-gradient(0deg, transparent calc(50% - 0.5px), rgba(173, 138, 77, 0.15) 50%, transparent calc(50% + 0.5px));
      opacity: 0.82;
    }

    .element-char {
      position: absolute;
      left: var(--x);
      top: var(--y);
      z-index: 2;
      display: grid;
      place-items: center;
      width: 46px;
      height: 46px;
      border: 1px solid rgba(24, 23, 21, 0.1);
      border-radius: 50%;
      background: rgba(255, 252, 247, 0.72);
      color: rgba(24, 23, 21, 0.68);
      font-family: var(--serif);
      font-size: 23px;
      font-weight: 760;
      line-height: 1;
      box-shadow: 0 10px 22px rgba(54, 44, 32, 0.08);
      transform: translate(-50%, -50%) scale(var(--scale, 1));
      transition: transform 340ms var(--ease), background 340ms var(--ease), color 340ms var(--ease), border-color 340ms var(--ease), box-shadow 340ms var(--ease);
    }

    .element-char.fire { --x: 50%; --y: 14%; color: var(--seal); }
    .element-char.earth { --x: 84%; --y: 39%; color: var(--earth); }
    .element-char.metal { --x: 71%; --y: 82%; color: var(--metal); }
    .element-char.water { --x: 29%; --y: 82%; color: var(--water); }
    .element-char.wood { --x: 16%; --y: 39%; color: var(--wood); }

    .seal-wheel.is-fire { --wheel-active: var(--seal); }
    .seal-wheel.is-earth { --wheel-active: var(--earth); }
    .seal-wheel.is-metal { --wheel-active: var(--metal); }
    .seal-wheel.is-water { --wheel-active: var(--water); }
    .seal-wheel.is-wood { --wheel-active: var(--wood); }

    .seal-wheel.is-fire .element-char.fire,
    .seal-wheel.is-earth .element-char.earth,
    .seal-wheel.is-metal .element-char.metal,
    .seal-wheel.is-water .element-char.water,
    .seal-wheel.is-wood .element-char.wood {
      --scale: 1.12;
      border-color: color-mix(in srgb, var(--wheel-active) 54%, #fffaf1);
      background: color-mix(in srgb, var(--wheel-active) 72%, #fffaf1);
      color: #fffaf1;
      box-shadow: 0 12px 28px color-mix(in srgb, var(--wheel-active) 25%, transparent);
    }

    .seal-wheel-core {
      position: relative;
      z-index: 3;
      display: grid;
      place-items: center;
      width: 72px;
      height: 72px;
      border: 1px solid color-mix(in srgb, var(--wheel-active) 32%, rgba(173, 138, 77, 0.28));
      border-radius: 50%;
      background:
        radial-gradient(circle at 50% 34%, rgba(255, 252, 247, 0.98), rgba(250, 246, 238, 0.82)),
        rgba(255, 252, 247, 0.86);
      box-shadow:
        inset 0 0 0 5px rgba(255, 252, 247, 0.7),
        0 12px 30px rgba(54, 44, 32, 0.13);
    }

    .seal-wheel-core strong {
      color: var(--wheel-active);
      font-family: var(--serif);
      font-size: 34px;
      font-weight: 820;
      line-height: 0.92;
    }

    .seal-wheel-core small {
      margin-top: -4px;
      color: rgba(24, 23, 21, 0.46);
      font-size: 9px;
      font-weight: 800;
      letter-spacing: 0.16em;
    }

    .hero-title {
      position: absolute;
      bottom: 70px;
      left: 50%;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 9px 16px 8px;
      border: 1px solid rgba(173, 138, 77, 0.34);
      border-radius: 999px;
      background: rgba(255, 252, 247, 0.82);
      color: var(--ink);
      font-family: var(--serif);
      font-size: 16px;
      font-weight: 700;
      letter-spacing: 0.16em;
      white-space: nowrap;
      transform: translateX(-50%);
    }

    .quick-actions {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
      margin: -14px 0 8px;
    }

    .ritual-action {
      display: grid;
      gap: 8px;
      justify-items: center;
      padding: 0;
      border: 0;
      background: transparent;
      cursor: pointer;
    }

    .round-seal {
      display: grid;
      place-items: center;
      width: 64px;
      height: 64px;
      border: 1px solid rgba(173, 138, 77, 0.36);
      border-radius: 50%;
      background: rgba(255, 252, 247, 0.62);
      box-shadow: inset 0 0 0 6px rgba(173, 138, 77, 0.07);
      transition: transform 420ms var(--ease), border-color 420ms var(--ease), background 420ms var(--ease), box-shadow 420ms var(--ease), color 420ms var(--ease);
    }

    .ritual-action:active .round-seal {
      transform: scale(0.94);
    }

    .round-seal svg {
      width: 38px;
      height: 38px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.6;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .ritual-action span:last-child {
      color: rgba(24, 23, 21, 0.76);
      font-family: var(--serif);
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 0.1em;
    }

    .nav {
      position: fixed;
      left: 50%;
      bottom: 0;
      z-index: 80;
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      width: 100%;
      height: var(--nav-height);
      padding: 10px 14px var(--nav-safe-bottom);
      border: 1px solid rgba(173, 138, 77, 0.12);
      border-bottom: 0;
      border-radius: 20px 20px 0 0;
      background: rgba(250, 246, 238, 0.96);
      backdrop-filter: blur(18px);
      box-shadow: 0 -14px 38px rgba(54, 44, 32, 0.08);
      transform: translateX(-50%);
    }

    .nav button {
      display: grid;
      gap: 4px;
      place-items: center;
      align-content: center;
      justify-items: center;
      min-width: 0;
      padding: 0 0 3px;
      border: 0;
      background: transparent;
      color: rgba(24, 23, 21, 0.62);
      font-size: 12px;
      line-height: 1.1;
      font-family: var(--serif);
      font-weight: 700;
      letter-spacing: 0.06em;
      cursor: pointer;
      transition: color 360ms var(--ease), transform 360ms var(--ease);
    }

    .nav button svg {
      width: 30px;
      height: 30px;
      padding: 3px;
      border-radius: 50%;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.35;
      stroke-linecap: round;
      stroke-linejoin: round;
      overflow: visible;
      transition: background 360ms var(--ease), box-shadow 360ms var(--ease), transform 360ms var(--ease);
    }

    .nav button.active {
      color: var(--seal);
    }

    .nav button.active svg {
      background: rgba(167, 52, 39, 0.08);
      box-shadow:
        inset 0 0 0 1px rgba(167, 52, 39, 0.2),
        0 8px 20px rgba(167, 52, 39, 0.08);
      transform: none;
    }

    .nav button span {
      display: block;
      min-width: 0;
      line-height: 1.1;
      white-space: nowrap;
    }

    .nav button:active {
      transform: scale(0.96);
    }

    .table-sheet {
      position: relative;
      margin-top: 8px;
      padding: 24px 18px 20px;
      border: 1px solid rgba(113, 93, 62, 0.28);
      border-radius: 10px;
      background:
        linear-gradient(90deg, rgba(173, 138, 77, 0.09), transparent 9%, transparent 91%, rgba(173, 138, 77, 0.08)),
        rgba(255, 252, 247, 0.78);
      box-shadow: 0 18px 50px rgba(54, 44, 32, 0.09);
    }

    .table-sheet::before {
      content: "";
      position: absolute;
      inset: 8px;
      border: 1px solid rgba(173, 138, 77, 0.14);
      pointer-events: none;
    }

    .bazi-grid {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: 54px repeat(4, minmax(0, 1fr));
      align-items: stretch;
      row-gap: 0;
      color: var(--ink);
      font-size: 13px;
    }

    .bazi-grid > div {
      min-height: 42px;
      display: grid;
      align-items: center;
      justify-items: center;
      padding: 7px 3px;
      border-bottom: 1px solid rgba(24, 23, 21, 0.14);
      text-align: center;
    }

    .bazi-grid .label {
      justify-items: start;
      color: rgba(24, 23, 21, 0.62);
      font-weight: 600;
    }

    .bazi-grid .head {
      min-height: 32px;
      color: rgba(24, 23, 21, 0.72);
      font-family: var(--serif);
      font-size: 15px;
      font-weight: 700;
    }

    .bazi-grid .last-row {
      border-bottom: 0;
    }

    .basic-chart-rules {
      margin-top: 16px;
      padding: 18px;
      border: 1px solid rgba(113, 93, 62, 0.24);
      border-radius: 12px;
      background:
        linear-gradient(135deg, rgba(255, 252, 247, 0.9), rgba(247, 241, 231, 0.72)),
        rgba(255, 252, 247, 0.74);
      box-shadow: 0 14px 34px rgba(54, 44, 32, 0.06);
    }

    .basic-chart-rules-placeholder {
      display: grid;
      gap: 5px;
      min-height: 82px;
      align-content: center;
    }

    .basic-chart-rules-placeholder strong,
    .basic-chart-rules-head strong,
    .basic-chart-dimension-section > div:first-child > strong {
      color: var(--ink);
      font-family: var(--serif);
      font-size: 18px;
      letter-spacing: 0.08em;
    }

    .basic-chart-rules-placeholder p,
    .basic-chart-rules-head p,
    .basic-chart-rule-note {
      margin: 0;
      color: rgba(24, 23, 21, 0.6);
      font-size: 12px;
      line-height: 1.6;
    }

    .basic-chart-rules-placeholder.is-error p { color: #a34d3e; }

    .basic-chart-rules-head {
      display: flex;
      align-items: start;
      justify-content: space-between;
      gap: 16px;
      padding-bottom: 14px;
      border-bottom: 1px solid rgba(113, 93, 62, 0.18);
    }

    .basic-chart-rules-head > div { display: grid; gap: 4px; }

    .basic-chart-rules-head > span {
      display: inline-grid;
      place-items: center;
      flex: 0 0 auto;
      min-width: 42px;
      height: 27px;
      border: 1px solid rgba(72, 117, 88, 0.24);
      border-radius: 999px;
      color: #3b7853;
      font-size: 11px;
      font-weight: 700;
    }

    .basic-chart-rule-list {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 0 16px;
      margin: 14px 0 0;
    }

    .basic-chart-rule-list > div {
      display: flex;
      align-items: start;
      justify-content: space-between;
      gap: 12px;
      min-width: 0;
      padding: 10px 0;
      border-bottom: 1px solid rgba(113, 93, 62, 0.13);
    }

    .basic-chart-rule-list dt {
      flex: 0 0 auto;
      color: rgba(24, 23, 21, 0.6);
      font-size: 12px;
    }

    .basic-chart-rule-list dd {
      min-width: 0;
      margin: 0;
      color: var(--ink);
      font-size: 13px;
      font-weight: 650;
      line-height: 1.45;
      text-align: right;
    }

    .basic-chart-dimension-section {
      display: grid;
      gap: 10px;
      margin-top: 16px;
    }

    .basic-chart-dimension-section > div:first-child {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 12px;
    }

    .basic-chart-dimension-section > div:first-child > small {
      color: rgba(24, 23, 21, 0.52);
      font-size: 11px;
    }

    .basic-chart-dimension-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 9px;
    }

    .basic-chart-dimension-card {
      position: relative;
      display: grid;
      gap: 4px;
      min-width: 0;
      padding: 12px 30px 12px 12px;
      border: 1px solid rgba(113, 93, 62, 0.16);
      border-radius: 9px;
      background: rgba(255, 252, 247, 0.74);
      color: var(--ink);
      text-align: left;
      cursor: pointer;
    }

    .basic-chart-dimension-card strong { font-size: 13px; }
    .basic-chart-dimension-card > span { color: #3c7350; font-size: 12px; font-weight: 650; line-height: 1.45; }
    .basic-chart-dimension-card small { color: rgba(24, 23, 21, 0.55); font-size: 10px; line-height: 1.45; }
    .basic-chart-dimension-card i {
      position: absolute;
      top: 50%;
      right: 11px;
      color: rgba(72, 117, 88, 0.78);
      font-family: var(--serif);
      font-size: 22px;
      font-style: normal;
      transform: translateY(-50%);
    }

    .basic-chart-dimension-card:hover,
    .basic-chart-dimension-card:focus-visible {
      border-color: rgba(72, 117, 88, 0.46);
      background: rgba(246, 250, 244, 0.86);
      outline: 0;
    }

    .basic-chart-rule-note {
      margin-top: 14px;
      padding-top: 12px;
      border-top: 1px dashed rgba(113, 93, 62, 0.18);
    }

    @media (max-width: 520px) {
      .basic-chart-rule-list,
      .basic-chart-dimension-grid {
        grid-template-columns: minmax(0, 1fr);
      }
    }

    .role {
      display: grid;
      gap: 3px;
      font-family: var(--serif);
      font-weight: 700;
    }

    .role small {
      color: rgba(24, 23, 21, 0.54);
      font-family: var(--sans);
      font-size: 10px;
      font-weight: 500;
      letter-spacing: 0.08em;
    }

    .stem-token {
      display: grid;
      place-items: center;
      width: 39px;
      height: 39px;
      margin: 0 auto;
      border: 1px solid currentColor;
      border-radius: 50%;
      background: rgba(255, 252, 247, 0.72);
      font-family: var(--serif);
      font-size: 22px;
      font-weight: 800;
    }

    .wood { color: var(--wood); }
    .fire { color: var(--fire); }
    .earth { color: var(--earth); }
    .metal { color: var(--metal); }
    .water { color: var(--water); }

    .hidden-stems {
      display: grid;
      gap: 2px;
      font-size: 12px;
      line-height: 1.35;
    }

    .daymaster-layout {
      display: grid;
      gap: 18px;
      font-family: var(--serif);
    }

    .daymaster-hero {
      position: relative;
      display: grid;
      grid-template-columns: 94px minmax(0, 1fr);
      gap: 6px;
      align-items: center;
      min-height: 344px;
      margin: 2px -8px 0;
      overflow: hidden;
      isolation: isolate;
    }

    .wood-note {
      display: grid;
      gap: 8px;
      align-content: center;
      padding-left: 6px;
      color: var(--daymaster-accent, var(--wood));
    }

    .wood-note strong {
      font-size: 34px;
      letter-spacing: 0.1em;
      line-height: 1;
    }

    .wood-note span {
      color: rgba(24, 23, 21, 0.64);
      font-size: 14px;
      line-height: 1.55;
      letter-spacing: 0.08em;
    }

    .daymaster-traits {
      display: grid;
      gap: 5px;
      margin-top: 8px;
      color: rgba(24, 23, 21, 0.56);
      font-family: var(--sans);
      font-size: 11px;
      line-height: 1.35;
      letter-spacing: 0.04em;
    }

    .daymaster-traits b {
      color: var(--daymaster-accent, var(--wood));
      font-family: var(--serif);
      font-size: 14px;
      letter-spacing: 0.08em;
    }

    .wheel-stage {
      position: relative;
      display: grid;
      place-items: center;
      min-height: 316px;
      isolation: isolate;
    }

    .daymaster-visual {
      display: grid;
      justify-items: center;
      gap: 7px;
      width: 100%;
    }

    .daymaster-wheel {
      position: relative;
      z-index: 1;
      width: min(338px, 100%);
      max-width: 100%;
      height: auto;
      overflow: visible;
      filter: drop-shadow(0 18px 30px rgba(54, 44, 32, 0.08));
    }

    .daymaster-wheel text {
      font-family: var(--serif);
      paint-order: stroke;
    }

    .analysis-wheel,
    .flow-wheel {
      position: relative;
      z-index: 1;
      width: 238px;
      height: 238px;
      overflow: visible;
    }

    .daymaster-summary {
      position: relative;
      padding: 18px 18px 17px;
      border: 1px solid rgba(24, 23, 21, 0.11);
      border-radius: 12px;
      background:
        linear-gradient(90deg, rgba(76, 139, 102, 0.1), transparent 34%),
        rgba(255, 252, 247, 0.68);
      color: rgba(24, 23, 21, 0.74);
      font-size: 14px;
      line-height: 1.86;
      box-shadow: 0 14px 36px rgba(54, 44, 32, 0.05);
    }

    .section-kicker {
      display: block;
      margin-bottom: 8px;
      color: var(--wood);
      font-family: var(--serif);
      font-size: 15px;
      font-weight: 800;
      letter-spacing: 0.12em;
    }

    .daymaster-summary p {
      margin: 0;
    }

    .daymaster-summary p + p {
      margin-top: 10px;
    }

    .analysis-section {
      display: grid;
      gap: 12px;
      margin-top: 2px;
    }

    .analysis-card {
      position: relative;
      padding: 16px 16px 15px;
      border-top: 1px solid rgba(24, 23, 21, 0.1);
      background: linear-gradient(90deg, rgba(255, 252, 247, 0.72), rgba(255, 252, 247, 0.26));
    }

    .analysis-qa-logo {
      position: absolute;
      right: 12px;
      top: 12px;
      z-index: 2;
      display: grid;
      place-items: center;
      width: 30px;
      height: 30px;
      border: 1px solid rgba(76, 139, 102, 0.22);
      border-radius: 50%;
      background: rgba(255, 252, 247, 0.78);
      color: var(--wood);
      box-shadow: 0 8px 18px rgba(54, 44, 32, 0.08);
      cursor: pointer;
      transition: transform 220ms var(--ease), border-color 220ms var(--ease), background 220ms var(--ease);
    }

    .analysis-qa-logo:active {
      transform: scale(0.94);
    }

    .analysis-qa-logo svg {
      width: 16px;
      height: 16px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.9;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .analysis-qa-logo + h2 {
      padding-right: 38px;
    }

    .analysis-card h2 {
      display: flex;
      align-items: baseline;
      gap: 8px;
      margin: 0 0 9px;
      color: var(--ink);
      font-size: 18px;
      line-height: 1.25;
      letter-spacing: 0.08em;
    }

    .analysis-card h2 small {
      color: rgba(24, 23, 21, 0.44);
      font-size: 11px;
      letter-spacing: 0.12em;
    }

    .analysis-card p {
      margin: 0;
      color: rgba(24, 23, 21, 0.66);
      font-size: 13px;
      line-height: 1.78;
      letter-spacing: 0.03em;
    }

    .analysis-card p + p {
      margin-top: 9px;
    }

    .analysis-reminder {
      margin-top: 12px !important;
      padding-top: 12px;
      border-top: 1px solid rgba(24, 23, 21, 0.08);
      color: rgba(24, 23, 21, 0.5) !important;
      font-size: 12px !important;
    }

    .dimension-detail-shell {
      display: grid;
      gap: 16px;
    }

    .dimension-detail-shell.is-five-elements > * {
      order: 10;
    }

    .dimension-detail-shell.is-five-elements .five-element-diagram {
      order: 2;
    }

    .dimension-detail-shell.is-five-elements .dimension-detail-hero {
      order: 1;
    }

    .dimension-detail-shell.is-five-elements .analysis-section {
      order: 3;
    }

    .dimension-detail-shell.is-five-elements .dimension-actions {
      order: 4;
    }

    .dimension-detail-shell.is-five-elements .dimension-concepts {
      order: 5;
    }

    .dimension-detail-hero,
    .topic-analysis-detail {
      border-top: 1px solid rgba(24, 23, 21, 0.1);
      border-bottom: 1px solid rgba(24, 23, 21, 0.08);
      padding: 18px 8px 16px;
      background: linear-gradient(180deg, rgba(255, 252, 247, 0.68), rgba(255, 252, 247, 0.28));
    }

    .dimension-detail-hero strong,
    .topic-analysis-detail strong {
      display: block;
      margin-bottom: 8px;
      color: var(--ink);
      font-family: var(--serif);
      font-size: 23px;
      line-height: 1.22;
      letter-spacing: 0.04em;
    }

    .dimension-detail-hero p,
    .topic-analysis-detail p {
      margin: 0;
      color: rgba(24, 23, 21, 0.64);
      font-size: 14px;
      line-height: 1.85;
      letter-spacing: 0.03em;
    }

    .dimension-focus-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 10px;
      margin-top: 14px;
    }

    .dimension-focus-item {
      min-height: 0;
      border-left: 1px solid rgba(173, 138, 77, 0.34);
      padding: 10px 12px 10px 13px;
      background: rgba(255, 252, 247, 0.62);
    }

    .dimension-focus-item b {
      display: block;
      margin-bottom: 5px;
      color: rgba(24, 23, 21, 0.78);
      font-size: 13px;
      letter-spacing: 0.08em;
    }

    .dimension-focus-item span {
      color: rgba(24, 23, 21, 0.58);
      font-size: 12px;
      line-height: 1.7;
      letter-spacing: 0.03em;
    }

    @media (min-width: 760px) {
      .dimension-detail-shell .dimension-focus-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }
    }

    .dimension-detail-shell.is-five-elements .dimension-detail-hero {
      display: block;
    }

    .dimension-detail-shell.is-five-elements .dimension-detail-hero strong {
      font-size: 21px;
      letter-spacing: 0.02em;
    }

    .dimension-detail-shell.is-five-elements .dimension-detail-hero p {
      font-size: 13px;
      line-height: 1.78;
    }

    .dimension-detail-shell.is-five-elements .dimension-focus-grid {
      grid-template-columns: repeat(3, 1fr);
      gap: 7px;
      margin-top: 13px;
    }

    .dimension-detail-shell.is-five-elements .dimension-focus-item {
      min-height: 66px;
      border-left-color: rgba(173, 138, 77, 0.26);
      background: rgba(255, 252, 247, 0.42);
    }

    .bazi-index-element-wheel-figure {
      display: grid;
      justify-items: center;
      gap: 16px;
      width: 100%;
      margin: 18px 0 10px;
    }

    .bazi-index-element-wheel {
      width: min(100%, 330px);
      height: auto;
      aspect-ratio: 1;
      margin: 12px 0 4px;
    }

    .bazi-index-element-wheel .element-char {
      width: 54px;
      height: 54px;
      border-color: rgba(255, 252, 247, 0.78);
      color: #fffaf1;
      font-size: 29px;
      box-shadow: 0 12px 24px rgba(54, 44, 32, 0.14);
    }

    .bazi-index-element-wheel .element-char.fire { background: color-mix(in srgb, var(--seal) 76%, #fffaf1); }
    .bazi-index-element-wheel .element-char.earth { background: color-mix(in srgb, var(--earth) 76%, #fffaf1); }
    .bazi-index-element-wheel .element-char.metal { background: color-mix(in srgb, var(--metal) 76%, #fffaf1); }
    .bazi-index-element-wheel .element-char.water { background: color-mix(in srgb, var(--water) 76%, #fffaf1); }
    .bazi-index-element-wheel .element-char.wood { background: color-mix(in srgb, var(--wood) 76%, #fffaf1); }

    .bazi-index-element-wheel .seal-wheel-core {
      width: 92px;
      height: 92px;
    }

    .bazi-index-element-wheel .seal-wheel-core strong {
      font-size: 48px;
    }

    .bazi-index-element-wheel .seal-wheel-core small {
      font-size: 11px;
    }

    .bazi-index-wheel-status {
      position: absolute;
      z-index: 5;
      display: inline-flex;
      align-items: flex-end;
      gap: 6px;
      color: var(--ink);
      font-family: var(--serif);
      font-size: 14px;
      font-weight: 760;
      line-height: 1;
      white-space: nowrap;
      pointer-events: none;
    }

    .bazi-index-wheel-status.fire { top: -25px; left: 50%; transform: translateX(-50%); color: var(--seal); }
    .bazi-index-wheel-status.earth { top: 27%; right: -42px; color: var(--earth); }
    .bazi-index-wheel-status.metal { right: -14px; bottom: 13%; color: var(--metal); }
    .bazi-index-wheel-status.water { bottom: 13%; left: -14px; color: var(--water); }
    .bazi-index-wheel-status.wood { top: 27%; left: -42px; color: var(--wood); }

    .bazi-index-strength {
      display: inline-flex;
      align-items: flex-end;
      gap: 2px;
      height: 20px;
    }

    .bazi-index-strength em {
      display: block;
      width: 4px;
      height: 12px;
      border-radius: 1px;
      background: currentColor;
      opacity: 0.76;
    }

    .bazi-index-strength em:nth-child(2) { height: 16px; }
    .bazi-index-strength em:nth-child(3) { height: 20px; }
    .bazi-index-strength em:nth-child(4) { height: 16px; }
    .bazi-index-strength em:nth-child(5) { height: 12px; }

    .bazi-index-element-legend {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 8px 13px;
      margin: 0;
      color: rgba(24, 23, 21, 0.66);
      font-size: 13px;
      line-height: 1.45;
    }

    .bazi-index-element-legend .wood { color: var(--wood); }
    .bazi-index-element-legend .fire { color: var(--seal); }
    .bazi-index-element-legend .earth { color: var(--earth); }
    .bazi-index-element-legend .metal { color: var(--metal); }
    .bazi-index-element-legend .water { color: var(--water); }

    .bazi-index-pillar-snapshot {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      margin: 18px 0 14px;
      overflow: hidden;
      border: 1px solid rgba(173, 138, 77, 0.2);
      background: rgba(255, 252, 247, 0.46);
    }

    .bazi-index-pillar-snapshot article {
      display: grid;
      justify-items: center;
      gap: 5px;
      min-width: 0;
      padding: 13px 4px 14px;
      border-right: 1px solid rgba(173, 138, 77, 0.18);
    }

    .bazi-index-pillar-snapshot article:last-child { border-right: 0; }

    .bazi-index-pillar-snapshot small,
    .bazi-index-pillar-snapshot b,
    .bazi-index-pillar-snapshot em {
      color: rgba(24, 23, 21, 0.62);
      font-size: 11px;
      font-style: normal;
      line-height: 1.2;
    }

    .bazi-index-pillar-snapshot b {
      color: rgba(24, 23, 21, 0.74);
      font-family: var(--serif);
      font-size: 16px;
      letter-spacing: 0.03em;
    }

    .bazi-index-pillar-snapshot strong {
      margin-top: 3px;
      font-family: var(--serif);
      font-size: clamp(38px, 11vw, 54px);
      line-height: .9;
    }

    .bazi-index-pillar-snapshot .wood { color: var(--wood); }
    .bazi-index-pillar-snapshot .fire { color: var(--seal); }
    .bazi-index-pillar-snapshot .earth { color: var(--earth); }
    .bazi-index-pillar-snapshot .metal { color: var(--metal); }
    .bazi-index-pillar-snapshot .water { color: var(--water); }

    .bazi-index-pillar-snapshot em {
      display: inline-grid;
      place-items: center;
      min-width: 25px;
      min-height: 25px;
      padding: 3px;
      border-radius: 50%;
      color: #fffaf1 !important;
      font-weight: 760;
    }

    .bazi-index-pillar-snapshot em.wood { background: var(--wood); }
    .bazi-index-pillar-snapshot em.fire { background: var(--seal); }
    .bazi-index-pillar-snapshot em.earth { background: var(--earth); }
    .bazi-index-pillar-snapshot em.metal { background: var(--metal); }
    .bazi-index-pillar-snapshot em.water { background: var(--water); }

    .bazi-index-library-card {
      border-color: rgba(173, 138, 77, 0.24);
      background: linear-gradient(145deg, rgba(255, 252, 247, 0.92), rgba(246, 239, 225, 0.5));
    }

    .bazi-index-pillar-context {
      margin: -2px 0 11px !important;
      color: rgba(24, 23, 21, 0.48) !important;
      font-size: 12px !important;
      line-height: 1.65 !important;
      letter-spacing: 0.03em;
    }

    .bazi-index-library-details {
      margin-top: 14px;
      border-top: 1px solid rgba(173, 138, 77, 0.2);
      color: rgba(24, 23, 21, 0.66);
    }

    .bazi-index-library-details summary {
      cursor: pointer;
      padding: 12px 0 2px;
      color: var(--seal);
      font-family: var(--serif);
      font-size: 14px;
      font-weight: 700;
      letter-spacing: 0.08em;
    }

    .bazi-index-library-details-body {
      display: grid;
      gap: 14px;
      padding-top: 12px;
    }

    .bazi-index-library-details-body section + section {
      border-top: 1px dashed rgba(24, 23, 21, 0.12);
      padding-top: 14px;
    }

    .bazi-index-library-details-body h3 {
      margin: 0 0 8px;
      color: rgba(24, 23, 21, 0.8);
      font-family: var(--serif);
      font-size: 16px;
      line-height: 1.4;
      letter-spacing: 0.05em;
    }

    .bazi-index-library-details-body h3 small {
      margin-left: 5px;
      color: rgba(24, 23, 21, 0.46);
      font-family: inherit;
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0.04em;
    }

    .dimension-actions,
    .dimension-concepts {
      border-top: 1px solid rgba(24, 23, 21, 0.1);
      padding: 14px 8px 0;
    }

    .dimension-actions h2,
    .dimension-concepts h2 {
      margin: 0 0 10px;
      color: rgba(24, 23, 21, 0.72);
      font-size: 14px;
      line-height: 1.3;
      letter-spacing: 0.12em;
    }

    .dimension-action-list {
      display: grid;
      gap: 9px;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .dimension-action-list li {
      display: grid;
      grid-template-columns: 22px 1fr;
      gap: 9px;
      align-items: start;
      color: rgba(24, 23, 21, 0.66);
      font-size: 13px;
      line-height: 1.65;
      letter-spacing: 0.03em;
    }

    .dimension-action-list li::before {
      content: "";
      width: 16px;
      height: 16px;
      margin-top: 4px;
      border: 1px solid rgba(173, 138, 77, 0.54);
      border-radius: 50%;
      background: radial-gradient(circle, rgba(173, 138, 77, 0.48) 0 3px, transparent 4px);
    }

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

    .dimension-concept-item {
      display: grid;
      grid-template-columns: 58px 1fr;
      gap: 10px;
      align-items: start;
      color: rgba(24, 23, 21, 0.62);
      font-size: 12px;
      line-height: 1.65;
    }

    .dimension-concept-item b {
      color: var(--seal);
      font-family: var(--serif);
      font-size: 17px;
      line-height: 1.25;
      letter-spacing: 0.08em;
    }

    .dimension-loading {
      color: rgba(24, 23, 21, 0.48) !important;
    }

    .five-element-diagram {
      display: grid;
      gap: 11px;
      border-top: 0;
      border-bottom: 1px solid rgba(24, 23, 21, 0.07);
      padding: 4px 0 18px;
      background:
        radial-gradient(circle at 50% 38%, rgba(255, 252, 247, 0.76), rgba(255, 252, 247, 0.18) 64%, transparent 78%);
    }

    .five-element-diagram[hidden] {
      display: none;
    }

    .five-element-diagram-head {
      display: grid;
      grid-template-columns: 1fr auto;
      align-items: end;
      gap: 12px;
      padding: 0 8px 2px;
    }

    .five-element-diagram-head h2 {
      margin: 0;
      color: var(--ink);
      font-family: var(--serif);
      font-size: 18px;
      line-height: 1.25;
      letter-spacing: 0.04em;
    }

    .five-element-diagram-head p {
      margin: 4px 0 0;
      color: rgba(24, 23, 21, 0.52);
      font-size: 12px;
      line-height: 1.55;
      letter-spacing: 0.04em;
    }

    .five-element-mini-legend {
      display: inline-flex;
      flex-shrink: 0;
      align-items: center;
      gap: 6px;
      color: rgba(24, 23, 21, 0.5);
      font-size: 11px;
      letter-spacing: 0.08em;
      white-space: nowrap;
    }

    .five-element-mini-legend i {
      width: 18px;
      height: 4px;
      border-radius: 999px;
      background: rgba(173, 138, 77, 0.34);
    }

    .five-element-mini-legend i:last-child {
      height: 1px;
      border-top: 1px dashed rgba(24, 23, 21, 0.28);
      background: transparent;
    }

    .five-element-orbit {
      width: min(100%, 334px);
      margin: 0 auto -2px;
      height: auto;
      justify-self: center;
      overflow: visible;
    }

    .five-element-orbit text {
      font-family: var(--serif);
      dominant-baseline: middle;
      text-anchor: middle;
      letter-spacing: 0;
    }

    .five-element-orbit .label-sans {
      font-family: Inter, "PingFang SC", sans-serif;
    }

    .five-element-insights {
      display: grid;
      gap: 10px;
      padding: 0 8px;
    }

    .five-element-meters {
      display: grid;
      gap: 7px;
      border: 1px solid rgba(24, 23, 21, 0.07);
      padding: 11px 12px;
      background: rgba(255, 252, 247, 0.46);
    }

    .five-element-meter {
      display: grid;
      grid-template-columns: 58px minmax(0, 1fr) 48px;
      align-items: center;
      gap: 9px;
      color: rgba(24, 23, 21, 0.58);
      font-size: 12px;
      line-height: 1.25;
      letter-spacing: 0.02em;
    }

    .five-element-meter b {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      color: var(--meter-color, var(--ink));
      font-family: var(--serif);
      font-size: 15px;
      line-height: 1;
      letter-spacing: 0.04em;
      white-space: nowrap;
    }

    .five-element-meter em {
      border: 1px solid rgba(24, 23, 21, 0.1);
      border-radius: 999px;
      padding: 2px 4px 1px;
      color: rgba(24, 23, 21, 0.42);
      font-family: Inter, "PingFang SC", sans-serif;
      font-size: 9px;
      font-style: normal;
      font-weight: 700;
      letter-spacing: 0.02em;
    }

    .five-element-meter-track {
      height: 7px;
      border-radius: 999px;
      overflow: hidden;
      background: rgba(24, 23, 21, 0.055);
      box-shadow: inset 0 0 0 1px rgba(24, 23, 21, 0.035);
    }

    .five-element-meter-fill {
      display: block;
      width: var(--meter-score, 0%);
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, var(--meter-color, var(--seal)), rgba(255, 252, 247, 0.34));
    }

    .five-element-meter strong {
      color: rgba(24, 23, 21, 0.62);
      font-family: Inter, "PingFang SC", sans-serif;
      font-size: 12px;
      font-weight: 750;
      text-align: right;
      white-space: nowrap;
    }

    .five-element-basis {
      margin: 2px 0 0;
      color: rgba(24, 23, 21, 0.48);
      font-size: 11px;
      line-height: 1.65;
      letter-spacing: 0.03em;
    }

    .five-element-summary-card {
      display: grid;
      gap: 11px;
      border: 1px solid rgba(173, 138, 77, 0.2);
      padding: 15px 14px 13px;
      background:
        linear-gradient(180deg, rgba(255, 252, 247, 0.72), rgba(255, 252, 247, 0.36)),
        radial-gradient(circle at 12% 22%, rgba(76, 139, 102, 0.08), transparent 34%);
      box-shadow: 0 14px 34px rgba(54, 44, 32, 0.045);
    }

    .five-element-summary-title {
      display: grid;
      grid-template-columns: 32px 1fr;
      gap: 10px;
      align-items: center;
    }

    .five-element-summary-mark {
      display: grid;
      place-items: center;
      width: 28px;
      height: 28px;
      border: 1px solid rgba(76, 139, 102, 0.34);
      border-radius: 50%;
      color: var(--wood);
      font-family: var(--serif);
      font-size: 15px;
      line-height: 1;
      background: rgba(255, 252, 247, 0.64);
    }

    .five-element-summary-title strong {
      color: var(--ink);
      font-family: var(--serif);
      font-size: 20px;
      line-height: 1.28;
      letter-spacing: 0.02em;
    }

    .five-element-summary-card p {
      margin: 0;
      border-top: 1px solid rgba(24, 23, 21, 0.08);
      padding-top: 10px;
      color: rgba(24, 23, 21, 0.62);
      font-size: 13px;
      line-height: 1.78;
      letter-spacing: 0.03em;
    }

    .five-element-summary-chips {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 7px;
    }

    .five-element-insight {
      min-height: 58px;
      border: 1px solid rgba(24, 23, 21, 0.07);
      padding: 9px 9px 8px;
      background: rgba(255, 252, 247, 0.48);
      color: rgba(24, 23, 21, 0.56);
      font-size: 11px;
      line-height: 1.55;
      letter-spacing: 0.04em;
    }

    .five-element-insight b {
      display: block;
      margin-bottom: 4px;
      color: var(--insight-color, rgba(24, 23, 21, 0.72));
      font-family: var(--serif);
      font-size: 15px;
      line-height: 1.25;
      letter-spacing: 0.04em;
    }

    .trait-stack {
      display: grid;
      gap: 10px;
      margin-top: 10px;
    }

    .trait-item {
      display: grid;
      grid-template-columns: 26px 1fr;
      gap: 9px;
      align-items: start;
    }

    .trait-dot {
      display: grid;
      place-items: center;
      width: 22px;
      height: 22px;
      border: 1px solid rgba(76, 139, 102, 0.28);
      border-radius: 50%;
      color: var(--wood);
      font-size: 12px;
      line-height: 1;
    }

    .trait-item strong {
      display: block;
      margin-bottom: 3px;
      color: rgba(24, 23, 21, 0.8);
      font-size: 14px;
      letter-spacing: 0.06em;
    }

    .flip-card {
      padding: 0;
      border: 1px solid rgba(113, 93, 62, 0.15);
      border-radius: 14px;
      background: rgba(255, 252, 247, 0.62);
      overflow: hidden;
      box-shadow: 0 16px 38px rgba(54, 44, 32, 0.06);
      perspective: 1100px;
    }

    .flip-card-stage {
      position: relative;
      height: var(--flip-card-height, 560px);
      transform-style: preserve-3d;
      transition: transform 680ms var(--ease), height 420ms var(--ease);
    }

    .analysis-card.is-flipped .flip-card-stage {
      transform: rotateY(180deg);
    }

    .analysis-card-face {
      position: absolute;
      inset: 0 0 auto;
      width: 100%;
      padding: 16px 16px 15px;
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
      transform-style: preserve-3d;
      transition: opacity 280ms var(--ease);
    }

    .analysis-front {
      transform: rotateY(0deg);
      pointer-events: auto;
    }

    .concept-face {
      display: grid;
      gap: 16px;
      transform: rotateY(180deg);
      pointer-events: none;
    }

    .analysis-card.is-flipped .analysis-front {
      pointer-events: none;
    }

    .analysis-card.is-flipped .concept-face {
      pointer-events: auto;
    }

    @media (prefers-reduced-motion: reduce) {
      .flip-card-stage {
        transition: height 260ms ease;
        transform: none !important;
      }

      .analysis-card-face {
        transition: opacity 180ms ease;
      }

      .concept-face {
        transform: none;
        opacity: 0;
      }

      .analysis-card.is-flipped .analysis-front {
        opacity: 0;
      }

      .analysis-card.is-flipped .concept-face {
        opacity: 1;
      }
    }

    .card-actions {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 10px;
      margin-top: 18px;
      padding-top: 14px;
      border-top: 1px solid rgba(24, 23, 21, 0.08);
    }

    .daymaster-followup-panel {
      display: grid;
      gap: 12px;
      padding: 15px 10px 0;
      border-top: 1px solid rgba(24, 23, 21, 0.1);
    }

    .daymaster-concept-inline {
      display: grid;
      gap: 14px;
      padding: 14px;
      border: 1px solid rgba(173, 138, 77, 0.18);
      border-radius: 12px;
      background: rgba(255, 252, 247, 0.58);
      box-shadow: 0 12px 28px rgba(54, 44, 32, 0.06);
    }

    .daymaster-concept-inline[hidden] {
      display: none;
    }

    .card-action {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      min-height: 42px;
      min-width: 122px;
      padding: 0 18px;
      border: 1px solid rgba(24, 23, 21, 0.14);
      border-radius: 999px;
      background: rgba(255, 252, 247, 0.72);
      color: rgba(24, 23, 21, 0.76);
      font-family: var(--serif);
      font-size: 14px;
      font-weight: 800;
      letter-spacing: 0.08em;
      cursor: pointer;
      box-shadow: 0 8px 18px rgba(54, 44, 32, 0.06);
      transition: transform 260ms var(--ease), background 260ms var(--ease), box-shadow 260ms var(--ease);
    }

    .card-action:active {
      transform: scale(0.97);
    }

    .card-action.primary {
      border-color: rgba(24, 23, 21, 0.82);
      background: rgba(24, 23, 21, 0.88);
      color: #fffaf1;
      box-shadow: 0 14px 26px rgba(24, 23, 21, 0.12);
    }

    .card-action svg {
      width: 18px;
      height: 18px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .concept-head {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      align-items: start;
    }

    .concept-head p {
      margin: 4px 0 0;
      color: rgba(24, 23, 21, 0.52);
      font-family: var(--serif);
      font-size: 13px;
      letter-spacing: 0.08em;
      line-height: 1.35;
    }

    .concept-back-button {
      display: grid;
      place-items: center;
      flex: 0 0 auto;
      width: 32px;
      height: 32px;
      border: 0;
      background: transparent;
      color: rgba(24, 23, 21, 0.74);
      cursor: pointer;
    }

    .concept-back-button svg {
      width: 20px;
      height: 20px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2.2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .concept-figure {
      display: grid;
      place-items: center;
      padding: 6px 0 2px;
    }

    .concept-figure svg {
      width: min(100%, 320px);
      height: auto;
      overflow: visible;
    }

    .concept-figure img {
      display: block;
      width: min(360px, calc(100% + 28px));
      height: auto;
      margin-inline: -14px;
    }

    .concept-notes {
      display: grid;
      gap: 10px;
      color: rgba(24, 23, 21, 0.68);
      font-family: var(--serif);
      font-size: 14px;
      line-height: 1.72;
      letter-spacing: 0.04em;
    }

    .concept-note {
      display: grid;
      grid-template-columns: 20px 1fr;
      gap: 8px;
      align-items: start;
    }

    .concept-note::before {
      content: "";
      width: 10px;
      height: 10px;
      margin-top: 8px;
      border: 1px solid rgba(24, 23, 21, 0.38);
      border-radius: 50%;
      background: rgba(255, 252, 247, 0.8);
    }

    .concept-note.primary::before {
      border-color: rgba(45, 58, 75, 0.88);
      background: rgba(45, 58, 75, 0.88);
    }

    .concept-note strong {
      color: rgba(24, 23, 21, 0.82);
      font-weight: 800;
    }

    @media (max-width: 374px) {
      .daymaster-hero {
        grid-template-columns: 78px minmax(0, 1fr);
        margin-inline: -4px;
      }

      .daymaster-wheel {
        width: 286px;
      }

      .wood-note strong {
        font-size: 29px;
      }

      .card-action {
        min-width: 112px;
        padding-inline: 14px;
      }
    }

    .dimension-list {
      position: relative;
      display: grid;
      gap: 10px;
      margin-top: 16px;
    }

    .dimension-boundary-note {
      margin: 12px 4px 0;
      padding: 12px 14px;
      border: 1px solid rgba(173, 138, 77, 0.18);
      border-radius: 12px;
      background: rgba(255, 252, 247, 0.72);
      color: rgba(24, 23, 21, 0.66);
      font-size: 13px;
      line-height: 1.7;
    }

    .dimension-list .dragon-art {
      position: absolute;
      right: -84px;
      top: 34px;
      z-index: -1;
      width: 264px;
      transform: rotate(8deg);
    }

    .dimension-row {
      --dimension-accent: var(--wood);
      display: grid;
      grid-template-columns: 46px 1fr 24px;
      align-items: center;
      gap: 10px;
      min-height: 74px;
      padding: 10px 12px 10px 8px;
      border: 1px solid rgba(173, 138, 77, 0.16);
      border-radius: 16px;
      background:
        linear-gradient(90deg, rgba(255, 252, 247, 0.86), rgba(246, 239, 228, 0.58)),
        radial-gradient(circle at 8% 50%, color-mix(in srgb, var(--dimension-accent) 14%, transparent), transparent 42%);
      cursor: pointer;
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.72),
        0 12px 28px rgba(54, 44, 32, 0.045);
      transition: transform 360ms var(--ease), border-color 360ms var(--ease), background 360ms var(--ease), box-shadow 360ms var(--ease);
    }

    .dimension-row:first-of-type {
      border-top: 1px solid rgba(173, 138, 77, 0.16);
    }

    .dimension-row:nth-of-type(2) {
      --dimension-accent: var(--earth);
    }

    .dimension-row:nth-of-type(3) {
      --dimension-accent: var(--water);
    }

    .dimension-row:nth-of-type(4) {
      --dimension-accent: var(--wood);
    }

    .dimension-row:nth-of-type(5) {
      --dimension-accent: var(--gold);
    }

    .dimension-row:nth-of-type(6) {
      --dimension-accent: var(--seal);
    }

    .dimension-icon {
      width: 42px;
      height: 42px;
      padding: 8px;
      border: 1px solid color-mix(in srgb, var(--dimension-accent) 32%, rgba(173, 138, 77, 0.22));
      border-radius: 14px;
      background:
        radial-gradient(circle at 50% 42%, rgba(255, 252, 247, 0.92), color-mix(in srgb, var(--dimension-accent) 14%, rgba(255, 252, 247, 0.76))),
        rgba(255, 252, 247, 0.78);
      color: color-mix(in srgb, var(--dimension-accent) 86%, var(--ink));
      fill: none;
      stroke: currentColor;
      stroke-width: 2.4;
      stroke-linecap: round;
      stroke-linejoin: round;
      box-shadow:
        inset 0 0 0 4px rgba(255, 252, 247, 0.42),
        0 7px 16px color-mix(in srgb, var(--dimension-accent) 13%, transparent);
    }

    .dimension-row h2 {
      margin: 0 0 3px;
      font-size: 18px;
      line-height: 1.2;
      letter-spacing: 0.02em;
    }

    .dimension-row p {
      margin: 0;
      color: rgba(24, 23, 21, 0.55);
      font-size: 12px;
      line-height: 1.35;
    }

    .dimension-row:hover {
      border-color: color-mix(in srgb, var(--dimension-accent) 30%, rgba(173, 138, 77, 0.2));
      background:
        linear-gradient(90deg, rgba(255, 252, 247, 0.92), rgba(246, 239, 228, 0.66)),
        radial-gradient(circle at 8% 50%, color-mix(in srgb, var(--dimension-accent) 18%, transparent), transparent 42%);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.78),
        0 16px 34px rgba(54, 44, 32, 0.07);
    }

    .chevron {
      color: rgba(24, 23, 21, 0.4);
      font-size: 22px;
    }

    .bazi-relationship-entry {
      display: grid;
      grid-template-columns: 58px minmax(0, 1fr) 24px;
      align-items: center;
      gap: 10px;
      width: 100%;
      min-height: 86px;
      margin-top: 18px;
      padding: 14px 8px 14px 0;
      border: 0;
      border-top: 1px solid rgba(24, 23, 21, 0.09);
      border-bottom: 1px solid rgba(24, 23, 21, 0.09);
      background:
        linear-gradient(90deg, rgba(255, 252, 247, 0.82), rgba(255, 252, 247, 0.26)),
        radial-gradient(circle at 8% 50%, rgba(173, 138, 77, 0.08), transparent 42%);
      color: var(--ink);
      text-align: left;
      cursor: pointer;
      transition: transform 360ms var(--ease), border-color 360ms var(--ease), background 360ms var(--ease), box-shadow 360ms var(--ease);
    }

    .relationship-type-seal {
      display: grid;
      place-items: center;
      width: 36px;
      height: 36px;
      border: 1px solid rgba(167, 52, 39, 0.5);
      border-radius: 12px;
      color: var(--seal);
      font-family: var(--serif);
      font-size: 15px;
      font-weight: 800;
    }

    .relationship-entry-icon {
      position: relative;
      display: grid;
      place-items: center;
      width: 52px;
      height: 52px;
      border: 1px solid rgba(173, 138, 77, 0.28);
      border-radius: 50%;
      background:
        radial-gradient(circle, rgba(255, 252, 247, 0.92) 0 48%, rgba(173, 138, 77, 0.08) 49% 100%),
        rgba(255, 252, 247, 0.68);
      color: rgba(24, 23, 21, 0.82);
      box-shadow:
        inset 0 0 0 8px rgba(173, 138, 77, 0.06),
        0 10px 22px rgba(72, 51, 32, 0.08);
      transition: color 360ms var(--ease), box-shadow 360ms var(--ease);
    }

    .relationship-entry-icon::after {
      content: "";
      position: absolute;
      inset: 7px;
      border: 1px solid rgba(173, 138, 77, 0.16);
      border-radius: inherit;
    }

    .relationship-entry-icon svg {
      position: relative;
      z-index: 1;
      width: 32px;
      height: 32px;
    }

    .bazi-relationship-entry > span:nth-child(2) {
      display: grid;
      gap: 4px;
      min-width: 0;
    }

    .bazi-relationship-entry strong {
      font-family: var(--serif);
      font-size: 18px;
      letter-spacing: 0.04em;
    }

    .bazi-relationship-entry small {
      overflow: hidden;
      color: rgba(24, 23, 21, 0.55);
      font-size: 12px;
      line-height: 1.35;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .relationship-entry-chevron {
      justify-self: end;
      width: 24px;
      text-align: right;
      transition: transform 360ms var(--ease), color 360ms var(--ease);
    }

    .bazi-relationship-entry:hover {
      border-color: rgba(167, 52, 39, 0.18);
      background: rgba(255, 252, 247, 0.82);
      box-shadow: 0 18px 44px rgba(54, 44, 32, 0.08);
      transform: translateY(-2px);
    }

    .bazi-complete-book-entry + .bazi-relationship-entry {
      margin-top: 0;
      border-top: 0;
    }

    .bazi-relationship-entry:hover .relationship-entry-icon {
      color: var(--seal);
    }

    .bazi-relationship-entry:hover .relationship-entry-chevron {
      color: var(--seal);
      transform: translateX(2px);
    }

    .overview-screen {
      --overview-card-radius: 18px;
      --overview-green: #517550;
      --overview-gold: #c0a15c;
      --overview-stone: #777a72;
      isolation: isolate;
      overflow: hidden;
      padding: 20px 16px var(--screen-bottom-gutter);
      background:
        radial-gradient(circle at 50% 13%, rgba(255, 255, 255, 0.88), rgba(255, 252, 247, 0.38) 34%, transparent 62%),
        radial-gradient(circle at 50% 55%, rgba(173, 138, 77, 0.11), transparent 52%),
        linear-gradient(180deg, rgba(248, 242, 232, 0.92) 0%, rgba(241, 233, 220, 0.98) 62%, rgba(237, 229, 216, 0.98) 100%);
    }

    .overview-screen .topbar {
      position: relative;
      z-index: 8;
      align-items: center;
      min-height: 42px;
    }

    .overview-screen .topbar .profile-switcher-host {
      max-width: min(100%, 246px);
    }

    .overview-screen .profile-switcher-trigger {
      grid-template-columns: 34px minmax(0, 1fr) 16px;
      gap: 10px;
      min-height: 40px;
      max-width: 246px;
      padding: 2px 8px 2px 0;
    }

    .overview-screen .profile-switcher-trigger > .profile-switcher-mark {
      width: 32px;
      height: 32px;
      border-color: rgba(120, 101, 61, 0.22);
      border-radius: 50%;
      background:
        radial-gradient(circle at 50% 36%, rgba(255, 255, 255, 0.84), rgba(237, 229, 216, 0.86));
      color: rgba(24, 23, 21, 0.86);
      font-size: 18px;
      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.58);
      transform: none;
    }

    .overview-screen .profile-switcher-trigger > .profile-switcher-mark span {
      transform: none;
    }

    .overview-screen .profile-switcher-name {
      max-width: 164px;
      font-size: 22px;
      font-weight: 700;
      line-height: 1;
    }

    .overview-screen .profile-switcher-chevron {
      color: rgba(24, 23, 21, 0.5);
      font-size: 18px;
    }

    .overview-screen .topbar > .icon-button {
      width: 38px;
      height: 38px;
      border-color: rgba(173, 138, 77, 0.22);
      border-radius: 13px;
      background: rgba(255, 252, 247, 0.78);
      box-shadow: 0 8px 22px rgba(54, 44, 32, 0.08);
    }

    .overview-title-block {
      position: relative;
      z-index: 4;
      display: grid;
      gap: 9px;
      justify-items: center;
      margin: 10px 0 0;
      text-align: center;
    }

    .overview-title-block h1 {
      margin: 0;
      color: var(--ink);
      font-family: var(--serif);
      font-size: clamp(32px, 8.8vw, 42px);
      font-weight: 780;
      letter-spacing: 0.1em;
      line-height: 1.12;
    }

    .overview-title-block .seal {
      margin-left: 4px;
      vertical-align: 5px;
    }

    .overview-title-block p {
      margin: 0;
      display: inline-flex;
      align-items: center;
      gap: 12px;
      color: rgba(24, 23, 21, 0.55);
      font-family: var(--serif);
      font-size: clamp(13px, 3.3vw, 17px);
      letter-spacing: 0.12em;
      line-height: 1.25;
    }

    .overview-title-block p::before,
    .overview-title-block p::after {
      content: "";
      width: 28px;
      height: 1px;
      background: rgba(24, 23, 21, 0.34);
    }

    .overview-screen .hero {
      min-height: clamp(224px, 55vw, 264px);
      margin: -2px -16px 0;
      padding: 0 16px;
      overflow: visible;
      isolation: isolate;
    }

    .overview-hero-bg {
      position: absolute;
      inset: -156px -18px -170px -58px;
      z-index: -4;
      width: calc(100% + 76px);
      height: calc(100% + 326px);
      object-fit: cover;
      object-position: 56% 16%;
      opacity: 0.88;
      mix-blend-mode: multiply;
      -webkit-mask-image: linear-gradient(
        to bottom,
        #000 0%,
        #000 60%,
        rgba(0, 0, 0, 0.82) 74%,
        rgba(0, 0, 0, 0.28) 90%,
        transparent 100%
      );
      mask-image: linear-gradient(
        to bottom,
        #000 0%,
        #000 60%,
        rgba(0, 0, 0, 0.82) 74%,
        rgba(0, 0, 0, 0.28) 90%,
        transparent 100%
      );
      pointer-events: none;
      user-select: none;
      -webkit-user-drag: none;
    }

    .overview-screen .hero::before {
      content: "";
      position: absolute;
      inset: 20px 12px 24px;
      z-index: -2;
      border-radius: 50%;
      background:
        radial-gradient(circle at 50% 50%, rgba(255, 252, 247, 0.64), rgba(255, 252, 247, 0.16) 45%, transparent 68%);
      pointer-events: none;
    }

    .overview-screen .hero .dragon-art {
      display: none;
    }

    .overview-screen .seal-wheel {
      width: clamp(220px, 58vw, 278px);
      height: clamp(220px, 58vw, 278px);
      margin-top: -2px;
      border-color: rgba(173, 138, 77, 0.24);
      background:
        radial-gradient(circle at 50% 50%, rgba(255, 252, 247, 0.98) 0 24%, rgba(255, 252, 247, 0.72) 25% 43%, transparent 44%),
        conic-gradient(from -90deg,
          rgba(163, 58, 44, 0.1) 0 72deg,
          rgba(189, 145, 75, 0.1) 72deg 144deg,
          rgba(126, 133, 130, 0.1) 144deg 216deg,
          rgba(45, 113, 130, 0.1) 216deg 288deg,
          rgba(76, 139, 102, 0.1) 288deg 360deg),
        rgba(255, 252, 247, 0.34);
      box-shadow:
        inset 0 0 0 8px rgba(255, 252, 247, 0.56),
        inset 0 0 0 38px rgba(255, 252, 247, 0.22),
        inset 0 0 0 70px rgba(255, 252, 247, 0.14),
        0 24px 64px rgba(54, 44, 32, 0.1);
    }

    .overview-screen .seal-wheel::before {
      inset: 18px;
      border-color: rgba(173, 138, 77, 0.22);
      box-shadow:
        inset 0 0 0 24px rgba(255, 252, 247, 0.12),
        0 0 0 1px rgba(255, 255, 255, 0.48);
    }

    .overview-screen .seal-wheel::after {
      inset: 60px;
      border-color: rgba(173, 138, 77, 0.28);
      background:
        linear-gradient(90deg, transparent calc(50% - 0.5px), rgba(173, 138, 77, 0.14) 50%, transparent calc(50% + 0.5px)),
        linear-gradient(0deg, transparent calc(50% - 0.5px), rgba(173, 138, 77, 0.14) 50%, transparent calc(50% + 0.5px));
    }

    .overview-screen .element-char {
      width: clamp(40px, 9.8vw, 50px);
      height: clamp(40px, 9.8vw, 50px);
      border: 2px solid rgba(255, 255, 255, 0.78);
      font-size: clamp(21px, 5.7vw, 28px);
      background: rgba(255, 252, 247, 0.84);
      color: #fffaf1;
      box-shadow:
        inset 0 0 0 5px rgba(255, 252, 247, 0.34),
        inset 0 -10px 18px rgba(24, 23, 21, 0.16),
        0 12px 24px rgba(54, 44, 32, 0.1);
    }

    .overview-screen .element-char.fire { background: color-mix(in srgb, var(--fire) 78%, #fff4e8); }
    .overview-screen .element-char.earth { background: color-mix(in srgb, var(--earth) 78%, #fff4e8); }
    .overview-screen .element-char.metal { background: color-mix(in srgb, var(--metal) 74%, #fff4e8); }
    .overview-screen .element-char.water { background: color-mix(in srgb, var(--water) 74%, #fff4e8); }
    .overview-screen .element-char.wood { background: color-mix(in srgb, var(--wood) 78%, #fff4e8); }

    .overview-screen .seal-wheel-core {
      width: clamp(76px, 18.8vw, 94px);
      height: clamp(76px, 18.8vw, 94px);
      border-color: rgba(173, 138, 77, 0.22);
      background:
        radial-gradient(circle at 50% 40%, rgba(255, 252, 247, 0.98), rgba(250, 246, 238, 0.88)),
        rgba(255, 252, 247, 0.9);
      box-shadow:
        inset 0 0 0 7px rgba(255, 252, 247, 0.66),
        0 12px 32px rgba(54, 44, 32, 0.09);
    }

    .overview-screen .seal-wheel-core strong {
      font-size: clamp(38px, 9.6vw, 52px);
      color: var(--wood);
    }

    .overview-screen .seal-wheel-core small {
      font-size: 11px;
      letter-spacing: 0.12em;
    }

    .overview-screen .hero-title {
      display: none;
    }

    .overview-data-strip {
      position: relative;
      z-index: 5;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
      margin: 20px 0 0;
    }

    .overview-data-strip span {
      --strip-accent: var(--wood);
      display: grid;
      grid-template-columns: 31px minmax(0, 1fr);
      grid-template-areas:
        "icon title"
        "icon meta";
      min-width: 0;
      min-height: 52px;
      align-content: center;
      column-gap: 5px;
      row-gap: 2px;
      padding: 8px 7px 8px 7px;
      overflow: hidden;
      border: 1px solid rgba(173, 138, 77, 0.16);
      border-radius: 14px;
      background:
        linear-gradient(180deg, rgba(255, 252, 247, 0.88), rgba(246, 239, 228, 0.74)),
        radial-gradient(circle at 16% 50%, color-mix(in srgb, var(--strip-accent) 14%, transparent), transparent 58%),
        rgba(246, 239, 228, 0.82);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.7),
        0 12px 26px rgba(54, 44, 32, 0.05);
    }

    .overview-data-strip span:nth-child(2) {
      --strip-accent: var(--gold);
    }

    .overview-data-strip span:nth-child(3) {
      --strip-accent: var(--water);
    }

    .overview-data-strip span::after {
      content: none;
      display: none;
    }

    .overview-data-strip b {
      grid-area: icon;
      display: grid;
      place-items: center;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      border: 1px solid rgba(255, 252, 247, 0.58);
      background:
        radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--strip-accent) 84%, #fffaf1), color-mix(in srgb, var(--strip-accent) 64%, #6a5b42));
      color: #fffaf1;
      box-shadow:
        inset 0 0 0 3px rgba(255, 252, 247, 0.26),
        0 5px 12px rgba(54, 44, 32, 0.08);
    }

    .overview-data-strip svg {
      width: 19px;
      height: 19px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2.35;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .overview-data-strip strong {
      grid-area: title;
      overflow: hidden;
      color: var(--ink);
      font-family: var(--serif);
      font-size: clamp(11.5px, 3vw, 13.5px);
      font-weight: 800;
      line-height: 1.16;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .overview-data-strip small {
      grid-area: meta;
      display: block;
      overflow: hidden;
      color: rgba(24, 23, 21, 0.52);
      font-size: clamp(9px, 2.35vw, 11px);
      line-height: 1.25;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .overview-screen .overview-feature-card {
      position: relative;
      display: grid;
      grid-template-columns: minmax(0, 1fr) clamp(34px, 9vw, 44px);
      align-items: center;
      gap: 7px;
      min-height: clamp(98px, 24vw, 118px);
      margin-top: 16px;
      padding: 12px 10px 12px clamp(150px, 33vw, 184px);
      overflow: hidden;
      border: 1px solid rgba(173, 138, 77, 0.24);
      border-radius: var(--overview-card-radius);
      background:
        linear-gradient(180deg, rgba(255, 252, 247, 0.72), rgba(243, 235, 222, 0.72)),
        rgba(246, 239, 228, 0.78);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.72),
        0 16px 34px rgba(54, 44, 32, 0.06);
    }

    .overview-screen .overview-feature-card + .overview-feature-card {
      margin-top: 20px;
      border-top: 1px solid rgba(173, 138, 77, 0.24);
    }

    .overview-feature-card::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 1;
      background:
        linear-gradient(90deg, rgba(255, 252, 247, 0) 0 28%, rgba(255, 252, 247, 0.56) 42%, rgba(255, 252, 247, 0.96) 100%);
      pointer-events: none;
    }

    .overview-feature-bg {
      position: absolute;
      inset: 0;
      z-index: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: left center;
      opacity: 0.98;
      mix-blend-mode: multiply;
      pointer-events: none;
      user-select: none;
      -webkit-user-drag: none;
    }

    .overview-feature-copy {
      position: relative;
      z-index: 2;
      display: grid;
      grid-template-columns: max-content max-content;
      column-gap: 10px;
      row-gap: 4px;
      min-width: 0;
      justify-items: start;
      align-items: center;
    }

    .overview-screen .overview-feature-copy em {
      display: inline-grid;
      align-items: center;
      grid-column: 2;
      grid-row: 1;
      min-height: 18px;
      padding: 0 6px;
      border: 1px solid rgba(167, 52, 39, 0.26);
      border-radius: 999px;
      color: rgba(167, 52, 39, 0.82);
      background: rgba(255, 252, 247, 0.58);
      font-size: clamp(9px, 2.4vw, 11px);
      font-style: normal;
      font-weight: 700;
      letter-spacing: 0.05em;
      line-height: 1;
    }

    .overview-screen .overview-feature-copy strong {
      grid-column: 1;
      grid-row: 1;
      font-size: clamp(20px, 5.2vw, 26px);
      font-weight: 820;
      letter-spacing: 0.04em;
      line-height: 1.08;
    }

    .overview-screen .overview-feature-copy small {
      display: block;
      grid-column: 1 / -1;
      overflow: visible;
      color: rgba(24, 23, 21, 0.62);
      font-size: clamp(10px, 2.8vw, 12px);
      line-height: 1.26;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .overview-feature-tags {
      display: flex;
      grid-column: 1 / -1;
      flex-wrap: wrap;
      gap: 10px;
      min-width: 0;
    }

    .overview-feature-tags i {
      position: relative;
      display: inline-grid;
      place-items: center;
      min-height: 18px;
      padding: 0 7px;
      border: 1px solid rgba(173, 138, 77, 0.18);
      border-radius: 999px;
      background: rgba(247, 242, 234, 0.72);
      color: rgba(24, 23, 21, 0.64);
      font-size: clamp(9px, 2.35vw, 11px);
      font-style: normal;
      line-height: 1;
    }

    .overview-feature-tags i:first-child::before {
      content: "";
      width: 5px;
      height: 5px;
      margin-right: 4px;
      border-radius: 50%;
      background: rgba(76, 139, 102, 0.62);
    }

    .overview-feature-tags i:not(:last-child)::after {
      content: "›";
      position: absolute;
      right: -9px;
      top: 50%;
      color: rgba(24, 23, 21, 0.22);
      font-size: 18px;
      line-height: 1;
      transform: translateY(-54%);
    }

    .overview-feature-card .relationship-entry-chevron {
      position: relative;
      z-index: 2;
      display: grid;
      place-items: center;
      justify-self: end;
      width: clamp(34px, 9vw, 44px);
      height: clamp(34px, 9vw, 44px);
      border: 1px solid rgba(173, 138, 77, 0.28);
      border-radius: 50%;
      color: rgba(255, 252, 247, 0.92);
      background: rgba(76, 139, 102, 0.9);
      font-size: 0;
      line-height: 1;
      box-shadow:
        inset 0 0 0 4px rgba(255, 252, 247, 0.22),
        0 10px 24px rgba(54, 44, 32, 0.12);
    }

    .overview-feature-card .relationship-entry-chevron::before {
      width: 10px;
      height: 10px;
      border-top-width: 2.2px;
      border-right-width: 2.2px;
      transform: rotate(45deg) translate(-1px, 1px);
    }

    .overview-feature-card:not(.bazi-complete-book-entry) .relationship-entry-chevron {
      background: rgba(189, 145, 75, 0.9);
    }

    .overview-screen .quick-actions {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
      margin: 12px 0 18px;
    }

    .overview-screen .ritual-action {
      --action-accent: var(--wood);
      position: relative;
      display: grid;
      grid-template-columns: 32px minmax(42px, 1fr) 7px;
      align-items: center;
      justify-items: stretch;
      gap: 5px;
      min-width: 0;
      min-height: 54px;
      padding: 6px;
      overflow: hidden;
      border: 1px solid rgba(173, 138, 77, 0.18);
      border-radius: 14px;
      background:
        linear-gradient(180deg, rgba(255, 252, 247, 0.88), rgba(246, 239, 228, 0.72)),
        radial-gradient(circle at 10% 50%, color-mix(in srgb, var(--action-accent) 13%, transparent), transparent 58%),
        rgba(246, 239, 228, 0.78);
      text-align: left;
      box-shadow: 0 12px 26px rgba(54, 44, 32, 0.045);
    }

    .overview-screen .ritual-action:nth-child(2) {
      --action-accent: var(--water);
    }

    .overview-screen .ritual-action:nth-child(3) {
      --action-accent: var(--gold);
    }

    .overview-screen .round-seal {
      width: 32px;
      height: 32px;
      border-color: rgba(173, 138, 77, 0.28);
      background:
        radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--action-accent) 84%, #fffaf1), color-mix(in srgb, var(--action-accent) 58%, #6f6048) 58%, rgba(255, 252, 247, 0.92) 59% 100%);
      color: #fffaf1;
      box-shadow:
        inset 0 0 0 5px rgba(173, 138, 77, 0.08),
        0 5px 12px rgba(54, 44, 32, 0.08);
    }

    .overview-screen .round-seal svg {
      width: 19px;
      height: 19px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2.35;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .overview-screen .ritual-action > span:nth-child(2) {
      display: grid;
      gap: 3px;
      min-width: 0;
      color: inherit;
      font-family: var(--sans);
      font-size: inherit;
      font-weight: inherit;
      letter-spacing: 0;
      line-height: 1;
    }

    .overview-screen .ritual-action > span:nth-child(2) strong {
      overflow-wrap: anywhere;
      color: var(--ink);
      font-family: var(--serif);
      font-size: clamp(11.5px, 3vw, 13px);
      font-weight: 800;
      letter-spacing: 0.02em;
      line-height: 1.16;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .overview-screen .ritual-action > span:nth-child(2) small {
      color: rgba(24, 23, 21, 0.52);
      font-size: clamp(8.5px, 2.25vw, 10.5px);
      line-height: 1.25;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .overview-screen .ritual-action .chevron {
      position: static;
      align-self: center;
      justify-self: end;
      color: rgba(24, 23, 21, 0.32);
      font-family: var(--sans);
      font-size: 22px;
      font-weight: 400;
      letter-spacing: 0;
      line-height: 1;
    }

    @media (max-width: 374px) {
      .overview-screen {
        padding-right: 14px;
        padding-left: 14px;
      }

      .overview-screen .hero {
        min-height: 232px;
        margin-right: -14px;
        margin-left: -14px;
      }

      .overview-screen .seal-wheel {
        width: 210px;
        height: 210px;
      }

      .overview-screen .overview-feature-card {
        padding-left: 116px;
      }

      .overview-screen .overview-feature-copy strong {
        font-size: 19px;
      }

      .overview-feature-tags i {
        padding: 0 7px;
      }

      .overview-data-strip {
        gap: 6px;
      }

      .overview-data-strip span {
        grid-template-columns: 32px minmax(0, 1fr);
        column-gap: 5px;
        padding-right: 6px;
        padding-left: 6px;
      }

      .overview-data-strip b {
        width: 30px;
        height: 30px;
      }

      .overview-screen .quick-actions {
        gap: 7px;
      }

      .overview-screen .ritual-action {
        grid-template-columns: 34px minmax(0, 1fr) 8px;
        gap: 6px;
        min-height: 68px;
        padding: 9px 8px;
      }

      .overview-screen .round-seal {
        width: 34px;
        height: 34px;
      }
    }

    .relationship-match-screen {
      display: none;
    }

    .relationship-match-screen.is-active {
      display: block;
    }

    .relationship-brief,
    .relationship-type-panel,
    .relationship-profile-panel,
    .relationship-report-shell {
      min-width: 0;
      max-width: 100%;
    }

    .relationship-brief {
      display: grid;
      gap: 10px;
      margin: 10px 0 20px;
      padding: 18px 0 16px;
      border-top: 1px solid rgba(24, 23, 21, 0.1);
      border-bottom: 1px solid rgba(24, 23, 21, 0.1);
    }

    .relationship-brief h2,
    .relationship-report-head h2,
    .relationship-volume h2 {
      margin: 0;
      font-family: var(--serif);
      font-weight: 700;
      letter-spacing: 0.08em;
      line-height: 1.2;
    }

    .relationship-brief h2 {
      font-size: 24px;
    }

    .relationship-brief p,
    .relationship-section-head p,
    .relationship-report-head p,
    .relationship-book-cover p,
    .relationship-volume p {
      margin: 0;
      color: rgba(24, 23, 21, 0.62);
      font-size: 13px;
      line-height: 1.75;
    }

    .relationship-section-head {
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 14px;
      margin: 18px 0 8px;
    }

    .relationship-section-head h2 {
      margin: 0;
      font-family: var(--serif);
      font-size: 18px;
      letter-spacing: 0.08em;
    }

    .relationship-type-list,
    .relationship-partner-list {
      display: grid;
      gap: 0;
      border-top: 1px solid rgba(24, 23, 21, 0.09);
    }

    .relationship-type-row,
    .relationship-partner-option {
      display: grid;
      align-items: center;
      width: 100%;
      border: 0;
      border-bottom: 1px solid rgba(24, 23, 21, 0.09);
      background: linear-gradient(90deg, rgba(255, 252, 247, 0.9), rgba(255, 252, 247, 0.36));
      color: var(--ink);
      text-align: left;
      cursor: pointer;
    }

    .relationship-type-row {
      grid-template-columns: 44px minmax(0, 1fr) 20px;
      gap: 10px;
      min-height: 86px;
      padding: 12px 6px 12px 8px;
    }

    .relationship-type-row.is-active,
    .relationship-partner-option.is-active {
      background: linear-gradient(90deg, rgba(173, 138, 77, 0.12), rgba(255, 252, 247, 0.52));
    }

    .relationship-type-row > span:nth-child(2),
    .relationship-partner-option > span:nth-child(2) {
      display: grid;
      gap: 3px;
      min-width: 0;
    }

    .relationship-type-row strong {
      font-family: var(--serif);
      font-size: 17px;
      line-height: 1.2;
    }

    .relationship-type-row strong small {
      color: var(--seal);
      font-size: 11px;
      letter-spacing: 0.12em;
    }

    .relationship-type-row em,
    .relationship-profile-card small,
    .relationship-partner-option small {
      color: rgba(24, 23, 21, 0.5);
      font-size: 11px;
      font-style: normal;
      line-height: 1.2;
    }

    .relationship-type-row p {
      margin: 0;
      color: rgba(24, 23, 21, 0.6);
      font-size: 12px;
      line-height: 1.45;
    }

    .relationship-type-row i {
      color: rgba(24, 23, 21, 0.36);
      font-size: 22px;
      font-style: normal;
    }

    .relationship-profile-current {
      margin-bottom: 6px;
    }

    .relationship-profile-card,
    .relationship-partner-option {
      grid-template-columns: 40px minmax(0, 1fr);
      gap: 12px;
      min-height: 68px;
      padding: 10px 8px;
    }

    .relationship-profile-card {
      display: grid;
      align-items: center;
      border-top: 1px solid rgba(24, 23, 21, 0.09);
      border-bottom: 1px solid rgba(24, 23, 21, 0.09);
      background: rgba(255, 252, 247, 0.46);
    }

    .relationship-profile-mark {
      display: grid;
      place-items: center;
      width: 34px;
      height: 34px;
      border: 1px solid rgba(173, 138, 77, 0.28);
      border-radius: 11px;
      background: rgba(173, 138, 77, 0.1);
      color: rgba(24, 23, 21, 0.58);
      font-family: Georgia, var(--serif);
      font-weight: 800;
    }

    .relationship-profile-card > span:nth-child(2),
    .relationship-partner-option > span:nth-child(2) {
      min-width: 0;
    }

    .relationship-profile-card strong,
    .relationship-partner-option strong {
      overflow: hidden;
      font-family: var(--serif);
      font-size: 16px;
      line-height: 1.25;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .relationship-profile-card em {
      display: block;
      overflow: hidden;
      color: rgba(24, 23, 21, 0.52);
      font-size: 11px;
      font-style: normal;
      line-height: 1.35;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .relationship-report-shell {
      display: grid;
      gap: 14px;
      margin-top: 20px;
    }

    .relationship-report-head {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: start;
      gap: 12px;
      padding-top: 18px;
      border-top: 1px solid rgba(24, 23, 21, 0.12);
    }

    .relationship-report-head h2 {
      margin-top: 4px;
      font-size: 22px;
    }

    .relationship-report-tabs {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 6px;
      padding: 4px;
      border: 1px solid rgba(24, 23, 21, 0.12);
      border-radius: 999px;
      background: rgba(255, 252, 247, 0.56);
    }

    .relationship-report-tabs button {
      min-height: 34px;
      border: 0;
      border-radius: 999px;
      background: transparent;
      color: rgba(24, 23, 21, 0.62);
      font-family: var(--serif);
      font-size: 13px;
      font-weight: 800;
      letter-spacing: 0.1em;
      cursor: pointer;
    }

    .relationship-report-tabs button.active {
      background: rgba(24, 23, 21, 0.88);
      color: #fffaf1;
    }

    .relationship-report-actions {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
    }

    .relationship-report-actions button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      min-width: 0;
      min-height: 40px;
      border: 1px solid rgba(173, 138, 77, 0.22);
      border-radius: 10px;
      background: rgba(255, 252, 247, 0.58);
      color: rgba(24, 23, 21, 0.66);
      font-family: var(--serif);
      font-size: 13px;
      font-weight: 900;
      letter-spacing: 0.08em;
      cursor: pointer;
    }

    .relationship-report-actions svg {
      width: 17px;
      height: 17px;
      flex: 0 0 auto;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.9;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .relationship-report-actions button.primary {
      border-color: rgba(123, 34, 27, 0.42);
      background: linear-gradient(180deg, #b83a2d, #8f241b);
      color: #fffaf1;
      box-shadow: 0 10px 22px rgba(123, 34, 27, 0.12);
    }

    .relationship-report-actions button.danger {
      border-color: rgba(184, 54, 43, 0.2);
      background: rgba(184, 54, 43, 0.045);
      color: rgba(123, 34, 27, 0.78);
    }

    .relationship-setup-card {
      display: grid;
      gap: 14px;
      padding: 16px;
      border: 1px solid rgba(113, 93, 62, 0.2);
      border-radius: 10px;
      background: rgba(255, 252, 247, 0.58);
    }

    .relationship-setup-pair {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 42px minmax(0, 1fr);
      align-items: center;
      gap: 10px;
    }

    .relationship-setup-pair span {
      display: grid;
      gap: 3px;
      min-width: 0;
      padding: 12px 10px;
      border: 1px solid rgba(173, 138, 77, 0.18);
      border-radius: 10px;
      background: rgba(255, 252, 247, 0.62);
      text-align: center;
    }

    .relationship-setup-pair small,
    .relationship-setup-pair em,
    .relationship-setup-card p {
      color: rgba(24, 23, 21, 0.54);
      font-size: 11px;
      font-style: normal;
      line-height: 1.5;
    }

    .relationship-setup-pair strong {
      overflow: hidden;
      font-family: var(--serif);
      font-size: 18px;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .relationship-setup-pair b {
      display: grid;
      place-items: center;
      width: 38px;
      height: 38px;
      border: 1px solid rgba(184, 54, 43, 0.5);
      border-radius: 10px;
      color: var(--seal);
      font-family: var(--serif);
      font-size: 22px;
      line-height: 1;
    }

    .relationship-setup-steps {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
    }

    .relationship-setup-steps span {
      display: grid;
      place-items: center;
      min-height: 32px;
      border: 1px solid rgba(24, 23, 21, 0.1);
      border-radius: 999px;
      color: rgba(24, 23, 21, 0.48);
      font-size: 11px;
      font-weight: 700;
    }

    .relationship-setup-steps span.is-done {
      border-color: rgba(184, 54, 43, 0.28);
      color: var(--seal);
      background: rgba(184, 54, 43, 0.06);
    }

    .relationship-generate-button {
      min-height: 48px;
      border: 1px solid rgba(123, 34, 27, 0.64);
      border-radius: 9px;
      background: linear-gradient(180deg, #b83a2d, #8f241b);
      color: #fffaf1;
      font-family: var(--serif);
      font-size: 17px;
      font-weight: 800;
      letter-spacing: 0.16em;
      box-shadow: 0 10px 24px rgba(123, 34, 27, 0.16);
      cursor: pointer;
    }

    .relationship-generate-button:disabled {
      border-color: rgba(24, 23, 21, 0.12);
      background: rgba(24, 23, 21, 0.12);
      color: rgba(24, 23, 21, 0.42);
      box-shadow: none;
      cursor: not-allowed;
    }

    .relationship-book-cover {
      display: grid;
      grid-template-columns: 92px minmax(0, 1fr);
      align-items: center;
      gap: 16px;
      padding: 18px 0 16px;
      border-bottom: 1px solid rgba(24, 23, 21, 0.09);
    }

    .relationship-orbit {
      position: relative;
      display: grid;
      place-items: center;
      width: 88px;
      height: 88px;
      border: 1px solid rgba(173, 138, 77, 0.32);
      border-radius: 50%;
      background: radial-gradient(circle, rgba(255, 252, 247, 0.78), rgba(173, 138, 77, 0.08));
      box-shadow: inset 0 0 0 8px rgba(173, 138, 77, 0.06);
    }

    .relationship-orbit span {
      position: absolute;
      display: grid;
      place-items: center;
      width: 34px;
      height: 34px;
      border: 1px solid rgba(24, 23, 21, 0.16);
      border-radius: 50%;
      background: rgba(255, 252, 247, 0.86);
      font-family: var(--serif);
      font-weight: 800;
    }

    .relationship-orbit span:first-child {
      left: 8px;
      top: 27px;
      color: var(--wood);
    }

    .relationship-orbit span:last-child {
      right: 8px;
      top: 27px;
      color: var(--water);
    }

    .relationship-orbit i {
      width: 34px;
      height: 1px;
      background: rgba(173, 138, 77, 0.55);
    }

    .relationship-book-cover small {
      color: var(--seal);
      font-family: var(--serif);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.12em;
    }

    .relationship-book-cover h2 {
      margin: 4px 0 8px;
      font-family: var(--serif);
      font-size: 23px;
      letter-spacing: 0.05em;
      line-height: 1.2;
    }

    .relationship-focus-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
    }

    .relationship-focus-grid span {
      display: grid;
      place-items: center;
      min-height: 38px;
      border: 1px solid rgba(173, 138, 77, 0.2);
      border-radius: 999px;
      background: rgba(255, 252, 247, 0.54);
      color: rgba(24, 23, 21, 0.68);
      font-family: var(--serif);
      font-size: 13px;
      font-weight: 700;
    }

    .relationship-score-strip {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
    }

    .relationship-score-strip span {
      display: grid;
      justify-items: center;
      gap: 3px;
      min-height: 62px;
      padding: 10px 6px;
      border: 1px solid rgba(173, 138, 77, 0.18);
      border-radius: 10px;
      background: rgba(255, 252, 247, 0.54);
    }

    .relationship-score-strip b {
      color: var(--seal);
      font-family: Georgia, var(--serif);
      font-size: 22px;
      line-height: 1;
    }

    .relationship-score-strip small {
      color: rgba(24, 23, 21, 0.5);
      font-size: 11px;
    }

    .relationship-volume {
      display: grid;
      gap: 10px;
      padding: 16px 0;
      border-top: 1px solid rgba(24, 23, 21, 0.09);
    }

    .relationship-volume h2 {
      font-size: 18px;
    }

    .relationship-action-list,
    .relationship-evidence-list,
    .relationship-dimension-list {
      display: grid;
      gap: 0;
      border-top: 1px solid rgba(24, 23, 21, 0.08);
    }

    .relationship-action-list div,
    .relationship-evidence-list div,
    .relationship-dimension-list button {
      display: grid;
      gap: 4px;
      padding: 11px 0;
      border-bottom: 1px solid rgba(24, 23, 21, 0.08);
    }

    .relationship-action-list div {
      grid-template-columns: 28px minmax(0, 1fr);
      align-items: start;
    }

    .relationship-action-list b {
      display: grid;
      place-items: center;
      width: 22px;
      height: 22px;
      border: 1px solid rgba(173, 138, 77, 0.35);
      border-radius: 50%;
      color: var(--gold);
      font-family: var(--serif);
      font-size: 12px;
    }

    .relationship-action-list span,
    .relationship-evidence-list strong {
      color: rgba(24, 23, 21, 0.78);
      font-size: 13px;
      line-height: 1.5;
    }

    .relationship-evidence-list p {
      margin: 0;
      color: rgba(24, 23, 21, 0.58);
      font-size: 12px;
      line-height: 1.7;
    }

    .relationship-use-caveat {
      display: grid;
      gap: 3px;
      padding: 10px 11px;
      border: 1px solid rgba(184, 54, 43, 0.34);
      border-radius: 8px;
      background: rgba(184, 54, 43, 0.075);
      color: rgba(123, 34, 27, 0.86);
    }

    .relationship-use-caveat strong {
      font-size: 12px;
      line-height: 1.3;
    }

    .relationship-use-caveat span {
      font-size: 11px;
      line-height: 1.45;
    }

    .relationship-report-safety-note {
      position: relative;
      z-index: 2;
      display: grid;
      gap: 4px;
      margin: 14px 0 0;
      padding: 11px 12px;
      border: 1px solid rgba(68, 83, 77, 0.18);
      border-radius: 8px;
      background: rgba(255, 252, 247, 0.78);
      color: rgba(36, 42, 39, 0.78);
    }

    .relationship-report-safety-note strong {
      display: flex;
      flex-wrap: wrap;
      gap: 7px;
      align-items: center;
      font-size: 12px;
      line-height: 1.3;
      color: rgba(24, 23, 21, 0.82);
    }

    .relationship-report-safety-note span {
      font-size: 11px;
      line-height: 1.55;
    }

    .relationship-ai-status-pill {
      display: inline-flex;
      align-items: center;
      min-height: 20px;
      padding: 0 8px;
      border: 1px solid rgba(173, 138, 77, 0.28);
      border-radius: 999px;
      background: rgba(255, 250, 241, 0.72);
      color: rgba(123, 84, 38, 0.88);
      font-family: var(--sans);
      font-size: 10px;
      font-weight: 800;
      letter-spacing: 0.08em;
    }

    .relationship-ai-status-pill.is-ready {
      border-color: rgba(76, 139, 102, 0.26);
      background: rgba(76, 139, 102, 0.1);
      color: rgba(44, 97, 67, 0.9);
    }

    .relationship-ai-status-pill.is-loading {
      border-color: rgba(184, 54, 43, 0.2);
      background: rgba(184, 54, 43, 0.075);
      color: rgba(123, 34, 27, 0.86);
    }

    .relationship-ai-status-copy {
      color: rgba(90, 72, 50, 0.72);
    }

    .relationship-flow-detail-button {
      display: inline-grid;
      place-items: center;
      justify-self: start;
      min-height: 38px;
      margin-top: 4px;
      padding: 0 18px;
      border: 1px solid rgba(167, 52, 39, 0.28);
      border-radius: 999px;
      background: rgba(184, 54, 43, 0.08);
      color: var(--seal);
      font-family: var(--serif);
      font-size: 13px;
      font-weight: 800;
      letter-spacing: 0.08em;
      cursor: pointer;
    }

    .relationship-dimension-list button {
      grid-template-columns: 34px minmax(0, 1fr) 38px;
      align-items: center;
      width: 100%;
      border-right: 0;
      border-left: 0;
      border-top: 0;
      background: transparent;
      color: var(--ink);
      text-align: left;
      cursor: pointer;
    }

    .relationship-dimension-list button > span:nth-child(2) {
      display: grid;
      gap: 3px;
      min-width: 0;
    }

    .relationship-dimension-list strong {
      font-family: var(--serif);
      font-size: 15px;
      line-height: 1.25;
    }

    .relationship-dimension-list small {
      overflow: hidden;
      color: rgba(24, 23, 21, 0.52);
      font-size: 11px;
      line-height: 1.35;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .relationship-dimension-list i {
      color: var(--seal);
      font-family: Georgia, var(--serif);
      font-size: 18px;
      font-style: normal;
      font-weight: 800;
      text-align: right;
    }

    .relationship-dimension-tabs {
      display: flex;
      gap: 8px;
      overflow-x: auto;
      padding-bottom: 3px;
      scrollbar-width: none;
    }

    .relationship-dimension-tabs::-webkit-scrollbar {
      display: none;
    }

    .relationship-dimension-tabs button {
      flex: 0 0 auto;
      min-height: 34px;
      padding: 0 12px;
      border: 1px solid rgba(173, 138, 77, 0.24);
      border-radius: 999px;
      background: rgba(255, 252, 247, 0.62);
      color: rgba(24, 23, 21, 0.62);
      font-family: var(--serif);
      font-size: 12px;
      font-weight: 800;
      cursor: pointer;
    }

    .relationship-dimension-tabs button.active {
      border-color: rgba(184, 54, 43, 0.36);
      background: rgba(184, 54, 43, 0.08);
      color: var(--seal);
    }

    .relationship-dimension-detail {
      display: grid;
      grid-template-columns: 42px minmax(0, 1fr) auto;
      align-items: start;
      gap: 12px;
      padding: 16px 0;
      border-top: 1px solid rgba(24, 23, 21, 0.09);
      border-bottom: 1px solid rgba(24, 23, 21, 0.09);
    }

    .relationship-dimension-detail h2 {
      margin: 3px 0 6px;
      font-family: var(--serif);
      font-size: 20px;
      letter-spacing: 0.08em;
    }

    .relationship-dimension-detail small,
    .relationship-dimension-detail p {
      margin: 0;
      color: rgba(24, 23, 21, 0.58);
      font-size: 12px;
      line-height: 1.65;
    }

    .relationship-dimension-detail > b {
      color: var(--seal);
      font-family: Georgia, var(--serif);
      font-size: 28px;
      line-height: 1;
    }

    .relationship-bazi-pair {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }

    .relationship-bazi-pair article {
      min-width: 0;
      padding: 12px 10px;
      border: 1px solid rgba(113, 93, 62, 0.22);
      border-radius: 10px;
      background: rgba(255, 252, 247, 0.5);
    }

    .relationship-bazi-pair h3 {
      margin: 0 0 10px;
      overflow: hidden;
      font-family: var(--serif);
      font-size: 15px;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .relationship-bazi-pair article > div {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 4px;
    }

    .relationship-bazi-pair span {
      display: grid;
      justify-items: center;
      gap: 3px;
      min-width: 0;
    }

    .relationship-bazi-pair small,
    .relationship-bazi-pair em {
      color: rgba(24, 23, 21, 0.48);
      font-size: 10px;
      font-style: normal;
    }

    .relationship-bazi-pair b {
      font-family: var(--serif);
      font-size: 18px;
    }

    .relationship-bazi-matrix {
      display: grid;
      overflow: hidden;
      border: 1px solid rgba(113, 93, 62, 0.18);
      border-radius: 10px;
      background: rgba(255, 252, 247, 0.48);
    }

    .relationship-bazi-matrix-head,
    .relationship-bazi-matrix-row {
      display: grid;
      grid-template-columns: 42px repeat(4, minmax(0, 1fr));
      align-items: stretch;
    }

    .relationship-bazi-matrix-head span,
    .relationship-bazi-matrix-row > b,
    .relationship-bazi-matrix-row > span {
      display: grid;
      place-items: center;
      min-height: 46px;
      padding: 7px 4px;
      border-right: 1px solid rgba(24, 23, 21, 0.08);
      border-bottom: 1px solid rgba(24, 23, 21, 0.08);
      text-align: center;
    }

    .relationship-bazi-matrix-row:last-child > b,
    .relationship-bazi-matrix-row:last-child > span {
      border-bottom: 0;
    }

    .relationship-bazi-matrix-head span:last-child,
    .relationship-bazi-matrix-row > span:last-child {
      border-right: 0;
    }

    .relationship-bazi-matrix-head {
      color: var(--gold);
      font-family: var(--serif);
      font-size: 12px;
      font-weight: 800;
    }

    .relationship-bazi-matrix-row > b {
      color: rgba(24, 23, 21, 0.66);
      font-family: var(--serif);
      font-size: 14px;
    }

    .relationship-bazi-matrix-row i {
      color: rgba(24, 23, 21, 0.84);
      font-family: var(--serif);
      font-size: 17px;
      font-style: normal;
      font-weight: 800;
    }

    .relationship-bazi-matrix-row small {
      color: rgba(24, 23, 21, 0.48);
      font-size: 10px;
    }

    .relationship-bazi-matrix .is-day i,
    .relationship-bazi-matrix .is-day {
      color: var(--seal);
    }

    .relationship-element-legend {
      display: flex;
      justify-content: flex-end;
      gap: 12px;
      color: rgba(24, 23, 21, 0.52);
      font-size: 11px;
    }

    .relationship-element-compare {
      display: grid;
      gap: 9px;
    }

    .relationship-element-row {
      display: grid;
      grid-template-columns: 24px minmax(0, 1fr) 54px;
      align-items: center;
      gap: 10px;
      font-size: 12px;
    }

    .relationship-element-bars {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 20px minmax(0, 1fr);
      align-items: center;
      gap: 6px;
    }

    .relationship-element-bars i {
      display: block;
      width: var(--value);
      height: 5px;
      border-radius: 999px;
      background: var(--bar);
      opacity: 0.78;
    }

    .relationship-element-bars em {
      color: rgba(173, 138, 77, 0.78);
      font-family: var(--serif);
      font-size: 14px;
      font-style: normal;
      text-align: center;
    }

    .relationship-element-row small {
      color: rgba(24, 23, 21, 0.45);
      font-size: 10px;
      text-align: right;
    }

    .relationship-year-timeline {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 8px;
    }

    .relationship-year-timeline button {
      display: grid;
      gap: 4px;
      justify-items: center;
      min-height: 58px;
      padding: 8px 4px;
      border: 1px solid rgba(173, 138, 77, 0.22);
      border-radius: 10px;
      background: rgba(255, 252, 247, 0.54);
      color: rgba(24, 23, 21, 0.62);
      cursor: pointer;
    }

    .relationship-year-timeline small {
      font-size: 10px;
    }

    .relationship-year-timeline b {
      font-family: var(--serif);
      font-size: 13px;
      line-height: 1.1;
    }

    .relationship-year-timeline button.active {
      border-color: rgba(184, 54, 43, 0.38);
      background: rgba(184, 54, 43, 0.08);
      color: var(--seal);
    }

    .relationship-year-detail {
      display: grid;
      gap: 5px;
      padding: 15px 16px;
      border: 1px solid rgba(113, 93, 62, 0.18);
      border-radius: 10px;
      background: rgba(255, 252, 247, 0.54);
    }

    .relationship-year-detail h2 {
      margin: 0;
      font-family: var(--serif);
      font-size: 20px;
      letter-spacing: 0.08em;
    }

    .relationship-year-detail small,
    .relationship-year-detail p {
      margin: 0;
      color: rgba(24, 23, 21, 0.56);
      font-size: 12px;
      line-height: 1.65;
    }

    .relationship-year-technical {
      margin-top: 4px;
      padding-top: 8px;
      border-top: 1px dashed rgba(173, 138, 77, 0.22);
    }

    .relationship-year-technical summary {
      color: rgba(113, 93, 62, 0.68);
      font-size: 11px;
      font-weight: 800;
      cursor: pointer;
    }

    .relationship-year-technical p {
      margin-top: 6px;
      color: rgba(24, 23, 21, 0.5);
      font-size: 11px;
      line-height: 1.6;
    }

    .relationship-year-detail.good h2,
    .relationship-year-timeline button.good.active {
      color: var(--wood);
    }

    .relationship-year-detail.risk h2,
    .relationship-year-timeline button.risk.active {
      color: var(--seal);
    }

    .relationship-year-detail.window h2,
    .relationship-year-timeline button.window.active {
      color: var(--gold);
    }

    .relationship-advice-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }

    .relationship-advice-grid article {
      display: grid;
      gap: 6px;
      padding: 12px;
      border: 1px solid rgba(173, 138, 77, 0.16);
      border-radius: 10px;
      background: rgba(255, 252, 247, 0.52);
    }

    .relationship-advice-grid strong {
      font-family: var(--serif);
      font-size: 17px;
      color: var(--seal);
    }

    .relationship-advice-grid p {
      margin: 0;
      color: rgba(24, 23, 21, 0.58);
      font-size: 12px;
      line-height: 1.65;
    }

    .relationship-match-screen.is-active {
      display: flex;
      flex-direction: column;
    }

    .relationship-match-screen {
      position: relative;
    }

    .relationship-match-screen .page-head {
      margin-bottom: 10px;
    }

    .relationship-ledger-trigger {
      position: relative;
      color: var(--seal);
      font-family: var(--serif);
      font-size: 18px;
      font-weight: 900;
    }

    .relationship-ledger-trigger svg {
      display: none;
    }

    .relationship-ledger-trigger.is-ai-qa {
      color: var(--seal);
    }

    .relationship-ledger-trigger.is-ai-qa svg {
      display: block;
    }

    .relationship-ledger-trigger.is-ai-qa span,
    .relationship-ledger-trigger.is-ai-qa i {
      display: none;
    }

    .relationship-ledger-trigger i {
      position: absolute;
      right: 7px;
      top: 7px;
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--seal);
      box-shadow: 0 0 0 3px rgba(184, 54, 43, 0.12);
    }

    .relationship-ledger-card {
      position: relative;
      display: grid;
      gap: 14px;
      overflow: hidden;
      padding: 16px;
      border: 1px solid rgba(173, 138, 77, 0.24);
      border-radius: 14px;
      background:
        radial-gradient(circle at 92% 0%, rgba(184, 54, 43, 0.08), transparent 34%),
        radial-gradient(circle at 0% 100%, rgba(77, 132, 91, 0.07), transparent 36%),
        linear-gradient(180deg, rgba(255, 252, 247, 0.98), rgba(246, 239, 226, 0.9));
      box-shadow: inset 0 0 0 1px rgba(255, 252, 247, 0.34);
      animation: relationshipShareIn 220ms var(--ease);
    }

    .relationship-ledger-card::before {
      content: "";
      position: absolute;
      inset: 0 0 auto;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(173, 138, 77, 0.42), transparent);
    }

    .relationship-ledger-head {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: 38px minmax(0, 1fr);
      align-items: center;
      gap: 10px;
    }

    .relationship-ledger-head div {
      display: grid;
      gap: 2px;
      min-width: 0;
    }

    .relationship-ledger-head small {
      color: var(--gold);
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.12em;
    }

    .relationship-ledger-head strong {
      color: rgba(24, 23, 21, 0.86);
      font-family: var(--serif);
      font-size: 20px;
      letter-spacing: 0.06em;
    }

    .relationship-ledger-list {
      position: relative;
      z-index: 1;
      display: grid;
      gap: 8px;
    }

    .relationship-ledger-list article {
      display: grid;
      grid-template-columns: 34px minmax(0, 1fr) auto;
      align-items: center;
      gap: 10px;
      min-height: 72px;
      padding: 10px;
      border-top: 1px solid rgba(173, 138, 77, 0.14);
      border-bottom: 1px solid rgba(173, 138, 77, 0.1);
      background: rgba(255, 252, 247, 0.46);
    }

    .relationship-ledger-list article > span {
      display: grid;
      width: 32px;
      height: 32px;
      place-items: center;
      border: 1px solid rgba(184, 54, 43, 0.28);
      border-radius: 9px;
      color: var(--seal);
      font-family: var(--serif);
      font-size: 15px;
      font-weight: 900;
      background: rgba(255, 252, 247, 0.68);
    }

    .relationship-ledger-list article.is-ready > span,
    .relationship-ledger-list article.is-book > span {
      border-color: rgba(77, 132, 91, 0.28);
      color: #4d845b;
    }

    .relationship-ledger-list article div {
      display: grid;
      gap: 2px;
      min-width: 0;
    }

    .relationship-ledger-list small {
      color: rgba(113, 93, 62, 0.74);
      font-size: 10.5px;
      font-weight: 800;
      letter-spacing: 0.06em;
    }

    .relationship-ledger-list strong {
      overflow: hidden;
      color: rgba(24, 23, 21, 0.84);
      font-family: var(--serif);
      font-size: 16px;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .relationship-ledger-list p {
      overflow: hidden;
      margin: 0;
      color: rgba(24, 23, 21, 0.52);
      font-size: 11.5px;
      line-height: 1.45;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .relationship-ledger-list button,
    .relationship-ledger-actions button {
      min-height: 32px;
      padding: 0 10px;
      border: 1px solid rgba(173, 138, 77, 0.24);
      border-radius: 8px;
      background: rgba(255, 252, 247, 0.66);
      color: rgba(24, 23, 21, 0.66);
      font-family: var(--serif);
      font-weight: 900;
      cursor: pointer;
    }

    .relationship-ledger-row-actions {
      display: flex;
      flex-wrap: nowrap;
      align-items: center;
      justify-content: flex-end;
      gap: 6px;
      min-width: max-content;
    }

    .relationship-ledger-row-actions button {
      min-width: 0;
      white-space: nowrap;
    }

    .relationship-ledger-row-actions button[data-relationship-cancel-invite],
    .relationship-ledger-row-actions button[data-relationship-delete-report] {
      border-color: rgba(184, 54, 43, 0.2);
      background: rgba(184, 54, 43, 0.04);
      color: rgba(123, 34, 27, 0.72);
    }

    .relationship-ledger-actions {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
      gap: 8px;
    }

    .relationship-ledger-actions button.primary {
      border-color: rgba(123, 34, 27, 0.46);
      background: linear-gradient(180deg, #b83a2d, #8f241b);
      color: #fffaf1;
    }

    .relationship-ledger-card.is-page {
      overflow: visible;
      padding: 0;
      border: 0;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
      animation: none;
    }

    .relationship-ledger-card.is-page::before {
      content: none;
    }

    .relationship-ledger-page-head {
      display: grid;
      grid-template-columns: 48px minmax(0, 1fr) auto;
      align-items: center;
      gap: 12px;
      padding: 8px 0 18px;
      border-bottom: 1px solid rgba(173, 138, 77, 0.2);
    }

    .relationship-ledger-page-head div {
      display: grid;
      gap: 3px;
      min-width: 0;
    }

    .relationship-ledger-page-head small,
    .relationship-ledger-section-head p {
      margin: 0;
      color: var(--gold);
      font-family: var(--serif);
      font-size: 12px;
      font-weight: 800;
      letter-spacing: 0.12em;
    }

    .relationship-ledger-page-head strong {
      color: var(--ink);
      font-family: var(--serif);
      font-size: 25px;
      letter-spacing: 0.08em;
      line-height: 1.15;
    }

    .relationship-ledger-page-head p {
      margin: 0;
      color: rgba(24, 23, 21, 0.56);
      font-size: 13px;
      line-height: 1.55;
    }

    .relationship-ledger-page-head > button {
      min-height: 38px;
      padding: 0 14px;
      border: 1px solid rgba(184, 54, 43, 0.28);
      border-radius: 999px;
      background: rgba(255, 252, 247, 0.58);
      color: var(--seal);
      font-family: var(--serif);
      font-weight: 900;
      cursor: pointer;
    }

    .relationship-ledger-section {
      display: grid;
      gap: 10px;
      padding: 18px 0 4px;
      border-bottom: 1px solid rgba(173, 138, 77, 0.18);
    }

    .relationship-ledger-section:last-child {
      border-bottom: 0;
    }

    .relationship-ledger-section-head {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 12px;
    }

    .relationship-ledger-section-head h2 {
      margin: 0;
      color: var(--ink);
      font-family: var(--serif);
      font-size: 22px;
      letter-spacing: 0.08em;
    }

    .relationship-ledger-section-head p {
      color: rgba(24, 23, 21, 0.5);
      font-family: var(--sans);
      font-weight: 500;
      letter-spacing: 0;
      text-align: right;
    }

    .relationship-ledger-list article.is-current {
      background: linear-gradient(90deg, rgba(184, 54, 43, 0.08), rgba(255, 252, 247, 0.58));
    }

    .relationship-ledger-actions button[data-relationship-cancel-invite],
    .relationship-invite-actions button.danger {
      border-color: rgba(184, 54, 43, 0.22);
      background: rgba(184, 54, 43, 0.045);
      color: rgba(123, 34, 27, 0.78);
    }

    @media (max-width: 520px) {
      .relationship-ledger-card {
        padding: 14px;
      }

      .relationship-ledger-list article {
        grid-template-columns: 32px minmax(0, 1fr);
      }

      .relationship-ledger-list article button {
        grid-column: 2;
        justify-self: start;
      }

      .relationship-ledger-row-actions {
        grid-column: 2;
        justify-content: flex-start;
        min-width: 0;
        width: 100%;
      }

      .relationship-ledger-row-actions button {
        flex: 0 0 auto;
        min-height: 34px;
        padding-inline: 9px;
        font-size: 13px;
      }

      .relationship-ledger-page-head {
        grid-template-columns: 44px minmax(0, 1fr);
      }

      .relationship-ledger-page-head > button {
        grid-column: 2;
        justify-self: start;
      }

      .relationship-ledger-section-head {
        display: grid;
        gap: 4px;
      }

      .relationship-ledger-section-head p {
        text-align: left;
      }
    }

    .relationship-match-screen .page-title {
      position: relative;
      gap: 4px;
    }

    .relationship-match-screen .page-title::after {
      content: "";
      position: absolute;
      left: 50%;
      bottom: -10px;
      width: 132px;
      height: 1px;
      transform: translateX(-50%);
      background: linear-gradient(90deg, transparent, rgba(173, 138, 77, 0.48), transparent);
    }

    .relationship-match-screen .relationship-brief {
      display: none;
    }

    .relationship-match-screen .relationship-profile-panel {
      order: 1;
      position: relative;
      display: grid;
      grid-template-columns: minmax(0, 1fr) 54px minmax(0, 1fr);
      align-items: center;
      gap: 12px;
      min-height: 318px;
      margin-top: 24px;
      margin-bottom: 22px;
    }

    .relationship-profile-panel .relationship-section-head,
    .relationship-type-panel .relationship-section-head {
      display: none;
    }

    .relationship-match-screen .relationship-profile-panel::before {
      content: "";
      position: absolute;
      left: 50%;
      top: 50%;
      z-index: 0;
      width: 178px;
      height: 178px;
      border: 1px solid rgba(173, 138, 77, 0.14);
      border-radius: 50%;
      transform: translate(-50%, -50%);
      box-shadow:
        inset 0 0 0 22px rgba(173, 138, 77, 0.035),
        0 0 0 34px rgba(173, 138, 77, 0.04),
        0 0 0 64px rgba(173, 138, 77, 0.025);
      pointer-events: none;
    }

    .relationship-match-screen .relationship-profile-panel::after {
      content: "合";
      position: absolute;
      left: 50%;
      top: 50%;
      z-index: 2;
      display: grid;
      place-items: center;
      width: 42px;
      height: 42px;
      border: 2px double rgba(184, 54, 43, 0.72);
      border-radius: 10px;
      transform: translate(-50%, -50%);
      background: rgba(255, 252, 247, 0.9);
      color: var(--seal);
      font-family: var(--serif);
      font-size: 28px;
      font-weight: 800;
      line-height: 1;
      pointer-events: none;
    }

    .relationship-match-screen .relationship-profile-current {
      position: relative;
      z-index: 1;
      grid-column: 1;
      margin: 0;
    }

    .relationship-match-screen .relationship-partner-list {
      position: relative;
      z-index: 1;
      grid-column: 3;
      display: grid;
      gap: 10px;
      max-height: 318px;
      overflow-y: auto;
      border-top: 0;
      scrollbar-width: none;
    }

    .relationship-match-screen .relationship-partner-list::-webkit-scrollbar {
      display: none;
    }

    .relationship-match-screen .relationship-fate-slip {
      position: relative;
      display: grid;
      grid-template-columns: 1fr;
      justify-items: center;
      align-content: start;
      gap: 8px;
      min-height: 300px;
      width: 100%;
      padding: 18px 10px 14px;
      border: 1px solid rgba(113, 93, 62, 0.24);
      border-radius: 8px;
      background:
        linear-gradient(180deg, rgba(255, 252, 247, 0.94), rgba(246, 239, 226, 0.72)),
        radial-gradient(circle at 50% 22%, rgba(173, 138, 77, 0.12), transparent 45%);
      box-shadow: 0 10px 18px rgba(72, 51, 32, 0.11);
      color: var(--ink);
      text-align: center;
    }

    .relationship-match-screen .relationship-fate-slip::before {
      content: "";
      position: absolute;
      inset: 10px;
      border: 1px solid rgba(173, 138, 77, 0.22);
      border-radius: 6px;
      pointer-events: none;
    }

    .relationship-match-screen .relationship-fate-slip::after {
      content: "";
      position: absolute;
      left: 50%;
      bottom: 52px;
      width: 48px;
      height: 1px;
      transform: translateX(-50%);
      background: rgba(173, 138, 77, 0.42);
      pointer-events: none;
    }

    .relationship-match-screen .relationship-partner-option.relationship-fate-slip {
      border-bottom: 1px solid rgba(113, 93, 62, 0.24);
      cursor: pointer;
    }

    .relationship-match-screen .relationship-partner-option.relationship-fate-slip:not(.is-active) {
      min-height: 112px;
      opacity: 0.74;
    }

    .relationship-match-screen .relationship-slip-label {
      display: grid;
      place-items: center;
      min-width: 52px;
      min-height: 24px;
      padding: 0 10px;
      border: 1px solid rgba(173, 138, 77, 0.22);
      border-radius: 999px;
      color: rgba(113, 93, 62, 0.72);
      font-family: var(--serif);
      font-size: 12px;
      font-weight: 800;
      line-height: 1;
    }

    .relationship-match-screen .relationship-stem-ring {
      display: grid;
      place-items: center;
      width: 70px;
      height: 70px;
      margin-top: 8px;
      border: 2px solid currentColor;
      border-radius: 50%;
      background: rgba(255, 252, 247, 0.72);
      font-family: var(--serif);
      font-size: 38px;
      font-weight: 800;
      line-height: 1;
      box-shadow: inset 0 0 0 7px rgba(255, 252, 247, 0.82);
    }

    .relationship-stem-ring.is-wood {
      color: var(--wood);
    }

    .relationship-stem-ring.is-fire {
      color: var(--fire);
    }

    .relationship-stem-ring.is-earth {
      color: var(--earth);
    }

    .relationship-stem-ring.is-metal {
      color: var(--metal);
    }

    .relationship-stem-ring.is-water {
      color: var(--water);
    }

    .relationship-match-screen .relationship-fate-slip strong {
      overflow: hidden;
      width: 100%;
      margin-top: 4px;
      font-family: Georgia, var(--serif);
      font-size: 22px;
      line-height: 1.1;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .relationship-match-screen .relationship-fate-slip em {
      display: block;
      overflow: visible;
      color: rgba(24, 23, 21, 0.82);
      font-family: var(--serif);
      font-size: 17px;
      font-style: normal;
      letter-spacing: 0.14em;
      writing-mode: vertical-rl;
      line-height: 1.35;
      text-overflow: clip;
      white-space: normal;
    }

    .relationship-match-screen .relationship-fate-slip p {
      margin: auto 0 0;
      max-width: 112px;
      color: rgba(24, 23, 21, 0.62);
      font-family: var(--serif);
      font-size: 12px;
      line-height: 1.55;
    }

    .relationship-match-screen .relationship-fate-slip i {
      overflow: hidden;
      max-width: 100%;
      color: rgba(24, 23, 21, 0.42);
      font-size: 10px;
      font-style: normal;
      line-height: 1.2;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .relationship-match-screen .relationship-type-panel {
      order: 2;
      margin-bottom: 22px;
    }

    .relationship-match-screen .relationship-type-list {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 10px;
      border-top: 0;
    }

    .relationship-match-screen .relationship-type-row {
      display: grid;
      grid-template-columns: 1fr;
      justify-items: center;
      gap: 5px;
      min-height: 88px;
      padding: 0;
      border: 0;
      background: transparent;
      color: rgba(24, 23, 21, 0.62);
      text-align: center;
    }

    .relationship-match-screen .relationship-type-seal {
      position: relative;
      width: 54px;
      height: 54px;
      border-color: rgba(173, 138, 77, 0.38);
      border-radius: 50%;
      background: rgba(255, 252, 247, 0.58);
      color: rgba(24, 23, 21, 0.64);
      font-size: 28px;
      box-shadow: inset 0 0 0 5px rgba(173, 138, 77, 0.055);
    }

    .relationship-match-screen .relationship-type-seal::after {
      content: "";
      position: absolute;
      left: 50%;
      bottom: -8px;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      transform: translateX(-50%);
      background: rgba(173, 138, 77, 0.58);
    }

    .relationship-match-screen .relationship-type-row strong {
      font-family: var(--serif);
      font-size: 13px;
      letter-spacing: 0.08em;
      line-height: 1.2;
    }

    .relationship-match-screen .relationship-type-row small {
      display: none;
    }

    .relationship-match-screen .relationship-type-row.is-active {
      background: transparent;
      color: var(--seal);
    }

    .relationship-match-screen .relationship-type-row.is-active .relationship-type-seal {
      border-color: rgba(184, 54, 43, 0.72);
      color: var(--seal);
      box-shadow:
        inset 0 0 0 5px rgba(184, 54, 43, 0.055),
        0 0 0 5px rgba(184, 54, 43, 0.055);
    }

    .relationship-match-screen .relationship-type-row.is-active .relationship-type-seal::after {
      background: var(--seal);
    }

    .relationship-match-screen .relationship-report-shell {
      order: 3;
      margin-top: 0;
    }

    .relationship-match-screen .relationship-setup-card {
      gap: 14px;
      padding: 14px;
      border-color: rgba(173, 138, 77, 0.24);
      border-radius: 10px;
      background: rgba(255, 252, 247, 0.5);
      box-shadow: none;
    }

    .relationship-preview-title {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
      align-items: center;
      gap: 12px;
      color: rgba(24, 23, 21, 0.7);
      font-family: var(--serif);
      font-size: 16px;
      font-weight: 800;
      letter-spacing: 0.12em;
      text-align: center;
    }

    .relationship-preview-title::before,
    .relationship-preview-title::after {
      content: "";
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(173, 138, 77, 0.52));
    }

    .relationship-preview-title::after {
      background: linear-gradient(90deg, rgba(173, 138, 77, 0.52), transparent);
    }

    .relationship-preview-list {
      display: grid;
      overflow: hidden;
      border: 1px solid rgba(173, 138, 77, 0.18);
      border-radius: 10px;
      background: rgba(255, 252, 247, 0.48);
    }

    .relationship-preview-list button {
      display: grid;
      grid-template-columns: 42px minmax(0, 1fr) 24px;
      align-items: center;
      gap: 12px;
      min-height: 68px;
      padding: 10px 10px;
      border: 0;
      border-bottom: 1px solid rgba(24, 23, 21, 0.08);
      background: transparent;
      color: var(--ink);
      text-align: left;
      cursor: pointer;
    }

    .relationship-preview-list button:last-child {
      border-bottom: 0;
    }

    .relationship-preview-list button > span:nth-child(2) {
      display: grid;
      gap: 3px;
      min-width: 0;
    }

    .relationship-preview-list strong {
      font-family: var(--serif);
      font-size: 17px;
      letter-spacing: 0.05em;
    }

    .relationship-preview-list small {
      overflow: hidden;
      color: rgba(24, 23, 21, 0.54);
      font-size: 12px;
      line-height: 1.35;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .relationship-preview-list i {
      color: rgba(24, 23, 21, 0.42);
      font-size: 22px;
      font-style: normal;
      text-align: right;
    }

    .relationship-match-screen .relationship-setup-steps {
      display: none;
    }

    .relationship-match-screen .relationship-generate-button {
      min-height: 54px;
      border-radius: 9px;
      font-size: 18px;
      letter-spacing: 0.18em;
    }

    .relationship-match-screen .relationship-setup-card > p {
      margin: 0;
      text-align: center;
    }

    .relationship-match-screen .relationship-brief {
      order: 1;
      display: grid;
      gap: 8px;
      margin: 18px 0 16px;
      padding: 16px 0;
    }

    .relationship-match-screen .relationship-profile-panel {
      order: 2;
      display: grid;
      grid-template-columns: 1fr;
      gap: 10px;
      min-height: 0;
      margin: 0 0 18px;
    }

    .relationship-match-screen .relationship-profile-panel::before,
    .relationship-match-screen .relationship-profile-panel::after {
      content: none;
    }

    .relationship-profile-panel .relationship-section-head,
    .relationship-type-panel .relationship-section-head {
      display: flex;
    }

    .relationship-match-screen .relationship-profile-current {
      grid-column: auto;
    }

    .relationship-match-screen .relationship-partner-list {
      grid-column: auto;
      display: grid;
      gap: 8px;
      max-height: none;
      overflow: visible;
      border-top: 1px solid rgba(24, 23, 21, 0.08);
    }

    .relationship-match-screen .relationship-setting-card {
      display: grid;
      grid-template-columns: 38px minmax(0, 1fr);
      align-items: center;
      gap: 12px;
      width: 100%;
      min-height: 64px;
      padding: 10px 8px;
      border: 0;
      border-bottom: 1px solid rgba(24, 23, 21, 0.08);
      border-radius: 0;
      background: linear-gradient(90deg, rgba(255, 252, 247, 0.9), rgba(255, 252, 247, 0.38));
      color: var(--ink);
      text-align: left;
      box-shadow: none;
    }

    .relationship-match-screen .relationship-setting-card.is-active {
      background: linear-gradient(90deg, rgba(184, 54, 43, 0.08), rgba(255, 252, 247, 0.42));
    }

    .relationship-match-screen .relationship-setting-card > span:nth-child(2) {
      display: grid;
      gap: 3px;
      min-width: 0;
    }

    .relationship-match-screen .relationship-setting-card strong {
      overflow: hidden;
      font-family: var(--serif);
      font-size: 16px;
      line-height: 1.25;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .relationship-match-screen .relationship-setting-card small,
    .relationship-match-screen .relationship-setting-card em {
      overflow: hidden;
      color: rgba(24, 23, 21, 0.52);
      font-size: 11px;
      font-style: normal;
      line-height: 1.3;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .relationship-match-screen .relationship-add-partner .profile-add-icon {
      display: grid;
      place-items: center;
      width: 34px;
      height: 34px;
      border: 1px solid rgba(184, 54, 43, 0.28);
      border-radius: 11px;
      color: var(--seal);
      font-family: var(--serif);
      font-size: 22px;
      font-weight: 800;
    }

    .relationship-match-screen .relationship-type-panel {
      order: 3;
      margin-bottom: 18px;
    }

    .relationship-match-screen .relationship-report-shell {
      order: 4;
    }

    .relationship-match-screen .relationship-setup-card {
      padding: 16px 14px;
    }

    .relationship-pair-preview {
      position: relative;
      display: grid;
      grid-template-columns: minmax(0, 1fr) 42px minmax(0, 1fr);
      align-items: center;
      gap: 10px;
      min-height: 236px;
      margin-bottom: 2px;
    }

    .relationship-pair-preview::before {
      content: "";
      position: absolute;
      left: 50%;
      top: 50%;
      z-index: 0;
      width: 142px;
      height: 142px;
      border: 1px solid rgba(173, 138, 77, 0.12);
      border-radius: 50%;
      transform: translate(-50%, -50%);
      box-shadow: 0 0 0 28px rgba(173, 138, 77, 0.03);
    }

    .relationship-pair-preview > b {
      position: relative;
      z-index: 2;
      display: grid;
      place-items: center;
      width: 38px;
      height: 38px;
      border: 2px double rgba(184, 54, 43, 0.72);
      border-radius: 10px;
      background: rgba(255, 252, 247, 0.92);
      color: var(--seal);
      font-family: var(--serif);
      font-size: 24px;
      line-height: 1;
    }

    .relationship-match-screen .relationship-pair-preview .relationship-fate-slip {
      z-index: 1;
      min-height: 220px;
      padding: 14px 8px 12px;
    }

    .relationship-match-screen .relationship-pair-preview .relationship-stem-ring {
      width: 58px;
      height: 58px;
      font-size: 31px;
    }

    .relationship-match-screen .relationship-pair-preview .relationship-fate-slip strong {
      font-size: 20px;
    }

    .relationship-match-screen .relationship-pair-preview .relationship-fate-slip em {
      font-size: 14px;
      letter-spacing: 0.1em;
    }

    .relationship-match-screen .relationship-pair-preview .relationship-fate-slip p {
      display: none;
    }

    .relationship-match-screen .relationship-pair-preview .relationship-fate-slip i {
      margin-top: auto;
    }

    .relationship-match-screen .relationship-fate-slip.is-empty {
      border-style: dashed;
      background: rgba(255, 252, 247, 0.38);
      box-shadow: none;
    }

    .relationship-match-screen .relationship-fate-slip.is-empty .relationship-stem-ring {
      border-style: dashed;
      color: rgba(24, 23, 21, 0.38);
    }

    .relationship-match-screen .relationship-fate-slip.is-empty strong,
    .relationship-match-screen .relationship-fate-slip.is-empty em,
    .relationship-match-screen .relationship-fate-slip.is-empty i {
      color: rgba(24, 23, 21, 0.46);
    }

    .relationship-match-screen.is-scenario-step .relationship-profile-panel,
    .relationship-match-screen.is-scenario-step .relationship-report-shell,
    .relationship-match-screen.is-people-step .relationship-type-panel,
    .relationship-match-screen.is-ledger-step .relationship-type-panel,
    .relationship-match-screen.is-ledger-step .relationship-profile-panel,
    .relationship-match-screen.is-report-step .relationship-type-panel,
    .relationship-match-screen.is-report-step .relationship-profile-panel {
      display: none;
    }

    .relationship-match-screen.is-ledger-step .relationship-report-shell {
      order: 2;
      margin-top: 8px;
    }

    .relationship-match-screen.is-report-step .relationship-report-shell {
      order: 2;
      margin-top: 12px;
    }

    .relationship-match-screen.is-scenario-step .relationship-type-panel {
      order: 2;
      margin-bottom: 0;
    }

    .relationship-match-screen.is-scenario-step .relationship-type-panel .relationship-section-head {
      display: none;
    }

    .relationship-match-screen.is-scenario-step .relationship-type-list {
      display: grid;
      grid-template-columns: 1fr;
      gap: 18px;
      border-top: 0;
    }

    .relationship-scenario-group {
      display: grid;
      gap: 10px;
    }

    .relationship-scenario-group h2 {
      margin: 0;
      color: rgba(24, 23, 21, 0.72);
      font-family: var(--serif);
      font-size: 17px;
      letter-spacing: 0.1em;
    }

    .relationship-scenario-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }

    .relationship-scenario-card {
      display: grid;
      gap: 10px;
      min-height: 172px;
      padding: 10px;
      border: 1px solid rgba(173, 138, 77, 0.2);
      border-radius: 10px;
      background: rgba(255, 252, 247, 0.54);
      color: var(--ink);
      text-align: left;
      cursor: pointer;
      box-shadow: 0 8px 18px rgba(72, 51, 32, 0.06);
    }

    .relationship-scenario-card.is-active {
      border-color: rgba(184, 54, 43, 0.34);
      background: linear-gradient(180deg, rgba(184, 54, 43, 0.07), rgba(255, 252, 247, 0.62));
    }

    .relationship-scenario-art {
      position: relative;
      display: grid;
      align-content: end;
      min-height: 76px;
      overflow: hidden;
      padding: 9px;
      border: 1px solid rgba(173, 138, 77, 0.16);
      border-radius: 8px;
      background:
        radial-gradient(circle at 72% 26%, rgba(173, 138, 77, 0.18), transparent 35%),
        linear-gradient(135deg, rgba(76, 139, 102, 0.08), rgba(255, 252, 247, 0.86));
    }

    .relationship-scenario-art::before {
      content: "";
      position: absolute;
      inset: 10px 12px auto auto;
      width: 44px;
      height: 44px;
      border: 1px solid rgba(173, 138, 77, 0.22);
      border-radius: 50%;
      box-shadow: -24px 18px 0 -16px rgba(184, 54, 43, 0.2);
    }

    .relationship-scenario-art[data-group="家庭血缘"] {
      background:
        radial-gradient(circle at 72% 26%, rgba(201, 156, 75, 0.18), transparent 35%),
        linear-gradient(135deg, rgba(201, 156, 75, 0.1), rgba(255, 252, 247, 0.86));
    }

    .relationship-scenario-art[data-group="事业社交"] {
      background:
        radial-gradient(circle at 72% 26%, rgba(120, 120, 112, 0.18), transparent 35%),
        linear-gradient(135deg, rgba(52, 100, 117, 0.09), rgba(255, 252, 247, 0.86));
    }

    .relationship-scenario-art[data-group="轻缘泛泛"] {
      background:
        radial-gradient(circle at 72% 26%, rgba(52, 100, 117, 0.16), transparent 35%),
        linear-gradient(135deg, rgba(52, 100, 117, 0.07), rgba(255, 252, 247, 0.9));
    }

    .relationship-scenario-art i {
      position: relative;
      z-index: 1;
      display: grid;
      place-items: center;
      width: 38px;
      height: 38px;
      border: 1px solid rgba(184, 54, 43, 0.44);
      border-radius: 12px;
      background: rgba(255, 252, 247, 0.72);
      color: var(--seal);
      font-family: var(--serif);
      font-size: 22px;
      font-style: normal;
      font-weight: 800;
    }

    .relationship-scenario-art small {
      position: relative;
      z-index: 1;
      margin-top: 7px;
      color: rgba(24, 23, 21, 0.48);
      font-size: 10px;
      line-height: 1.35;
    }

    .relationship-scenario-copy {
      display: grid;
      gap: 4px;
      min-width: 0;
    }

    .relationship-scenario-copy em {
      color: var(--gold);
      font-size: 10px;
      font-style: normal;
      font-weight: 700;
      letter-spacing: 0.12em;
    }

    .relationship-scenario-copy strong {
      font-family: var(--serif);
      font-size: 17px;
      line-height: 1.2;
      letter-spacing: 0.04em;
    }

    .relationship-scenario-copy small {
      color: rgba(24, 23, 21, 0.55);
      font-size: 11px;
      line-height: 1.45;
    }

    .relationship-back-step {
      justify-self: start;
      min-height: 30px;
      padding: 0 10px;
      border: 1px solid rgba(173, 138, 77, 0.24);
      border-radius: 999px;
      background: rgba(255, 252, 247, 0.58);
      color: rgba(24, 23, 21, 0.58);
      font-size: 12px;
      cursor: pointer;
    }

    .relationship-privacy-note {
      color: rgba(24, 23, 21, 0.48);
      font-size: 10px;
      line-height: 1.5;
      text-align: center;
    }

    .flow-stage {
      display: grid;
      gap: 22px;
      justify-items: center;
      margin-top: 8px;
    }

    .flow-wheel {
      width: 286px;
      height: 286px;
    }

    .god-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      width: 100%;
    }

    .god-seal {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 44px;
      padding: 10px 8px;
      border: 1px solid currentColor;
      border-radius: 8px;
      background: rgba(255, 252, 247, 0.66);
      font-family: var(--serif);
      font-size: 17px;
      font-weight: 700;
      letter-spacing: 0.1em;
    }

    .flow-notes {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
      width: 100%;
      border-top: 1px solid rgba(24, 23, 21, 0.1);
      padding-top: 18px;
    }

    .flow-note {
      display: grid;
      justify-items: center;
      gap: 9px;
      min-height: 94px;
      padding: 0 6px;
      text-align: center;
      border-right: 1px solid rgba(24, 23, 21, 0.08);
    }

    .flow-note:last-child {
      border-right: 0;
    }

    .flow-note svg {
      width: 28px;
      height: 28px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.7;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .flow-note strong {
      color: rgba(24, 23, 21, 0.78);
      font-size: 13px;
      line-height: 1.4;
    }

    .topic-tabs {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 0;
      margin: 4px -8px 22px;
      border-top: 1px solid rgba(24, 23, 21, 0.11);
      border-bottom: 1px solid rgba(24, 23, 21, 0.11);
    }

    .topic-tabs button {
      position: relative;
      min-height: 44px;
      padding: 6px 4px;
      border: 0;
      border-right: 1px solid rgba(24, 23, 21, 0.08);
      background: transparent;
      color: rgba(24, 23, 21, 0.55);
      font-family: var(--serif);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0;
      line-height: 1.25;
      overflow-wrap: anywhere;
      cursor: pointer;
      transition: color 320ms var(--ease), background 320ms var(--ease);
    }

    .topic-tabs button:last-child {
      border-right: 0;
    }

    .topic-tabs button.active {
      color: var(--seal);
    }

    .topic-tabs button.active::after {
      content: "";
      position: absolute;
      left: 18px;
      right: 18px;
      bottom: -1px;
      height: 2px;
      background: var(--seal);
    }

    .topic-hero {
      position: relative;
      min-height: 430px;
      padding: 4px 0 0;
    }

    .topic-title {
      position: relative;
      z-index: 1;
      display: grid;
      gap: 7px;
      max-width: 190px;
    }

    .topic-title h2 {
      margin: 0;
      font-family: var(--serif);
      font-size: 28px;
      line-height: 1.1;
      letter-spacing: 0.12em;
    }

    .topic-dragon-art {
      position: absolute;
      right: -82px;
      top: 72px;
      width: 260px;
      opacity: 0.36;
      mix-blend-mode: multiply;
      pointer-events: none;
    }

    .topic-notes {
      position: relative;
      z-index: 1;
      display: grid;
      gap: 18px;
      width: 212px;
      margin-top: 32px;
    }

    .topic-note {
      display: grid;
      grid-template-columns: 32px 1fr;
      gap: 11px;
      align-items: start;
    }

    .topic-note svg {
      width: 30px;
      height: 30px;
      color: var(--gold);
      fill: none;
      stroke: currentColor;
      stroke-width: 1.5;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .topic-note strong {
      display: block;
      margin-bottom: 3px;
      color: var(--wood);
      font-family: var(--serif);
      font-size: 16px;
      letter-spacing: 0.1em;
    }

    .topic-note p {
      margin: 0;
      color: rgba(24, 23, 21, 0.62);
      font-size: 12px;
      line-height: 1.5;
    }

    .fortune-screen {
      padding-top: 20px;
      padding-bottom: var(--screen-bottom-gutter);
      min-height: var(--screen-min-height);
      font-family: var(--serif);
      background:
        radial-gradient(circle at 82% 12%, rgba(173, 138, 77, 0.08), transparent 30%),
        radial-gradient(circle at 16% 52%, rgba(255, 255, 255, 0.68), transparent 32%);
    }

    .fortune-top {
      display: grid;
      grid-template-columns: 42px 1fr 42px;
      align-items: start;
      gap: 8px;
      min-height: 44px;
      margin-bottom: 12px;
    }

    .fortune-top.compact {
      grid-template-columns: 1fr auto;
      align-items: start;
    }

    .fortune-top-primary::before {
      content: "";
      width: 42px;
      height: 42px;
    }

    .fortune-top-primary {
      width: 100%;
      grid-template-columns: 42px minmax(0, 1fr) 42px;
      align-items: start;
    }

    .fortune-top-primary .fortune-title {
      min-width: 0;
    }

    .fortune-top-primary .fortune-title h1 {
      white-space: nowrap;
    }

    .fortune-brand {
      display: flex;
      align-items: center;
      gap: 8px;
      min-height: 42px;
    }

    .fortune-brand h1,
    .fortune-title h1 {
      margin: 0;
      font-family: var(--serif);
      font-size: 23px;
      font-weight: 800;
      letter-spacing: 0.12em;
      line-height: 1.1;
    }

    .fortune-title {
      display: grid;
      justify-items: center;
      gap: 4px;
      text-align: center;
    }

    .fortune-title h1 {
      font-size: 22px;
    }

    .fortune-user {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      color: rgba(24, 23, 21, 0.76);
      font-family: Georgia, var(--serif);
      font-size: 15px;
    }

    .profile-switcher-host {
      position: relative;
      z-index: 40;
      width: fit-content;
      max-width: min(100%, 232px);
      min-width: 0;
    }

    .profile-switcher {
      position: relative;
      display: grid;
      width: fit-content;
      max-width: 100%;
      min-width: 0;
    }

    .profile-switcher-trigger {
      display: grid;
      grid-template-columns: 30px minmax(0, 1fr) 14px;
      align-items: center;
      gap: 9px;
      min-height: 36px;
      width: fit-content;
      max-width: 232px;
      padding: 3px 8px 3px 2px;
      border: 1px solid transparent;
      border-radius: 999px;
      background: transparent;
      color: var(--ink);
      cursor: pointer;
      transition: background 260ms var(--ease), transform 260ms var(--ease);
    }

    .profile-switcher-trigger:active {
      transform: scale(0.98);
    }

    .profile-switcher-trigger:hover {
      border-color: transparent;
      background: transparent;
    }

    .profile-switcher-mark {
      display: grid;
      place-items: center;
      width: 30px;
      height: 30px;
      border: 1px solid rgba(173, 138, 77, 0.24);
      border-radius: 10px;
      background: rgba(173, 138, 77, 0.1);
      color: rgba(24, 23, 21, 0.52);
      font-family: Georgia, var(--serif);
      font-size: 13px;
      font-weight: 800;
      transform: rotate(45deg);
    }

    .profile-switcher-mark span {
      transform: rotate(-45deg);
    }

    .profile-switcher-name {
      overflow: hidden;
      color: var(--ink);
      font-family: Georgia, var(--serif);
      font-size: 19px;
      font-weight: 700;
      letter-spacing: 0;
      line-height: 1.1;
      max-width: 152px;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .profile-switcher-chevron {
      color: rgba(24, 23, 21, 0.48);
      font-size: 16px;
      line-height: 1;
      transition: transform 260ms var(--ease);
    }

    .profile-switcher.is-open .profile-switcher-chevron {
      transform: rotate(180deg);
    }

    .profile-switcher-menu {
      position: absolute;
      top: calc(100% + 8px);
      left: 0;
      width: min(318px, calc(100vw - 32px));
      border: 1px solid rgba(24, 23, 21, 0.16);
      border-radius: 14px;
      background: rgba(255, 252, 247, 0.96);
      backdrop-filter: blur(10px);
      box-shadow: 0 18px 44px rgba(54, 44, 32, 0.18);
      overflow: hidden;
      opacity: 0;
      pointer-events: none;
      transform: translateY(-4px);
      transition: opacity 220ms var(--ease), transform 220ms var(--ease);
    }

    .profile-switcher.is-open .profile-switcher-menu {
      opacity: 1;
      pointer-events: auto;
      transform: translateY(0);
    }

    .profile-switcher-option,
    .profile-switcher-add {
      display: grid;
      grid-template-columns: 34px minmax(0, 1fr);
      align-items: center;
      gap: 12px;
      width: 100%;
      min-height: 58px;
      padding: 8px 14px;
      border: 0;
      border-bottom: 1px solid rgba(24, 23, 21, 0.11);
      background: rgba(255, 252, 247, 0.9);
      color: var(--ink);
      text-align: left;
      cursor: pointer;
      transition: background 240ms var(--ease);
    }

    .profile-switcher-option:hover,
    .profile-switcher-add:hover {
      background: rgba(173, 138, 77, 0.08);
    }

    .profile-switcher-option.is-active {
      background: rgba(76, 139, 102, 0.075);
    }

    .profile-option-main {
      display: grid;
      gap: 5px;
      min-width: 0;
    }

    .profile-option-main strong {
      overflow: hidden;
      font-family: Georgia, var(--serif);
      font-size: 18px;
      line-height: 1.12;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .profile-option-main small {
      overflow: hidden;
      color: rgba(24, 23, 21, 0.5);
      font-size: 11px;
      letter-spacing: 0.06em;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .profile-option-status {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: fit-content;
      max-width: 100%;
      padding: 2px 7px;
      border-radius: 999px;
      background: rgba(76, 139, 102, 0.08);
      color: var(--wood);
      font-size: 11px;
      letter-spacing: 0.08em;
      white-space: nowrap;
    }

    .profile-switcher-add {
      grid-template-columns: 34px 1fr;
      min-height: 56px;
      border-bottom: 0;
      font-family: var(--serif);
      font-size: 17px;
      font-weight: 800;
      letter-spacing: 0.06em;
    }

    .profile-add-icon {
      display: grid;
      place-items: center;
      width: 30px;
      height: 30px;
      color: rgba(24, 23, 21, 0.72);
      font-size: 26px;
      line-height: 1;
    }

    .topbar .profile-switcher-host {
      max-width: min(100%, 236px);
    }

    .fortune-top .profile-switcher-host {
      justify-self: end;
      max-width: 196px;
    }

    .fortune-top .profile-switcher-menu {
      right: 0;
      left: auto;
    }

    .date-strip {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 2px;
      margin: 10px 0 34px;
      color: rgba(24, 23, 21, 0.62);
      text-align: center;
      font-size: 11px;
    }

    .date-strip span,
    .date-strip button {
      display: grid;
      gap: 7px;
      justify-items: center;
      border: 0;
      padding: 0;
      appearance: none;
      background: transparent;
      color: inherit;
      font: inherit;
      cursor: pointer;
    }

    .date-strip strong {
      display: grid;
      place-items: center;
      width: 28px;
      height: 28px;
      color: var(--ink);
      font-family: Georgia, serif;
      font-size: 17px;
      font-weight: 500;
    }

    .date-strip .active strong {
      border-radius: 50%;
      background: rgba(24, 23, 21, 0.72);
      color: #fffaf1;
      box-shadow: 0 0 0 7px rgba(24, 23, 21, 0.05);
    }

    .fortune-horse-bg {
      position: absolute;
      inset: 98px -12px auto;
      height: 210px;
      background: url("/assets/zodiac-ink/zodiac-horse-spirit-v3.webp") center / contain no-repeat;
      opacity: 0.18;
      mix-blend-mode: multiply;
      pointer-events: none;
    }

    .fortune-entry-list {
      position: relative;
      display: grid;
      gap: 13px;
      margin-top: 164px;
    }

    .fortune-entry {
      display: grid;
      grid-template-columns: 54px 1fr 24px;
      align-items: center;
      gap: 12px;
      min-height: 74px;
      padding: 12px 14px;
      border: 1px solid rgba(173, 138, 77, 0.2);
      border-radius: 2px;
      background: rgba(255, 252, 247, 0.74);
      color: inherit;
      text-align: left;
      box-shadow: 0 14px 34px rgba(54, 44, 32, 0.06);
      cursor: pointer;
      transition: transform 360ms var(--ease), border-color 360ms var(--ease), background 360ms var(--ease), box-shadow 360ms var(--ease);
    }

    .fortune-entry img,
    .entry-mark {
      width: 48px;
      height: 48px;
      border: 1px solid rgba(173, 138, 77, 0.28);
      border-radius: 50%;
      object-fit: cover;
      mix-blend-mode: multiply;
    }

    .entry-mark {
      display: grid;
      place-items: center;
      color: var(--seal);
      font-family: var(--serif);
      font-size: 22px;
      font-weight: 800;
      background: rgba(255, 252, 247, 0.62);
    }

    .fortune-entry h2 {
      margin: 0 0 4px;
      font-family: var(--serif);
      font-size: 18px;
      letter-spacing: 0.08em;
      line-height: 1.15;
    }

    .fortune-entry p {
      margin: 0;
      color: rgba(24, 23, 21, 0.54);
      font-size: 12px;
    }

    .daily-art {
      width: min(100%, 286px);
      margin: 12px auto 18px;
      display: block;
      mix-blend-mode: multiply;
      filter: drop-shadow(0 16px 24px rgba(54, 44, 32, 0.08));
    }

    .daily-date-control {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      width: min(100%, 318px);
      margin: 4px auto 12px;
      padding: 0;
      border: 0;
      background: transparent;
      color: rgba(24, 23, 21, 0.62);
      font-size: 12px;
      letter-spacing: 0.08em;
      cursor: pointer;
    }

    .daily-date-control-value {
      display: inline-flex;
      align-items: center;
      justify-content: space-between;
      width: 166px;
      height: 36px;
      border: 1px solid rgba(24, 23, 21, 0.14);
      border-radius: 999px;
      padding: 0 12px;
      background: rgba(255, 252, 247, 0.72);
      color: var(--ink);
      font: 600 13px/1 Inter, system-ui, sans-serif;
      box-shadow: inset 0 1px 2px rgba(24, 23, 21, 0.04);
    }

    .daily-date-control-value b { font: inherit; }

    .daily-date-control-value svg {
      width: 17px;
      height: 17px;
      color: var(--ink);
    }

    .daily-date-control:hover .daily-date-control-value,
    .daily-date-control:focus-visible .daily-date-control-value {
      border-color: rgba(167, 52, 39, 0.34);
      background: rgba(255, 252, 247, 0.92);
    }

    .daily-sign-copy {
      display: grid;
      justify-items: center;
      gap: 8px;
      text-align: center;
      font-family: var(--serif);
    }

    .daily-sign-copy .level {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: rgba(24, 23, 21, 0.74);
      font-size: 17px;
      letter-spacing: 0.08em;
    }

    .daily-sign-copy .level strong {
      color: var(--earth);
      font-size: 20px;
    }

    .poem {
      margin: 0;
      font-size: 19px;
      line-height: 1.7;
      letter-spacing: 0.12em;
    }

    .yi-ji {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0;
      margin: 24px 24px 0;
      border-top: 1px solid rgba(24, 23, 21, 0.1);
    }

    .yi-ji div {
      display: grid;
      justify-items: center;
      gap: 8px;
      min-height: 120px;
      padding: 18px 12px;
      text-align: center;
      border-right: 1px solid rgba(24, 23, 21, 0.09);
    }

    .yi-ji div:last-child {
      border-right: 0;
    }

    .yi-ji strong {
      font-family: var(--serif);
      font-size: 20px;
      letter-spacing: 0.18em;
    }

    .yi-ji p {
      margin: 0;
      color: rgba(24, 23, 21, 0.62);
      font-size: 13px;
      line-height: 1.55;
    }

    .hexagram-art {
      display: block;
      width: min(100%, 286px);
      margin: 0 auto;
      mix-blend-mode: multiply;
      transition: opacity 420ms var(--ease), transform 420ms var(--ease);
    }

    .fortune-button {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      width: 226px;
      min-height: 48px;
      margin: 0 auto;
      border: 1px solid rgba(113, 93, 62, 0.42);
      border-radius: 999px;
      background:
        radial-gradient(circle at 50% 12%, rgba(255, 250, 241, 0.52), transparent 38%),
        linear-gradient(180deg, #c9a86c, #8f6a33);
      color: #fffaf1;
      font-family: var(--serif);
      font-size: 17px;
      font-weight: 800;
      letter-spacing: 0.16em;
      box-shadow: inset 0 1px 0 rgba(255, 250, 241, 0.45), 0 14px 30px rgba(113, 93, 62, 0.2);
      cursor: pointer;
      transition: transform 260ms var(--ease), box-shadow 260ms var(--ease), opacity 260ms var(--ease);
    }

    .fortune-button:hover {
      transform: translateY(-1px);
      box-shadow: inset 0 1px 0 rgba(255, 250, 241, 0.52), 0 18px 34px rgba(113, 93, 62, 0.24);
    }

    .fortune-button[disabled] {
      cursor: wait;
      opacity: 0.68;
    }

    .oracle-intro + .fortune-button {
      margin-bottom: 6px;
    }

    .hex-note {
      margin: 0 0 16px;
      text-align: center;
      color: rgba(24, 23, 21, 0.68);
      font-family: var(--serif);
      font-size: 17px;
      letter-spacing: 0.08em;
    }

    .oracle-intro {
      width: min(100%, 318px);
      margin: 2px auto 16px;
      color: rgba(24, 23, 21, 0.62);
      text-align: left;
      font-size: 13px;
      line-height: 1.7;
    }

    .oracle-intro strong {
      color: var(--ink);
      font-family: var(--serif);
      font-size: 15px;
      letter-spacing: 0.08em;
    }

    .oracle-visual-stage {
      position: relative;
      width: min(100%, 344px);
      min-height: 278px;
      margin: -2px auto 10px;
      display: grid;
      place-items: start center;
    }

    .oracle-visual-stage.has-oracle {
      min-height: 736px;
      margin-top: -4px;
    }

    .oracle-visual-stage.has-oracle .hexagram-art {
      position: absolute;
      top: 10px;
      z-index: 0;
      opacity: 0.1;
      transform: translateY(-8px) scale(0.78);
    }

    .oracle-casting {
      position: absolute;
      inset: 4px 0 auto;
      z-index: 3;
      display: grid;
      place-items: center;
      min-height: 224px;
      opacity: 0;
      pointer-events: none;
      transform: translateY(10px) scale(0.98);
      transition: opacity 300ms var(--ease), transform 300ms var(--ease);
    }

    .oracle-visual-stage.is-casting .oracle-casting {
      opacity: 1;
      transform: translateY(0) scale(1);
    }

    .oracle-visual-stage.is-casting .hexagram-art {
      opacity: 0;
      transform: translateY(10px) scale(0.72);
    }

    .oracle-casting-field {
      position: relative;
      width: 306px;
      height: 218px;
      filter: drop-shadow(0 18px 28px rgba(54, 44, 32, 0.12));
    }

    .oracle-casting-field::before,
    .oracle-casting-field::after {
      content: "";
      position: absolute;
      pointer-events: none;
    }

    .oracle-casting-field::before {
      left: 50%;
      top: 56%;
      width: 346px;
      height: 276px;
      background: url("../assets/oracle-ink/oracle-coin-field-v2.mobile.webp") center / contain no-repeat;
      opacity: 0.78;
      transform: translate(-50%, -50%);
      mix-blend-mode: multiply;
      animation: oraclePlatePulse 1700ms ease-in-out infinite;
    }

    .oracle-casting-field::after {
      left: 50%;
      top: 66%;
      width: 184px;
      height: 56px;
      border-radius: 50%;
      background: radial-gradient(ellipse at center, rgba(83, 62, 36, 0.18), transparent 68%);
      filter: blur(12px);
      opacity: 0.86;
      transform: translate(-50%, -50%);
    }

    .oracle-casting-field .casting-coin {
      --coin-rest: rotate(0deg);
      position: absolute;
      display: grid;
      place-items: center;
      width: 86px;
      height: 86px;
      border-radius: 50%;
      background: transparent;
      box-shadow: none;
      transform: var(--coin-rest);
      transform-style: preserve-3d;
      will-change: transform, opacity;
    }

    .oracle-casting-field .casting-coin::after {
      content: none;
    }

    .oracle-casting-field .casting-coin:nth-child(1) {
      --coin-rest: rotate(-5deg);
      left: 112px;
      top: 18px;
      z-index: 3;
    }

    .oracle-casting-field .casting-coin:nth-child(2) {
      --coin-rest: rotate(12deg);
      left: 62px;
      top: 96px;
      z-index: 2;
    }

    .oracle-casting-field .casting-coin:nth-child(3) {
      --coin-rest: rotate(-12deg);
      left: 158px;
      top: 98px;
      z-index: 2;
    }

    .oracle-visual-stage.is-casting .casting-coin:nth-child(1) {
      animation: oracleCoinTossA 860ms cubic-bezier(0.2, 0.72, 0.12, 1) infinite;
    }

    .oracle-visual-stage.is-casting .casting-coin:nth-child(2) {
      animation: oracleCoinTossB 920ms cubic-bezier(0.2, 0.72, 0.12, 1) 70ms infinite;
    }

    .oracle-visual-stage.is-casting .casting-coin:nth-child(3) {
      animation: oracleCoinTossC 880ms cubic-bezier(0.2, 0.72, 0.12, 1) 130ms infinite;
    }

    .oracle-casting p {
      position: absolute;
      top: 204px;
      margin: 0;
      color: rgba(24, 23, 21, 0.5);
      font-family: var(--serif);
      font-size: 13px;
      letter-spacing: 0.1em;
    }

    @keyframes oraclePlatePulse {
      0%, 100% { opacity: 0.58; transform: translate(-50%, -50%) scale(0.98); }
      50% { opacity: 0.86; transform: translate(-50%, -50%) scale(1.02); }
    }

    @keyframes oracleCoinDriftA {
      0%, 100% { opacity: 0.78; transform: translate(-86px, -4px) rotate(-10deg) rotateY(0deg) scale(0.94); }
      42% { opacity: 1; transform: translate(-58px, -54px) rotate(18deg) rotateY(178deg) scale(1.04); }
      72% { opacity: 0.95; transform: translate(-33px, -6px) rotate(-4deg) rotateY(338deg) scale(0.98); }
    }

    @keyframes oracleCoinDriftB {
      0%, 100% { opacity: 0.82; transform: translate(-28px, 16px) rotate(14deg) rotateY(28deg) scale(0.96); }
      38% { opacity: 1; transform: translate(-12px, -62px) rotate(-18deg) rotateY(210deg) scale(1.06); }
      72% { opacity: 0.94; transform: translate(18px, 8px) rotate(10deg) rotateY(372deg) scale(0.98); }
    }

    @keyframes oracleCoinDriftC {
      0%, 100% { opacity: 0.78; transform: translate(34px, -2px) rotate(8deg) rotateY(-18deg) scale(0.94); }
      44% { opacity: 1; transform: translate(62px, -46px) rotate(-12deg) rotateY(190deg) scale(1.03); }
      72% { opacity: 0.94; transform: translate(52px, 12px) rotate(16deg) rotateY(344deg) scale(0.98); }
    }

    .daily-oracle-panel {
      position: absolute;
      top: 0;
      left: 50%;
      z-index: 2;
      transform: translateX(-50%);
      display: grid;
      gap: 14px;
      width: min(100%, 318px);
      padding: 18px 18px 20px;
      border: 1px solid rgba(173, 138, 77, 0.18);
      background: rgba(255, 252, 247, 0.9);
      backdrop-filter: blur(7px);
      box-shadow: 0 18px 44px rgba(54, 44, 32, 0.07);
    }

    .daily-oracle-panel[hidden],
    .daily-oracle-result[hidden] {
      display: none;
    }

    .oracle-hexagrams {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: start;
      gap: 11px;
    }

    .oracle-hexagram {
      display: grid;
      justify-items: center;
      gap: 8px;
      min-width: 0;
    }

    .oracle-hexagram h2 {
      margin: 0;
      font-family: var(--serif);
      font-size: 18px;
      line-height: 1.2;
      letter-spacing: 0.08em;
    }

    .oracle-hexagram p {
      margin: 0;
      color: rgba(24, 23, 21, 0.48);
      font-size: 11px;
      line-height: 1.35;
      text-align: center;
    }

    .oracle-change-arrow {
      padding-top: 44px;
      color: var(--seal);
      font-family: Georgia, serif;
      font-size: 22px;
    }

    .oracle-line-set {
      display: grid;
      gap: 7px;
      justify-items: center;
      min-height: 88px;
    }

    .oracle-line {
      position: relative;
      width: 82px;
      height: 7px;
      border-radius: 999px;
      background: rgba(24, 23, 21, 0.62);
    }

    .oracle-line.yin {
      background: transparent;
    }

    .oracle-line.yin::before,
    .oracle-line.yin::after {
      content: "";
      position: absolute;
      top: 0;
      width: 32px;
      height: 7px;
      border-radius: 999px;
      background: rgba(24, 23, 21, 0.62);
    }

    .oracle-line.yin::before {
      left: 0;
    }

    .oracle-line.yin::after {
      right: 0;
    }

    .oracle-line:not(.yin).moving,
    .oracle-line.yin.moving::before,
    .oracle-line.yin.moving::after {
      background: var(--seal);
    }

    .oracle-line.yin.moving {
      background: transparent;
    }

    .oracle-reading {
      display: grid;
      gap: 8px;
      margin: 0;
      color: rgba(24, 23, 21, 0.66);
      font-size: 13px;
      line-height: 1.6;
    }

    .oracle-reading strong {
      color: var(--ink);
      font-family: var(--serif);
      font-size: 16px;
      letter-spacing: 0.08em;
    }

    .oracle-reading p {
      margin: 0 0 8px;
    }

    .oracle-reading p:last-child {
      margin-bottom: 0;
    }

    .oracle-actions {
      display: grid;
      gap: 6px;
      margin: 0;
      padding: 0;
      list-style: none;
      color: rgba(24, 23, 21, 0.6);
      font-size: 12px;
      line-height: 1.45;
    }

    .scroll-composition {
      position: relative;
      width: min(100%, 344px);
      min-height: 520px;
      margin: 10px auto 0;
    }

    .scroll-art {
      display: block;
      width: 100%;
      margin: 0 auto;
      mix-blend-mode: multiply;
      filter: drop-shadow(0 18px 34px rgba(54, 44, 32, 0.08));
    }

    .analysis-points {
      position: absolute;
      left: 58px;
      top: 244px;
      z-index: 1;
      display: grid;
      gap: 13px;
      max-width: 230px;
      color: rgba(24, 23, 21, 0.74);
    }

    .analysis-points h2 {
      margin: 0 0 3px;
      color: var(--wood);
      font-family: var(--serif);
      font-size: 17px;
      letter-spacing: 0.12em;
    }

    .analysis-points p {
      margin: 0;
      font-size: 13px;
      line-height: 1.45;
    }

    .annual-book-art {
      display: block;
      width: min(100%, 270px);
      margin: 24px auto 18px;
      mix-blend-mode: multiply;
      filter: drop-shadow(0 22px 36px rgba(54, 44, 32, 0.14));
    }

    .annual-intro {
      margin: 0 auto 18px;
      max-width: 280px;
      color: rgba(24, 23, 21, 0.68);
      font-family: var(--serif);
      font-size: 14px;
      line-height: 1.8;
      text-align: center;
      letter-spacing: 0.08em;
    }

    .annual-modules {
      display: grid;
      gap: 12px;
      margin-top: 24px;
      padding-bottom: 8px;
    }

    .annual-section {
      border: 1px solid rgba(173, 138, 77, 0.22);
      border-radius: 2px;
      background: rgba(255, 252, 247, 0.58);
      box-shadow: 0 16px 44px rgba(54, 44, 32, 0.06);
      overflow: hidden;
    }

    .annual-section summary {
      position: relative;
      display: grid;
      gap: 4px;
      min-height: 76px;
      padding: 18px 92px 16px 18px;
      cursor: pointer;
      list-style: none;
    }

    .annual-section summary:focus {
      outline: none;
    }

    .annual-section summary:focus-visible {
      box-shadow: inset 0 0 0 1px rgba(173, 138, 77, 0.38);
      background: rgba(255, 252, 247, 0.42);
    }

    .annual-section summary::-webkit-details-marker {
      display: none;
    }

    .annual-section summary::after {
      content: "⌄";
      position: absolute;
      right: 18px;
      top: 22px;
      color: rgba(24, 23, 21, 0.64);
      font-size: 20px;
      line-height: 1;
      transition: transform 360ms var(--ease);
    }

    .annual-section[open] summary::after {
      transform: rotate(180deg);
    }

    .annual-section summary .analysis-qa-logo {
      right: 50px;
      top: 18px;
    }

    .annual-section summary span {
      font-family: var(--serif);
      font-size: 20px;
      font-weight: 800;
      letter-spacing: 0.06em;
    }

    .annual-section summary small {
      color: rgba(24, 23, 21, 0.58);
      font-family: var(--serif);
      font-size: 13px;
      letter-spacing: 0.06em;
    }

    .annual-section-body {
      padding: 0 18px 18px;
      color: rgba(24, 23, 21, 0.68);
      font-family: var(--serif);
      font-size: 14px;
      line-height: 1.78;
      letter-spacing: 0.04em;
    }

    .annual-section-body p {
      margin: 0;
    }

    .annual-mini-grid {
      display: grid;
      grid-template-columns: 72px 1fr;
      gap: 8px 18px;
      margin-bottom: 14px;
      color: rgba(24, 23, 21, 0.62);
      font-size: 13px;
    }

    .annual-mini-grid strong {
      color: var(--ink);
      font-weight: 700;
    }

    .annual-time-map {
      position: relative;
      height: 238px;
      margin: 0 -4px 14px;
    }

    .annual-space-map {
      position: relative;
      height: auto;
      margin: 0 0 14px;
    }

    .annual-map-svg {
      display: block;
      width: 100%;
      height: 100%;
      overflow: visible;
    }

    .kline-svg text {
      font-family: var(--serif);
    }

    .kline-legend {
      position: absolute;
      left: 12px;
      right: 12px;
      bottom: 0;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
      color: rgba(24, 23, 21, 0.54);
      font-size: 11px;
      line-height: 1.25;
      text-align: center;
    }

    .kline-legend b {
      display: block;
      margin-bottom: 2px;
      color: var(--ink);
      font-size: 12px;
      font-weight: 700;
    }

    .luoshu-map {
      display: grid;
      gap: 12px;
    }

    .luoshu-grid {
      position: relative;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1px;
      min-height: 254px;
      padding: 8px;
      background:
        radial-gradient(circle at 50% 50%, rgba(167, 52, 39, 0.05), transparent 36%),
        linear-gradient(135deg, rgba(173, 138, 77, 0.12), transparent 34%),
        rgba(255, 252, 247, 0.38);
      border: 1px solid rgba(173, 138, 77, 0.16);
    }

    .luoshu-grid::before,
    .luoshu-grid::after {
      content: "";
      position: absolute;
      pointer-events: none;
      border: 1px solid rgba(24, 23, 21, 0.055);
      border-radius: 50%;
    }

    .luoshu-grid::before {
      inset: 34px;
    }

    .luoshu-grid::after {
      inset: 72px;
      border-style: dashed;
    }

    .luoshu-cell {
      position: relative;
      z-index: 1;
      display: grid;
      align-content: center;
      justify-items: center;
      min-height: 76px;
      padding: 7px 5px;
      background: rgba(255, 252, 247, 0.34);
      color: rgba(24, 23, 21, 0.54);
      text-align: center;
      font-family: var(--serif);
      line-height: 1.2;
    }

    .luoshu-cell b {
      display: block;
      color: var(--ink);
      font-size: 20px;
      line-height: 1.1;
    }

    .luoshu-cell small {
      display: block;
      margin-top: 4px;
      font-size: 10px;
      letter-spacing: 0.08em;
      white-space: nowrap;
    }

    .luoshu-cell.center {
      background: rgba(255, 252, 247, 0.68);
      box-shadow: inset 0 0 0 1px rgba(167, 52, 39, 0.16);
    }

    .luoshu-cell.center b {
      color: var(--seal);
      font-size: 28px;
    }

    .luoshu-cell.south {
      background: rgba(167, 52, 39, 0.08);
      box-shadow: inset 0 0 0 1px rgba(167, 52, 39, 0.18);
    }

    .luoshu-cell.south b,
    .luoshu-cell.west b {
      color: var(--seal);
    }

    .luoshu-cell.wood {
      background: rgba(76, 139, 102, 0.08);
    }

    .luoshu-cell.wood b {
      color: var(--wood);
    }

    .luoshu-cell.north b {
      color: var(--water);
    }

    .luoshu-flow {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
      gap: 8px;
      color: rgba(24, 23, 21, 0.58);
      font-family: var(--serif);
      font-size: 12px;
      letter-spacing: 0.06em;
    }

    .luoshu-flow::before,
    .luoshu-flow::after {
      content: "";
      height: 1px;
      background: rgba(24, 23, 21, 0.1);
    }

    .map-label {
      position: absolute;
      display: grid;
      place-items: center;
      width: 30px;
      height: 30px;
      border: 1px solid rgba(24, 23, 21, 0.14);
      border-radius: 50%;
      background: rgba(255, 252, 247, 0.8);
      color: rgba(24, 23, 21, 0.56);
      font-size: 15px;
      font-weight: 800;
      line-height: 1;
    }

    .map-label.active {
      color: var(--seal);
      border-color: rgba(167, 52, 39, 0.28);
      box-shadow: 0 0 0 6px rgba(167, 52, 39, 0.045);
    }

    .time-pin {
      position: absolute;
      left: 58%;
      top: 52px;
      display: grid;
      place-items: center;
      width: 52px;
      height: 52px;
      border: 1px solid rgba(167, 52, 39, 0.34);
      border-radius: 50%;
      background: rgba(255, 252, 247, 0.84);
      color: var(--seal);
      font-family: var(--serif);
      transform: translateX(-50%);
      box-shadow: 0 0 0 14px rgba(167, 52, 39, 0.055);
    }

    .time-pin b {
      font-size: 20px;
      line-height: 1;
    }

    .time-pin small {
      margin-top: -8px;
      color: rgba(24, 23, 21, 0.52);
      font-size: 9px;
      letter-spacing: 0.08em;
    }

    .time-scale {
      position: absolute;
      left: 12px;
      right: 12px;
      bottom: 6px;
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      color: rgba(24, 23, 21, 0.42);
      font-family: Georgia, var(--serif);
      font-size: 12px;
      text-align: center;
    }

    .time-scale b {
      color: var(--seal);
      font-size: 13px;
    }

    .space-center {
      position: absolute;
      left: 50%;
      top: 50%;
      display: grid;
      place-items: center;
      width: 56px;
      height: 56px;
      border: 1px solid rgba(167, 52, 39, 0.34);
      border-radius: 50%;
      background: rgba(255, 252, 247, 0.82);
      color: var(--seal);
      font-family: var(--serif);
      transform: translate(-50%, -50%);
      box-shadow: 0 0 0 16px rgba(167, 52, 39, 0.045);
    }

    .space-center b {
      font-size: 25px;
      line-height: 1;
    }

    .space-center small {
      margin-top: -9px;
      color: rgba(24, 23, 21, 0.52);
      font-size: 9px;
      letter-spacing: 0.1em;
    }

    .space-n { left: calc(50% - 15px); top: 5px; }
    .space-e { right: 2px; top: calc(50% - 15px); color: var(--wood); }
    .space-s { left: calc(50% - 15px); bottom: 5px; }
    .space-w { left: 2px; top: calc(50% - 15px); }
    .space-se { right: 34px; bottom: 32px; color: var(--wood); }

    .annual-insight-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0;
      margin: 12px 0 2px;
      border-top: 1px solid rgba(24, 23, 21, 0.1);
    }

    .annual-insight-grid div {
      min-height: 64px;
      padding: 12px 10px 0 0;
      color: rgba(24, 23, 21, 0.62);
      font-size: 13px;
      line-height: 1.5;
    }

    .annual-insight-grid div:nth-child(2n) {
      padding-left: 14px;
      border-left: 1px solid rgba(24, 23, 21, 0.08);
    }

    .annual-insight-grid strong {
      display: block;
      margin-bottom: 2px;
      color: var(--wood);
      font-size: 16px;
      line-height: 1.2;
    }

    .annual-insight-grid .fire strong {
      color: var(--fire);
    }

    .annual-cover-hero {
      display: grid;
      gap: 16px;
      margin: 16px 0 22px;
      text-align: center;
    }

    .annual-cover-hero .annual-book-art {
      margin-top: 12px;
      margin-bottom: 2px;
    }

    .annual-theme-badge {
      display: inline-flex;
      justify-self: center;
      padding: 6px 12px;
      border: 1px solid rgba(167, 52, 39, 0.28);
      border-radius: 999px;
      background: rgba(167, 52, 39, 0.045);
      color: var(--seal);
      font-family: var(--serif);
      font-size: 12px;
      font-weight: 800;
      letter-spacing: 0.08em;
    }

    .annual-scope-badge {
      display: inline-flex;
      justify-self: center;
      max-width: min(100%, 360px);
      padding: 7px 11px;
      border: 1px solid rgba(76, 139, 102, 0.28);
      border-radius: 999px;
      background: rgba(76, 139, 102, 0.06);
      color: rgba(24, 23, 21, 0.68);
      font-size: 11px;
      font-weight: 800;
      line-height: 1.45;
      text-align: center;
    }

    .annual-core-reading {
      padding: 18px 0 17px;
      border-top: 1px solid rgba(24, 23, 21, 0.1);
      border-bottom: 1px solid rgba(24, 23, 21, 0.1);
      text-align: left;
    }

    .annual-core-reading h2,
    .annual-block-title {
      margin: 0;
      font-family: var(--serif);
      font-size: 25px;
      line-height: 1.25;
      letter-spacing: 0.08em;
    }

    .annual-core-reading p {
      margin: 11px 0 0;
      color: rgba(24, 23, 21, 0.68);
      font-family: var(--serif);
      font-size: 14px;
      line-height: 1.82;
      letter-spacing: 0.04em;
    }

    .annual-evidence-row {
      display: flex;
      flex-wrap: wrap;
      gap: 7px;
      margin-top: 14px;
    }

    .annual-evidence-row span {
      padding: 6px 9px;
      border: 1px solid rgba(173, 138, 77, 0.22);
      border-radius: 999px;
      background: rgba(255, 252, 247, 0.62);
      color: rgba(24, 23, 21, 0.66);
      font-size: 12px;
      line-height: 1;
    }

    .annual-unlock-modal[hidden] {
      display: none;
    }

    .annual-unlock-modal {
      position: fixed;
      inset: 0;
      z-index: 80;
      display: grid;
      align-items: end;
      justify-items: center;
      padding: 18px 14px calc(18px + env(safe-area-inset-bottom));
      color: var(--ink);
    }

    .annual-unlock-scrim {
      position: absolute;
      inset: 0;
      background: rgba(24, 23, 21, 0.2);
      backdrop-filter: blur(18px);
    }

    .annual-unlock-card {
      position: relative;
      width: min(100%, 396px);
      overflow: hidden;
      padding: 22px 20px 18px;
      border: 1px solid rgba(173, 138, 77, 0.26);
      border-radius: 8px;
      background:
        linear-gradient(180deg, rgba(255, 252, 247, 0.98), rgba(248, 244, 237, 0.96)),
        var(--paper);
      box-shadow: 0 34px 72px rgba(54, 44, 32, 0.22);
      animation: annualUnlockRise 420ms var(--ease) both;
    }

    .annual-unlock-card.is-generating {
      padding-bottom: 22px;
    }

    .annual-unlock-card::before {
      content: "";
      position: absolute;
      inset: 9px;
      border: 1px solid rgba(173, 138, 77, 0.15);
      pointer-events: none;
    }

    .annual-unlock-close {
      position: absolute;
      top: 16px;
      right: 16px;
      z-index: 1;
      display: grid;
      place-items: center;
      width: 34px;
      height: 34px;
      border: 1px solid rgba(24, 23, 21, 0.1);
      border-radius: 50%;
      background: rgba(255, 252, 247, 0.78);
      color: rgba(24, 23, 21, 0.68);
      font-size: 23px;
      line-height: 1;
      cursor: pointer;
    }

    .zhai-jing-evidence-modal[hidden] {
      display: none;
    }

    .zhai-jing-evidence-modal {
      position: fixed;
      inset: 0 auto 0 50%;
      z-index: 120;
      display: grid;
      align-items: end;
      justify-items: center;
      width: min(430px, 100vw);
      padding: 18px 14px calc(18px + env(safe-area-inset-bottom));
      color: var(--ink);
      transform: translateX(-50%);
    }

    .zhai-jing-evidence-scrim {
      position: absolute;
      inset: 0;
      border: 0;
      background: rgba(24, 23, 21, 0.2);
      backdrop-filter: blur(18px);
      cursor: pointer;
    }

    .zhai-jing-evidence-card {
      position: relative;
      width: 100%;
      max-height: calc(100dvh - 36px);
      display: grid;
      gap: 14px;
      overflow: auto;
      padding: 23px 20px 18px;
      border: 1px solid rgba(173, 138, 77, 0.26);
      border-radius: 8px;
      background:
        linear-gradient(180deg, rgba(255, 252, 247, 0.98), rgba(248, 244, 237, 0.96)),
        var(--paper);
      box-shadow: 0 34px 72px rgba(54, 44, 32, 0.22);
      animation: annualUnlockRise 420ms var(--ease) both;
    }

    .zhai-jing-evidence-card::before {
      content: "";
      position: absolute;
      inset: 9px;
      border: 1px solid rgba(173, 138, 77, 0.14);
      pointer-events: none;
    }

    .zhai-jing-evidence-card > * {
      position: relative;
    }

    .zhai-jing-evidence-card small {
      color: var(--seal);
      font: 700 12px/1 var(--serif);
      letter-spacing: 0.12em;
    }

    .zhai-jing-evidence-card h2 {
      margin: 0;
      color: #1f1e1b;
      font: 800 25px/1.25 var(--serif);
      letter-spacing: 0;
    }

    .zhai-jing-evidence-card p {
      margin: 0;
      color: rgba(24, 23, 21, 0.64);
      font: 14px/1.75 var(--serif);
      letter-spacing: 0;
    }

    .zhai-jing-evidence-close {
      position: absolute;
      top: 14px;
      right: 14px;
      z-index: 2;
      display: grid;
      place-items: center;
      width: 34px;
      height: 34px;
      border: 1px solid rgba(24, 23, 21, 0.1);
      border-radius: 50%;
      background: rgba(255, 252, 247, 0.78);
      color: rgba(24, 23, 21, 0.68);
      font-size: 23px;
      line-height: 1;
      cursor: pointer;
    }

    .zhai-jing-evidence-fields {
      display: grid;
      gap: 9px;
    }

    .zhai-jing-evidence-note {
      padding: 10px 12px;
      border-left: 2px solid rgba(173, 138, 77, 0.55);
      background: rgba(173, 138, 77, 0.06);
    }

    .zhai-jing-evidence-actions {
      display: grid;
      grid-template-columns: 0.9fr 1.1fr;
      gap: 10px;
    }

    .zhai-jing-evidence-actions button {
      min-height: 45px;
      border: 1px solid rgba(24, 23, 21, 0.1);
      border-radius: 8px;
      background: rgba(255, 252, 247, 0.75);
      color: rgba(24, 23, 21, 0.68);
      font: 700 14px/1 var(--serif);
      cursor: pointer;
    }

    .zhai-jing-evidence-actions .primary {
      border-color: rgba(167, 52, 39, 0.38);
      background: linear-gradient(180deg, #c73b2e, #a72f25);
      color: #fffaf5;
      box-shadow: 0 14px 28px rgba(167, 52, 39, 0.22);
    }

    .annual-unlock-hero {
      position: relative;
      display: grid;
      gap: 12px;
      justify-items: center;
      padding: 4px 18px 4px;
      text-align: center;
    }

    .annual-unlock-kicker {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: var(--seal);
      font-size: 12px;
      font-weight: 800;
      letter-spacing: 0.18em;
    }

    .annual-unlock-kicker::before,
    .annual-unlock-kicker::after {
      content: "";
      width: 22px;
      height: 1px;
      background: rgba(167, 52, 39, 0.28);
    }

    .annual-unlock-title-row {
      display: grid;
      justify-items: center;
      gap: 12px;
    }

    .annual-unlock-art {
      position: relative;
      display: grid;
      place-items: center;
      width: 118px;
      height: 118px;
      border: 1px solid rgba(173, 138, 77, 0.24);
      border-radius: 50%;
      background: rgba(255, 252, 247, 0.66);
      box-shadow:
        inset 0 0 0 8px rgba(173, 138, 77, 0.045),
        0 20px 42px rgba(54, 44, 32, 0.11);
    }

    .annual-unlock-art::before {
      content: "";
      position: absolute;
      inset: -11px;
      border: 1px solid rgba(173, 138, 77, 0.16);
      border-radius: 50%;
      border-top-color: rgba(167, 52, 39, 0.24);
      transform: rotate(-18deg);
    }

    .annual-unlock-art img {
      width: 92px;
      height: 92px;
      object-fit: contain;
      mix-blend-mode: multiply;
    }

    .annual-unlock-art span {
      position: absolute;
      right: -4px;
      bottom: 1px;
      padding: 4px 6px;
      border: 1px solid rgba(167, 52, 39, 0.26);
      border-radius: 999px;
      background: rgba(255, 252, 247, 0.94);
      color: var(--seal);
      font-size: 10px;
      font-weight: 800;
      letter-spacing: 0.04em;
    }

    .annual-unlock-card.is-generating .annual-unlock-art::before {
      animation: annualUnlockOrbit 1600ms linear infinite;
    }

    .annual-unlock-title-row h2 {
      margin: 0 0 7px;
      font-family: var(--serif);
      font-size: 29px;
      line-height: 1.18;
      letter-spacing: 0.07em;
    }

    .annual-unlock-title-row p {
      margin: 0;
      color: rgba(24, 23, 21, 0.6);
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 0.08em;
      line-height: 1.45;
    }

    .annual-unlock-brief {
      margin: 0;
      color: rgba(24, 23, 21, 0.72);
      font-family: var(--serif);
      font-size: 15px;
      line-height: 1.64;
      letter-spacing: 0.05em;
    }

    .annual-unlock-seals {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 8px;
      margin: 5px 0 0;
    }

    .annual-unlock-seals span {
      padding: 6px 10px;
      border: 1px solid rgba(173, 138, 77, 0.22);
      border-radius: 999px;
      background: rgba(255, 252, 247, 0.66);
      color: rgba(24, 23, 21, 0.62);
      font-family: var(--serif);
      font-size: 12px;
      font-weight: 800;
      letter-spacing: 0.08em;
    }

    .annual-unlock-footnote {
      margin: 13px 0 14px;
      padding-top: 12px;
      border-top: 1px solid rgba(24, 23, 21, 0.08);
      color: rgba(45, 58, 75, 0.7);
      font-size: 12px;
      line-height: 1.55;
      text-align: center;
    }

    .annual-unlock-progress {
      position: relative;
      height: 2px;
      margin: 16px 18px 8px;
      overflow: hidden;
      background: rgba(173, 138, 77, 0.18);
    }

    .annual-unlock-progress::before {
      content: "";
      position: absolute;
      inset: 0 auto 0 0;
      width: 48%;
      background: linear-gradient(90deg, transparent, rgba(167, 52, 39, 0.8), transparent);
      animation: annualUnlockSweep 1200ms var(--ease) infinite;
    }

    .annual-unlock-status {
      margin: 0;
      color: rgba(24, 23, 21, 0.52);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-align: center;
    }

    .annual-unlock-actions {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }

    .annual-unlock-actions button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      min-height: 46px;
      border: 1px solid rgba(24, 23, 21, 0.14);
      border-radius: 999px;
      background: rgba(255, 252, 247, 0.72);
      color: rgba(24, 23, 21, 0.72);
      font-size: 14px;
      font-weight: 800;
      letter-spacing: 0.08em;
      box-shadow: 0 12px 28px rgba(54, 44, 32, 0.08);
      cursor: pointer;
    }

    .annual-unlock-actions .primary {
      border-color: rgba(24, 23, 21, 0.36);
      background: linear-gradient(180deg, rgba(34, 33, 31, 0.96), rgba(24, 23, 21, 0.9));
      color: #fffaf1;
      box-shadow: 0 16px 34px rgba(24, 23, 21, 0.24);
    }

    .annual-unlock-actions svg {
      width: 18px;
      height: 18px;
      stroke-width: 2;
    }

    @keyframes annualUnlockRise {
      from {
        opacity: 0;
        transform: translateY(22px) scale(0.985);
      }
      to {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }

    @keyframes annualUnlockOrbit {
      to {
        transform: rotate(342deg);
      }
    }

    @keyframes annualUnlockSweep {
      from {
        transform: translateX(-110%);
      }
      to {
        transform: translateX(230%);
      }
    }

    .annual-profile-strip {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 1px;
      border: 1px solid rgba(173, 138, 77, 0.16);
      background: rgba(173, 138, 77, 0.12);
    }

    .annual-profile-strip div {
      display: grid;
      gap: 5px;
      min-height: 60px;
      align-content: center;
      padding: 10px 8px;
      background: rgba(255, 252, 247, 0.72);
      text-align: center;
    }

    .annual-profile-strip span {
      color: rgba(24, 23, 21, 0.48);
      font-size: 11px;
      letter-spacing: 0.08em;
    }

    .annual-profile-strip strong {
      font-family: var(--serif);
      font-size: 15px;
      letter-spacing: 0.06em;
    }

    .annual-toc {
      display: grid;
      gap: 0;
      margin-top: 4px;
      border-top: 1px solid rgba(24, 23, 21, 0.08);
    }

    .annual-toc button {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 12px;
      min-height: 46px;
      padding: 0;
      border: 0;
      border-bottom: 1px solid rgba(24, 23, 21, 0.08);
      background: transparent;
      color: var(--ink);
      font-family: var(--serif);
      font-size: 15px;
      font-weight: 800;
      letter-spacing: 0.06em;
      cursor: pointer;
    }

    .annual-toc small {
      color: rgba(24, 23, 21, 0.42);
      font-family: var(--sans);
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0.06em;
    }

    .annual-panels {
      margin-top: 20px;
    }

    .annual-panel .annual-section-body {
      padding-top: 0;
    }

    .annual-panel .annual-section-copy {
      margin: 0 0 14px;
    }

    .annual-daymaster-visual {
      margin: 2px auto 12px;
      padding: 10px 0 2px;
    }

    .annual-daymaster-visual .daymaster-wheel {
      width: min(296px, 100%);
    }

    .annual-basic-reading {
      display: grid;
      gap: 12px;
      margin: 14px 0 0;
      color: rgba(24, 23, 21, 0.68);
      font-family: var(--serif);
      font-size: 14px;
      line-height: 1.78;
      letter-spacing: 0.04em;
    }

    .annual-basic-reading h3 {
      margin: 0;
      color: var(--ink);
      font-size: 18px;
      line-height: 1.28;
      letter-spacing: 0.08em;
    }

    .annual-basic-reading p {
      margin: 0;
    }

    .annual-basic-points,
    .annual-space-status {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 1px;
      margin-top: 10px;
      border: 1px solid rgba(173, 138, 77, 0.16);
      background: rgba(173, 138, 77, 0.12);
    }

    .annual-basic-points div,
    .annual-space-status div {
      min-height: 66px;
      padding: 10px 8px;
      background: rgba(255, 252, 247, 0.62);
      color: rgba(24, 23, 21, 0.62);
      font-size: 11px;
      line-height: 1.48;
    }

    .annual-basic-points b,
    .annual-space-status b {
      display: block;
      margin-bottom: 3px;
      color: var(--ink);
      font-family: var(--serif);
      font-size: 13px;
      letter-spacing: 0.06em;
    }

    .annual-book-section {
      display: grid;
      gap: 14px;
      margin-top: 22px;
      scroll-margin-top: 18px;
    }

    .annual-section-kicker {
      display: block;
      color: var(--seal);
      font-family: var(--serif);
      font-size: 12px;
      font-weight: 800;
      letter-spacing: 0.16em;
    }

    .annual-section-copy {
      margin: -5px 0 0;
      color: rgba(24, 23, 21, 0.58);
      font-size: 13px;
      line-height: 1.62;
    }

    .annual-engine-card,
    .annual-space-card {
      padding: 17px 16px;
      border: 1px solid rgba(173, 138, 77, 0.18);
      border-radius: 14px;
      background: rgba(255, 252, 247, 0.62);
      box-shadow: 0 16px 40px rgba(54, 44, 32, 0.06);
    }

    .annual-stem-track {
      display: grid;
      grid-template-columns: repeat(10, minmax(0, 1fr));
      gap: 4px;
      margin-bottom: 12px;
    }

    .annual-stem-track span {
      display: grid;
      place-items: center;
      height: 24px;
      border: 1px solid rgba(24, 23, 21, 0.1);
      border-radius: 999px;
      background: rgba(255, 252, 247, 0.58);
      color: rgba(24, 23, 21, 0.42);
      font-family: var(--serif);
      font-size: 13px;
      font-weight: 800;
    }

    .annual-stem-track .active {
      border-color: rgba(76, 139, 102, 0.28);
      background: var(--wood);
      color: #fffaf1;
      box-shadow: 0 0 0 4px rgba(76, 139, 102, 0.08);
    }

    .annual-orbit {
      position: relative;
      width: min(100%, 292px);
      height: 292px;
      margin: 2px auto 10px;
    }

    .annual-orbit-ring {
      position: absolute;
      border: 1px solid rgba(173, 138, 77, 0.34);
      border-radius: 50%;
      pointer-events: none;
    }

    .annual-orbit-ring.base {
      inset: 8px;
    }

    .annual-orbit-ring.luck {
      inset: 38px;
      border-style: dashed;
      border-color: rgba(76, 139, 102, 0.34);
    }

    .annual-orbit-ring.year {
      inset: 72px;
      border-color: rgba(167, 52, 39, 0.33);
      background: rgba(167, 52, 39, 0.035);
    }

    .annual-orbit-center {
      position: absolute;
      inset: 106px;
      display: grid;
      place-items: center;
      border: 1px solid rgba(76, 139, 102, 0.36);
      border-radius: 50%;
      background: rgba(255, 252, 247, 0.84);
      color: var(--wood);
      font-family: var(--serif);
      font-size: 31px;
      font-weight: 800;
      letter-spacing: 0.04em;
      box-shadow: 0 14px 34px rgba(54, 44, 32, 0.12);
    }

    .annual-orbit-node {
      position: absolute;
      display: grid;
      place-items: center;
      width: 48px;
      height: 48px;
      border: 1px solid rgba(173, 138, 77, 0.28);
      border-radius: 50%;
      background: rgba(255, 252, 247, 0.9);
      font-family: var(--serif);
      font-size: 18px;
      font-weight: 800;
      box-shadow: 0 10px 24px rgba(54, 44, 32, 0.06);
    }

    .annual-orbit-node.fire {
      color: var(--seal);
      border-color: rgba(167, 52, 39, 0.36);
      background: rgba(167, 52, 39, 0.08);
    }

    .annual-orbit-node.wood {
      color: var(--wood);
    }

    .annual-orbit-node.water {
      color: var(--water);
    }

    .annual-orbit-node.metal {
      color: var(--metal);
    }

    .annual-orbit-node.n1 { left: calc(50% - 24px); top: 0; }
    .annual-orbit-node.n2 { right: 12px; top: 82px; }
    .annual-orbit-node.n3 { right: 48px; bottom: 20px; }
    .annual-orbit-node.n4 { left: 42px; bottom: 23px; }
    .annual-orbit-node.n5 { left: 8px; top: 86px; }

    .annual-formula {
      display: grid;
      gap: 0;
      border-top: 1px solid rgba(24, 23, 21, 0.08);
    }

    .annual-formula div {
      display: grid;
      grid-template-columns: 64px 1fr;
      gap: 10px;
      padding: 10px 0;
      border-bottom: 1px solid rgba(24, 23, 21, 0.08);
      color: rgba(24, 23, 21, 0.64);
      font-size: 13px;
      line-height: 1.58;
    }

    .annual-formula b {
      color: var(--seal);
      font-family: var(--serif);
      font-size: 14px;
      letter-spacing: 0.08em;
    }

    .annual-chapter-grid {
      display: grid;
      gap: 12px;
    }

    .annual-topic-card {
      padding: 16px;
      border: 1px solid rgba(173, 138, 77, 0.18);
      border-radius: 14px;
      background: linear-gradient(90deg, rgba(255, 252, 247, 0.76), rgba(255, 252, 247, 0.42));
      box-shadow: 0 14px 34px rgba(54, 44, 32, 0.05);
    }

    .annual-topic-card h3 {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 10px;
      margin: 0;
      font-family: var(--serif);
      font-size: 20px;
      line-height: 1.25;
      letter-spacing: 0.07em;
    }

    .annual-topic-card h3 small {
      flex: 0 0 auto;
      color: rgba(24, 23, 21, 0.44);
      font-family: var(--sans);
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0.06em;
    }

    .annual-topic-card p {
      margin: 10px 0 0;
      color: rgba(24, 23, 21, 0.66);
      font-size: 13px;
      line-height: 1.74;
    }

    .annual-topic-proof {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 1px;
      margin-top: 13px;
      border: 1px solid rgba(173, 138, 77, 0.14);
      background: rgba(173, 138, 77, 0.12);
    }

    .annual-topic-proof div {
      min-height: 64px;
      padding: 9px 8px;
      background: rgba(255, 252, 247, 0.62);
      color: rgba(24, 23, 21, 0.6);
      font-size: 11px;
      line-height: 1.45;
    }

    .annual-topic-proof b {
      display: block;
      margin-bottom: 3px;
      color: var(--ink);
      font-family: var(--serif);
      font-size: 13px;
      letter-spacing: 0.08em;
    }

    .annual-topic-focus {
      display: grid;
      gap: 8px;
      margin-top: 13px;
    }

    .annual-topic-focus div {
      display: grid;
      gap: 4px;
      padding: 10px 11px;
      border-left: 2px solid rgba(173, 138, 77, 0.42);
      background: rgba(255, 252, 247, 0.48);
      color: rgba(24, 23, 21, 0.62);
      font-size: 12px;
      line-height: 1.58;
    }

    .annual-topic-focus b {
      color: var(--seal);
      font-family: var(--serif);
      font-size: 14px;
      letter-spacing: 0.08em;
    }

    .annual-topic-actions {
      margin-top: 15px;
      padding-top: 14px;
      border-top: 1px solid rgba(173, 138, 77, 0.16);
    }

    .annual-flip-card .analysis-card-face {
      padding: 16px;
    }

    .annual-flip-card .concept-figure {
      min-height: 170px;
    }

    .annual-concept-diagram {
      display: grid;
      gap: 9px;
      width: min(100%, 288px);
      padding: 12px;
      border: 1px solid rgba(173, 138, 77, 0.18);
      background: rgba(255, 252, 247, 0.56);
    }

    .annual-concept-row {
      display: grid;
      grid-template-columns: 54px 1fr;
      align-items: center;
      gap: 8px;
      min-height: 32px;
      color: rgba(24, 23, 21, 0.62);
      font-size: 12px;
    }

    .annual-concept-line {
      position: relative;
      height: 1px;
      background: rgba(24, 23, 21, 0.16);
    }

    .annual-concept-line::after {
      content: "";
      position: absolute;
      right: 0;
      top: -4px;
      width: 9px;
      height: 9px;
      border-top: 1px solid rgba(24, 23, 21, 0.28);
      border-right: 1px solid rgba(24, 23, 21, 0.28);
      transform: rotate(45deg);
    }

    .annual-month-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 7px;
    }

    .annual-month-list {
      display: grid;
      gap: 0;
      border-top: 1px solid rgba(24, 23, 21, 0.08);
    }

    .annual-month-detail {
      padding: 15px 0 14px;
      border-bottom: 1px solid rgba(24, 23, 21, 0.08);
      background: transparent;
    }

    .annual-month-detail.hot {
      background: linear-gradient(90deg, rgba(167, 52, 39, 0.035), transparent 58%);
    }

    .annual-month-detail h3 {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 10px;
      margin: 0 0 8px;
      font-family: var(--serif);
      font-size: 17px;
      letter-spacing: 0.06em;
    }

    .annual-month-detail h3 small {
      flex: 0 0 auto;
      color: rgba(24, 23, 21, 0.44);
      font-family: var(--sans);
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0.04em;
    }

    .annual-month-detail p {
      margin: 0;
      color: rgba(24, 23, 21, 0.66);
      font-size: 12px;
      line-height: 1.64;
    }

    .annual-month-detail p + p {
      margin-top: 6px;
    }

    .annual-month-card .card-actions {
      margin-top: 14px;
      padding-top: 12px;
      border-top: 1px solid rgba(24, 23, 21, 0.08);
    }

    .annual-month {
      min-height: 78px;
      padding: 10px 7px;
      border: 1px solid rgba(173, 138, 77, 0.17);
      background: rgba(255, 252, 247, 0.58);
      color: rgba(24, 23, 21, 0.62);
      font-size: 11px;
      line-height: 1.45;
    }

    .annual-month b {
      display: block;
      margin-bottom: 4px;
      color: var(--ink);
      font-family: var(--serif);
      font-size: 15px;
      line-height: 1.1;
      letter-spacing: 0.06em;
    }

    .annual-month.hot {
      border-color: rgba(167, 52, 39, 0.28);
      background: rgba(167, 52, 39, 0.06);
    }

    .annual-month.hot b {
      color: var(--seal);
    }

    .annual-space-list {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0;
      margin-top: 12px;
      border-top: 1px solid rgba(24, 23, 21, 0.08);
    }

    .annual-space-list div {
      min-height: 68px;
      padding: 12px 10px 0 0;
      color: rgba(24, 23, 21, 0.62);
      font-size: 13px;
      line-height: 1.5;
    }

    .annual-space-list div:nth-child(2n) {
      padding-left: 12px;
      border-left: 1px solid rgba(24, 23, 21, 0.08);
    }

    .annual-space-list strong {
      display: block;
      margin-bottom: 3px;
      color: var(--wood);
      font-family: var(--serif);
      font-size: 16px;
      letter-spacing: 0.05em;
    }

    .annual-guardrail {
      margin-top: 18px;
      padding: 12px 14px;
      border-left: 2px solid rgba(167, 52, 39, 0.38);
      background: rgba(167, 52, 39, 0.04);
      color: rgba(24, 23, 21, 0.62);
      font-size: 12px;
      line-height: 1.7;
    }

    .annual-topic-guardrail {
      margin-top: 12px;
      padding: 9px 10px;
      border-left: 2px solid rgba(167, 52, 39, 0.34);
      background: rgba(167, 52, 39, 0.04);
      color: rgba(24, 23, 21, 0.62);
      font-size: 12px;
      line-height: 1.65;
    }

    .annual-refresh-note {
      margin-top: 12px;
      padding: 12px 13px;
      border: 1px dashed rgba(76, 139, 102, 0.28);
      border-radius: 10px;
      background: rgba(76, 139, 102, 0.055);
      color: rgba(24, 23, 21, 0.62);
      font-size: 12px;
      line-height: 1.62;
    }

    .annual-followup-panel {
      border-color: rgba(173, 138, 77, 0.2);
      background: linear-gradient(135deg, rgba(255, 252, 247, 0.82), rgba(246, 239, 225, 0.52));
    }

    .annual-followup-body {
      display: grid;
      gap: 14px;
      padding: 18px;
    }

    .annual-followup-copy {
      display: grid;
      gap: 4px;
    }

    .annual-followup-copy span {
      color: var(--seal);
      font-family: var(--serif);
      font-size: 18px;
      font-weight: 800;
      letter-spacing: 0.08em;
    }

    .annual-followup-copy p {
      color: rgba(24, 23, 21, 0.62);
      font-size: 13px;
      line-height: 1.7;
    }

    .annual-followup-actions {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
      margin-top: 0;
      padding-top: 0;
      border-top: 0;
    }

    .annual-followup-actions .card-action {
      width: 100%;
      min-width: 0;
      min-height: 50px;
      border-radius: 14px;
    }

    .annual-concept-inline {
      display: grid;
      gap: 14px;
      margin-top: 2px;
      padding: 14px;
      border: 1px solid rgba(173, 138, 77, 0.18);
      border-radius: 12px;
      background: rgba(255, 252, 247, 0.58);
      box-shadow: 0 12px 28px rgba(54, 44, 32, 0.06);
    }

    .annual-concept-inline[hidden] {
      display: none;
    }

    @media (max-width: 374px) {
      .annual-followup-actions {
        grid-template-columns: 1fr;
      }
    }

    .ai-qa-entry {
      width: 100%;
      margin-top: 13px;
    }

    .ai-qa-drawer {
      position: fixed;
      inset: 0;
      z-index: 88;
      pointer-events: none;
    }

    .ai-qa-drawer.is-open {
      pointer-events: auto;
    }

    .ai-qa-scrim {
      position: absolute;
      inset: 0;
      border: 0;
      background: rgba(24, 23, 21, 0.34);
      opacity: 0;
      backdrop-filter: blur(2px);
      transition: opacity 260ms var(--ease);
      cursor: pointer;
    }

    .ai-qa-drawer.is-open .ai-qa-scrim {
      opacity: 1;
    }

    .ai-qa-panel {
      position: absolute;
      left: 50%;
      bottom: 0;
      display: grid;
      grid-template-rows: auto auto auto auto minmax(0, 1fr) auto;
      width: min(430px, 100vw);
      height: min(var(--ai-qa-height, 100dvh), 100dvh);
      max-height: 100dvh;
      padding: max(8px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
      border: 1px solid rgba(173, 138, 77, 0.24);
      border-radius: 0;
      background:
        radial-gradient(circle at 17% 0%, rgba(255, 252, 247, 0.95), rgba(246, 238, 224, 0.9) 36%, rgba(236, 224, 204, 0.96)),
        var(--paper);
      box-shadow: 0 -24px 68px rgba(54, 44, 32, 0.28);
      transform: translate(-50%, 100%);
      transition: transform 300ms var(--ease);
      overflow: hidden;
      outline: none;
    }

    .ai-qa-panel.is-resizing {
      transition: none;
    }

    .ai-qa-panel.is-empty {
      grid-template-rows: auto auto auto auto minmax(0, 1fr) auto;
    }

    .ai-qa-panel:not(.is-empty) {
      grid-template-rows: auto auto auto minmax(0, 1fr) auto;
    }

    .ai-qa-panel::before {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background:
        linear-gradient(90deg, transparent, rgba(173, 138, 77, 0.2), transparent) top / 100% 1px no-repeat,
        radial-gradient(circle at 92% 8%, rgba(76, 139, 102, 0.1), transparent 28%),
        radial-gradient(circle at 8% 42%, rgba(173, 138, 77, 0.1), transparent 32%);
      opacity: 0.92;
    }

    .ai-qa-drawer.is-open .ai-qa-panel {
      transform: translate(-50%, 0);
    }

    .ai-qa-handle {
      z-index: 1;
      grid-row: 1;
      display: grid;
      place-items: center;
      width: 64px;
      height: 18px;
      margin: 0 auto 2px;
      padding: 0;
      border: 0;
      border-radius: 999px;
      background: transparent;
      cursor: ns-resize;
      touch-action: none;
    }

    .ai-qa-handle::before {
      content: "";
      width: 42px;
      height: 4px;
      border-radius: 999px;
      background: rgba(24, 23, 21, 0.18);
    }

    .ai-qa-handle:focus-visible {
      outline: 2px solid rgba(76, 139, 102, 0.32);
      outline-offset: 5px;
    }

    .ai-qa-head,
    .ai-qa-context,
    .ai-qa-quick,
    .ai-qa-messages,
    .ai-qa-composer {
      position: relative;
      z-index: 1;
    }

    .ai-qa-head {
      grid-row: 2;
      display: grid;
      grid-template-columns: 1fr 36px;
      gap: 12px;
      align-items: start;
      padding: 2px 0 12px;
    }

    .ai-qa-kicker {
      margin: 0 0 3px;
      color: rgba(167, 52, 39, 0.72);
      font-family: var(--serif);
      font-size: 12px;
      font-weight: 800;
      letter-spacing: 0.16em;
    }

    .ai-qa-head h2 {
      margin: 0;
      color: var(--ink);
      font-family: var(--serif);
      font-size: 24px;
      line-height: 1.15;
      letter-spacing: 0.04em;
    }

    .ai-qa-head span {
      display: block;
      margin-top: 5px;
      color: rgba(24, 23, 21, 0.56);
      font-size: 12px;
      line-height: 1.45;
    }

    .ai-qa-close {
      width: 34px;
      height: 34px;
      border: 1px solid rgba(24, 23, 21, 0.1);
      border-radius: 50%;
      background: rgba(255, 252, 247, 0.7);
      color: rgba(24, 23, 21, 0.58);
      font-size: 22px;
      line-height: 1;
      cursor: pointer;
    }

    .ai-qa-context {
      grid-row: 3;
      display: grid;
      grid-template-columns: 38px minmax(0, 1fr) auto;
      gap: 10px;
      align-items: center;
      min-height: 62px;
      padding: 10px 11px;
      border: 1px solid rgba(173, 138, 77, 0.18);
      border-radius: 12px;
      background: rgba(255, 252, 247, 0.58);
    }

    .ai-qa-seal {
      display: grid;
      place-items: center;
      width: 38px;
      height: 38px;
      border-radius: 12px;
      background: rgba(76, 139, 102, 0.12);
      color: var(--wood);
      font-family: var(--serif);
      font-size: 20px;
      font-weight: 900;
    }

    .ai-qa-context b {
      display: block;
      color: var(--ink);
      font-family: var(--serif);
      font-size: 15px;
      line-height: 1.25;
    }

    .ai-qa-context p {
      margin: 3px 0 0;
      color: rgba(24, 23, 21, 0.56);
      font-size: 11px;
      line-height: 1.45;
    }

    .ai-qa-context em {
      align-self: start;
      padding: 4px 7px;
      border: 1px solid rgba(167, 52, 39, 0.16);
      border-radius: 999px;
      background: rgba(167, 52, 39, 0.045);
      color: rgba(167, 52, 39, 0.72);
      font-size: 10px;
      font-style: normal;
      font-weight: 800;
      letter-spacing: 0.08em;
      white-space: nowrap;
    }

    .ai-qa-quick {
      grid-row: 4;
      display: grid;
      gap: 9px;
      padding: 13px 0 12px;
    }

    .ai-qa-quick-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      color: rgba(24, 23, 21, 0.58);
      font-size: 12px;
      font-weight: 800;
      letter-spacing: 0.1em;
    }

    .ai-qa-quick-head button {
      border: 0;
      background: transparent;
      color: var(--wood);
      font-size: 12px;
      font-weight: 800;
      cursor: pointer;
    }

    .ai-qa-chip-row {
      display: grid;
      gap: 8px;
      padding-bottom: 2px;
    }

	    .ai-qa-chip-row button {
	      width: 100%;
	      min-height: 34px;
	      padding: 7px 11px;
      border: 1px solid rgba(76, 139, 102, 0.18);
      border-radius: 12px;
      background: rgba(76, 139, 102, 0.06);
	      color: rgba(24, 23, 21, 0.68);
	      font-size: 12px;
	      line-height: 1.35;
	      text-align: left;
	      white-space: normal;
	      overflow-wrap: anywhere;
	      cursor: pointer;
	    }

    .ai-qa-messages {
      grid-row: 5;
      display: grid;
      align-content: start;
      gap: 12px;
      min-height: 0;
      padding: 2px 0 12px;
      overflow-y: auto;
      overscroll-behavior: contain;
      scrollbar-width: thin;
    }

    .ai-qa-panel:not(.is-empty) .ai-qa-quick {
      display: none;
    }

    .ai-qa-panel:not(.is-empty) .ai-qa-messages {
      grid-row: 4;
      padding: 4px 0 16px;
    }

    .ai-qa-panel:not(.is-empty) .ai-qa-composer {
      grid-row: 5;
    }

    .ai-qa-messages.is-empty {
      display: none;
      min-height: 0;
      padding: 0;
    }

    .ai-qa-message {
      display: grid;
    }

    .ai-qa-message.user {
      justify-items: end;
    }

    .ai-qa-user-bubble {
      max-width: 82%;
      padding: 10px 12px;
      border-radius: 14px 14px 4px 14px;
      background: rgba(24, 23, 21, 0.86);
      color: #fffaf1;
      font-size: 13px;
      line-height: 1.55;
    }

    .ai-qa-message.assistant {
      grid-template-columns: 30px minmax(0, 1fr);
      gap: 9px;
      align-items: start;
    }

    .ai-qa-answer-mark {
      display: grid;
      place-items: center;
      width: 28px;
      height: 28px;
      border-radius: 9px;
      background: rgba(173, 138, 77, 0.14);
      color: var(--seal);
      font-family: var(--serif);
      font-size: 15px;
      font-weight: 900;
    }

    .ai-qa-answer-card {
      display: grid;
      gap: 9px;
      padding: 13px 13px 12px;
      border: 1px solid rgba(173, 138, 77, 0.18);
      border-radius: 8px;
      background: rgba(255, 252, 247, 0.72);
      box-shadow: 0 12px 30px rgba(54, 44, 32, 0.08);
    }

    .ai-qa-answer-card h3 {
      margin: 0;
      color: var(--ink);
      font-family: var(--serif);
      font-size: 18px;
      line-height: 1.3;
      letter-spacing: 0.04em;
    }

    .ai-qa-answer-card p {
      margin: 0;
      color: rgba(24, 23, 21, 0.66);
      font-size: 13px;
      line-height: 1.68;
    }

    .ai-qa-message.is-pending .ai-qa-answer-card {
      gap: 8px;
      background: rgba(255, 252, 247, 0.56);
    }

    .ai-qa-message.is-prompt .ai-qa-answer-mark {
      background: rgba(77, 126, 91, 0.14);
      color: var(--wood);
    }

    .ai-qa-message.is-prompt .ai-qa-answer-card {
      border-color: rgba(77, 126, 91, 0.2);
      background: rgba(249, 252, 246, 0.72);
    }

    .ai-qa-loading {
      display: flex;
      align-items: center;
      gap: 8px;
      color: rgba(24, 23, 21, 0.72);
      font-size: 13px;
      font-weight: 800;
    }

    .ai-qa-loading i {
      width: 9px;
      height: 9px;
      border-radius: 50%;
      background: var(--wood);
      box-shadow:
        13px 0 0 rgba(76, 139, 102, 0.42),
        26px 0 0 rgba(76, 139, 102, 0.22);
      animation: aiQaLoadingPulse 1s ease-in-out infinite;
    }

    @keyframes aiQaLoadingPulse {
      0%,
      100% {
        opacity: 0.42;
        transform: translateY(0);
      }

      50% {
        opacity: 1;
        transform: translateY(-2px);
      }
    }

    .ai-qa-basis {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }

    .ai-qa-basis span {
      padding: 4px 7px;
      border: 1px solid rgba(24, 23, 21, 0.09);
      border-radius: 999px;
      background: rgba(236, 224, 204, 0.46);
      color: rgba(24, 23, 21, 0.54);
      font-size: 10px;
      font-weight: 800;
      letter-spacing: 0.06em;
    }

    .ai-qa-action-list {
      display: grid;
      gap: 7px;
      padding-top: 2px;
    }

    .ai-qa-action-list div {
      display: grid;
      grid-template-columns: 26px 1fr;
      gap: 8px;
      align-items: center;
      min-height: 32px;
      color: rgba(24, 23, 21, 0.64);
      font-size: 12px;
      line-height: 1.45;
    }

    .ai-qa-action-list b {
      display: grid;
      place-items: center;
      width: 24px;
      height: 24px;
      border-radius: 8px;
      background: rgba(76, 139, 102, 0.1);
      color: var(--wood);
      font-family: var(--serif);
      font-size: 13px;
    }

    .ai-qa-expand {
      display: inline-flex;
      align-items: center;
      gap: 3px;
      justify-self: start;
      min-height: 30px;
      padding: 5px 8px 5px 10px;
      border: 1px solid rgba(173, 138, 77, 0.26);
      border-radius: 999px;
      background: rgba(255, 252, 247, 0.72);
      color: rgba(133, 95, 39, 0.86);
      font-family: var(--sans);
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.05em;
    }

    .ai-qa-expand .credit-entry-cost {
      min-width: 36px;
      min-height: 20px;
      padding: 2px 6px 2px 3px;
      background: rgba(246, 233, 196, 0.58);
    }

    .ai-qa-expand .credit-entry-cost img {
      width: 14px;
      height: 14px;
    }

    .ai-qa-expand i {
      font-family: var(--serif);
      font-size: 18px;
      font-style: normal;
      line-height: 0.7;
    }

    .ai-qa-expand:disabled {
      cursor: wait;
      opacity: 0.58;
    }

    .ai-qa-expanded-mark {
      justify-self: start;
      color: rgba(76, 139, 102, 0.8);
      font-family: var(--sans);
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.06em;
    }

	    .ai-qa-answer-card small {
	      color: rgba(167, 52, 39, 0.62);
	      font-size: 11px;
	      line-height: 1.5;
	    }

    .ai-qa-fallback-note {
	      justify-self: start;
	      padding: 3px 8px;
	      border-radius: 999px;
	      background: rgba(167, 52, 39, 0.08);
	      color: rgba(167, 52, 39, 0.78);
	      font-family: var(--sans);
	      font-size: 11px;
	      font-style: normal;
	      font-weight: 800;
	      letter-spacing: 0.04em;
	    }

	    .ai-qa-composer {
      grid-row: 6;
      align-self: end;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 9px;
      align-items: end;
      padding-top: 10px;
      border-top: 1px solid rgba(24, 23, 21, 0.08);
    }

    .ai-qa-composer textarea {
      min-height: 42px;
      max-height: 96px;
      resize: none;
      padding: 11px 12px;
      border: 1px solid rgba(24, 23, 21, 0.1);
      border-radius: 14px;
      background: rgba(255, 252, 247, 0.78);
      color: var(--ink);
      font-size: 14px;
      line-height: 1.45;
      outline: none;
    }

    .ai-qa-composer textarea:focus {
      border-color: rgba(76, 139, 102, 0.34);
      box-shadow: 0 0 0 3px rgba(76, 139, 102, 0.08);
    }

    .ai-qa-composer textarea:disabled {
      opacity: 0.62;
      cursor: wait;
    }

    .ai-qa-composer button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
      width: auto;
      min-width: 78px;
      height: 40px;
      padding: 3px 5px 3px 11px;
      border: 0;
      border-radius: 999px;
      background: var(--ink);
      color: #fffaf1;
      font-size: 20px;
      font-weight: 900;
      line-height: 1;
      cursor: pointer;
      box-shadow: 0 10px 22px rgba(24, 23, 21, 0.18);
    }

    .ai-qa-composer button > span:first-child {
      font-size: 18px;
      line-height: 1;
    }

    .ai-qa-composer button .credit-entry-cost {
      min-width: 38px;
      min-height: 26px;
      padding: 3px 7px 3px 3px;
      border-color: rgba(255, 245, 214, 0.22);
      background: rgba(255, 252, 242, 0.11);
      color: #f4dfa7;
    }

    .ai-qa-chip-row button:disabled,
    .ai-qa-quick-head button:disabled,
    .ai-qa-composer button:disabled {
      opacity: 0.48;
      cursor: wait;
      box-shadow: none;
    }

    body.ai-qa-open .workspace {
      filter: saturate(0.92);
    }

    @media (max-width: 380px) {
      .ai-qa-panel {
        height: min(var(--ai-qa-height, 100dvh), 100dvh);
        max-height: 100dvh;
        padding-inline: 12px;
      }

      .ai-qa-context {
        grid-template-columns: 34px minmax(0, 1fr);
      }

      .ai-qa-context em {
        grid-column: 2;
        justify-self: start;
      }
    }

    .profile-sheet {
      position: relative;
      display: grid;
      gap: 16px;
      margin-top: 10px;
      padding: 14px 0 0;
    }

    .profile-horse {
      position: absolute;
      right: -18px;
      top: 8px;
      width: 160px;
      opacity: 0.24;
      mix-blend-mode: multiply;
    }

    .profile-name {
      font-family: Georgia, var(--serif);
      font-size: 30px;
      line-height: 1;
    }

    .profile-grid {
      display: grid;
      grid-template-columns: 76px 1fr;
      gap: 12px 20px;
      width: 220px;
      color: rgba(24, 23, 21, 0.72);
      font-size: 13px;
    }

    .profile-grid strong {
      color: var(--ink);
      font-weight: 600;
    }

    .fortune-paper {
      padding: 18px 16px;
      border: 1px solid rgba(173, 138, 77, 0.18);
      background: rgba(255, 252, 247, 0.62);
      box-shadow: 0 14px 38px rgba(54, 44, 32, 0.06);
    }

    .stamp-row,
    .element-stamp-row {
      display: flex;
      align-items: center;
      gap: 14px;
      flex-wrap: wrap;
    }

    .small-stem {
      display: grid;
      place-items: center;
      width: 38px;
      height: 38px;
      border: 1px solid currentColor;
      border-radius: 50%;
      font-family: var(--serif);
      font-size: 22px;
      font-weight: 800;
    }

    .element-stamp {
      display: grid;
      gap: 7px;
      justify-items: center;
      color: rgba(24, 23, 21, 0.6);
      font-family: var(--serif);
      font-size: 12px;
    }

    .element-stamp b {
      display: grid;
      place-items: center;
      width: 34px;
      height: 34px;
      border-radius: 50%;
      color: #fffaf1;
      font-size: 18px;
    }

    .element-stamp.wood b { background: var(--wood); }
    .element-stamp.fire b { background: var(--fire); }
    .element-stamp.earth b { background: var(--earth); }
    .element-stamp.metal b { background: var(--metal); }
    .element-stamp.water b { background: var(--water); }

    .spacetime-tabs {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      margin: 6px 0 18px;
    }

    .spacetime-tabs button {
      min-height: 34px;
      border: 1px solid rgba(173, 138, 77, 0.3);
      border-radius: 999px;
      background: rgba(255, 252, 247, 0.74);
      color: rgba(24, 23, 21, 0.62);
      font-family: var(--serif);
      letter-spacing: 0.12em;
    }

    .spacetime-tabs .active {
      border-color: var(--seal);
      color: var(--seal);
      box-shadow: inset 0 0 0 1px rgba(167, 52, 39, 0.06);
    }

    .spacetime-art {
      display: block;
      width: min(100%, 308px);
      margin: 12px auto 16px;
      mix-blend-mode: multiply;
    }

    .spacetime-copy {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
      color: rgba(24, 23, 21, 0.66);
      font-size: 13px;
      line-height: 1.7;
    }

    .spacetime-copy strong {
      display: block;
      margin-bottom: 3px;
      color: var(--ink);
      font-family: var(--serif);
      font-size: 16px;
    }

    .season-art {
      display: block;
      width: min(100%, 338px);
      margin: 22px auto 18px;
      mix-blend-mode: multiply;
    }

    .season-picker {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 8px;
      width: min(100%, 324px);
      margin: 0 auto;
    }

    .season-pill {
      display: grid;
      gap: 4px;
      justify-items: center;
      min-height: 58px;
      padding: 5px 0;
      border: 0;
      background: transparent;
      color: rgba(24, 23, 21, 0.58);
      font-family: var(--serif);
      text-align: center;
      cursor: pointer;
    }

    .season-pill .season-name {
      display: grid;
      place-items: center;
      width: 30px;
      height: 30px;
      border: 1px solid rgba(24, 23, 21, 0.16);
      border-radius: 50%;
      background: rgba(255, 252, 247, 0.64);
      font-size: 18px;
      font-weight: 800;
      line-height: 1;
      transition: transform 360ms var(--ease), border-color 360ms var(--ease), background 360ms var(--ease), box-shadow 360ms var(--ease);
    }

    .season-pill .season-key {
      font-size: 12px;
      line-height: 1;
      white-space: nowrap;
      letter-spacing: 0.08em;
    }

    .season-pill.spring { color: var(--wood); }
    .season-pill.summer { color: var(--fire); }
    .season-pill.autumn { color: var(--earth); }
    .season-pill.winter { color: var(--metal); }

    .season-mini-art {
      width: 100%;
      margin: 4px auto 12px;
    }

    .season-mini-art .season-art {
      width: min(100%, 280px);
      margin: 0 auto;
    }

    .season-detail-art {
      display: block;
      width: min(56%, 156px);
      margin: 12px auto 16px;
      mix-blend-mode: multiply;
      filter: drop-shadow(0 16px 28px rgba(54, 44, 32, 0.08));
    }

    .season-detail-copy {
      display: grid;
      gap: 14px;
      margin: 0 auto;
      max-width: 316px;
      font-family: var(--serif);
      color: rgba(24, 23, 21, 0.68);
      font-size: 14px;
      line-height: 1.82;
      letter-spacing: 0.04em;
    }

    .season-detail-copy h2 {
      margin: 0;
      color: var(--ink);
      font-size: 20px;
      letter-spacing: 0.08em;
    }

    .season-detail-copy p {
      margin: 0;
    }

    .season-advice {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      margin-top: 4px;
      padding-top: 14px;
      border-top: 1px solid rgba(24, 23, 21, 0.1);
    }

    .season-advice strong {
      display: block;
      margin-bottom: 4px;
      color: var(--wood);
      font-size: 16px;
    }

    .season-advice p {
      font-size: 13px;
      line-height: 1.62;
    }

    .oracle-screen {
      min-height: var(--screen-min-height);
      padding-bottom: var(--screen-bottom-gutter);
      font-family: var(--serif);
    }

    .oracle-screen[data-screen="oracle-cast"] {
      padding-bottom: calc(var(--screen-bottom-gutter) + 10px);
      overflow-x: hidden;
    }

    .oracle-screen[data-screen="oracle"],
    .oracle-screen[data-screen="oracle-question"],
    .oracle-screen[data-screen="dream"],
    .oracle-screen[data-screen="dream-result"] {
      padding-inline: 18px;
      padding-bottom: var(--screen-bottom-gutter);
      overflow: hidden;
      background:
        radial-gradient(circle at 50% 20%, rgba(255, 255, 255, 0.64), transparent 35%),
        radial-gradient(circle at 86% 34%, rgba(173, 138, 77, 0.09), transparent 26%),
        radial-gradient(circle at 12% 58%, rgba(255, 255, 255, 0.62), transparent 30%);
    }

    .workspace[data-current-route="oracle"] .oracle-screen[data-screen="oracle"],
    .workspace[data-current-route="oracle-question"] .oracle-screen[data-screen="oracle-question"],
    .workspace[data-current-route="dream"] .oracle-screen[data-screen="dream"],
    .workspace[data-current-route="dream-result"] .oracle-screen[data-screen="dream-result"] {
      min-height: var(--screen-min-height);
    }

    .oracle-screen[data-screen="oracle"] .fortune-top,
    .oracle-screen[data-screen="oracle-question"] .fortune-top,
    .oracle-screen[data-screen="dream"] .fortune-top,
    .oracle-screen[data-screen="dream-result"] .fortune-top {
      grid-template-columns: 42px minmax(0, 1fr) 42px;
      min-height: 48px;
      margin-bottom: 0;
    }

    .oracle-screen[data-screen="oracle"] .section-top-primary {
      grid-template-columns: 42px minmax(0, 1fr) 42px;
    }

    .oracle-screen[data-screen="oracle-question"] .fortune-title h1,
    .oracle-screen[data-screen="dream"] .fortune-title h1,
    .oracle-screen[data-screen="dream-result"] .fortune-title h1 {
      font-size: 32px;
      letter-spacing: 0.11em;
    }

    .oracle-screen[data-screen="oracle-question"] .fortune-title .sub,
    .oracle-screen[data-screen="dream"] .fortune-title .sub,
    .oracle-screen[data-screen="dream-result"] .fortune-title .sub {
      font-size: 15px;
      letter-spacing: 0.2em;
    }

    .oracle-screen[data-screen="oracle-question"] .seal,
    .oracle-screen[data-screen="dream"] .seal,
    .oracle-screen[data-screen="dream-result"] .seal {
      min-width: 22px;
      height: 27px;
      border-radius: 8px;
      font-size: 13px;
      vertical-align: 5px;
    }

    .oracle-screen[data-screen="oracle"] .oracle-history-button,
    .oracle-screen[data-screen="oracle-question"] .oracle-history-button,
    .oracle-screen[data-screen="dream"] .oracle-history-button,
    .oracle-screen[data-screen="dream-result"] .oracle-history-button {
      width: 42px;
      height: 42px;
      border-radius: 15px;
      background:
        linear-gradient(180deg, rgba(255, 252, 247, 0.94), rgba(246, 239, 226, 0.72));
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.8),
        0 12px 26px rgba(54, 44, 32, 0.12);
    }

    .oracle-history-button {
      color: rgba(24, 23, 21, 0.86);
    }

    .oracle-history-button svg {
      width: 22px;
      height: 22px;
      stroke-width: 2.05;
    }

    .oracle-copy {
      position: relative;
      max-width: 320px;
      margin: 14px auto 0;
      color: rgba(24, 23, 21, 0.72);
      font-size: 20px;
      line-height: 1.62;
      text-align: center;
      letter-spacing: 0.09em;
    }

    .oracle-copy::after {
      content: "";
      display: block;
      width: 112px;
      height: 12px;
      margin: 14px auto -2px;
      background:
        radial-gradient(circle at 50% 50%, var(--seal) 0 3px, transparent 3.5px),
        linear-gradient(90deg, transparent, rgba(167, 52, 39, 0.38), transparent);
      background-size: 20px 12px, 100% 1px;
      background-position: center, center;
      background-repeat: no-repeat;
      opacity: 0.72;
    }

    .oracle-hero {
      position: relative;
      z-index: 2;
      min-height: 324px;
      margin: 2px -34px 0;
      overflow: hidden;
    }

    .oracle-altar-art {
      position: absolute;
      left: 50%;
      bottom: -30px;
      width: 346px;
      transform: translateX(-50%);
      mix-blend-mode: multiply;
      filter: drop-shadow(0 18px 30px rgba(54, 44, 32, 0.1));
    }

    .oracle-entry-visual {
      position: absolute;
      inset: -6px 0 0;
      isolation: isolate;
      pointer-events: none;
    }

    .oracle-entry-visual::before,
    .oracle-entry-visual::after {
      content: "";
      position: absolute;
      z-index: 0;
      opacity: 0.28;
      mix-blend-mode: multiply;
      pointer-events: none;
    }

    .oracle-entry-visual::before {
      left: 16px;
      top: 68px;
      width: 120px;
      height: 150px;
      border-radius: 50%;
      background:
        radial-gradient(ellipse at 50% 20%, rgba(120, 112, 96, 0.2), transparent 45%),
        linear-gradient(135deg, transparent 42%, rgba(120, 112, 96, 0.12) 43% 47%, transparent 48%);
      transform: rotate(-14deg);
    }

    .oracle-entry-visual::after {
      right: 32px;
      top: 122px;
      width: 88px;
      height: 62px;
      background:
        radial-gradient(circle at 28% 36%, rgba(120, 112, 96, 0.65) 0 2px, transparent 2.5px),
        radial-gradient(circle at 62% 24%, rgba(120, 112, 96, 0.56) 0 2px, transparent 2.5px),
        radial-gradient(circle at 78% 58%, rgba(120, 112, 96, 0.5) 0 2px, transparent 2.5px);
    }

    .oracle-entry-focus {
      position: absolute;
      left: 50%;
      top: -46px;
      z-index: 1;
      width: min(390px, 96vw);
      max-width: none;
      transform: translateX(-50%);
      filter: drop-shadow(0 24px 34px rgba(54, 44, 32, 0.12));
      mix-blend-mode: multiply;
    }

    .oracle-entry-coins {
      position: absolute;
      left: 50%;
      top: 54px;
      z-index: 2;
      width: 226px;
      height: 166px;
      transform: translateX(-50%);
      filter: drop-shadow(0 14px 14px rgba(24, 23, 21, 0.18));
    }

    .oracle-entry-coin {
      position: absolute;
      display: block;
      width: 92px;
      aspect-ratio: 1;
      border-radius: 50%;
    }

    .oracle-entry-coin img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: contain;
    }

    .oracle-entry-coin:nth-child(1) {
      left: 67px;
      top: 0;
      transform: rotate(-3deg);
    }

    .oracle-entry-coin:nth-child(2) {
      left: 18px;
      top: 76px;
      transform: rotate(-10deg);
    }

    .oracle-entry-coin:nth-child(3) {
      right: 18px;
      top: 74px;
      transform: rotate(7deg);
    }

    .oracle-query {
      position: relative;
      z-index: 1;
      isolation: isolate;
      display: grid;
      gap: 11px;
      margin-top: -22px;
      padding: 27px 18px 20px;
    }

    .oracle-query::before {
      content: "";
      position: absolute;
      inset: -5px -7px -4px;
      z-index: -1;
      border-radius: 24px;
      background: url("../assets/oracle-ink/oracle-query-frame-metal-jade-v1.webp") center / 100% 100% no-repeat;
      filter: drop-shadow(0 14px 22px rgba(71, 53, 28, 0.13));
      pointer-events: none;
    }

    .oracle-question {
      position: relative;
      min-height: 246px;
      padding: 17px 5px 0;
      border: 0;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
      transition: filter 180ms ease;
    }

    .oracle-question.is-invalid {
      filter: drop-shadow(0 0 14px rgba(167, 52, 39, 0.16));
    }

    .oracle-question-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      margin-bottom: 7px;
    }

    .oracle-question strong {
      display: inline-flex;
      margin-bottom: 0;
      color: var(--wood);
      font-size: 20px;
      font-weight: 900;
      letter-spacing: 0.12em;
    }

    .oracle-question span {
      color: rgba(24, 23, 21, 0.72);
      font-size: 18px;
      letter-spacing: 0.05em;
    }

    .oracle-question small {
      display: block;
      margin-bottom: 12px;
      color: rgba(24, 23, 21, 0.45);
      font-family: var(--sans);
      font-size: 14px;
      letter-spacing: 0.08em;
    }

    .oracle-question-hint {
      display: flex;
      align-items: center;
      gap: 9px;
      margin: 0 0 13px;
      color: rgba(24, 23, 21, 0.58);
      font-family: var(--serif);
      font-size: 14px;
      letter-spacing: 0.08em;
    }

    .oracle-question-hint i {
      display: inline-grid;
      place-items: center;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: rgba(173, 138, 77, 0.22);
      color: rgba(113, 93, 62, 0.82);
      font-style: normal;
      font-size: 12px;
      letter-spacing: 0;
    }

    .oracle-question-hint::after {
      content: "";
      flex: 1;
      height: 1px;
      background:
        linear-gradient(90deg, rgba(173, 138, 77, 0.2), transparent);
    }

    .oracle-input-shell {
      position: relative;
      overflow: hidden;
      min-height: 96px;
      border: 0.75px solid rgba(144, 113, 63, 0.26);
      border-radius: 16px;
      background:
        radial-gradient(circle at 91% 82%, rgba(76, 139, 102, 0.08), transparent 24%),
        linear-gradient(180deg, rgba(255, 252, 247, 0.66), rgba(250, 241, 224, 0.42));
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.7),
        0 1px 0 rgba(255, 255, 255, 0.36);
    }

    .oracle-question-input {
      display: block;
      width: 100%;
      height: 96px;
      min-height: 96px;
      border: 0;
      border-radius: 0;
      padding: 15px 16px;
      resize: none;
      outline: none;
      background: transparent;
      color: rgba(24, 23, 21, 0.78);
      font-family: var(--serif);
      font-size: 15px;
      line-height: 1.55;
      letter-spacing: 0.05em;
      box-shadow: none;
    }

    .oracle-question-input::placeholder {
      color: rgba(24, 23, 21, 0.36);
    }

    .oracle-voice-status {
      display: block;
      min-height: 18px;
      margin-top: 8px;
      color: rgba(24, 23, 21, 0.45);
      font-family: var(--sans);
      font-size: 12px;
      font-style: normal;
      letter-spacing: 0.04em;
    }

    .oracle-focus-panel {
      display: grid;
      gap: 12px;
      margin-top: 12px;
      padding: 14px 0 2px;
      border-top: 1px solid rgba(24, 23, 21, 0.1);
    }

    .oracle-focus-panel[hidden] {
      display: none;
    }

    .oracle-focus-panel strong {
      color: var(--seal);
      font-size: 17px;
      letter-spacing: 0.08em;
    }

    .oracle-focus-panel p {
      margin: 0;
      color: rgba(24, 23, 21, 0.62);
      font-size: 14px;
      line-height: 1.72;
      letter-spacing: 0.04em;
    }

    .oracle-focus-chips {
      display: grid;
      gap: 8px;
    }

    .oracle-focus-chip {
      width: 100%;
      border: 1px solid rgba(173, 138, 77, 0.26);
      border-radius: 999px;
      padding: 10px 14px;
      background: rgba(255, 252, 247, 0.52);
      color: rgba(24, 23, 21, 0.72);
      font-family: var(--serif);
      font-size: 14px;
      line-height: 1.35;
      text-align: left;
      letter-spacing: 0.04em;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.62);
    }

    .oracle-focus-chip:focus-visible,
    .oracle-focus-chip:hover {
      outline: none;
      border-color: rgba(167, 52, 39, 0.34);
      color: var(--seal);
      background: rgba(255, 252, 247, 0.82);
    }

    .oracle-voice-button {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      min-height: 38px;
      padding: 0 14px;
      border: 1px solid rgba(76, 139, 102, 0.3);
      border-radius: 999px;
      background:
        linear-gradient(180deg, rgba(255, 252, 247, 0.88), rgba(244, 249, 242, 0.58));
      color: var(--wood);
      font-family: var(--sans);
      font-size: 15px;
      font-weight: 700;
      letter-spacing: 0.08em;
      cursor: pointer;
      transition: transform 180ms ease, border-color 180ms ease, background 180ms ease, color 180ms ease;
    }

    .oracle-voice-button svg {
      width: 18px;
      height: 18px;
      stroke-width: 2.1;
    }

    .oracle-voice-button.is-listening {
      border-color: rgba(167, 52, 39, 0.36);
      background: rgba(167, 52, 39, 0.08);
      color: var(--seal);
    }

    .oracle-voice-button:active {
      transform: translateY(1px) scale(0.98);
    }

    .oracle-topic-row {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 8px;
    }

    .oracle-topic {
      display: grid;
      place-items: center;
      min-height: 40px;
      padding: 0;
      border: 1px solid rgba(24, 23, 21, 0.12);
      border-radius: 999px;
      background: rgba(255, 252, 247, 0.48);
      color: rgba(24, 23, 21, 0.58);
      font-family: inherit;
      font-size: 13px;
      letter-spacing: 0.08em;
      cursor: pointer;
      transition: border-color 180ms ease, color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
    }

    .oracle-topic:active {
      transform: translateY(1px);
    }

    .oracle-topic.active {
      border-color: rgba(167, 52, 39, 0.34);
      color: var(--seal);
      box-shadow: inset 0 0 0 1px rgba(167, 52, 39, 0.08);
    }

    .oracle-button {
      display: grid;
      place-items: center;
      width: 218px;
      min-height: 46px;
      margin: 18px auto 0;
      border: 1px solid rgba(113, 93, 62, 0.28);
      border-radius: 999px;
      background: linear-gradient(180deg, #bea06a, #9f7b41);
      color: #fffaf1;
      font-size: 16px;
      font-weight: 800;
      letter-spacing: 0.14em;
      box-shadow: 0 14px 30px rgba(113, 93, 62, 0.18);
      cursor: pointer;
      transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease, opacity 180ms ease;
    }

    .oracle-button:active {
      transform: translateY(1px) scale(0.99);
    }

    .oracle-button:disabled {
      opacity: 0.46;
      cursor: not-allowed;
      filter: grayscale(0.25);
      box-shadow: none;
    }

    .oracle-button.ritual {
      position: relative;
      display: grid;
      grid-template-columns: 66px 1fr 48px;
      grid-template-areas: "kicker main seal";
      align-items: center;
      justify-items: center;
      column-gap: 8px;
      width: calc(100% - 14px);
      aspect-ratio: 1548 / 318;
      min-height: 0;
      margin: -1px auto 2px;
      padding: 8px 20px 10px 22px;
      overflow: visible;
      border: 0;
      border-radius: 20px;
      background: url("../assets/oracle-ink/oracle-cta-bar-metal-jade-v1.webp") center / 100% 100% no-repeat;
      color: var(--ink);
      box-shadow: none;
    }

    .oracle-button.ritual::before {
      content: none;
    }

    .oracle-button.ritual::after {
      content: none;
    }

    .ritual-button-kicker,
    .ritual-button-main,
    .ritual-button-seal {
      position: relative;
      z-index: 1;
    }

    .ritual-button-kicker {
      grid-area: kicker;
      display: grid;
      gap: 3px;
      justify-items: center;
      width: 52px;
      padding-right: 10px;
      border-right: 0;
      background: transparent;
      color: var(--wood);
      font-family: var(--serif);
      font-size: 13px;
      font-weight: 800;
      letter-spacing: 0.14em;
      line-height: 1.1;
    }

    .ritual-button-main {
      grid-area: main;
      align-self: center;
      color: var(--ink);
      font-size: 24px;
      font-weight: 900;
      letter-spacing: 0.08em;
      justify-self: center;
      transform: translateY(-1px);
    }

    .ritual-button-seal {
      position: absolute;
      z-index: 2;
      right: calc(14.7% - 22px);
      top: 50%;
      display: grid;
      place-items: center;
      width: 44px;
      height: 44px;
      border: 0;
      border-radius: 50%;
      background: transparent;
      color: #fffaf1;
      font-style: normal;
      font-size: 22px;
      font-weight: 900;
      letter-spacing: 0;
      line-height: 1;
      transform: translateY(-52%);
      text-shadow:
        0 1px 1px rgba(73, 20, 16, 0.36),
        0 0 8px rgba(255, 250, 238, 0.18);
    }

    .oracle-hub-hero {
      position: relative;
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      align-items: center;
      gap: 8px;
      min-height: 148px;
      margin: 8px -18px 2px;
      padding: 18px 26px 30px 34px;
      overflow: hidden;
    }

    .oracle-hub-hero div {
      position: relative;
      z-index: 2;
      display: grid;
      gap: 7px;
    }

    .oracle-hub-hero strong {
      color: var(--ink);
      font-size: 26px;
      line-height: 1.16;
      letter-spacing: 0.1em;
    }

    .oracle-hub-hero span {
      max-width: 17em;
      color: rgba(24, 23, 21, 0.58);
      font-family: var(--sans);
      font-size: 13px;
      line-height: 1.65;
      letter-spacing: 0.04em;
    }

    .oracle-hub-bg {
      position: absolute;
      left: -24px;
      bottom: -28px;
      z-index: 0;
      width: calc(100% + 72px);
      height: auto;
      opacity: 0.68;
      mix-blend-mode: multiply;
      -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 54%, rgba(0, 0, 0, 0.44) 74%, transparent 100%);
      mask-image: linear-gradient(180deg, #000 0%, #000 54%, rgba(0, 0, 0, 0.44) 74%, transparent 100%);
      pointer-events: none;
    }

    .oracle-entry-grid {
      display: grid;
      gap: 10px;
      margin-top: 14px;
    }

    .oracle-entry-card {
      position: relative;
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      align-items: center;
      min-height: 106px;
      width: 100%;
      padding: 14px 16px 12px 22px;
      overflow: hidden;
      border: 1px solid rgba(113, 93, 62, 0.14);
      border-radius: 8px;
      background: rgba(255, 252, 247, 0.34);
      color: inherit;
      font-family: var(--serif);
      text-align: left;
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.68),
        0 14px 30px rgba(54, 44, 32, 0.08);
      cursor: pointer;
      transition: transform 220ms var(--ease), border-color 220ms var(--ease), box-shadow 220ms var(--ease);
    }

    .oracle-entry-card-bg {
      position: absolute;
      right: -12px;
      top: 50%;
      z-index: 0;
      width: 198px;
      opacity: 0.74;
      mix-blend-mode: multiply;
      filter: saturate(1.08) contrast(1.04);
      transform: translateY(-50%);
      pointer-events: none;
    }

    .oracle-entry-card-dream .oracle-entry-card-bg {
      right: -22px;
      width: 218px;
      opacity: 0.72;
    }

    .oracle-entry-card:active {
      transform: translateY(1px) scale(0.99);
    }

    .oracle-entry-card:hover,
    .oracle-entry-card:focus-visible {
      outline: none;
      border-color: rgba(76, 139, 102, 0.24);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.76),
        0 18px 38px rgba(54, 44, 32, 0.12);
    }

    .oracle-entry-card-copy {
      position: relative;
      z-index: 2;
      display: grid;
      gap: 3px;
      justify-items: start;
      min-width: 0;
    }

    .oracle-entry-card-copy small {
      color: rgba(167, 52, 39, 0.76);
      font-family: var(--sans);
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.1em;
    }

    .oracle-entry-card-copy strong {
      color: var(--ink);
      font-size: 24px;
      line-height: 1.08;
      letter-spacing: 0.1em;
    }

    .oracle-entry-card-copy em {
      color: rgba(24, 23, 21, 0.58);
      font-style: normal;
      font-size: 14px;
      line-height: 1.38;
      letter-spacing: 0.08em;
    }

    .oracle-entry-arrow {
      display: grid;
      place-items: center;
      width: 24px;
      height: 24px;
      margin-top: 4px;
      border: 1px solid rgba(76, 139, 102, 0.28);
      border-radius: 50%;
      color: var(--wood);
      background: rgba(255, 252, 247, 0.62);
    }

    .oracle-entry-arrow svg {
      width: 15px;
      height: 15px;
      fill: none;
      stroke: currentColor;
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-width: 2.1;
      transform: rotate(180deg);
    }

    .oracle-recent-panel {
      margin-top: 18px;
      padding-top: 16px;
      border-top: 1px solid rgba(24, 23, 21, 0.1);
    }

    .oracle-recent-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      margin-bottom: 8px;
    }

    .oracle-recent-head strong {
      display: inline-flex;
      align-items: center;
      min-width: 0;
      gap: 6px;
      color: var(--ink);
      font-size: 20px;
      letter-spacing: 0.1em;
      white-space: nowrap;
    }

    .oracle-recent-head strong svg {
      flex: 0 0 auto;
      width: 24px;
      height: 24px;
      fill: none;
      stroke: currentColor;
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-width: 1.8;
    }

    .oracle-recent-head strong img {
      width: 30px;
      height: 30px;
      object-fit: contain;
      opacity: 0.78;
      mix-blend-mode: multiply;
    }

    .oracle-recent-head button {
      flex: 0 0 auto;
      border: 0;
      background: transparent;
      color: rgba(76, 139, 102, 0.86);
      font-family: var(--sans);
      font-size: 12px;
      font-weight: 800;
      letter-spacing: 0.08em;
      white-space: nowrap;
    }

    .oracle-recent-list {
      display: grid;
      gap: 0;
      border-top: 1px solid rgba(24, 23, 21, 0.08);
    }

    .oracle-recent-list button,
    .oracle-recent-empty {
      display: grid;
      grid-template-columns: 42px minmax(0, 1fr);
      gap: 10px;
      align-items: center;
      width: 100%;
      min-height: 62px;
      padding: 10px 0;
      border: 0;
      border-bottom: 1px solid rgba(24, 23, 21, 0.08);
      background: transparent;
      color: inherit;
      font-family: var(--serif);
      text-align: left;
    }

    .oracle-recent-list button span {
      display: grid;
      place-items: center;
      width: 38px;
      height: 38px;
      overflow: hidden;
      border: 1px solid rgba(76, 139, 102, 0.18);
      border-radius: 50%;
      background: rgba(255, 252, 247, 0.5);
    }

    .oracle-recent-list button span img {
      width: 44px;
      max-width: none;
      opacity: 0.9;
      mix-blend-mode: multiply;
    }

    .oracle-recent-list button .oracle-recent-kind .oracle-recent-kind-icon {
      width: 34px;
      height: 34px;
      max-width: none;
      object-fit: contain;
      opacity: 1;
      mix-blend-mode: multiply;
    }

    .oracle-recent-list button strong {
      min-width: 0;
      color: rgba(24, 23, 21, 0.74);
      font-size: 15px;
      line-height: 1.35;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .oracle-recent-list button small {
      grid-column: 2;
      color: rgba(24, 23, 21, 0.44);
      font-family: var(--sans);
      font-size: 12px;
      letter-spacing: 0.05em;
    }

    .oracle-recent-empty {
      grid-template-columns: 1fr;
      color: rgba(24, 23, 21, 0.52);
      font-family: var(--sans);
      font-size: 13px;
      line-height: 1.6;
      text-align: center;
    }

    .oracle-screen[data-screen="oracle"] {
      background: #f7f2ea;
    }

    .oracle-screen[data-screen="oracle"]::before,
    .dream-screen[data-screen="dream"]::before {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      z-index: 0;
      width: 100%;
      pointer-events: none;
      background-repeat: no-repeat;
      background-size: 100% auto;
    }

    .oracle-screen[data-screen="oracle"]::before {
      height: 410px;
      background-image: url("/prototype/assets/oracle-ink/hub/oracle-hub-top-panel-v2.webp");
      background-position: center 22px;
      background-size: 112% auto;
      opacity: 0.94;
      -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 8%, #000 82%, rgba(0, 0, 0, 0.72) 94%, transparent 100%);
      mask-image: linear-gradient(180deg, transparent 0%, #000 8%, #000 82%, rgba(0, 0, 0, 0.72) 94%, transparent 100%);
    }

    .oracle-screen[data-screen="oracle"] > * {
      position: relative;
      z-index: 1;
    }

    .dream-screen {
      overflow-x: hidden;
    }

    .dream-screen[data-screen="dream"] {
      background:
        linear-gradient(180deg, #f4ede3 0%, #f6f0e8 46%, #f7f2ea 100%);
    }

    .dream-screen[data-screen="dream"]::before {
      height: clamp(560px, 76dvh, 700px);
      background-image: url("/prototype/assets/oracle-ink/dream/dream-entry-mist-v1.webp");
      background-position: center top;
      background-size: 116% auto;
      opacity: 0.9;
      -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 58%, rgba(0, 0, 0, 0.64) 74%, rgba(0, 0, 0, 0.2) 90%, transparent 100%);
      mask-image: linear-gradient(180deg, #000 0%, #000 58%, rgba(0, 0, 0, 0.64) 74%, rgba(0, 0, 0, 0.2) 90%, transparent 100%);
    }

    .dream-screen[data-screen="dream"] > * {
      position: relative;
      z-index: 1;
    }

    .dream-entry-hero {
      position: relative;
      min-height: 194px;
      margin: 6px -18px 0;
      pointer-events: none;
    }

    .dream-entry-bg {
      position: absolute;
      right: -36px;
      top: -18px;
      width: 244px;
      opacity: 0.34;
      mix-blend-mode: multiply;
      -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.72) 62%, transparent 100%);
      mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.72) 62%, transparent 100%);
      filter: drop-shadow(0 16px 18px rgba(54, 44, 32, 0.08));
    }

    .dream-entry-journal {
      position: absolute;
      right: -8px;
      top: -8px;
      width: 144px;
      opacity: 0.86;
      mix-blend-mode: multiply;
      filter: drop-shadow(0 18px 22px rgba(54, 44, 32, 0.1));
      transform: rotate(-7deg);
    }

    .dream-form {
      position: relative;
      z-index: 1;
      display: grid;
      gap: 14px;
      margin-top: 0;
    }

    .dream-field {
      position: relative;
      display: grid;
      gap: 8px;
    }

    .dream-field > span,
    .dream-emotion-group strong,
    .dream-transcript span {
      color: var(--wood);
      font-size: 18px;
      font-weight: 900;
      letter-spacing: 0.1em;
    }

    .dream-field textarea,
    .dream-field input,
    .dream-transcript textarea {
      width: 100%;
      border: 1px solid rgba(113, 93, 62, 0.18);
      border-radius: 8px;
      outline: none;
      background:
        linear-gradient(180deg, rgba(255, 252, 247, 0.96), rgba(249, 244, 235, 0.92));
      color: rgba(24, 23, 21, 0.76);
      font-family: var(--serif);
      font-size: 15px;
      line-height: 1.68;
      letter-spacing: 0.04em;
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.78),
        0 10px 24px rgba(72, 54, 32, 0.04);
    }

    .dream-field textarea {
      min-height: 168px;
      padding: 17px 16px 58px;
      resize: vertical;
    }

    .dream-field input {
      min-height: 50px;
      padding: 0 15px;
    }

    .dream-field textarea::placeholder,
    .dream-field input::placeholder,
    .dream-transcript textarea::placeholder {
      color: rgba(24, 23, 21, 0.36);
    }

    .dream-field.is-invalid textarea {
      border-color: rgba(167, 52, 39, 0.42);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.68),
        0 0 0 3px rgba(167, 52, 39, 0.08);
    }

    .dream-field.is-invalid input {
      border-color: rgba(167, 52, 39, 0.42);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.68),
        0 0 0 3px rgba(167, 52, 39, 0.08);
    }

    .dream-voice-button {
      position: absolute;
      right: 14px;
      bottom: 14px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      width: auto;
      min-height: 36px;
      padding: 0 12px 0 9px;
      border: 1px solid rgba(76, 139, 102, 0.24);
      border-radius: 999px;
      background:
        linear-gradient(180deg, rgba(255, 252, 247, 0.94), rgba(244, 249, 242, 0.76));
      color: var(--wood);
      font-family: var(--sans);
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.04em;
      box-shadow: 0 8px 16px rgba(54, 44, 32, 0.08);
    }

    .dream-voice-orb {
      display: grid;
      place-items: center;
      width: 22px;
      height: 22px;
      border-radius: 50%;
      background: rgba(76, 93, 75, 0.12);
      color: rgba(45, 58, 47, 0.82);
    }

    .dream-voice-button svg {
      width: 15px;
      height: 15px;
      fill: none;
      stroke: currentColor;
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-width: 1.9;
    }

    .dream-voice-button b {
      white-space: nowrap;
    }

    .dream-voice-button.is-listening {
      border-color: rgba(167, 52, 39, 0.34);
      color: var(--seal);
      background: rgba(255, 247, 242, 0.9);
    }

    .dream-helper {
      min-height: 18px;
      margin: -6px 2px 0;
      color: rgba(24, 23, 21, 0.48);
      font-family: var(--sans);
      font-size: 12px;
      line-height: 1.55;
      letter-spacing: 0.04em;
    }

    .dream-emotion-group {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 8px;
    }

    .dream-emotion-group strong {
      grid-column: 1 / -1;
    }

    .dream-emotion-group button {
      min-height: 42px;
      border: 1px solid rgba(113, 93, 62, 0.16);
      border-radius: 8px;
      background: rgba(255, 252, 247, 0.54);
      color: rgba(24, 23, 21, 0.62);
      font-family: var(--serif);
      font-size: 13px;
      font-weight: 800;
      letter-spacing: 0.06em;
    }

    .dream-emotion-group button.is-active {
      border-color: rgba(167, 52, 39, 0.32);
      color: var(--seal);
      background: rgba(255, 247, 242, 0.82);
      box-shadow: inset 0 0 0 1px rgba(167, 52, 39, 0.06);
    }

    .dream-other-emotion-field[hidden] {
      display: none;
    }

    .dream-voice-panel {
      position: fixed;
      left: 50%;
      right: auto;
      bottom: calc(var(--nav-height) + 12px);
      z-index: 120;
      display: grid;
      gap: 12px;
      width: min(calc(100vw - 32px), 386px);
      max-height: min(58dvh, 420px);
      margin: 0;
      padding: 18px 16px 16px;
      overflow-x: hidden;
      overflow-y: auto;
      border: 1px solid rgba(113, 93, 62, 0.14);
      border-radius: 16px;
      background:
        linear-gradient(180deg, rgba(255, 252, 247, 0.96), rgba(246, 240, 229, 0.94));
      box-shadow:
        0 28px 70px rgba(54, 44, 32, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.78);
      transform: translateX(-50%);
      backdrop-filter: blur(18px);
    }

    .dream-voice-panel[hidden] {
      display: none;
    }

    .dream-voice-panel > img {
      position: absolute;
      right: -42px;
      bottom: -12px;
      width: 260px;
      opacity: 0.32;
      mix-blend-mode: multiply;
      pointer-events: none;
    }

    .dream-voice-panel > strong {
      position: relative;
      z-index: 1;
      color: var(--ink);
      font-size: 19px;
      letter-spacing: 0.1em;
      text-align: center;
    }

    .dream-wave {
      position: relative;
      z-index: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 2px;
      height: 54px;
      padding: 0 4px;
    }

    .dream-wave i {
      width: 2px;
      height: var(--voice-level, 8px);
      min-height: 3px;
      max-height: 48px;
      border-radius: 999px;
      background: rgba(62, 91, 72, 0.72);
      transition: height 70ms linear, opacity 100ms linear;
    }

    .dream-wave:not(.is-live) i {
      opacity: 0.48;
    }

    .dream-voice-actions {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
    }

    .dream-voice-actions button,
    .dream-report-actions button {
      min-height: 42px;
      border: 1px solid rgba(76, 139, 102, 0.22);
      border-radius: 999px;
      background: rgba(255, 252, 247, 0.7);
      color: var(--wood);
      font-family: var(--serif);
      font-size: 15px;
      font-weight: 800;
      letter-spacing: 0.08em;
    }

    .dream-transcript {
      position: relative;
      z-index: 1;
      display: grid;
      gap: 8px;
    }

    .dream-transcript textarea {
      min-height: 86px;
      padding: 12px 13px;
      resize: vertical;
    }

    .dream-submit {
      min-height: 54px;
      margin-top: 2px;
      border: 1px solid rgba(76, 139, 102, 0.28);
      border-radius: 999px;
      background: linear-gradient(180deg, rgba(76, 111, 84, 0.95), rgba(53, 84, 65, 0.96));
      color: #fffaf1;
      font-family: var(--serif);
      font-size: 20px;
      font-weight: 900;
      letter-spacing: 0.14em;
      box-shadow: 0 16px 30px rgba(53, 84, 65, 0.18);
    }

    .dream-report {
      position: relative;
      display: grid;
      gap: 16px;
      margin-top: 18px;
      padding-bottom: 10px;
    }

    .dream-report-wash {
      width: calc(100% + 36px);
      max-width: none;
      margin: -12px -18px 0;
      opacity: 0.62;
      mix-blend-mode: multiply;
      pointer-events: none;
    }

    .dream-report-symbol {
      width: 156px;
      margin: 0 auto -4px;
      opacity: 0.94;
      mix-blend-mode: multiply;
      filter: drop-shadow(0 14px 18px rgba(54, 44, 32, 0.08));
    }

    .dream-report-source {
      justify-self: center;
      min-height: 28px;
      padding: 5px 12px;
      border: 1px solid rgba(76, 139, 102, 0.18);
      border-radius: 999px;
      color: rgba(76, 93, 75, 0.8);
      background: rgba(255, 252, 247, 0.62);
      font-family: var(--sans);
      font-size: 12px;
      font-weight: 800;
      letter-spacing: 0.08em;
    }

    .dream-report-body {
      display: grid;
      gap: 0;
      border-top: 1px solid rgba(24, 23, 21, 0.1);
    }

    .dream-version-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      padding: 12px 0 0;
      border-bottom: 1px solid rgba(24, 23, 21, 0.08);
    }

    .dream-version-meta span {
      display: inline-flex;
      align-items: center;
      min-height: 26px;
      padding: 0 10px;
      border: 1px solid rgba(76, 139, 102, 0.16);
      border-radius: 999px;
      color: rgba(76, 93, 75, 0.82);
      background: rgba(255, 252, 247, 0.54);
      font-family: var(--sans);
      font-size: 12px;
      font-weight: 800;
      letter-spacing: 0.04em;
    }

    .dream-status-card {
      display: grid;
      gap: 12px;
      padding: 20px 0;
    }

    .dream-status-card h2 {
      margin: 0;
    }

    .dream-status-card blockquote {
      margin: 0;
      padding: 13px 14px;
      border: 1px solid rgba(113, 93, 62, 0.14);
      border-radius: 8px;
      background: rgba(255, 252, 247, 0.62);
      color: rgba(24, 23, 21, 0.66);
      font-size: 14px;
      line-height: 1.7;
    }

    .dream-status-card ul {
      display: grid;
      gap: 7px;
      margin: 0;
      padding-left: 1.2em;
      color: rgba(24, 23, 21, 0.62);
      font-size: 14px;
      line-height: 1.62;
    }

    .dream-status-card button {
      justify-self: start;
      min-height: 38px;
      padding: 0 16px;
      border: 1px solid rgba(76, 139, 102, 0.24);
      border-radius: 999px;
      background: rgba(255, 252, 247, 0.72);
      color: var(--wood);
      font-family: var(--serif);
      font-size: 14px;
      font-weight: 800;
      letter-spacing: 0.08em;
    }

    .dream-progress-lines {
      display: grid;
      gap: 8px;
      width: min(100%, 280px);
      padding: 8px 0 2px;
    }

    .dream-progress-lines i {
      display: block;
      height: 8px;
      border-radius: 999px;
      background: linear-gradient(90deg, rgba(76, 139, 102, 0.08), rgba(76, 139, 102, 0.26), rgba(76, 139, 102, 0.08));
      background-size: 220% 100%;
      animation: dreamProgressShimmer 1.35s ease-in-out infinite;
    }

    .dream-progress-lines i:nth-child(2) {
      width: 82%;
      animation-delay: 120ms;
    }

    .dream-progress-lines i:nth-child(3) {
      width: 64%;
      animation-delay: 240ms;
    }

    @keyframes dreamProgressShimmer {
      0% { background-position: 0% 50%; }
      100% { background-position: 220% 50%; }
    }

    .dream-uncertain-terms {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .dream-uncertain-terms span {
      min-height: 26px;
      padding: 4px 9px;
      border: 1px solid rgba(167, 52, 39, 0.16);
      border-radius: 999px;
      color: var(--seal);
      background: rgba(255, 247, 242, 0.64);
      font-family: var(--sans);
      font-size: 12px;
      font-weight: 800;
      letter-spacing: 0.04em;
    }

    .dream-report-body section {
      padding: 18px 0;
      border-bottom: 1px solid rgba(24, 23, 21, 0.1);
    }

    .dream-report-body h2 {
      margin: 0 0 10px;
      color: var(--ink);
      font-size: 21px;
      letter-spacing: 0.1em;
    }

    .dream-report-titleline {
      display: grid;
      gap: 8px;
    }

    .dream-report-titleline > span {
      color: var(--wood);
      font-family: var(--sans);
      font-size: 12px;
      font-weight: 800;
      letter-spacing: 0.18em;
    }

    .dream-report-titleline h2 {
      margin: 0;
      font-size: 26px;
      letter-spacing: 0.08em;
    }

    .dream-confidence {
      display: grid;
      gap: 3px;
      margin-top: 2px;
      padding-left: 10px;
      border-left: 2px solid rgba(77, 126, 91, 0.34);
    }

    .dream-confidence.is-low {
      border-left-color: rgba(167, 52, 39, 0.32);
    }

    .dream-confidence b {
      color: var(--wood);
      font-family: var(--sans);
      font-size: 12px;
      letter-spacing: 0.08em;
    }

    .dream-confidence span {
      color: rgba(24, 23, 21, 0.56);
      font-family: var(--sans);
      font-size: 12px;
      line-height: 1.58;
      letter-spacing: 0.02em;
    }

    .dream-report-body p,
    .dream-report-body li {
      margin: 0;
      color: rgba(24, 23, 21, 0.68);
      font-size: 15px;
      line-height: 1.86;
      letter-spacing: 0.05em;
    }

    .dream-report-body ol {
      display: grid;
      gap: 8px;
      margin: 0;
      padding-left: 1.3em;
    }

    .dream-symbol-list {
      display: grid;
      gap: 12px;
    }

    .dream-symbol-list article {
      display: grid;
      grid-template-columns: 66px minmax(0, 1fr);
      gap: 11px;
      align-items: start;
    }

    .dream-symbol-list img {
      width: 66px;
      height: 54px;
      object-fit: contain;
      opacity: 0.9;
      mix-blend-mode: multiply;
    }

    .dream-symbol-list strong {
      display: block;
      margin-bottom: 4px;
      color: var(--wood);
      font-size: 17px;
      letter-spacing: 0.1em;
    }

    .dream-symbol-list small {
      display: inline-flex;
      margin: 0 0 5px;
      color: rgba(24, 23, 21, 0.42);
      font-family: var(--sans);
      font-size: 11px;
      letter-spacing: 0.04em;
    }

    .dream-symbol-list .dream-symbol-evidence {
      display: block;
      color: rgba(24, 23, 21, 0.46);
    }

    .dream-symbol-advice {
      display: block;
      margin-top: 7px;
      color: rgba(77, 126, 91, 0.82);
      font-family: var(--sans);
      font-size: 12px;
      font-style: normal;
      line-height: 1.62;
      letter-spacing: 0.03em;
    }

    .dream-symbol-positive,
    .dream-symbol-classical {
      margin: 9px 0 0;
      padding: 9px 10px;
      border: 1px solid rgba(77, 126, 91, 0.16);
      border-radius: 8px;
      background: rgba(247, 244, 236, 0.58);
      color: rgba(24, 23, 21, 0.58);
      font-family: var(--sans);
      font-size: 12px;
      line-height: 1.7;
      letter-spacing: 0.03em;
    }

    .dream-symbol-classical {
      border-color: rgba(188, 86, 75, 0.16);
      background: rgba(255, 250, 241, 0.58);
    }

    .dream-symbol-positive b,
    .dream-symbol-classical b {
      display: block;
      margin-bottom: 3px;
      color: rgba(77, 126, 91, 0.88);
      font-size: 12px;
      letter-spacing: 0.08em;
    }

    .dream-symbol-classical b {
      color: rgba(188, 86, 75, 0.84);
    }

    .dream-symbol-positive p,
    .dream-symbol-classical p {
      margin: 0;
    }

    .dream-symbol-classical p + p {
      margin-top: 5px;
      color: rgba(24, 23, 21, 0.52);
    }

    .dream-qa-seeds {
      display: grid;
      gap: 9px;
    }

    .dream-qa-seeds button {
      width: 100%;
      min-height: 42px;
      padding: 8px 12px;
      border: 1px solid rgba(77, 126, 91, 0.24);
      border-radius: 8px;
      color: rgba(24, 23, 21, 0.7);
      background: rgba(252, 249, 239, 0.64);
      font-family: var(--sans);
      font-size: 13px;
      font-weight: 700;
      line-height: 1.46;
      letter-spacing: 0.02em;
      text-align: left;
    }

    .dream-report-disclaimer {
      margin: 0;
      padding: 12px 14px;
      border: 1px solid rgba(167, 52, 39, 0.12);
      border-radius: 8px;
      color: rgba(24, 23, 21, 0.58);
      background: rgba(255, 247, 242, 0.54);
      font-family: var(--sans);
      font-size: 12px;
      line-height: 1.62;
      letter-spacing: 0.04em;
      text-align: center;
    }

    .dream-report-closing {
      margin: 2px 0 0;
      padding: 2px 10px 14px;
      color: rgba(24, 23, 21, 0.62);
      font-family: var(--serif);
      font-size: 16px;
      line-height: 1.76;
      letter-spacing: 0.08em;
      text-align: center;
    }

    .dream-dialogue-log {
      padding-bottom: 6px;
    }

    .dream-dialogue-list {
      display: grid;
      gap: 12px;
    }

    .dream-dialogue-list article {
      display: grid;
      gap: 9px;
      padding: 13px;
      border: 1px solid rgba(77, 126, 91, 0.16);
      border-radius: 8px;
      background: rgba(252, 249, 239, 0.48);
    }

    .dream-dialogue-list header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      color: rgba(24, 23, 21, 0.44);
      font-family: var(--sans);
      font-size: 11px;
      letter-spacing: 0.04em;
    }

    .dream-dialogue-list header b {
      color: var(--wood);
      font-weight: 800;
    }

    .dream-dialogue-prompt,
    .dream-dialogue-user {
      padding: 9px 10px;
      border-radius: 8px;
      font-family: var(--sans);
      font-size: 13px;
      line-height: 1.62;
      letter-spacing: 0.02em;
    }

    .dream-dialogue-prompt {
      color: rgba(77, 126, 91, 0.9);
      background: rgba(77, 126, 91, 0.08);
    }

    .dream-dialogue-user {
      color: rgba(24, 23, 21, 0.68);
      background: rgba(255, 252, 247, 0.72);
    }

    .dream-dialogue-answer {
      display: grid;
      gap: 6px;
      padding-top: 2px;
    }

    .dream-dialogue-answer strong {
      color: var(--ink);
      font-size: 15px;
      letter-spacing: 0.08em;
    }

    .dream-dialogue-answer p {
      color: rgba(24, 23, 21, 0.62);
      font-size: 13px;
      line-height: 1.72;
    }

	    .dream-report-actions {
	      display: grid;
	      grid-template-columns: 1fr;
	      gap: 10px;
      position: sticky;
      bottom: calc(var(--nav-height) + 12px);
      z-index: 4;
      padding: 8px 0;
      background: linear-gradient(180deg, transparent, rgba(247, 242, 234, 0.96) 24%);
    }

    .dream-report-actions button:last-child {
      border-color: rgba(76, 139, 102, 0.34);
      background: linear-gradient(180deg, rgba(76, 111, 84, 0.95), rgba(53, 84, 65, 0.96));
      color: #fffaf1;
      box-shadow: 0 12px 24px rgba(53, 84, 65, 0.18);
    }

    .dream-report-actions button:disabled {
      cursor: not-allowed;
      opacity: 0.48;
      box-shadow: none;
    }

    .oracle-history-card-dream .oracle-history-relation {
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: var(--wood);
      font-size: 16px;
      letter-spacing: 0.04em;
    }

    .oracle-history-dream-icon {
      width: 54px;
      opacity: 0.82;
      mix-blend-mode: multiply;
    }

    @media (prefers-reduced-motion: reduce) {
      .dream-wave i {
        animation: none;
      }
    }

    @media (max-width: 390px) {
      .oracle-entry-card {
        min-height: 98px;
        padding: 12px 12px 11px 16px;
      }

      .oracle-entry-card strong {
        font-size: 23px;
      }

      .oracle-entry-card-bg {
        right: -28px;
        width: 170px;
      }

      .oracle-entry-card-dream .oracle-entry-card-bg {
        width: 184px;
      }

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

      .dream-field textarea {
        padding: 17px 16px 58px;
      }
    }

    .oracle-cast-method {
      position: relative;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0;
      width: min(100%, 360px);
      margin: 12px auto 0;
      padding: 3px;
      border: 1px solid rgba(173, 138, 77, 0.24);
      border-radius: 999px;
      background:
        linear-gradient(180deg, rgba(255, 252, 247, 0.9), rgba(247, 239, 224, 0.44));
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.74),
        0 10px 24px rgba(113, 93, 62, 0.08);
    }

    .oracle-screen[data-screen="oracle-cast"] .oracle-copy {
      display: block;
      max-width: 420px;
      margin: 10px auto 0;
      color: rgba(24, 23, 21, 0.68);
      font-size: 15px;
      line-height: 1.62;
      text-align: center;
      letter-spacing: 0.1em;
    }

    .oracle-method-card {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 44px;
      padding: 0 34px 0 16px;
      border: 1px solid transparent;
      border-radius: 999px;
      background: transparent;
      color: rgba(24, 23, 21, 0.66);
      text-align: center;
      cursor: pointer;
      box-shadow: none;
      transition: transform 260ms cubic-bezier(0.32, 0.72, 0, 1), border-color 260ms cubic-bezier(0.32, 0.72, 0, 1), box-shadow 260ms cubic-bezier(0.32, 0.72, 0, 1), background 260ms cubic-bezier(0.32, 0.72, 0, 1);
    }

    .oracle-method-card::after {
      content: none;
    }

    .oracle-method-card::before {
      content: "";
      position: absolute;
      right: 12px;
      top: 50%;
      display: grid;
      place-items: center;
      width: 22px;
      height: 22px;
      border-radius: 50%;
      background: var(--seal);
      color: #fffaf1;
      font-family: var(--sans);
      font-size: 13px;
      line-height: 22px;
      text-align: center;
      opacity: 0;
      transform: translateY(-50%) scale(0.78);
      transition: opacity 220ms ease, transform 220ms ease;
    }

    .oracle-method-card strong {
      color: var(--ink);
      font-size: 16px;
      letter-spacing: 0.06em;
    }

    .oracle-method-card small,
    .oracle-method-card span {
      display: none;
    }

    .oracle-method-card.is-active,
    .oracle-method-card:hover {
      border-color: rgba(167, 52, 39, 0.34);
      background:
        linear-gradient(180deg, rgba(255, 252, 247, 0.96), rgba(250, 244, 233, 0.74));
      color: var(--seal);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.72),
        0 10px 18px rgba(113, 93, 62, 0.1);
      transform: translateY(-0.5px);
    }

    .oracle-method-card.is-active::before {
      content: "✓";
      opacity: 1;
      transform: translateY(-50%) scale(1);
    }

    .oracle-cast-stage {
      position: relative;
      min-height: 462px;
      margin-top: 10px;
      overflow: visible;
      border: 0;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
    }

    .oracle-cast-stage::before {
      content: none;
    }

    .oracle-cast-stage::after {
      content: none;
    }

    .oracle-mountain-art {
      position: absolute;
      left: 50%;
      bottom: -20px;
      width: 660px;
      max-width: 178%;
      opacity: 0.42;
      mix-blend-mode: multiply;
      transform: translateX(-50%);
      -webkit-mask-image: linear-gradient(0deg, transparent 0%, rgba(0, 0, 0, 0.76) 18%, #000 64%, transparent 100%);
      mask-image: linear-gradient(0deg, transparent 0%, rgba(0, 0, 0, 0.76) 18%, #000 64%, transparent 100%);
      pointer-events: none;
    }

    .oracle-hex-lines {
      position: absolute;
      left: 50%;
      top: 5px;
      display: grid;
      gap: 12px;
      width: clamp(174px, 48vw, 206px);
      transform: translateX(-50%);
      z-index: 2;
    }

    .yao-line {
      position: relative;
      height: 15px;
    }

    .yao-line::before,
    .yao-line::after {
      content: "";
      position: absolute;
      top: 6px;
      height: 4px;
      border-radius: 999px;
      background: rgba(24, 23, 21, 0.22);
      box-shadow: 0 1px 0 rgba(255, 252, 247, 0.5);
    }

    .yao-line.yang::before {
      left: 0;
      right: 0;
    }

    .yao-line.yang::after {
      content: none;
    }

    .yao-line.yin::before {
      left: 0;
      right: calc(50% + 13px);
      width: auto;
    }

    .yao-line.yin::after {
      left: calc(50% + 13px);
      right: 0;
      width: auto;
    }

    .oracle-cast-stage .yao-line.yang::before,
    .oracle-cast-stage .yao-line.pending::before {
      left: 0;
      right: 0;
      width: auto;
    }

    .oracle-cast-stage .yao-line.yin::before {
      left: 0;
      right: calc(50% + 13px);
      width: auto;
    }

    .oracle-cast-stage .yao-line.yin::after {
      left: calc(50% + 13px);
      right: 0;
      width: auto;
    }

    .oracle-cast-stage .yao-line.pending::after {
      content: none;
    }

    .oracle-cast-stage .yao-line.active::before,
    .oracle-cast-stage .yao-line.active::after,
    .oracle-cast-stage .yao-line.moving::before,
    .oracle-cast-stage .yao-line.moving::after {
      background: var(--seal);
    }

    .oracle-moving-badge {
      position: absolute;
      right: -38px;
      top: -7px;
      display: grid;
      place-items: center;
      width: 28px;
      height: 28px;
      border: 1px solid rgba(167, 52, 39, 0.42);
      border-radius: 50%;
      color: var(--seal);
      background: rgba(255, 252, 247, 0.68);
      font-size: 13px;
    }

    .oracle-cast-number {
      display: none;
    }

    .oracle-cast-number b {
      color: var(--ink);
      font-size: 60px;
      line-height: 1;
      letter-spacing: 0.06em;
    }

    .oracle-cast-number small {
      font-size: 16px;
      letter-spacing: 0.1em;
    }

    .oracle-coin-button {
      position: absolute;
      left: 50%;
      top: 178px;
      display: grid;
      gap: 8px;
      justify-items: center;
      min-width: 284px;
      min-height: 200px;
      border: 0;
      background: transparent;
      color: rgba(24, 23, 21, 0.62);
      font-family: var(--serif);
      font-size: 14px;
      letter-spacing: 0.08em;
      transform: translateX(-50%);
      cursor: pointer;
      z-index: 4;
    }

    .oracle-coin-button[hidden] {
      display: none;
    }

    .oracle-coin-tray {
      position: absolute;
      left: 50%;
      top: 178px;
      display: block;
      width: 310px;
      height: 210px;
      transform: translateX(-50%);
      pointer-events: none;
      z-index: 2;
    }

    .oracle-coin-button .oracle-coin-tray {
      position: relative;
      left: auto;
      top: auto;
      transform: none;
      pointer-events: none;
      z-index: 1;
    }

    .oracle-coin-button [data-cast-standard-label] {
      position: absolute;
      width: 1px;
      height: 1px;
      margin: -1px;
      overflow: hidden;
      clip: rect(0 0 0 0);
      white-space: nowrap;
    }

    .oracle-coin-tray[hidden] {
      display: none;
    }

    .oracle-coin-tray::before {
      content: "";
      position: absolute;
      left: 50%;
      top: 48%;
      width: 360px;
      height: 256px;
      border: 0;
      border-radius: 0;
      background: url("../assets/oracle-ink/oracle-coin-field-v2.mobile.webp") center / contain no-repeat;
      transform: translate(-50%, -50%);
      opacity: 0.68;
      z-index: 0;
    }

    .oracle-coin-tray::after {
      content: "";
      position: absolute;
      left: 50%;
      top: 63%;
      width: 196px;
      height: 58px;
      border-radius: 50%;
      background:
        radial-gradient(ellipse at center, rgba(83, 62, 36, 0.18), transparent 68%);
      transform: translate(-50%, -50%);
      filter: blur(12px);
      z-index: 0;
      pointer-events: none;
    }

    .oracle-coin {
      --coin-rest: rotate(0deg);
      position: absolute;
      display: grid;
      place-items: center;
      width: 118px;
      height: 118px;
      border: 0;
      border-radius: 50%;
      background: transparent;
      color: inherit;
      box-shadow: none;
      transform: var(--coin-rest);
      transform-style: preserve-3d;
      transition: filter 220ms ease, opacity 220ms ease;
      will-change: transform;
    }

    .oracle-coin::before,
    .oracle-coin::after {
      content: none;
    }

    .oracle-coin-face {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: contain;
      opacity: 0;
      transform: scale(1);
      filter:
        drop-shadow(0 14px 16px rgba(61, 42, 22, 0.26))
        drop-shadow(0 2px 1px rgba(255, 252, 247, 0.26));
      transition: opacity 180ms ease, transform 240ms ease;
      pointer-events: none;
    }

    .oracle-coin:nth-child(1) {
      --coin-rest: rotate(-4deg);
      left: 124px;
      top: 0;
      z-index: 3;
    }

    .oracle-coin:nth-child(2) {
      --coin-rest: rotate(11deg);
      left: 58px;
      top: 104px;
      z-index: 2;
    }

    .oracle-coin:nth-child(3) {
      --coin-rest: rotate(-11deg);
      left: 186px;
      top: 106px;
      z-index: 2;
    }

    .oracle-cast-stage .oracle-coin {
      width: 106px;
      height: 106px;
    }

    .oracle-cast-stage .oracle-coin:nth-child(1) {
      left: 102px;
      top: 0;
    }

    .oracle-cast-stage .oracle-coin:nth-child(2) {
      left: 44px;
      top: 86px;
    }

    .oracle-cast-stage .oracle-coin:nth-child(3) {
      left: 160px;
      top: 88px;
    }

    .oracle-coin[data-face="unknown"] .oracle-coin-face.front,
    .oracle-coin[data-face="heads"] .oracle-coin-face.front,
    .oracle-coin[data-face="tails"] .oracle-coin-face.back {
      opacity: 1;
    }

    .oracle-coin[data-face="unknown"] .oracle-coin-face.front {
      opacity: 0.92;
    }

    .oracle-coin.is-revealed .oracle-coin-face {
      transform: scale(1.015);
    }

    .oracle-coin.is-revealing .oracle-coin-face {
      filter:
        drop-shadow(0 18px 20px rgba(61, 42, 22, 0.32))
        drop-shadow(0 2px 1px rgba(255, 252, 247, 0.3));
    }

    .oracle-coin-button:active .oracle-coin,
    .oracle-coin-button.is-shaking .oracle-coin {
      filter: drop-shadow(0 12px 18px rgba(113, 93, 62, 0.18));
    }

    .oracle-coin-tray.is-tossing .oracle-coin:nth-child(1) {
      animation: oracleCoinTossA 720ms cubic-bezier(0.2, 0.72, 0.12, 1) both;
    }

    .oracle-coin-tray.is-tossing .oracle-coin:nth-child(2) {
      animation: oracleCoinTossB 780ms cubic-bezier(0.2, 0.72, 0.12, 1) both;
    }

    .oracle-coin-tray.is-tossing .oracle-coin:nth-child(3) {
      animation: oracleCoinTossC 740ms cubic-bezier(0.2, 0.72, 0.12, 1) both;
    }

    .oracle-coin.is-revealing {
      animation: oracleCoinReveal 360ms cubic-bezier(0.18, 0.82, 0.22, 1.08) both;
    }

    .oracle-cast-steps {
      --oracle-step-size: 30px;
      --oracle-step-1: 12.5px;
      --oracle-step-2: 39.5px;
      --oracle-step-3: 66.5px;
      --oracle-step-4: 93.5px;
      --oracle-step-5: 120.5px;
      --oracle-step-6: 147.5px;
      position: absolute;
      left: clamp(16px, 5vw, 24px);
      top: 0;
      display: block;
      width: 30px;
      height: 160px;
      z-index: 3;
    }

    .oracle-cast-steps::before {
      content: "";
      position: absolute;
      left: 15px;
      top: var(--oracle-step-1);
      bottom: auto;
      height: calc(var(--oracle-step-6) - var(--oracle-step-1));
      width: 1px;
      background: rgba(24, 23, 21, 0.12);
      z-index: 0;
    }

    .oracle-step-pill {
      display: grid;
      place-items: center;
      position: absolute;
      left: 0;
      top: var(--oracle-step-pos, var(--oracle-step-1));
      width: var(--oracle-step-size);
      height: var(--oracle-step-size);
      min-height: var(--oracle-step-size);
      border: 1px solid rgba(24, 23, 21, 0.08);
      border-radius: 50%;
      background: rgba(248, 243, 234, 0.9);
      color: rgba(24, 23, 21, 0.38);
      font-size: 14px;
      font-weight: 800;
      letter-spacing: 0.03em;
      transform: translateY(-50%);
      z-index: 1;
    }

    .oracle-step-pill:nth-child(1) { --oracle-step-pos: var(--oracle-step-1); }
    .oracle-step-pill:nth-child(2) { --oracle-step-pos: var(--oracle-step-2); }
    .oracle-step-pill:nth-child(3) { --oracle-step-pos: var(--oracle-step-3); }
    .oracle-step-pill:nth-child(4) { --oracle-step-pos: var(--oracle-step-4); }
    .oracle-step-pill:nth-child(5) { --oracle-step-pos: var(--oracle-step-5); }
    .oracle-step-pill:nth-child(6) { --oracle-step-pos: var(--oracle-step-6); }

    .oracle-step-pill.is-done {
      border-color: rgba(76, 139, 102, 0.28);
      color: var(--wood);
      background: rgba(76, 139, 102, 0.08);
    }

    .oracle-step-pill.is-current,
    .oracle-step-pill.is-moving {
      border-color: rgba(167, 52, 39, 0.3);
      color: var(--seal);
      background: rgba(255, 252, 247, 0.92);
      box-shadow: inset 0 0 0 2px rgba(255, 252, 247, 0.62);
    }

    .oracle-step-pill.is-current::after {
      content: "";
      position: absolute;
      left: calc(100% - 1px);
      top: 50%;
      width: 24px;
      height: 2px;
      background: var(--seal);
      transform: translateY(-50%);
    }

    .oracle-step-pill.is-current::before {
      content: "";
      position: absolute;
      left: calc(100% + 21px);
      top: 50%;
      width: 9px;
      height: 9px;
      border-radius: 50%;
      background: var(--seal);
      transform: translateY(-50%);
    }

    .oracle-cast-note {
      position: absolute;
      left: 28px;
      right: 28px;
      bottom: 12px;
      margin: 0;
      color: rgba(24, 23, 21, 0.62);
      font-size: 12.5px;
      line-height: 1.45;
      text-align: center;
      letter-spacing: 0.06em;
      text-shadow:
        0 1px 8px rgba(255, 252, 247, 0.96),
        0 -1px 8px rgba(255, 252, 247, 0.82);
      z-index: 5;
    }

    @keyframes oracleCoinTossA {
      0% { transform: var(--coin-rest) translate3d(0, 0, 0) rotateY(0deg); }
      42% { transform: rotate(8deg) translate3d(-18px, -42px, 0) rotateY(520deg) scale(1.08); }
      72% { transform: rotate(-18deg) translate3d(10px, -12px, 0) rotateY(740deg) scale(1.03); }
      100% { transform: var(--coin-rest) translate3d(0, 0, 0) rotateY(900deg); }
    }

    @keyframes oracleCoinTossB {
      0% { transform: var(--coin-rest) translate3d(0, 0, 0) rotateY(0deg); }
      40% { transform: rotate(-12deg) translate3d(22px, -34px, 0) rotateY(480deg) scale(1.06); }
      72% { transform: rotate(16deg) translate3d(-8px, -10px, 0) rotateY(760deg) scale(1.02); }
      100% { transform: var(--coin-rest) translate3d(0, 0, 0) rotateY(900deg); }
    }

    @keyframes oracleCoinTossC {
      0% { transform: var(--coin-rest) translate3d(0, 0, 0) rotateY(0deg); }
      38% { transform: rotate(18deg) translate3d(14px, -44px, 0) rotateY(560deg) scale(1.08); }
      74% { transform: rotate(-4deg) translate3d(-12px, -14px, 0) rotateY(800deg) scale(1.02); }
      100% { transform: var(--coin-rest) translate3d(0, 0, 0) rotateY(900deg); }
    }

    @keyframes oracleCoinReveal {
      0% { transform: var(--coin-rest) scale(0.94); }
      58% { transform: var(--coin-rest) scale(1.08); }
      100% { transform: var(--coin-rest) scale(1); }
    }

    .oracle-cast-actions {
      display: grid;
      grid-template-columns: minmax(126px, 0.92fr) minmax(158px, 1.08fr);
      justify-items: center;
      gap: 8px;
      position: relative;
      z-index: 6;
      width: calc(100% + 28px);
      margin: 4px -14px 0;
      padding: 10px 14px max(12px, env(safe-area-inset-bottom) + 6px);
      border-top: 1px solid rgba(24, 23, 21, 0.07);
      background:
        linear-gradient(180deg, rgba(255, 252, 247, 0.18), rgba(248, 242, 232, 0.78) 34%, rgba(250, 246, 238, 0.96));
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42);
    }

    .oracle-cast-actions .oracle-button,
    .oracle-cast-actions .oracle-cast-status-panel {
      position: relative;
      width: 100%;
      min-height: 50px;
      margin: 0 auto;
      min-width: 0;
      overflow: hidden;
      border-radius: 10px;
      font-size: 15px;
      font-weight: 900;
      letter-spacing: 0.03em;
    }

    .oracle-cast-actions .oracle-cast-status-panel {
      display: inline-grid;
      grid-column: 1 / -1;
      grid-template-columns: auto 1fr;
      align-items: center;
      justify-items: start;
      gap: 8px;
      padding: 7px 10px;
      border: 1px solid rgba(167, 52, 39, 0.28);
      background:
        linear-gradient(180deg, rgba(255, 252, 247, 0.9), rgba(248, 239, 223, 0.78));
      color: var(--seal);
      cursor: default;
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.72),
        0 12px 22px rgba(113, 93, 62, 0.1);
      pointer-events: none;
    }

    .oracle-cast-status-copy {
      display: grid;
      gap: 2px;
      justify-items: start;
      line-height: 1.1;
    }

    .oracle-cast-status-copy small {
      color: rgba(24, 23, 21, 0.48);
      font-family: var(--sans);
      font-size: 10px;
      font-weight: 800;
      letter-spacing: 0.08em;
    }

    .oracle-cast-status-copy strong {
      color: var(--seal);
      font-size: 15px;
      font-weight: 900;
      letter-spacing: 0.02em;
      white-space: nowrap;
    }

    .oracle-cast-status-panel[hidden] {
      display: none;
    }

    .oracle-cast-action-icon {
      display: grid;
      place-items: center;
      width: 26px;
      height: 26px;
      border: 2px solid rgba(167, 52, 39, 0.7);
      border-radius: 50%;
      background:
        radial-gradient(circle at 35% 35%, rgba(167, 52, 39, 0.72) 0 2px, transparent 3px),
        radial-gradient(circle at 62% 34%, rgba(167, 52, 39, 0.72) 0 2px, transparent 3px),
        radial-gradient(circle at 50% 58%, rgba(167, 52, 39, 0.72) 0 2px, transparent 3px);
    }

    .oracle-cast-actions .oracle-button {
      display: inline-flex;
      grid-column: 1 / -1;
      align-items: center;
      justify-content: center;
      gap: 6px;
      padding: 0 10px;
      border: 1px solid rgba(113, 93, 62, 0.16);
      background:
        linear-gradient(180deg, #2b2925, #191816);
      color: #fffaf1;
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.16),
        inset 0 -10px 20px rgba(0, 0, 0, 0.18),
        0 18px 34px rgba(24, 23, 21, 0.18);
    }

    .oracle-reveal-icon {
      display: grid;
      place-items: center;
      width: 24px;
      height: 24px;
      border-radius: 50%;
      color: currentColor;
      font-family: var(--serif);
      font-size: 19px;
      font-weight: 800;
      line-height: 1;
      letter-spacing: 0;
      transform: translateY(-1px);
    }

    .oracle-cast-actions .oracle-button::before,
    .oracle-cast-actions .oracle-cast-status-panel::before {
      content: "";
      position: absolute;
      inset: 6px 8px;
      border-top: 1px solid rgba(255, 252, 247, 0.18);
      border-bottom: 1px solid rgba(255, 252, 247, 0.1);
      border-radius: 6px;
      pointer-events: none;
    }

    .oracle-cast-actions .oracle-button:disabled {
      border-color: rgba(24, 23, 21, 0.08);
      background:
        linear-gradient(180deg, rgba(244, 240, 232, 0.88), rgba(230, 224, 214, 0.76));
      color: rgba(24, 23, 21, 0.34);
      opacity: 1;
      filter: none;
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.48),
        inset 0 -1px 0 rgba(24, 23, 21, 0.04);
    }

    .oracle-cast-actions .oracle-button:disabled::before {
      border-color: rgba(24, 23, 21, 0.08);
    }

    .oracle-cast-actions .oracle-cast-status-panel[hidden] + .oracle-button {
      grid-column: 1 / -1;
      max-width: none;
    }

    .oracle-cast-actions [data-consult-reveal-text] {
      display: inline-block;
      min-width: 0;
      white-space: nowrap;
    }

    .oracle-credit-cost {
      position: relative;
      z-index: 1;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 3px;
      min-width: 42px;
      min-height: 26px;
      margin-left: 2px;
      padding: 3px 6px 3px 4px;
      border: 1px solid rgba(240, 214, 147, 0.25);
      border-radius: 999px;
      background: rgba(255, 250, 235, 0.1);
      color: #f3dda3;
      font-family: var(--sans);
      font-size: 12px;
      font-weight: 900;
      line-height: 1;
      letter-spacing: 0;
      white-space: nowrap;
    }

    .oracle-credit-cost img {
      width: 17px;
      height: 17px;
      object-fit: contain;
      filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
    }

    .oracle-credit-cost b {
      font: inherit;
    }

    .oracle-credit-cost.is-unlocked {
      min-width: 54px;
      color: rgba(255, 250, 241, 0.78);
      font-size: 10px;
    }

    .oracle-cast-actions .oracle-button:disabled .oracle-credit-cost {
      border-color: rgba(24, 23, 21, 0.08);
      background: rgba(255, 255, 255, 0.34);
      color: rgba(24, 23, 21, 0.42);
    }

    .oracle-cast-actions .oracle-ai-status {
      grid-column: 1 / -1;
    }

    .oracle-cast-actions .oracle-ai-status:empty {
      display: none;
    }

    .oracle-ai-status {
      min-height: 18px;
      color: rgba(24, 23, 21, 0.46);
      font-family: var(--sans);
      font-size: 12px;
      letter-spacing: 0.04em;
    }

    @media (max-height: 760px) {
      .fortune-screen {
        padding-top: 16px;
      }

      [data-screen="fortune"] .date-strip {
        margin-bottom: 24px;
      }

      [data-screen="fortune"] .fortune-entry-list {
        margin-top: 126px;
      }

      .daily-art {
        width: min(100%, 246px);
        margin: 8px auto 14px;
      }

      .yi-ji {
        margin-top: 18px;
      }

      .oracle-visual-stage {
        min-height: 242px;
      }

      .oracle-visual-stage.has-oracle {
        min-height: 640px;
      }

      .oracle-screen[data-screen="oracle-cast"] .fortune-top {
        margin-bottom: 6px;
      }

      .oracle-screen[data-screen="oracle-cast"] .oracle-copy {
        margin-top: 4px;
        font-size: 13px;
        line-height: 1.42;
      }

      .oracle-cast-method {
        margin-top: 8px;
      }

      .oracle-method-card {
        min-height: 40px;
      }

      .oracle-cast-stage {
        min-height: 368px;
        margin-top: 5px;
      }

      .oracle-cast-stage::after {
        top: 112px;
        width: min(330px, 86vw);
        height: min(330px, 86vw);
      }

      .oracle-mountain-art {
        bottom: -28px;
        width: 610px;
        max-width: 166%;
      }

      .oracle-hex-lines {
        top: 4px;
        gap: 10px;
        width: clamp(150px, 44vw, 178px);
      }

      .oracle-cast-stage .yao-line {
        height: 14px;
      }

      .oracle-cast-stage .yao-line::before,
      .oracle-cast-stage .yao-line::after {
        top: 5px;
        height: 4px;
      }

      .oracle-coin-button,
      .oracle-coin-tray {
        top: 150px;
      }

      .oracle-coin-button {
        min-width: 266px;
        min-height: 182px;
      }

      .oracle-cast-stage .oracle-coin-tray {
        width: 260px;
        height: 172px;
      }

      .oracle-cast-stage .oracle-coin-tray::before {
        top: 45%;
        width: 292px;
        height: 194px;
      }

      .oracle-cast-stage .oracle-coin-tray::after {
        width: 150px;
        height: 46px;
      }

      .oracle-cast-stage .oracle-coin {
        width: 78px;
        height: 78px;
      }

      .oracle-cast-stage .oracle-coin:nth-child(1) {
        left: 91px;
        top: 0;
      }

      .oracle-cast-stage .oracle-coin:nth-child(2) {
        left: 43px;
        top: 70px;
      }

      .oracle-cast-stage .oracle-coin:nth-child(3) {
        left: 139px;
        top: 72px;
      }

      .oracle-cast-steps {
        --oracle-step-size: 27px;
        --oracle-step-1: 11px;
        --oracle-step-2: 35px;
        --oracle-step-3: 59px;
        --oracle-step-4: 83px;
        --oracle-step-5: 107px;
        --oracle-step-6: 131px;
        top: 0;
        width: 27px;
        height: 144px;
      }

      .oracle-cast-steps::before {
        left: 13.5px;
        top: var(--oracle-step-1);
        bottom: auto;
        height: calc(var(--oracle-step-6) - var(--oracle-step-1));
      }

      .oracle-step-pill {
        width: var(--oracle-step-size);
        height: var(--oracle-step-size);
        min-height: var(--oracle-step-size);
        font-size: 13px;
      }

      .oracle-step-pill.is-current::after {
        width: 22px;
      }

      .oracle-step-pill.is-current::before {
        left: calc(100% + 19px);
        width: 8px;
        height: 8px;
      }

      .oracle-cast-note {
        left: 24px;
        right: 24px;
        bottom: 10px;
        font-size: 11.5px;
        line-height: 1.4;
      }

      .oracle-cast-actions {
        width: calc(100% + 24px);
        margin: 0 -12px;
        padding: 8px 12px max(8px, env(safe-area-inset-bottom) + 4px);
      }

      .oracle-cast-actions .oracle-button,
      .oracle-cast-actions .oracle-cast-status-panel {
        min-height: 46px;
        font-size: 14px;
        letter-spacing: 0.01em;
      }

      .oracle-cast-actions .oracle-cast-status-panel {
        gap: 7px;
        padding-inline: 8px;
      }

      .oracle-cast-action-icon {
        width: 24px;
        height: 24px;
      }

      .oracle-cast-status-copy small {
        font-size: 9px;
      }

      .oracle-cast-status-copy strong {
        font-size: 14px;
      }

      .oracle-reveal-icon {
        width: 20px;
        height: 20px;
        font-size: 18px;
      }

      .oracle-cast-actions .oracle-button {
        gap: 4px;
        font-size: 13px;
      }

      .oracle-credit-cost {
        min-width: 36px;
        min-height: 22px;
        margin-left: 0;
        padding: 2px 5px 2px 3px;
        font-size: 11px;
      }

      .oracle-credit-cost img {
        width: 15px;
        height: 15px;
      }
    }

    @media (max-height: 680px) {
      .oracle-screen[data-screen="oracle-cast"] {
        padding-top: 12px;
      }

      .oracle-screen[data-screen="oracle-cast"] .fortune-top {
        min-height: 38px;
        margin-bottom: 2px;
      }

      .oracle-screen[data-screen="oracle-cast"] .fortune-title {
        gap: 2px;
      }

      .oracle-screen[data-screen="oracle-cast"] .fortune-title h1 {
        font-size: 20px;
      }

      .oracle-screen[data-screen="oracle-cast"] .fortune-title .sub {
        font-size: 12px;
        line-height: 1.15;
      }

      .oracle-screen[data-screen="oracle-cast"] .oracle-copy {
        margin-top: 2px;
        font-size: 12.5px;
        line-height: 1.34;
      }

      .oracle-cast-method {
        margin-top: 6px;
      }

      .oracle-method-card {
        min-height: 36px;
        padding: 0 18px;
      }

      .oracle-method-card strong {
        font-size: 15px;
      }

      .oracle-cast-stage {
        min-height: clamp(330px, calc(100dvh - 310px), 370px);
        margin-top: 2px;
      }

      .oracle-hex-lines {
        top: 2px;
        gap: 10px;
        width: clamp(138px, 40vw, 158px);
      }

      .oracle-cast-stage .yao-line {
        height: 12px;
      }

      .oracle-cast-steps {
        --oracle-step-size: 25px;
        --oracle-step-1: 8px;
        --oracle-step-2: 30px;
        --oracle-step-3: 52px;
        --oracle-step-4: 74px;
        --oracle-step-5: 96px;
        --oracle-step-6: 118px;
        width: 25px;
        height: 130px;
      }

      .oracle-cast-steps::before {
        left: 12.5px;
      }

      .oracle-step-pill {
        font-size: 12px;
      }

      .oracle-coin-button,
      .oracle-coin-tray {
        top: 132px;
      }

      .oracle-cast-stage .oracle-coin-tray {
        width: 236px;
        height: 154px;
      }

      .oracle-cast-stage .oracle-coin-tray::before {
        top: 44%;
        width: 252px;
        height: 166px;
      }

      .oracle-cast-stage .oracle-coin-tray::after {
        width: 130px;
        height: 42px;
      }

      .oracle-cast-stage .oracle-coin {
        width: 66px;
        height: 66px;
      }

      .oracle-cast-stage .oracle-coin:nth-child(1) {
        left: 85px;
        top: 0;
      }

      .oracle-cast-stage .oracle-coin:nth-child(2) {
        left: 43px;
        top: 56px;
      }

      .oracle-cast-stage .oracle-coin:nth-child(3) {
        left: 127px;
        top: 58px;
      }

      .oracle-cast-actions {
        padding-top: 6px;
        padding-bottom: max(6px, env(safe-area-inset-bottom) + 3px);
      }

      .oracle-cast-actions .oracle-button,
      .oracle-cast-actions .oracle-cast-status-panel {
        min-height: 44px;
      }
    }

    .oracle-result-visual {
      position: relative;
      min-height: 326px;
      margin-top: 18px;
      overflow: visible;
    }

    .oracle-result-bg {
      position: absolute;
      inset: 0 -8px auto;
      width: calc(100% + 16px);
      height: 250px;
      background:
        url("/assets/oracle-ink/oracle-landscape-v2.webp") center bottom / 112% auto no-repeat,
        radial-gradient(circle at 50% 44%, rgba(173, 138, 77, 0.1), transparent 40%);
      opacity: 0.17;
      mix-blend-mode: multiply;
    }

    .oracle-result-hexes {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: minmax(118px, 1fr) 54px minmax(118px, 1fr);
      align-items: start;
      gap: 8px;
      padding-top: 64px;
    }

    .oracle-hex-card {
      display: grid;
      gap: 10px;
      justify-items: center;
      min-width: 0;
    }

    .oracle-hex-label {
      color: rgba(24, 23, 21, 0.58);
      font-size: 13px;
      letter-spacing: 0.14em;
    }

    .oracle-mini-hex {
      display: grid;
      gap: 11px;
      width: 132px;
      padding: 10px 8px 8px;
      border-radius: 18px;
      background: rgba(255, 252, 247, 0.38);
      filter: drop-shadow(0 8px 16px rgba(54, 44, 32, 0.08));
    }

    .oracle-mini-hex .yao-line {
      height: 14px;
    }

    .oracle-mini-hex .yao-line::before,
    .oracle-mini-hex .yao-line::after {
      top: 5px;
      height: 5px;
      background: rgba(24, 23, 21, 0.58);
      box-shadow: 0 1px 0 rgba(255, 252, 247, 0.7);
    }

    .oracle-mini-hex .yao-line.yang::before {
      left: 0;
      right: 0;
      width: auto;
    }

    .oracle-mini-hex .yao-line.yang::after {
      content: none;
    }

    .oracle-mini-hex .yao-line.yin::before,
    .oracle-mini-hex .yao-line.yin::after {
      width: auto;
    }

    .oracle-mini-hex .yao-line.yin::before {
      left: 0;
      right: calc(50% + 12px);
    }

    .oracle-mini-hex .yao-line.yin::after {
      left: calc(50% + 12px);
      right: 0;
    }

    .oracle-mini-hex .yao-line.moving::before,
    .oracle-mini-hex .yao-line.moving::after {
      background: var(--seal);
    }

    .oracle-gua-name {
      color: var(--ink);
      font-size: 28px;
      font-weight: 800;
      letter-spacing: 0.08em;
      line-height: 1;
      text-shadow: 0 1px 0 rgba(255, 252, 247, 0.85);
    }

    .oracle-change-mark {
      display: grid;
      gap: 7px;
      justify-items: center;
      padding-top: 78px;
      color: rgba(24, 23, 21, 0.42);
      font-size: 11px;
      letter-spacing: 0.12em;
    }

    .oracle-change-mark::before {
      content: "";
      width: 38px;
      height: 1px;
      background: rgba(24, 23, 21, 0.24);
    }

    .oracle-result-copy {
      margin-top: 0;
      padding-top: 16px;
      border-top: 1px solid rgba(24, 23, 21, 0.1);
    }

    .oracle-result-copy h2 {
      margin: 0 0 10px;
      font-size: 25px;
      line-height: 1.2;
      letter-spacing: 0.06em;
    }

    .oracle-result-copy p {
      margin: 0;
      color: rgba(24, 23, 21, 0.64);
      font-size: 14px;
      line-height: 1.76;
      letter-spacing: 0.05em;
    }

    .oracle-generation-meta {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 7px;
      margin-top: 12px;
      color: rgba(24, 23, 21, 0.46);
      font-family: var(--sans);
      font-size: 11px;
      letter-spacing: 0.06em;
    }

    .oracle-generation-meta span {
      display: inline-flex;
      align-items: center;
      min-height: 22px;
      padding: 0 8px;
      border: 1px solid rgba(47, 121, 80, 0.2);
      border-radius: 999px;
      color: #2f7950;
      background: rgba(47, 121, 80, 0.055);
      font-weight: 700;
    }

    .oracle-generation-meta.is-fallback span {
      border-color: rgba(154, 109, 36, 0.22);
      color: #8a641f;
      background: rgba(154, 109, 36, 0.06);
    }

    .oracle-generation-meta em {
      font-style: normal;
    }

    .oracle-answer-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0;
      margin-top: 16px;
      border-top: 1px solid rgba(24, 23, 21, 0.1);
    }

    .oracle-answer-grid div {
      min-height: 78px;
      padding: 12px 10px 0 0;
      color: rgba(24, 23, 21, 0.62);
      font-size: 12px;
      line-height: 1.5;
    }

    .oracle-answer-grid div:nth-child(2n) {
      padding-left: 14px;
      border-left: 1px solid rgba(24, 23, 21, 0.08);
    }

    .oracle-answer-grid strong {
      display: block;
      margin-bottom: 3px;
      color: var(--wood);
      font-size: 15px;
      letter-spacing: 0.08em;
    }

    .oracle-answer-grid .warn strong {
      color: var(--seal);
    }

    .oracle-report-verdict {
      display: grid;
      gap: 8px;
      margin-top: 14px;
      padding: 14px 0 0;
      border-top: 1px solid rgba(24, 23, 21, 0.1);
    }

    .oracle-report-verdict strong {
      color: var(--seal);
      font-size: 19px;
      letter-spacing: 0.1em;
    }

    .oracle-report-verdict p {
      margin: 0;
    }

    .oracle-report-verdict.is-success strong {
      color: #2f7950;
    }

    .oracle-report-verdict.is-cautious strong {
      color: #9a6d24;
    }

    .oracle-report-verdict.is-blocked strong {
      color: var(--seal);
    }

    .oracle-report-verdict.is-mixed strong {
      color: #68539c;
    }

    .oracle-credibility-card {
      display: grid;
      gap: 11px;
      margin-top: 16px;
      padding: 14px;
      border: 1px solid rgba(173, 138, 77, 0.18);
      border-radius: 8px;
      background: rgba(255, 252, 247, 0.58);
      box-shadow: 0 12px 28px rgba(54, 44, 32, 0.06);
    }

    .oracle-credibility-card.is-high {
      border-color: rgba(47, 121, 80, 0.22);
      background: rgba(47, 121, 80, 0.055);
    }

    .oracle-credibility-card.is-medium {
      border-color: rgba(154, 109, 36, 0.24);
      background: rgba(154, 109, 36, 0.055);
    }

    .oracle-credibility-card.is-low {
      border-color: rgba(167, 52, 39, 0.24);
      background: rgba(167, 52, 39, 0.052);
    }

    .oracle-credibility-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }

    .oracle-credibility-head span,
    .oracle-credibility-grid b {
      color: rgba(24, 23, 21, 0.48);
      font-family: var(--sans);
      font-size: 11px;
      letter-spacing: 0.1em;
    }

    .oracle-credibility-head strong {
      display: inline-grid;
      place-items: center;
      min-width: 38px;
      min-height: 30px;
      border-radius: 999px;
      color: #fff;
      background: var(--seal);
      font-size: 16px;
      letter-spacing: 0.08em;
    }

    .oracle-credibility-card.is-high .oracle-credibility-head strong {
      background: #2f7950;
    }

    .oracle-credibility-card.is-medium .oracle-credibility-head strong {
      background: #9a6d24;
    }

    .oracle-credibility-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 1px;
      border: 1px solid rgba(24, 23, 21, 0.08);
      background: rgba(24, 23, 21, 0.06);
    }

    .oracle-credibility-grid div {
      display: grid;
      gap: 5px;
      min-height: 56px;
      padding: 9px 8px;
      background: rgba(255, 252, 247, 0.68);
    }

    .oracle-credibility-grid span {
      color: var(--ink);
      font-size: 13px;
      font-weight: 800;
      letter-spacing: 0.04em;
    }

    .oracle-credibility-card p {
      margin: 0;
      color: rgba(24, 23, 21, 0.64);
      font-size: 12px;
      line-height: 1.62;
    }

    .oracle-credibility-factors {
      display: flex;
      flex-wrap: wrap;
      gap: 7px;
    }

    .oracle-credibility-factors span {
      min-height: 24px;
      padding: 4px 8px;
      border: 1px solid rgba(24, 23, 21, 0.08);
      border-radius: 999px;
      background: rgba(255, 252, 247, 0.7);
      color: rgba(24, 23, 21, 0.58);
      font-size: 11px;
      line-height: 1.2;
      letter-spacing: 0.05em;
    }

    .oracle-report-longform {
      display: grid;
      gap: 0;
      margin-top: 18px;
      border-top: 1px solid rgba(24, 23, 21, 0.1);
    }

    .oracle-report-section {
      padding: 18px 0;
      border-bottom: 1px solid rgba(24, 23, 21, 0.09);
    }

    .oracle-report-section h3 {
      margin: 0 0 8px;
      color: var(--ink);
      font-size: 20px;
      line-height: 1.25;
      letter-spacing: 0.08em;
    }

    .oracle-report-section p {
      margin: 0;
      color: rgba(24, 23, 21, 0.66);
      font-size: 14px;
      line-height: 1.82;
      letter-spacing: 0.04em;
    }

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

    .oracle-reasoning-list div {
      display: grid;
      gap: 5px;
      padding-left: 12px;
      border-left: 2px solid rgba(173, 138, 77, 0.32);
    }

    .oracle-reasoning-list b {
      color: var(--seal);
      font-size: 14px;
      letter-spacing: 0.08em;
    }

    .oracle-timing-list {
      display: grid;
      gap: 8px;
      margin: 14px 0 0;
      padding: 0;
      list-style: none;
    }

    .oracle-timing-list li {
      position: relative;
      padding-left: 18px;
      color: rgba(24, 23, 21, 0.64);
      font-size: 13px;
      line-height: 1.68;
      letter-spacing: 0.04em;
    }

    .oracle-timing-list li::before {
      content: "";
      position: absolute;
      left: 0;
      top: 0.72em;
      width: 7px;
      height: 7px;
      border-radius: 999px;
      background: rgba(59, 137, 94, 0.72);
    }

    .oracle-report-closing {
      margin-top: 18px;
      padding: 18px 0 4px;
      border-top: 1px solid rgba(24, 23, 21, 0.1);
      color: rgba(24, 23, 21, 0.72);
      font-size: 15px;
      line-height: 1.86;
      letter-spacing: 0.05em;
    }

    .oracle-feedback-card {
      display: grid;
      gap: 12px;
      margin-top: 18px;
      padding: 14px 0 0;
      border-top: 1px solid rgba(24, 23, 21, 0.1);
    }

    .oracle-feedback-card h3 {
      margin: 0 0 4px;
      color: rgba(24, 23, 21, 0.82);
      font-size: 16px;
      letter-spacing: 0.08em;
    }

    .oracle-feedback-card p {
      margin: 0;
      color: rgba(24, 23, 21, 0.5);
      font-size: 12px;
      line-height: 1.55;
    }

    .oracle-feedback-actions {
      display: flex;
      gap: 8px;
    }

    .oracle-feedback-actions button {
      min-height: 34px;
      padding: 0 13px;
      border: 1px solid rgba(173, 138, 77, 0.28);
      border-radius: 999px;
      color: rgba(24, 23, 21, 0.66);
      background: rgba(255, 252, 247, 0.72);
      font-family: var(--sans);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.08em;
    }

    .oracle-feedback-actions button.is-active {
      color: #fff;
      border-color: rgba(111, 60, 44, 0.4);
      background: var(--seal);
    }

    .oracle-feedback-actions button:disabled {
      cursor: default;
      opacity: 0.56;
    }

    .oracle-feedback-actions button.is-active:disabled {
      opacity: 1;
    }

    .oracle-history-list {
      display: grid;
      gap: 0;
      margin-top: 20px;
      border-top: 1px solid rgba(24, 23, 21, 0.09);
    }

    .oracle-history-tools {
      display: grid;
      gap: 11px;
      margin-top: 14px;
      padding: 13px;
      border: 1px solid rgba(173, 138, 77, 0.16);
      border-radius: 8px;
      background: rgba(255, 252, 247, 0.46);
    }

    .oracle-history-search,
    .oracle-history-selectors label {
      display: grid;
      gap: 5px;
      color: rgba(24, 23, 21, 0.5);
      font-family: var(--sans);
      font-size: 11px;
      letter-spacing: 0.08em;
    }

    .oracle-history-search input,
    .oracle-history-selectors select,
    .oracle-history-selectors input {
      width: 100%;
      min-height: 38px;
      padding: 0 11px;
      border: 1px solid rgba(24, 23, 21, 0.12);
      border-radius: 8px;
      background: rgba(255, 252, 247, 0.76);
      color: var(--ink);
      font: 13px/1.2 var(--sans);
      outline: none;
    }

    .oracle-history-filters {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 7px;
    }

    .oracle-history-filters button {
      min-height: 34px;
      border: 1px solid rgba(24, 23, 21, 0.1);
      border-radius: 999px;
      background: rgba(255, 252, 247, 0.52);
      color: rgba(24, 23, 21, 0.56);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.08em;
    }

    .oracle-history-filters button.is-active {
      border-color: rgba(167, 52, 39, 0.28);
      background: rgba(167, 52, 39, 0.08);
      color: var(--seal);
    }

    .oracle-history-selectors {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 9px;
    }

    .oracle-history-row {
      position: relative;
    }

    .oracle-history-card {
      display: grid;
      grid-template-columns: 72px minmax(0, 1fr) auto;
      gap: 12px;
      align-items: center;
      width: 100%;
      padding: 17px 52px 16px 2px;
      border: 0;
      border-bottom: 1px solid rgba(24, 23, 21, 0.09);
      background: transparent;
      color: inherit;
      font-family: var(--serif);
      text-align: left;
      cursor: pointer;
      transition: background 240ms var(--ease), padding 240ms var(--ease);
    }

    .oracle-history-card:hover,
    .oracle-history-card:focus-visible {
      outline: none;
      padding-left: 6px;
      padding-right: 56px;
      background: rgba(255, 252, 247, 0.42);
    }

    .oracle-history-delete {
      position: absolute;
      right: 0;
      top: 50%;
      z-index: 2;
      display: inline-grid;
      place-items: center;
      width: 34px;
      height: 34px;
      padding: 0;
      border: 1px solid rgba(24, 23, 21, 0.1);
      border-radius: 999px;
      background: rgba(255, 252, 247, 0.62);
      color: rgba(24, 23, 21, 0.42);
      box-shadow: 0 8px 22px rgba(54, 44, 32, 0.08);
      transform: translateY(-50%);
      cursor: pointer;
      transition: width 240ms var(--ease), border-color 240ms var(--ease), background 240ms var(--ease), color 240ms var(--ease), box-shadow 240ms var(--ease);
    }

    .oracle-history-delete svg {
      width: 16px;
      height: 16px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .oracle-history-delete span {
      display: none;
      font-family: var(--sans);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.08em;
    }

    .oracle-history-delete:hover,
    .oracle-history-delete:focus-visible {
      outline: none;
      border-color: rgba(167, 52, 39, 0.28);
      color: var(--seal);
      background: rgba(255, 252, 247, 0.92);
      box-shadow: 0 12px 28px rgba(167, 52, 39, 0.12);
    }

    .oracle-history-delete.is-confirming {
      width: 52px;
      border-color: rgba(167, 52, 39, 0.42);
      color: #fff;
      background: var(--seal);
      box-shadow: 0 14px 30px rgba(167, 52, 39, 0.2);
    }

    .oracle-history-delete.is-confirming svg {
      display: none;
    }

    .oracle-history-delete.is-confirming span {
      display: inline;
    }

    .oracle-history-time {
      display: grid;
      gap: 4px;
      align-self: stretch;
      align-content: start;
      padding-right: 12px;
      border-right: 1px solid rgba(24, 23, 21, 0.1);
      color: rgba(24, 23, 21, 0.58);
      font-family: var(--sans);
      font-size: 12px;
      line-height: 1.25;
      letter-spacing: 0.02em;
    }

    .oracle-history-time b {
      color: rgba(24, 23, 21, 0.7);
      font-size: 13px;
      font-weight: 500;
    }

    .oracle-history-main {
      display: grid;
      gap: 7px;
      min-width: 0;
    }

    .oracle-history-card small,
    .oracle-history-meta {
      color: rgba(24, 23, 21, 0.46);
      font-family: var(--sans);
      font-size: 12px;
      letter-spacing: 0.06em;
    }

    .oracle-history-card strong {
      color: var(--ink);
      font-size: 20px;
      letter-spacing: 0.08em;
      line-height: 1.22;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .oracle-history-card p {
      margin: 0;
      color: rgba(24, 23, 21, 0.62);
      font-size: 13px;
      line-height: 1.64;
      letter-spacing: 0.06em;
      display: -webkit-box;
      overflow: hidden;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
    }

    .oracle-history-summary {
      color: rgba(24, 23, 21, 0.58);
      font-family: var(--sans);
      font-size: 12px;
      line-height: 1.55;
      letter-spacing: 0.04em;
      display: -webkit-box;
      overflow: hidden;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
    }

    .oracle-history-relation {
      display: flex;
      align-items: center;
      gap: 10px;
      min-width: 0;
      color: var(--ink);
      font-size: 18px;
      font-weight: 800;
      letter-spacing: 0.08em;
    }

    .oracle-history-relation em {
      color: rgba(24, 23, 21, 0.36);
      font-style: normal;
      font-size: 18px;
      font-weight: 500;
    }

    .oracle-history-tail {
      display: grid;
      gap: 7px;
      justify-items: end;
      min-width: 86px;
    }

    .oracle-history-chip {
      display: inline-grid;
      place-items: center;
      min-height: 26px;
      padding: 0 10px;
      border: 1px solid rgba(167, 52, 39, 0.22);
      border-radius: 999px;
      color: var(--seal);
      background: rgba(255, 252, 247, 0.58);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.08em;
      white-space: nowrap;
    }

    .oracle-history-credibility {
      color: rgba(24, 23, 21, 0.48);
      font-family: var(--sans);
      font-size: 11px;
      letter-spacing: 0.06em;
      white-space: nowrap;
    }

    .oracle-history-credibility.is-high {
      color: #2f7950;
    }

    .oracle-history-credibility.is-low {
      color: var(--seal);
    }

    .oracle-history-mini {
      display: grid;
      gap: 4px;
      width: 58px;
      padding: 5px 0;
    }

    .oracle-history-mini .yao-line {
      display: block;
      height: 7px;
    }

    .oracle-history-mini .yao-line::before,
    .oracle-history-mini .yao-line::after {
      top: 2px;
      height: 3px;
      background: rgba(24, 23, 21, 0.42);
      box-shadow: none;
    }

    .oracle-history-mini .yao-line.yin::before {
      right: calc(50% + 7px);
    }

    .oracle-history-mini .yao-line.yin::after {
      left: calc(50% + 7px);
    }

    .oracle-history-mini .yao-line.moving::before,
    .oracle-history-mini .yao-line.moving::after {
      background: var(--seal);
    }

    .oracle-history-empty {
      display: grid;
      place-items: center;
      min-height: 260px;
      margin-top: 24px;
      padding: 24px;
      border: 1px solid rgba(113, 93, 62, 0.12);
      border-radius: 8px;
      background:
        radial-gradient(circle at 50% 28%, rgba(173, 138, 77, 0.1), transparent 36%),
        rgba(255, 252, 247, 0.56);
      color: rgba(24, 23, 21, 0.58);
      text-align: center;
      font-size: 15px;
      line-height: 1.8;
      letter-spacing: 0.08em;
    }

    .ai-qa-history-screen {
      padding-bottom: 112px;
      background:
        radial-gradient(circle at 78% 8%, rgba(167, 52, 39, 0.05), transparent 28%),
        radial-gradient(circle at 14% 36%, rgba(76, 139, 102, 0.055), transparent 28%),
        linear-gradient(180deg, rgba(255, 252, 247, 0.24), transparent 44%);
    }

    .profile-list button[data-route="qa-history"] small {
      color: var(--seal);
    }

    .ai-qa-history-summary {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: end;
      gap: 16px;
      margin: 22px 0 16px;
      padding-bottom: 15px;
      border-bottom: 1px solid rgba(24, 23, 21, 0.1);
    }

    .ai-qa-history-summary div {
      display: grid;
      gap: 7px;
      min-width: 0;
    }

    .ai-qa-history-summary small {
      color: var(--seal);
      font-family: var(--sans);
      font-size: 12px;
      font-weight: 800;
      letter-spacing: 0.18em;
      text-transform: uppercase;
    }

    .ai-qa-history-summary b {
      min-width: 0;
      color: var(--ink);
      font-family: var(--serif);
      font-size: 31px;
      line-height: 1.08;
      letter-spacing: 0.08em;
    }

    .ai-qa-history-summary p {
      margin: 0;
      color: rgba(24, 23, 21, 0.56);
      font-family: var(--sans);
      font-size: 12px;
      line-height: 1.62;
      letter-spacing: 0.04em;
    }

    .ai-qa-history-summary > span {
      display: grid;
      justify-items: end;
      gap: 2px;
      color: rgba(24, 23, 21, 0.52);
      font-family: var(--sans);
      font-size: 12px;
      letter-spacing: 0.08em;
      white-space: nowrap;
    }

    .ai-qa-history-summary > span b {
      font-size: 28px;
      letter-spacing: 0.02em;
    }

    .ai-qa-history-summary > span em {
      font-style: normal;
    }

    .ai-qa-history-filter {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      margin-top: 16px;
      overflow: hidden;
      border: 1px solid rgba(113, 93, 62, 0.14);
      border-radius: 8px;
      background: rgba(255, 252, 247, 0.42);
    }

    .ai-qa-history-filter button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      min-width: 0;
      min-height: 38px;
      border: 0;
      border-right: 1px solid rgba(24, 23, 21, 0.08);
      background: transparent;
      color: rgba(24, 23, 21, 0.58);
      font-family: var(--serif);
      font-size: 13px;
      font-weight: 800;
      letter-spacing: 0.1em;
      cursor: pointer;
    }

    .ai-qa-history-filter button:last-child {
      border-right: 0;
    }

    .ai-qa-history-filter button.active {
      color: var(--seal);
      background: rgba(167, 52, 39, 0.055);
    }

    .ai-qa-history-filter small {
      color: inherit;
      font-family: var(--sans);
      font-size: 12px;
      letter-spacing: 0.02em;
    }

    .ai-qa-history-date-filter {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-top: 12px;
      padding: 10px 12px;
      border: 1px solid rgba(76, 139, 102, 0.13);
      border-radius: 8px;
      background: rgba(76, 139, 102, 0.045);
      color: rgba(24, 23, 21, 0.58);
      font-family: var(--sans);
      font-size: 12px;
      line-height: 1.45;
      letter-spacing: 0.04em;
    }

    .ai-qa-history-date-filter[hidden] {
      display: none;
    }

    .ai-qa-history-date-filter b {
      color: var(--wood);
      font-weight: 800;
    }

    .ai-qa-history-date-filter button {
      flex: 0 0 auto;
      min-height: 30px;
      padding: 0 10px;
      border: 1px solid rgba(167, 52, 39, 0.18);
      border-radius: 999px;
      background: rgba(255, 252, 247, 0.62);
      color: var(--seal);
      font-family: var(--sans);
      font-size: 12px;
      font-weight: 800;
      letter-spacing: 0.08em;
      cursor: pointer;
    }

    .ai-qa-history-timeline {
      display: grid;
      gap: 24px;
      margin-top: 26px;
    }

    .ai-qa-history-day {
      display: grid;
      gap: 2px;
    }

    .ai-qa-history-day > header {
      display: grid;
      grid-template-columns: auto auto 1fr;
      align-items: center;
      gap: 10px;
      color: rgba(24, 23, 21, 0.54);
      font-family: var(--sans);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.1em;
    }

    .ai-qa-history-day > header::after {
      content: "";
      height: 1px;
      background: rgba(24, 23, 21, 0.08);
    }

    .ai-qa-history-day > header b {
      color: rgba(24, 23, 21, 0.72);
      font-family: var(--serif);
      font-size: 20px;
      font-weight: 800;
      letter-spacing: 0.12em;
    }

    .ai-qa-history-day-list {
      position: relative;
      display: grid;
      --timeline-center: 22px;
      --timeline-dot-size: 34px;
      --timeline-dot-top: 20px;
      padding-left: 50px;
    }

    .ai-qa-history-day-list::before {
      content: "";
      position: absolute;
      left: var(--timeline-center);
      top: calc(var(--timeline-dot-top) + var(--timeline-dot-size) / 2);
      bottom: calc(var(--timeline-dot-top) + var(--timeline-dot-size) / 2);
      width: 1px;
      transform: translateX(-0.5px);
      background: linear-gradient(180deg, rgba(76, 139, 102, 0.34), rgba(167, 52, 39, 0.28));
    }

    .ai-qa-history-row {
      position: relative;
      display: grid;
      grid-template-columns: minmax(0, 1fr) 36px;
      align-items: center;
      width: 100%;
      min-height: 112px;
      padding: 17px 0 16px;
      border: 0;
      border-bottom: 1px solid rgba(24, 23, 21, 0.08);
      background: transparent;
      color: inherit;
      font: inherit;
      text-align: left;
      cursor: pointer;
    }

    .ai-qa-history-row:last-child {
      border-bottom: 0;
    }

    .ai-qa-history-row:focus-visible {
      outline: 2px solid rgba(76, 139, 102, 0.3);
      outline-offset: 4px;
    }

    .ai-qa-history-dot {
      position: absolute;
      left: calc(var(--timeline-center) - 50px - var(--timeline-dot-size) / 2);
      top: var(--timeline-dot-top);
      display: grid;
      place-items: center;
      width: var(--timeline-dot-size);
      height: var(--timeline-dot-size);
      border: 1px solid rgba(76, 139, 102, 0.22);
      border-radius: 50%;
      color: var(--wood);
      background: rgba(255, 252, 247, 0.88);
      box-shadow: 0 8px 18px rgba(54, 44, 32, 0.06);
      font-family: var(--serif);
      font-size: 16px;
      font-weight: 800;
      line-height: 1;
    }

    .ai-qa-history-row.annual .ai-qa-history-dot {
      border-color: rgba(167, 52, 39, 0.24);
      color: var(--seal);
    }

    .ai-qa-history-row.fengshui .ai-qa-history-dot {
      border-color: rgba(76, 139, 102, 0.28);
      color: var(--wood);
      background: rgba(240, 248, 241, 0.9);
    }

    .ai-qa-history-row-main {
      display: grid;
      gap: 8px;
      min-width: 0;
    }

    .ai-qa-history-row-meta {
      display: flex;
      align-items: center;
      gap: 7px;
      min-width: 0;
      color: rgba(24, 23, 21, 0.46);
      font-family: var(--sans);
      font-size: 11px;
      line-height: 1.3;
      letter-spacing: 0.06em;
      white-space: nowrap;
    }

    .ai-qa-history-row-meta time {
      flex: 0 0 auto;
    }

    .ai-qa-history-row-meta span {
      max-width: 116px;
      padding: 3px 7px;
      overflow: hidden;
      border: 1px solid rgba(76, 139, 102, 0.14);
      border-radius: 999px;
      background: rgba(76, 139, 102, 0.045);
      color: rgba(24, 23, 21, 0.5);
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .ai-qa-history-row.annual .ai-qa-history-row-meta span {
      border-color: rgba(167, 52, 39, 0.14);
      background: rgba(167, 52, 39, 0.04);
    }

    .ai-qa-history-row h2 {
      margin: 0;
      color: var(--ink);
      font-size: 18px;
      font-weight: 800;
      line-height: 1.42;
      letter-spacing: 0.06em;
      display: -webkit-box;
      overflow: hidden;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
    }

    .ai-qa-history-row p {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      gap: 8px;
      align-items: start;
      margin: 0;
      color: rgba(24, 23, 21, 0.58);
      font-family: var(--sans);
      font-size: 12px;
      line-height: 1.62;
      letter-spacing: 0.04em;
    }

    .ai-qa-history-row p b {
      color: var(--seal);
      font-family: var(--serif);
      font-size: 16px;
      line-height: 1.2;
    }

    .ai-qa-history-row p span {
      display: -webkit-box;
      overflow: hidden;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
    }

    .ai-qa-history-actions {
      position: relative;
      display: grid;
      justify-items: end;
      align-self: start;
      padding-top: 1px;
      z-index: 2;
    }

    .ai-qa-history-more {
      display: grid;
      place-items: center;
      gap: 3px;
      width: 34px;
      height: 34px;
      border: 1px solid transparent;
      border-radius: 50%;
      background: transparent;
      cursor: pointer;
      transition: background 180ms var(--ease), border-color 180ms var(--ease);
    }

    .ai-qa-history-more span {
      display: block;
      width: 4px;
      height: 4px;
      border-radius: 50%;
      background: rgba(24, 23, 21, 0.38);
      pointer-events: none;
    }

    .ai-qa-history-more:hover,
    .ai-qa-history-more:focus-visible,
    .ai-qa-history-more[aria-expanded="true"] {
      border-color: rgba(113, 93, 62, 0.14);
      background: rgba(255, 252, 247, 0.72);
      outline: none;
    }

    .ai-qa-history-menu {
      position: absolute;
      top: 38px;
      right: 0;
      min-width: 86px;
      padding: 5px;
      border: 1px solid rgba(167, 52, 39, 0.16);
      border-radius: 10px;
      background: rgba(255, 252, 247, 0.96);
      box-shadow: 0 14px 34px rgba(54, 44, 32, 0.15);
    }

    .ai-qa-history-menu button {
      width: 100%;
      min-height: 34px;
      padding: 0 10px;
      border: 0;
      border-radius: 8px;
      background: transparent;
      color: var(--seal);
      font-family: var(--sans);
      font-size: 12px;
      font-weight: 800;
      letter-spacing: 0.08em;
      white-space: nowrap;
      cursor: pointer;
    }

    .ai-qa-history-menu button:hover,
    .ai-qa-history-menu button:focus-visible,
    .ai-qa-history-menu button.is-confirming {
      background: rgba(167, 52, 39, 0.08);
      outline: none;
    }

    .ai-qa-history-placeholder,
    .ai-qa-history-empty {
      display: grid;
      place-items: center;
      padding: 22px 18px;
      border: 1px solid rgba(113, 93, 62, 0.12);
      border-radius: 8px;
      background: rgba(255, 252, 247, 0.5);
      color: rgba(24, 23, 21, 0.5);
      font-family: var(--sans);
      font-size: 13px;
      line-height: 1.72;
      letter-spacing: 0.06em;
      text-align: center;
    }

    .ai-qa-history-empty {
      min-height: 230px;
      margin-top: 24px;
      background:
        radial-gradient(circle at 50% 28%, rgba(173, 138, 77, 0.1), transparent 36%),
        rgba(255, 252, 247, 0.56);
      font-family: var(--serif);
      font-size: 15px;
      letter-spacing: 0.08em;
    }

    .ai-qa-calendar {
      position: fixed;
      inset: 0;
      z-index: 95;
      pointer-events: none;
    }

    .ai-qa-calendar.is-open {
      pointer-events: auto;
    }

    .ai-qa-calendar-scrim {
      position: absolute;
      inset: 0;
      border: 0;
      background: rgba(24, 23, 21, 0.26);
      opacity: 0;
      backdrop-filter: blur(2px);
      transition: opacity 240ms var(--ease);
    }

    .ai-qa-calendar.is-open .ai-qa-calendar-scrim {
      opacity: 1;
    }

    .ai-qa-calendar-panel {
      position: absolute;
      left: 50%;
      bottom: 0;
      display: grid;
      grid-template-rows: auto minmax(0, 1fr);
      width: min(430px, 100vw);
      max-height: min(76dvh, calc(100dvh - 28px));
      padding: max(14px, env(safe-area-inset-top)) 16px max(18px, env(safe-area-inset-bottom));
      border: 1px solid rgba(173, 138, 77, 0.22);
      border-bottom: 0;
      border-radius: 22px 22px 0 0;
      background:
        radial-gradient(circle at 88% 6%, rgba(76, 139, 102, 0.1), transparent 30%),
        linear-gradient(180deg, rgba(255, 252, 247, 0.95), rgba(246, 238, 224, 0.99));
      box-shadow: 0 -24px 68px rgba(54, 44, 32, 0.24);
      outline: none;
      overflow: hidden;
      transform: translate(-50%, 100%);
      transition: transform 280ms var(--ease);
    }

    .ai-qa-calendar.is-open .ai-qa-calendar-panel {
      transform: translate(-50%, 0);
    }

    .ai-qa-calendar-head {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 40px;
      gap: 12px;
      align-items: center;
      padding-bottom: 13px;
      border-bottom: 1px solid rgba(24, 23, 21, 0.08);
    }

    .ai-qa-calendar-head p {
      margin: 0 0 4px;
      color: var(--seal);
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.18em;
    }

    .ai-qa-calendar-head h2 {
      margin: 0;
      color: var(--ink);
      font-family: var(--serif);
      font-size: 24px;
      line-height: 1.18;
      letter-spacing: 0.08em;
    }

    .ai-qa-calendar-close {
      display: grid;
      place-items: center;
      width: 40px;
      height: 40px;
      border: 1px solid rgba(24, 23, 21, 0.1);
      border-radius: 50%;
      background: rgba(255, 252, 247, 0.72);
      color: rgba(24, 23, 21, 0.6);
      font-size: 24px;
      line-height: 1;
      cursor: pointer;
    }

    .ai-qa-calendar-body {
      display: grid;
      align-content: start;
      gap: 13px;
      padding-top: 15px;
      overflow-y: auto;
      scrollbar-width: thin;
    }

    .ai-qa-calendar-toolbar {
      display: grid;
      grid-template-columns: 40px minmax(0, 1fr) 40px;
      gap: 10px;
      align-items: center;
    }

    .ai-qa-calendar-toolbar strong {
      color: var(--ink);
      font-family: var(--serif);
      font-size: 20px;
      line-height: 1;
      letter-spacing: 0.1em;
      text-align: center;
    }

    .ai-qa-calendar-toolbar button,
    .ai-qa-calendar-active button {
      border: 1px solid rgba(113, 93, 62, 0.13);
      background: rgba(255, 252, 247, 0.68);
      color: rgba(24, 23, 21, 0.64);
      font-family: var(--sans);
      font-weight: 800;
      cursor: pointer;
    }

    .ai-qa-calendar-toolbar button {
      display: grid;
      place-items: center;
      width: 40px;
      height: 40px;
      border-radius: 999px;
      font-size: 24px;
      line-height: 1;
    }

    .ai-qa-calendar-active {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      min-height: 34px;
      color: rgba(24, 23, 21, 0.52);
      font-family: var(--sans);
      font-size: 12px;
      line-height: 1.45;
      letter-spacing: 0.05em;
    }

    .ai-qa-calendar-active button {
      flex: 0 0 auto;
      min-height: 30px;
      padding: 0 10px;
      border-color: rgba(167, 52, 39, 0.18);
      border-radius: 999px;
      color: var(--seal);
      font-size: 12px;
      letter-spacing: 0.08em;
    }

    .ai-qa-calendar-week,
    .ai-qa-calendar-grid {
      display: grid;
      grid-template-columns: repeat(7, minmax(0, 1fr));
      gap: 6px;
    }

    .ai-qa-calendar-week span {
      color: rgba(24, 23, 21, 0.42);
      font-family: var(--sans);
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.1em;
      text-align: center;
    }

    .ai-qa-calendar-day {
      position: relative;
      display: grid;
      place-items: center;
      min-width: 0;
      aspect-ratio: 1;
      border: 1px solid transparent;
      border-radius: 12px;
      background: transparent;
      color: rgba(24, 23, 21, 0.58);
      font-family: var(--sans);
      font-size: 14px;
      font-weight: 800;
      cursor: pointer;
      transition: border-color 180ms var(--ease), background 180ms var(--ease), color 180ms var(--ease), transform 180ms var(--ease);
    }

    .ai-qa-calendar-day.blank {
      pointer-events: none;
    }

    .ai-qa-calendar-day.today {
      color: var(--wood);
      background: rgba(76, 139, 102, 0.055);
    }

    .ai-qa-calendar-day.has-record {
      border-color: rgba(76, 139, 102, 0.15);
      background: rgba(255, 252, 247, 0.72);
      color: var(--ink);
      box-shadow: 0 8px 18px rgba(54, 44, 32, 0.05);
    }

    .ai-qa-calendar-day.has-annual {
      border-color: rgba(167, 52, 39, 0.16);
    }

    .ai-qa-calendar-day.selected {
      border-color: rgba(167, 52, 39, 0.32);
      background: rgba(167, 52, 39, 0.08);
      color: var(--seal);
    }

    .ai-qa-calendar-day:hover,
    .ai-qa-calendar-day:focus-visible {
      border-color: rgba(167, 52, 39, 0.26);
      background: rgba(167, 52, 39, 0.06);
      outline: none;
      transform: translateY(-1px);
    }

    .ai-qa-calendar-day.is-future,
    .ai-qa-calendar-day.is-future.today,
    .ai-qa-calendar-day.is-future.has-record,
    .ai-qa-calendar-day.is-future.has-annual,
    .ai-qa-calendar-day.is-future.selected {
      border-color: transparent;
      background: transparent;
      color: rgba(24, 23, 21, 0.24);
      box-shadow: none;
      cursor: not-allowed;
      opacity: 0.72;
    }

    .ai-qa-calendar-day.is-future:hover,
    .ai-qa-calendar-day.is-future:focus-visible {
      border-color: transparent;
      background: transparent;
      outline: none;
      transform: none;
    }

    .ai-qa-calendar-day i {
      position: absolute;
      right: 8px;
      bottom: 8px;
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: rgba(76, 139, 102, 0.16);
      font-style: normal;
    }

    .ai-qa-calendar-day.has-annual i {
      background: rgba(167, 52, 39, 0.14);
    }

    .ai-qa-calendar-day.has-bazi i {
      background: var(--wood);
    }

    .ai-qa-calendar-day.has-annual i {
      background: var(--seal);
    }

    .ai-qa-calendar-day.has-bazi.has-annual i {
      display: none;
    }

    .ai-qa-calendar-day.has-bazi.has-annual::after {
      content: "";
      position: absolute;
      left: 6px;
      bottom: 7px;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--wood);
      box-shadow: 8px 0 0 var(--seal);
    }

    .ai-qa-calendar-day.is-future i {
      background: rgba(24, 23, 21, 0.18);
    }

    .ai-qa-calendar-day.is-future.has-bazi.has-annual::after {
      background: rgba(24, 23, 21, 0.18);
      box-shadow: 8px 0 0 rgba(24, 23, 21, 0.14);
    }

    .ai-qa-calendar-legend {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      color: rgba(24, 23, 21, 0.48);
      font-family: var(--sans);
      font-size: 11px;
      letter-spacing: 0.06em;
    }

    .ai-qa-calendar-legend span {
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    .ai-qa-calendar-legend span::before {
      content: "";
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--wood);
    }

    .ai-qa-calendar-legend .annual::before {
      background: var(--seal);
    }

    .ai-qa-history-detail {
      position: fixed;
      inset: 0;
      z-index: 96;
      pointer-events: none;
    }

    .ai-qa-history-detail.is-open {
      pointer-events: auto;
    }

    .ai-qa-history-detail-scrim {
      position: absolute;
      inset: 0;
      border: 0;
      background: rgba(24, 23, 21, 0.28);
      opacity: 0;
      backdrop-filter: blur(2px);
      transition: opacity 240ms var(--ease);
    }

    .ai-qa-history-detail.is-open .ai-qa-history-detail-scrim {
      opacity: 1;
    }

    .ai-qa-history-detail-panel {
      position: absolute;
      left: 50%;
      bottom: 0;
      display: grid;
      grid-template-rows: auto minmax(0, 1fr);
      width: min(430px, 100vw);
      height: min(88dvh, calc(100dvh - 12px));
      padding: max(14px, env(safe-area-inset-top)) 16px max(18px, env(safe-area-inset-bottom));
      border: 1px solid rgba(173, 138, 77, 0.22);
      border-bottom: 0;
      border-radius: 22px 22px 0 0;
      background:
        radial-gradient(circle at 86% 0%, rgba(76, 139, 102, 0.1), transparent 30%),
        radial-gradient(circle at 12% 28%, rgba(167, 52, 39, 0.055), transparent 28%),
        linear-gradient(180deg, rgba(255, 252, 247, 0.92), rgba(246, 238, 224, 0.98));
      box-shadow: 0 -24px 68px rgba(54, 44, 32, 0.24);
      outline: none;
      overflow: hidden;
      transform: translate(-50%, 100%);
      transition: transform 280ms var(--ease);
    }

    .ai-qa-history-detail.is-open .ai-qa-history-detail-panel {
      transform: translate(-50%, 0);
    }

    .ai-qa-history-detail-head {
      display: grid;
      grid-template-columns: 40px minmax(0, 1fr) 38px;
      gap: 11px;
      align-items: center;
      padding-bottom: 13px;
      border-bottom: 1px solid rgba(24, 23, 21, 0.08);
    }

    .ai-qa-history-detail-head .icon-button {
      width: 40px;
      height: 40px;
    }

    .ai-qa-history-detail-head p {
      margin: 0 0 4px;
      color: var(--seal);
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.18em;
    }

    .ai-qa-history-detail-head h2 {
      margin: 0;
      overflow: hidden;
      color: var(--ink);
      font-family: var(--serif);
      font-size: 22px;
      line-height: 1.2;
      letter-spacing: 0.06em;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .ai-qa-history-detail-head > span {
      display: grid;
      place-items: center;
      width: 38px;
      height: 38px;
      border-radius: 12px;
      background: rgba(76, 139, 102, 0.12);
      color: var(--wood);
      font-family: var(--serif);
      font-size: 18px;
      font-weight: 900;
    }

    .ai-qa-history-detail-body {
      display: grid;
      align-content: start;
      gap: 15px;
      padding: 16px 0 8px;
      overflow-y: auto;
      scrollbar-width: thin;
    }

    .ai-qa-history-detail-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 7px;
      align-items: center;
      color: rgba(24, 23, 21, 0.5);
      font-size: 11px;
      letter-spacing: 0.05em;
    }

    .ai-qa-history-detail-meta span,
    .ai-qa-history-detail-meta time {
      padding: 4px 8px;
      border: 1px solid rgba(76, 139, 102, 0.14);
      border-radius: 999px;
      background: rgba(255, 252, 247, 0.58);
    }

    .ai-qa-history-detail-thread {
      display: grid;
      gap: 18px;
    }

    .ai-qa-history-detail-exchange {
      display: grid;
      gap: 10px;
    }

    .ai-qa-history-detail-question,
    .ai-qa-history-detail-answer {
      display: grid;
      gap: 10px;
      padding: 15px;
      border: 1px solid rgba(173, 138, 77, 0.16);
      border-radius: 8px;
      background: rgba(255, 252, 247, 0.58);
      box-shadow: 0 12px 30px rgba(54, 44, 32, 0.055);
    }

    .ai-qa-history-detail-question {
      grid-template-columns: 30px minmax(0, 1fr);
      align-items: start;
    }

    .ai-qa-history-detail-question time {
      display: block;
      margin: 1px 0 6px;
      color: rgba(24, 23, 21, 0.42);
      font-family: var(--sans);
      font-size: 11px;
      letter-spacing: 0.06em;
    }

    .ai-qa-history-detail-question small,
    .ai-qa-history-detail-answer-title small {
      display: grid;
      place-items: center;
      width: 30px;
      height: 30px;
      border-radius: 10px;
      background: rgba(167, 52, 39, 0.08);
      color: var(--seal);
      font-family: var(--serif);
      font-size: 16px;
      font-weight: 900;
    }

    .ai-qa-history-detail-question h3,
    .ai-qa-history-detail-answer h3 {
      margin: 0;
      color: var(--ink);
      font-family: var(--serif);
      font-size: 20px;
      line-height: 1.42;
      letter-spacing: 0.05em;
    }

    .ai-qa-history-detail-answer-title {
      display: grid;
      grid-template-columns: 30px minmax(0, 1fr);
      gap: 10px;
      align-items: center;
    }

    .ai-qa-history-detail-answer p {
      margin: 0;
      color: rgba(24, 23, 21, 0.66);
      font-size: 13px;
      line-height: 1.72;
      letter-spacing: 0.035em;
    }

    .ai-qa-history-detail-basis {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }

    .ai-qa-history-detail-basis span {
      padding: 4px 7px;
      border: 1px solid rgba(24, 23, 21, 0.08);
      border-radius: 999px;
      background: rgba(236, 224, 204, 0.5);
      color: rgba(24, 23, 21, 0.52);
      font-size: 10px;
      font-weight: 800;
      letter-spacing: 0.06em;
    }

    .ai-qa-history-detail-actions {
      display: grid;
      gap: 8px;
    }

    .ai-qa-history-detail-actions div {
      display: grid;
      grid-template-columns: 26px minmax(0, 1fr);
      gap: 8px;
      align-items: center;
      color: rgba(24, 23, 21, 0.64);
      font-size: 12px;
      line-height: 1.45;
    }

    .ai-qa-history-detail-actions b {
      display: grid;
      place-items: center;
      width: 24px;
      height: 24px;
      border-radius: 8px;
      background: rgba(76, 139, 102, 0.1);
      color: var(--wood);
      font-family: var(--serif);
      font-size: 13px;
    }

    .ai-qa-history-detail-answer em {
      color: rgba(167, 52, 39, 0.62);
      font-size: 11px;
      font-style: normal;
      line-height: 1.5;
    }

    .fengshui-screen {
      padding-top: 20px;
      font-family: var(--serif);
      background:
        radial-gradient(circle at 84% 8%, rgba(173, 138, 77, 0.1), transparent 28%),
        radial-gradient(circle at 18% 38%, rgba(76, 139, 102, 0.07), transparent 30%);
    }

    .fengshui-copy {
      max-width: 306px;
      margin: 12px auto 0;
      color: rgba(24, 23, 21, 0.64);
      font-size: 14px;
      line-height: 1.72;
      text-align: center;
      letter-spacing: 0.08em;
      text-wrap: pretty;
    }

    .fengshui-hero {
      position: relative;
      min-height: 224px;
      margin: 2px -22px 0;
      overflow: hidden;
    }

    .fengshui-landscape {
      position: absolute;
      left: 50%;
      bottom: -12px;
      width: 500px;
      max-width: none;
      opacity: 0.76;
      mix-blend-mode: multiply;
      transform: translateX(-50%);
    }

    .fengshui-hero-badge {
      position: absolute;
      left: 30px;
      top: 28px;
      display: grid;
      place-items: center;
      width: 60px;
      height: 60px;
      border: 1px solid rgba(167, 52, 39, 0.2);
      border-radius: 50%;
      color: var(--seal);
      background:
        radial-gradient(circle, rgba(255, 252, 247, 0.94) 0 45%, transparent 46%),
        conic-gradient(from 12deg, rgba(167, 52, 39, 0.2), rgba(173, 138, 77, 0.24), rgba(76, 139, 102, 0.22), rgba(167, 52, 39, 0.2));
      box-shadow: 0 14px 30px rgba(54, 44, 32, 0.1);
      font-family: Georgia, var(--serif);
      font-size: 20px;
      letter-spacing: 0;
    }

    .fengshui-hero-metrics {
      position: absolute;
      right: 26px;
      bottom: 32px;
      display: grid;
      gap: 6px;
      min-width: 128px;
      padding: 12px 12px 11px;
      border: 1px solid rgba(113, 93, 62, 0.14);
      border-radius: 8px;
      background: rgba(255, 252, 247, 0.76);
      box-shadow: 0 18px 44px rgba(54, 44, 32, 0.08);
    }

    .fengshui-hero-metrics span {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      color: rgba(24, 23, 21, 0.58);
      font-family: var(--sans);
      font-size: 11px;
      letter-spacing: 0.06em;
    }

    .fengshui-hero-metrics b {
      color: var(--ink);
      font-family: Georgia, var(--serif);
      font-size: 16px;
      font-weight: 600;
      letter-spacing: 0;
    }

    .fengshui-mode-list {
      display: grid;
      gap: 12px;
      margin-top: 8px;
    }

    .fengshui-mode {
      position: relative;
      display: grid;
      min-height: 172px;
      padding: 17px 17px 15px;
      border: 1px solid rgba(113, 93, 62, 0.18);
      border-radius: 8px;
      background:
        linear-gradient(180deg, rgba(255, 252, 247, 0.72), rgba(248, 241, 229, 0.52)),
        rgba(255, 252, 247, 0.64);
      overflow: hidden;
      box-shadow: 0 16px 40px rgba(54, 44, 32, 0.06);
      cursor: pointer;
      transition: transform 360ms var(--ease), border-color 360ms var(--ease), background 360ms var(--ease), box-shadow 360ms var(--ease);
    }

    .fengshui-mode img {
      position: absolute;
      right: -42px;
      bottom: -26px;
      width: 232px;
      opacity: 0.28;
      mix-blend-mode: multiply;
      pointer-events: none;
    }

    .fengshui-mode.room img {
      right: -72px;
      bottom: -4px;
      width: 292px;
      opacity: 0.3;
    }

    .fengshui-mode-content {
      position: relative;
      z-index: 1;
      align-self: end;
      display: grid;
      gap: 7px;
    }

    .fengshui-upload-mark {
      display: grid;
      place-items: center;
      width: 42px;
      height: 42px;
      margin-bottom: 18px;
      border: 1px solid rgba(167, 52, 39, 0.24);
      border-radius: 50%;
      color: #fffaf1;
      background: linear-gradient(180deg, rgba(185, 73, 58, 0.95), rgba(140, 50, 38, 0.95));
      box-shadow: 0 14px 28px rgba(167, 52, 39, 0.18);
    }

    .fengshui-mode.room .fengshui-upload-mark {
      border-color: rgba(76, 139, 102, 0.28);
      background: linear-gradient(180deg, rgba(96, 157, 121, 0.96), rgba(59, 120, 86, 0.96));
      box-shadow: 0 14px 28px rgba(76, 139, 102, 0.16);
    }

    .fengshui-upload-mark svg {
      width: 21px;
      height: 21px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .fengshui-mode h2 {
      margin: 0;
      color: var(--ink);
      font-size: 22px;
      letter-spacing: 0.08em;
      line-height: 1.1;
    }

    .fengshui-mode p {
      max-width: 224px;
      margin: 0;
      color: rgba(24, 23, 21, 0.58);
      font-size: 13px;
      line-height: 1.48;
      letter-spacing: 0.07em;
    }

    .fengshui-mode-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-top: 4px;
    }

    .fengshui-mode-meta span,
    .fengshui-chip,
    .fengshui-layer-chips span {
      display: inline-flex;
      align-items: center;
      min-height: 24px;
      padding: 4px 8px 3px;
      border: 1px solid rgba(113, 93, 62, 0.14);
      border-radius: 999px;
      color: rgba(24, 23, 21, 0.58);
      background: rgba(255, 252, 247, 0.6);
      font-family: var(--sans);
      font-size: 11px;
      letter-spacing: 0.03em;
    }

    .fengshui-evidence-strip {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
      margin-top: 14px;
    }

    .fengshui-evidence-item {
      display: grid;
      align-content: start;
      gap: 5px;
      min-height: 82px;
      padding: 10px 9px;
      border: 1px solid rgba(113, 93, 62, 0.14);
      border-radius: 8px;
      background: rgba(255, 252, 247, 0.56);
    }

    .fengshui-evidence-item b {
      color: var(--ink);
      font-size: 15px;
      letter-spacing: 0.08em;
    }

    .fengshui-evidence-item span {
      color: rgba(24, 23, 21, 0.54);
      font-family: var(--sans);
      font-size: 11px;
      line-height: 1.45;
      letter-spacing: 0.02em;
    }

    .fengshui-note {
      margin: 14px 0 0;
      padding: 12px 14px;
      border-left: 2px solid rgba(167, 52, 39, 0.48);
      color: rgba(24, 23, 21, 0.58);
      background: rgba(255, 252, 247, 0.48);
      font-size: 12px;
      line-height: 1.62;
      letter-spacing: 0.06em;
    }

    .fengshui-tabs {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      margin: 12px -4px 0;
      border-bottom: 1px solid rgba(24, 23, 21, 0.1);
    }

    .fengshui-tabs span {
      display: grid;
      place-items: center;
      min-height: 36px;
      color: rgba(24, 23, 21, 0.56);
      font-size: 13px;
      letter-spacing: 0.14em;
    }

    .fengshui-tabs .active {
      color: var(--seal);
      box-shadow: inset 0 -1px 0 var(--seal);
    }

    .fengshui-layer-chips {
      display: flex;
      gap: 7px;
      margin-top: 12px;
      overflow-x: auto;
      scrollbar-width: none;
    }

    .fengshui-layer-chips::-webkit-scrollbar {
      display: none;
    }

    .fengshui-layer-chips .active {
      border-color: rgba(167, 52, 39, 0.28);
      color: var(--seal);
      background: rgba(167, 52, 39, 0.07);
    }

    .fengshui-map-stage {
      position: relative;
      min-height: 382px;
      margin: 2px -18px 0;
      display: grid;
      place-items: center;
      overflow: hidden;
    }

    .fengshui-floorplan-art {
      width: 392px;
      max-width: none;
      opacity: 0.94;
      mix-blend-mode: multiply;
      filter: drop-shadow(0 22px 42px rgba(54, 44, 32, 0.08));
    }

    .fengshui-bagua-grid {
      position: absolute;
      left: 50%;
      top: 52%;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: repeat(3, 1fr);
      width: min(312px, calc(100% - 76px));
      aspect-ratio: 1;
      border: 1px solid rgba(167, 52, 39, 0.22);
      background:
        linear-gradient(90deg, transparent calc(33.333% - 0.5px), rgba(167, 52, 39, 0.18) calc(33.333% - 0.5px) calc(33.333% + 0.5px), transparent calc(33.333% + 0.5px)),
        linear-gradient(90deg, transparent calc(66.666% - 0.5px), rgba(167, 52, 39, 0.18) calc(66.666% - 0.5px) calc(66.666% + 0.5px), transparent calc(66.666% + 0.5px)),
        linear-gradient(0deg, transparent calc(33.333% - 0.5px), rgba(167, 52, 39, 0.18) calc(33.333% - 0.5px) calc(33.333% + 0.5px), transparent calc(33.333% + 0.5px)),
        linear-gradient(0deg, transparent calc(66.666% - 0.5px), rgba(167, 52, 39, 0.18) calc(66.666% - 0.5px) calc(66.666% + 0.5px), transparent calc(66.666% + 0.5px));
      opacity: 0.72;
      pointer-events: none;
      transform: translate(-50%, -50%);
    }

    .fengshui-bagua-grid span {
      display: grid;
      place-items: start end;
      padding: 7px;
      color: rgba(24, 23, 21, 0.52);
      font-family: var(--sans);
      font-size: 10px;
      letter-spacing: 0.02em;
    }

    .fengshui-direction,
    .fengshui-plan-pin {
      position: absolute;
      display: grid;
      place-items: center;
      border: 1px solid rgba(173, 138, 77, 0.28);
      border-radius: 50%;
      color: rgba(24, 23, 21, 0.72);
      background: rgba(255, 252, 247, 0.76);
      font-weight: 800;
      box-shadow: 0 10px 24px rgba(54, 44, 32, 0.08);
    }

    .fengshui-direction {
      width: 30px;
      height: 30px;
      font-size: 15px;
    }

    .fengshui-direction.north { top: 18px; left: 50%; transform: translateX(-50%); }
    .fengshui-direction.east { top: 50%; right: 12px; transform: translateY(-50%); color: var(--wood); }
    .fengshui-direction.south { bottom: 18px; left: 50%; transform: translateX(-50%); color: var(--seal); }
    .fengshui-direction.west { top: 50%; left: 12px; transform: translateY(-50%); }

    .fengshui-plan-pin {
      width: 38px;
      height: 38px;
      color: var(--seal);
      font-size: 12px;
      letter-spacing: 0.04em;
    }

    .fengshui-plan-pin.center { left: 50%; top: 52%; transform: translate(-50%, -50%); }
    .fengshui-plan-pin.entry { left: 48%; bottom: 51px; color: var(--seal); }
    .fengshui-plan-pin.bath { right: 71px; top: 54%; color: var(--water); }

    .fengshui-map-summary,
    .fengshui-room-score-card {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      margin-top: 2px;
      border: 1px solid rgba(113, 93, 62, 0.16);
      border-radius: 8px;
      background: rgba(255, 252, 247, 0.58);
      overflow: hidden;
    }

    .fengshui-map-summary div,
    .fengshui-room-score-card div {
      display: grid;
      justify-items: center;
      align-content: center;
      min-height: 94px;
      padding: 10px 6px;
      text-align: center;
      color: rgba(24, 23, 21, 0.58);
      font-size: 11px;
      line-height: 1.55;
      letter-spacing: 0.06em;
    }

    .fengshui-map-summary div + div,
    .fengshui-room-score-card div + div {
      border-left: 1px solid rgba(24, 23, 21, 0.08);
    }

    .fengshui-map-summary strong,
    .fengshui-room-score-card strong {
      color: var(--ink);
      font-size: 16px;
      letter-spacing: 0.08em;
    }

    .fengshui-map-summary .score,
    .fengshui-room-score-card .score {
      color: var(--seal);
      font-family: Georgia, var(--serif);
      font-size: 30px;
      letter-spacing: 0;
      line-height: 1;
    }

    .fengshui-insight-list,
    .fengshui-tip-list,
    .fengshui-tracker {
      display: grid;
      gap: 10px;
      margin-top: 14px;
    }

    .fengshui-insight-row,
    .fengshui-tip-row,
    .fengshui-tracker-row,
    .fengshui-lock-row {
      display: grid;
      grid-template-columns: auto 1fr auto;
      align-items: center;
      gap: 12px;
      min-height: 70px;
      padding: 12px;
      border: 1px solid rgba(113, 93, 62, 0.14);
      border-radius: 8px;
      background: rgba(255, 252, 247, 0.56);
    }

    .fengshui-insight-row i,
    .fengshui-tip-row i,
    .fengshui-tracker-row i,
    .fengshui-lock-row i {
      display: grid;
      place-items: center;
      width: 34px;
      height: 34px;
      border-radius: 50%;
      color: #fffaf1;
      background: rgba(76, 139, 102, 0.92);
      font-style: normal;
      font-size: 13px;
    }

    .fengshui-insight-row.warn i,
    .fengshui-tip-row.warn i,
    .fengshui-lock-row i {
      background: rgba(167, 52, 39, 0.9);
    }

    .fengshui-insight-row b,
    .fengshui-tip-row b,
    .fengshui-tracker-row b,
    .fengshui-lock-row b {
      display: block;
      margin-bottom: 3px;
      color: var(--ink);
      font-size: 15px;
      letter-spacing: 0.08em;
    }

    .fengshui-insight-row span,
    .fengshui-tip-row span,
    .fengshui-tracker-row span,
    .fengshui-lock-row span {
      color: rgba(24, 23, 21, 0.58);
      font-family: var(--sans);
      font-size: 12px;
      line-height: 1.46;
      letter-spacing: 0.02em;
    }

    .fengshui-insight-row em,
    .fengshui-tip-row em {
      color: rgba(24, 23, 21, 0.42);
      font-family: Georgia, var(--serif);
      font-style: normal;
      font-size: 20px;
    }

    .fengshui-section-title {
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 12px;
      margin: 18px 0 0;
    }

    .fengshui-section-title h2 {
      margin: 0;
      color: var(--ink);
      font-size: 19px;
      letter-spacing: 0.1em;
    }

    .fengshui-section-title span {
      color: rgba(24, 23, 21, 0.48);
      font-family: var(--sans);
      font-size: 12px;
      letter-spacing: 0.04em;
      white-space: nowrap;
    }

    .fengshui-action-bar {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      margin-top: 14px;
    }

    .fengshui-action-bar button {
      min-height: 46px;
      border: 1px solid rgba(113, 93, 62, 0.2);
      border-radius: 8px;
      background: rgba(255, 252, 247, 0.66);
      color: rgba(24, 23, 21, 0.74);
      cursor: pointer;
    }

    .fengshui-action-bar .primary {
      border-color: rgba(167, 52, 39, 0.24);
      color: #fffaf1;
      background: linear-gradient(180deg, rgba(174, 70, 56, 0.96), rgba(135, 49, 39, 0.96));
      box-shadow: 0 16px 30px rgba(167, 52, 39, 0.14);
    }

    .fengshui-room-stage {
      position: relative;
      min-height: 318px;
      margin: 12px -22px 0;
      overflow: hidden;
    }

    .fengshui-room-art {
      position: absolute;
      left: 50%;
      bottom: 0;
      width: 464px;
      max-width: none;
      opacity: 0.88;
      mix-blend-mode: multiply;
      transform: translateX(-50%);
      filter: drop-shadow(0 18px 38px rgba(54, 44, 32, 0.06));
    }

    .fengshui-room-stage .fengshui-bagua-grid {
      top: 50%;
      width: min(284px, calc(100% - 76px));
      border-color: rgba(76, 139, 102, 0.24);
      opacity: 0.66;
    }

    .fengshui-room-compass {
      position: absolute;
      left: 30px;
      top: 28px;
      display: grid;
      place-items: center;
      width: 64px;
      height: 64px;
      border: 1px solid rgba(173, 138, 77, 0.34);
      border-radius: 50%;
      color: var(--seal);
      background:
        radial-gradient(circle, rgba(255, 252, 247, 0.8) 0 36%, transparent 37%),
        conic-gradient(from 45deg, rgba(173, 138, 77, 0.12), rgba(76, 139, 102, 0.18), rgba(167, 52, 39, 0.15), rgba(173, 138, 77, 0.12));
      font-size: 13px;
      letter-spacing: 0.08em;
      box-shadow: 0 14px 28px rgba(54, 44, 32, 0.08);
    }

    .fengshui-room-marker {
      position: absolute;
      display: grid;
      gap: 3px;
      min-width: 82px;
      padding: 7px 9px;
      border: 1px solid rgba(167, 52, 39, 0.18);
      border-radius: 8px;
      background: rgba(255, 252, 247, 0.78);
      color: rgba(24, 23, 21, 0.58);
      font-family: var(--sans);
      font-size: 11px;
      line-height: 1.25;
      letter-spacing: 0.02em;
      box-shadow: 0 12px 28px rgba(54, 44, 32, 0.08);
    }

    .fengshui-room-marker strong {
      color: var(--seal);
      font-family: var(--serif);
      font-size: 14px;
      letter-spacing: 0.08em;
    }

    .fengshui-room-marker.bed { right: 42px; bottom: 64px; }
    .fengshui-room-marker.window { left: 104px; top: 68px; border-color: rgba(76, 139, 102, 0.22); }
    .fengshui-room-marker.window strong { color: var(--wood); }

    [data-screen="fengshui-evidence"] {
      padding-bottom: 132px;
      background:
        radial-gradient(circle at 50% 4%, rgba(173, 138, 77, 0.12), transparent 25%),
        radial-gradient(circle at 88% 26%, rgba(78, 136, 101, 0.08), transparent 20%),
        linear-gradient(180deg, rgba(255, 252, 247, 0.94), rgba(246, 239, 228, 0.92));
    }

    [data-screen="fengshui-evidence"] .fortune-top {
      grid-template-columns: 46px 1fr 46px;
      margin-bottom: 16px;
    }

    [data-screen="fengshui-evidence"] .fortune-title h1 {
      font-size: 31px;
      letter-spacing: 0.08em;
    }

    [data-screen="fengshui-evidence"] .fortune-title .sub {
      margin-top: 5px;
      font-size: 15px;
      letter-spacing: 0.16em;
    }

    .fengshui-archive-button {
      position: relative;
      width: 46px;
      height: 46px;
      border-radius: 18px;
      color: rgba(128, 91, 36, 0.96);
      background: rgba(255, 252, 247, 0.9);
    }

    .fengshui-archive-button svg {
      width: 21px;
      height: 21px;
    }

    .fengshui-archive-button span {
      position: absolute;
      top: 47px;
      left: 50%;
      color: rgba(128, 91, 36, 0.86);
      font-family: var(--serif);
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.08em;
      white-space: nowrap;
      transform: translateX(-50%);
      pointer-events: none;
    }

    .fengshui-voucher-card {
      position: relative;
      display: grid;
      grid-template-columns: 88px 1fr;
      gap: 16px;
      min-height: 188px;
      margin-top: 20px;
      padding: 27px 20px 20px;
      overflow: hidden;
      border: 1px solid rgba(173, 138, 77, 0.34);
      border-radius: 8px;
      background:
        linear-gradient(135deg, rgba(255, 252, 247, 0.96), rgba(247, 238, 222, 0.84)),
        rgba(255, 252, 247, 0.9);
      box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.52),
        0 18px 50px rgba(54, 44, 32, 0.1);
    }

    .fengshui-voucher-card::before,
    .fengshui-voucher-card::after {
      content: "";
      position: absolute;
      inset: 9px;
      border: 1px solid rgba(173, 138, 77, 0.2);
      border-radius: 6px;
      pointer-events: none;
    }

    .fengshui-voucher-card::after {
      inset: 13px;
      border-color: rgba(173, 138, 77, 0.1);
    }

    .fengshui-voucher-watermark {
      position: absolute;
      right: -118px;
      bottom: -48px;
      width: 430px;
      max-width: none;
      opacity: 0.54;
      mix-blend-mode: multiply;
      pointer-events: none;
    }

    .fengshui-voucher-seal {
      position: relative;
      z-index: 1;
      display: grid;
      place-items: center;
      width: 74px;
      height: 74px;
      margin-top: 5px;
      border: 2px solid rgba(167, 52, 39, 0.62);
      border-radius: 6px;
      color: var(--seal);
      background:
        radial-gradient(circle at 46% 44%, rgba(167, 52, 39, 0.08), transparent 66%),
        rgba(255, 252, 247, 0.58);
      font-family: var(--serif);
      font-size: 22px;
      font-style: normal;
      font-weight: 900;
      line-height: 1.15;
      text-align: center;
      letter-spacing: 0.1em;
      box-shadow:
        inset 0 0 0 2px rgba(167, 52, 39, 0.16),
        0 10px 20px rgba(127, 40, 30, 0.08);
      transform: rotate(-2deg);
    }

    .fengshui-voucher-body {
      position: relative;
      z-index: 1;
      min-width: 0;
    }

    .fengshui-voucher-body small {
      display: block;
      margin: 1px 0 7px;
      color: rgba(173, 138, 77, 0.84);
      font-family: var(--serif);
      font-size: 11px;
      letter-spacing: 0.15em;
    }

    .fengshui-voucher-body b {
      display: block;
      color: var(--ink);
      font-family: var(--serif);
      font-size: 24px;
      line-height: 1.18;
      letter-spacing: 0.06em;
    }

    .fengshui-voucher-body p {
      max-width: 20em;
      margin: 10px 0 17px;
      color: rgba(24, 23, 21, 0.66);
      font-size: 13px;
      line-height: 1.78;
      letter-spacing: 0.03em;
    }

    .fengshui-voucher-code {
      display: flex;
      align-items: center;
      gap: 10px;
      padding-top: 13px;
      border-top: 1px dashed rgba(173, 138, 77, 0.32);
    }

    .fengshui-voucher-code span {
      color: rgba(24, 23, 21, 0.62);
      font-family: var(--serif);
      font-size: 13px;
      letter-spacing: 0.18em;
      white-space: nowrap;
    }

    .fengshui-voucher-code strong {
      color: var(--seal);
      font-family: Georgia, var(--serif);
      font-size: 17px;
      line-height: 1.2;
      letter-spacing: 0.05em;
      white-space: nowrap;
    }

    .fengshui-section-title {
      display: grid;
      grid-template-columns: 4px max-content 1fr;
      align-items: center;
      gap: 10px;
      margin: 24px 0 12px;
      color: var(--ink);
      font-family: var(--serif);
      font-size: 20px;
      line-height: 1.25;
      letter-spacing: 0.07em;
    }

    .fengshui-section-title i {
      display: block;
      width: 3px;
      height: 18px;
      background: rgba(167, 52, 39, 0.8);
    }

    .fengshui-section-title em {
      display: block;
      height: 1px;
      background: linear-gradient(90deg, rgba(173, 138, 77, 0.28), transparent);
    }

    [data-screen="fengshui-evidence"] .fengshui-asset-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
      margin-top: 0;
      border-top: 0;
    }

    [data-screen="fengshui-evidence"] .fengshui-asset-grid .fengshui-evidence-row {
      grid-template-columns: 40px 1fr;
      gap: 12px;
      min-height: 74px;
      padding: 15px 14px;
      border: 1px solid rgba(173, 138, 77, 0.22);
      border-radius: 8px;
      background:
        linear-gradient(135deg, rgba(255, 252, 247, 0.88), rgba(250, 244, 235, 0.58)),
        rgba(255, 252, 247, 0.66);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.52);
    }

    [data-screen="fengshui-evidence"] .fengshui-asset-grid .fengshui-evidence-row strong {
      width: 36px;
      height: 36px;
      border-color: rgba(173, 138, 77, 0.3);
      color: rgba(128, 91, 36, 0.94);
      background:
        radial-gradient(circle at 50% 45%, rgba(173, 138, 77, 0.12), transparent 68%),
        rgba(255, 252, 247, 0.82);
      font-family: var(--serif);
      font-size: 15px;
      font-weight: 800;
    }

    [data-screen="fengshui-evidence"] .fengshui-asset-grid .fengshui-evidence-row:nth-child(1) strong,
    [data-screen="fengshui-evidence"] .fengshui-asset-grid .fengshui-evidence-row:nth-child(4) strong {
      border-color: rgba(78, 136, 101, 0.26);
      color: rgba(54, 119, 83, 0.96);
      background: rgba(232, 243, 235, 0.62);
    }

    [data-screen="fengshui-evidence"] .fengshui-asset-grid .fengshui-evidence-row b {
      margin: 0 0 5px;
      color: var(--ink);
      font-size: 16px;
      line-height: 1.25;
      letter-spacing: 0.06em;
      white-space: normal;
    }

    [data-screen="fengshui-evidence"] .fengshui-asset-grid .fengshui-evidence-row span {
      color: rgba(54, 119, 83, 0.96);
      font-family: var(--serif);
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 0.05em;
    }

    .fengshui-asset-link-grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 14px minmax(0, 1fr) 14px minmax(0, 1fr);
      align-items: center;
      gap: 7px;
    }

    .fengshui-link-card {
      display: grid;
      place-items: center;
      min-height: 132px;
      padding: 13px 9px 12px;
      border: 1px solid rgba(173, 138, 77, 0.2);
      border-radius: 8px;
      background: rgba(255, 252, 247, 0.62);
      text-align: center;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
    }

    .fengshui-link-card.active {
      border-color: rgba(78, 136, 101, 0.22);
      background: linear-gradient(180deg, rgba(236, 247, 239, 0.72), rgba(255, 252, 247, 0.62));
    }

    .fengshui-link-card i {
      display: grid;
      place-items: center;
      width: 36px;
      height: 36px;
      margin-bottom: 9px;
      border: 1px solid rgba(173, 138, 77, 0.24);
      border-radius: 50%;
      color: rgba(128, 91, 36, 0.94);
      background: rgba(255, 252, 247, 0.72);
      font-family: var(--serif);
      font-style: normal;
      font-weight: 800;
    }

    .fengshui-link-card.active i {
      border-color: rgba(78, 136, 101, 0.24);
      color: rgba(54, 119, 83, 0.96);
      background: rgba(232, 243, 235, 0.72);
    }

    .fengshui-link-card small,
    .fengshui-link-card span {
      display: block;
      color: rgba(24, 23, 21, 0.52);
      font-size: 11px;
      line-height: 1.35;
      letter-spacing: 0.04em;
    }

    .fengshui-link-card b {
      display: block;
      margin: 4px 0 7px;
      color: var(--ink);
      font-family: var(--serif);
      font-size: 15px;
      line-height: 1.35;
      letter-spacing: 0.04em;
    }

    .fengshui-link-card.active b,
    .fengshui-link-card:last-child b {
      color: rgba(167, 52, 39, 0.92);
    }

    .fengshui-link-arrow {
      color: rgba(128, 91, 36, 0.66);
      font-family: var(--serif);
      font-size: 23px;
      text-align: center;
      transform: translateY(-2px);
    }

    .fengshui-evidence-note {
      display: grid;
      grid-template-columns: 42px 1fr;
      gap: 13px;
      align-items: center;
      min-height: 88px;
      padding: 16px 15px;
      border: 1px solid rgba(173, 138, 77, 0.2);
      border-radius: 8px;
      background:
        linear-gradient(90deg, rgba(255, 252, 247, 0.82), rgba(248, 241, 229, 0.42)),
        rgba(255, 252, 247, 0.66);
    }

    .fengshui-evidence-note > i {
      display: grid;
      place-items: center;
      width: 38px;
      height: 38px;
      border: 1px solid rgba(173, 138, 77, 0.28);
      border-radius: 50%;
      color: rgba(128, 91, 36, 0.9);
      background: rgba(255, 252, 247, 0.72);
      font-family: var(--serif);
      font-style: normal;
      font-weight: 800;
    }

    .fengshui-evidence-note p {
      margin: 0;
      color: rgba(24, 23, 21, 0.66);
      font-size: 14px;
      line-height: 1.75;
      letter-spacing: 0.03em;
    }

    .fengshui-evidence-actions {
      position: sticky;
      bottom: calc(80px + env(safe-area-inset-bottom));
      z-index: 8;
      display: grid;
      grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.3fr);
      gap: 12px;
      margin-top: 23px;
      padding: 10px 0 2px;
      background: linear-gradient(180deg, transparent, rgba(246, 239, 228, 0.84) 32%, rgba(246, 239, 228, 0.96));
      backdrop-filter: blur(14px);
    }

    .fengshui-evidence-secondary,
    .fengshui-evidence-primary {
      min-height: 56px;
      padding: 0 16px;
      border-radius: 8px;
      font-family: var(--serif);
      font-size: 17px;
      font-weight: 800;
      letter-spacing: 0.1em;
      cursor: pointer;
      transition: transform 260ms var(--ease), box-shadow 260ms var(--ease), background 260ms var(--ease);
    }

    .fengshui-evidence-secondary {
      border: 1px solid rgba(173, 138, 77, 0.48);
      color: rgba(128, 91, 36, 0.96);
      background: rgba(255, 252, 247, 0.78);
    }

    .fengshui-evidence-primary {
      border: 1px solid rgba(127, 40, 30, 0.26);
      color: rgba(255, 252, 247, 0.96);
      background:
        linear-gradient(180deg, rgba(181, 58, 43, 0.96), rgba(145, 38, 31, 0.98)),
        var(--seal);
      box-shadow: 0 16px 36px rgba(127, 40, 30, 0.22);
    }

    .fengshui-evidence-primary span {
      font-size: inherit;
      letter-spacing: inherit;
    }

    .fengshui-evidence-secondary:active,
    .fengshui-evidence-primary:active {
      transform: scale(0.98);
    }

    .fengshui-meter {
      display: grid;
      gap: 6px;
      margin-top: 10px;
      color: rgba(24, 23, 21, 0.6);
      font-family: var(--sans);
      font-size: 12px;
      letter-spacing: 0.03em;
    }

    .fengshui-meter span {
      display: block;
      height: 7px;
      border-radius: 999px;
      background: rgba(24, 23, 21, 0.08);
      overflow: hidden;
    }

    .fengshui-meter span::before {
      content: "";
      display: block;
      width: var(--value, 72%);
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, rgba(76, 139, 102, 0.86), rgba(173, 138, 77, 0.78));
    }

    .fengshui-room-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 0;
      margin-top: 12px;
      border-top: 1px solid rgba(24, 23, 21, 0.1);
      border-bottom: 1px solid rgba(24, 23, 21, 0.1);
    }

    .fengshui-room-grid div {
      min-height: 78px;
      padding: 12px 12px 10px 0;
      color: rgba(24, 23, 21, 0.58);
      font-size: 12px;
      line-height: 1.48;
      letter-spacing: 0.04em;
    }

    .fengshui-room-grid div:nth-child(2n) {
      padding-left: 14px;
      border-left: 1px solid rgba(24, 23, 21, 0.08);
    }

    .fengshui-room-grid strong {
      display: block;
      margin-bottom: 4px;
      color: var(--wood);
      font-size: 15px;
      letter-spacing: 0.08em;
    }

    .fengshui-room-grid .warn strong {
      color: var(--seal);
    }

    .fengshui-tracker-row {
      grid-template-columns: auto 1fr;
    }

    .fengshui-tracker-row i {
      background: rgba(173, 138, 77, 0.86);
    }

    .fengshui-tracker-row.done i {
      background: rgba(76, 139, 102, 0.92);
    }

    .fengshui-advice {
      position: relative;
      margin-top: 14px;
      padding: 16px 16px 14px;
      border: 1px solid rgba(113, 93, 62, 0.16);
      border-radius: 8px;
      background: rgba(255, 252, 247, 0.62);
      overflow: hidden;
    }

    .fengshui-advice h2 {
      margin: 0 0 9px;
      font-size: 18px;
      letter-spacing: 0.1em;
    }

    .fengshui-advice p {
      margin: 0;
      color: rgba(24, 23, 21, 0.62);
      font-size: 13px;
      line-height: 1.72;
      letter-spacing: 0.05em;
    }

    .fengshui-advice::after {
      content: "";
      position: absolute;
      right: -20px;
      bottom: -34px;
      width: 116px;
      height: 116px;
      border: 1px solid rgba(76, 139, 102, 0.1);
      border-radius: 50%;
    }

    .fengshui-screen {
      background:
        radial-gradient(circle at 78% 12%, rgba(173, 138, 77, 0.07), transparent 28%),
        radial-gradient(circle at 18% 52%, rgba(255, 255, 255, 0.68), transparent 34%);
    }

    .fengshui-copy {
      max-width: 310px;
      margin-top: 10px;
      color: rgba(24, 23, 21, 0.6);
      font-size: 14px;
      line-height: 1.82;
      letter-spacing: 0.07em;
    }

    .fengshui-hero {
      min-height: 242px;
      margin: 0 -22px;
    }

    .fengshui-landscape {
      bottom: -8px;
      width: 510px;
      opacity: 0.72;
      filter: drop-shadow(0 18px 36px rgba(54, 44, 32, 0.06));
    }

    .fengshui-moon-seal {
      position: absolute;
      left: calc(50% + 86px);
      top: 36px;
      display: grid;
      place-items: center;
      width: 42px;
      height: 42px;
      border-radius: 50%;
      background: rgba(167, 52, 39, 0.18);
      color: rgba(167, 52, 39, 0.72);
      font-size: 18px;
      box-shadow: 0 0 0 10px rgba(167, 52, 39, 0.035);
    }

    .fengshui-path-list {
      display: grid;
      gap: 14px;
      margin-top: 2px;
    }

    .fengshui-path {
      position: relative;
      display: grid;
      grid-template-columns: 72px 1fr 22px;
      align-items: center;
      gap: 14px;
      min-height: 122px;
      padding: 13px 0;
      border: 0;
      border-top: 1px solid rgba(24, 23, 21, 0.1);
      background: transparent;
      color: var(--ink);
      text-align: left;
      cursor: pointer;
    }

    .fengshui-path:last-child {
      border-bottom: 1px solid rgba(24, 23, 21, 0.1);
    }

    .fengshui-path img {
      width: 86px;
      height: 86px;
      object-fit: contain;
      margin-left: -12px;
      opacity: 0.74;
      mix-blend-mode: multiply;
      filter: drop-shadow(0 12px 20px rgba(54, 44, 32, 0.07));
    }

    .fengshui-path-copy {
      display: grid;
      gap: 6px;
      min-width: 0;
    }

    .fengshui-path small,
    .fengshui-orient small {
      color: rgba(167, 52, 39, 0.72);
      font-family: var(--sans);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.18em;
    }

    .fengshui-path strong {
      color: var(--ink);
      font-size: 24px;
      letter-spacing: 0.12em;
      line-height: 1.05;
    }

    .fengshui-path p {
      margin: 0;
      max-width: 238px;
      color: rgba(24, 23, 21, 0.58);
      font-size: 13px;
      line-height: 1.62;
      letter-spacing: 0.05em;
    }

    .fengshui-path .chevron,
    .fengshui-row-arrow {
      color: rgba(24, 23, 21, 0.4);
      font-family: Georgia, var(--serif);
      font-size: 26px;
      line-height: 1;
    }

    .fengshui-orient {
      display: grid;
      grid-template-columns: 1fr auto;
      align-items: center;
      gap: 16px;
      margin-top: 16px;
      padding: 14px 0 2px;
      border-top: 1px solid rgba(24, 23, 21, 0.08);
    }

    .fengshui-orient p {
      margin: 4px 0 0;
      color: rgba(24, 23, 21, 0.54);
      font-family: var(--serif);
      font-size: 13px;
      line-height: 1.62;
      letter-spacing: 0.05em;
    }

    .fengshui-orient-mark {
      display: grid;
      place-items: center;
      width: 52px;
      height: 52px;
      border: 1px solid rgba(173, 138, 77, 0.24);
      border-radius: 50%;
      color: rgba(24, 23, 21, 0.64);
      background: rgba(255, 252, 247, 0.58);
      font-size: 20px;
      font-weight: 800;
    }

    .fengshui-archive-screen {
      padding-bottom: 108px;
    }

    .fengshui-archive-summary {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
      margin-top: 16px;
    }

    .fengshui-archive-summary div {
      min-height: 84px;
      padding: 11px 9px 10px;
      border: 1px solid rgba(173, 138, 77, 0.18);
      border-radius: 8px;
      background:
        linear-gradient(180deg, rgba(255, 252, 247, 0.76), rgba(248, 241, 229, 0.42)),
        rgba(255, 252, 247, 0.58);
      text-align: center;
    }

    .fengshui-archive-summary small,
    .fengshui-archive-summary span {
      display: block;
      color: rgba(24, 23, 21, 0.5);
      font-family: var(--sans);
      font-size: 10.5px;
      line-height: 1.4;
      letter-spacing: 0.08em;
    }

    .fengshui-archive-summary b {
      display: block;
      margin: 3px 0;
      color: var(--seal);
      font-family: Georgia, var(--serif);
      font-size: 28px;
      line-height: 1.1;
      letter-spacing: 0;
    }

    .fengshui-archive-filter {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 7px;
      margin: 14px 0 12px;
      padding: 4px;
      border: 1px solid rgba(173, 138, 77, 0.16);
      border-radius: 8px;
      background: rgba(255, 252, 247, 0.54);
    }

    .fengshui-archive-filter button {
      min-width: 0;
      min-height: 36px;
      padding: 0 4px;
      border: 0;
      border-radius: 6px;
      color: rgba(24, 23, 21, 0.56);
      background: transparent;
      font-family: var(--serif);
      font-size: 13px;
      font-weight: 800;
      letter-spacing: 0.08em;
      cursor: pointer;
    }

    .fengshui-archive-filter button.active {
      color: rgba(167, 52, 39, 0.94);
      background: rgba(255, 252, 247, 0.9);
      box-shadow:
        inset 0 0 0 1px rgba(167, 52, 39, 0.12),
        0 8px 18px rgba(54, 44, 32, 0.06);
    }

    .fengshui-archive-list {
      display: grid;
      gap: 12px;
    }

    .fengshui-archive-card {
      overflow: hidden;
      border: 1px solid rgba(173, 138, 77, 0.18);
      border-radius: 8px;
      background:
        linear-gradient(135deg, rgba(255, 252, 247, 0.9), rgba(248, 241, 229, 0.5)),
        rgba(255, 252, 247, 0.72);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.62),
        0 12px 26px rgba(54, 44, 32, 0.05);
    }

    .fengshui-archive-card.report {
      border-color: rgba(167, 52, 39, 0.18);
      background:
        linear-gradient(135deg, rgba(255, 249, 243, 0.94), rgba(244, 235, 222, 0.56)),
        rgba(255, 252, 247, 0.74);
    }

    .fengshui-archive-card-main {
      display: grid;
      grid-template-columns: 48px minmax(0, 1fr);
      gap: 12px;
      width: 100%;
      padding: 13px 13px 11px;
      border: 0;
      color: inherit;
      background: transparent;
      text-align: left;
      cursor: pointer;
    }

    .fengshui-archive-mark {
      display: grid;
      place-items: center;
      width: 44px;
      height: 44px;
      border: 1px solid rgba(173, 138, 77, 0.28);
      border-radius: 50%;
      color: rgba(128, 91, 36, 0.96);
      background: rgba(255, 252, 247, 0.78);
      font-family: var(--serif);
      font-size: 13px;
      font-weight: 900;
      line-height: 1.05;
      letter-spacing: 0.04em;
      text-align: center;
      white-space: normal;
    }

    .fengshui-archive-card.room .fengshui-archive-mark {
      border-color: rgba(78, 136, 101, 0.24);
      color: rgba(54, 119, 83, 0.96);
      background: rgba(232, 243, 235, 0.68);
    }

    .fengshui-archive-card.report .fengshui-archive-mark {
      border-color: rgba(167, 52, 39, 0.22);
      color: rgba(167, 52, 39, 0.96);
      background: rgba(255, 244, 239, 0.82);
      font-size: 11.5px;
    }

    .fengshui-archive-content {
      display: grid;
      gap: 5px;
      min-width: 0;
    }

    .fengshui-archive-content small {
      color: rgba(167, 52, 39, 0.66);
      font-family: var(--sans);
      font-size: 10.5px;
      font-weight: 700;
      line-height: 1.35;
      letter-spacing: 0.12em;
    }

    .fengshui-archive-content b {
      color: var(--ink);
      font-family: var(--serif);
      font-size: 19px;
      line-height: 1.22;
      letter-spacing: 0.08em;
      overflow-wrap: anywhere;
    }

    .fengshui-archive-content p {
      margin: 0;
      color: rgba(24, 23, 21, 0.58);
      font-family: var(--serif);
      font-size: 12.5px;
      line-height: 1.64;
      letter-spacing: 0.04em;
    }

    .fengshui-archive-content .fengshui-archive-preview {
      display: grid;
      gap: 4px;
      line-height: 1.45;
    }

    .fengshui-archive-preview span {
      display: grid;
      grid-template-columns: 38px minmax(0, 1fr);
      gap: 7px;
      align-items: start;
      min-width: 0;
    }

    .fengshui-archive-preview i {
      color: rgba(167, 52, 39, 0.58);
      font-family: var(--sans);
      font-size: 10.5px;
      font-style: normal;
      font-weight: 800;
      line-height: 1.55;
      letter-spacing: 0.08em;
    }

    .fengshui-archive-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
      margin-top: 2px;
    }

    .fengshui-archive-tags em {
      max-width: 100%;
      padding: 4px 7px;
      border: 1px solid rgba(173, 138, 77, 0.14);
      border-radius: 999px;
      color: rgba(128, 91, 36, 0.9);
      background: rgba(255, 252, 247, 0.68);
      font-family: var(--sans);
      font-size: 10.5px;
      font-style: normal;
      line-height: 1.15;
      letter-spacing: 0.04em;
    }

    .fengshui-archive-actions {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
      padding: 0 13px 13px 73px;
    }

    .fengshui-archive-card.report .fengshui-archive-actions {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .fengshui-archive-card.floorplan .fengshui-archive-actions {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .fengshui-archive-actions button {
      min-width: 0;
      min-height: 38px;
      padding: 0 9px;
      border: 1px solid rgba(173, 138, 77, 0.22);
      border-radius: 8px;
      color: rgba(128, 91, 36, 0.96);
      background: rgba(255, 252, 247, 0.72);
      font-family: var(--serif);
      font-size: 13px;
      font-weight: 800;
      line-height: 1.15;
      letter-spacing: 0.06em;
      cursor: pointer;
      white-space: normal;
    }

    .fengshui-archive-actions button:last-child {
      border-color: rgba(167, 52, 39, 0.22);
      color: rgba(167, 52, 39, 0.94);
      background: rgba(255, 246, 241, 0.76);
    }

    .fengshui-archive-empty {
      margin-top: 26px;
      padding: 28px 18px;
      border: 1px dashed rgba(173, 138, 77, 0.28);
      border-radius: 8px;
      color: rgba(24, 23, 21, 0.52);
      background: rgba(255, 252, 247, 0.42);
      font-family: var(--serif);
      font-size: 14px;
      line-height: 1.8;
      letter-spacing: 0.06em;
      text-align: center;
    }

    .fengshui-archive-empty[hidden] {
      display: none;
    }

    .fengshui-asset-detail-screen {
      padding-bottom: 132px;
      background:
        linear-gradient(180deg, rgba(255, 252, 247, 0.96), rgba(246, 239, 228, 0.94));
    }

    [data-screen="fengshui-asset-detail"] .icon-button.is-disabled {
      opacity: 0.52;
      box-shadow: none;
    }

    .fengshui-detail-hero {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: 10px;
      margin-top: 16px;
      align-items: stretch;
    }

    .fengshui-detail-plan,
    .fengshui-detail-summary,
    .fengshui-detail-facts article,
    .fengshui-detail-room-list article,
    .fengshui-detail-notes article {
      border: 1px solid rgba(173, 138, 77, 0.18);
      border-radius: 8px;
      background:
        linear-gradient(135deg, rgba(255, 252, 247, 0.9), rgba(248, 241, 229, 0.48)),
        rgba(255, 252, 247, 0.72);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.62),
        0 10px 24px rgba(54, 44, 32, 0.045);
    }

    .fengshui-detail-plan {
      position: relative;
      min-height: 330px;
      aspect-ratio: 1.34;
      overflow: hidden;
      background: rgba(255, 252, 247, 0.76);
    }

    .fengshui-detail-plan img {
      width: 100%;
      height: 100%;
      min-height: 330px;
      object-fit: contain;
      padding: 12px;
      background:
        linear-gradient(135deg, rgba(255, 252, 247, 0.9), rgba(238, 226, 206, 0.34));
    }

    .fengshui-detail-plan [data-fengshui-asset-detail-image-badge] {
      position: absolute;
      left: 10px;
      bottom: 10px;
      padding: 5px 8px;
      border: 1px solid rgba(78, 136, 101, 0.18);
      border-radius: 999px;
      color: rgba(54, 119, 83, 0.96);
      background: rgba(242, 249, 243, 0.86);
      font-size: 10.5px;
      font-weight: 800;
      letter-spacing: 0.06em;
    }

    .fengshui-detail-overlay,
    .fengshui-detail-labels {
      position: absolute;
      inset: 12px;
      z-index: 2;
      pointer-events: none;
    }

    .fengshui-detail-labels .fengshui-room-label.is-number-only,
    .fengshui-detail-labels .fengshui-entrance-label.is-number-only {
      width: 30px;
      min-width: 30px;
      height: 30px;
    }

    .fengshui-detail-labels .fengshui-room-label.is-number-only strong,
    .fengshui-detail-labels .fengshui-entrance-label.is-number-only strong {
      font-size: 13px;
    }

    .fengshui-detail-labels .fengshui-contour-label.is-number-only {
      width: auto;
      min-width: 36px;
      height: 28px;
      padding: 0 7px;
    }

    .fengshui-detail-labels .fengshui-contour-label.is-number-only strong {
      font-size: 12px;
    }

    .fengshui-detail-labels .fengshui-room-label,
    .fengshui-detail-labels .fengshui-entrance-label,
    .fengshui-detail-labels .fengshui-contour-label {
      cursor: default;
      pointer-events: none;
    }

    .fengshui-detail-summary {
      display: grid;
      align-content: start;
      gap: 8px;
      padding: 14px 15px;
    }

    .fengshui-detail-summary small,
    .fengshui-detail-facts small,
    .fengshui-detail-notes small {
      color: rgba(167, 52, 39, 0.66);
      font-size: 10.5px;
      font-weight: 800;
      letter-spacing: 0.12em;
    }

    .fengshui-detail-summary b {
      color: var(--ink);
      font-family: var(--serif);
      font-size: 22px;
      line-height: 1.22;
      letter-spacing: 0.08em;
    }

    .fengshui-detail-summary p,
    .fengshui-detail-notes p {
      margin: 0;
      color: rgba(24, 23, 21, 0.62);
      font-family: var(--serif);
      font-size: 13px;
      line-height: 1.72;
      letter-spacing: 0.04em;
    }

    [data-fengshui-asset-detail-tags] {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-top: 2px;
    }

    [data-fengshui-asset-detail-tags] em {
      padding: 5px 8px;
      border: 1px solid rgba(173, 138, 77, 0.15);
      border-radius: 999px;
      color: rgba(128, 91, 36, 0.92);
      background: rgba(255, 252, 247, 0.72);
      font-size: 10.5px;
      font-style: normal;
      font-weight: 750;
      line-height: 1.1;
      letter-spacing: 0.04em;
    }

    .fengshui-detail-facts {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }

    .fengshui-detail-facts article {
      min-height: 76px;
      padding: 13px 14px;
    }

    .fengshui-detail-facts article.strong {
      border-color: rgba(78, 136, 101, 0.22);
      background:
        linear-gradient(135deg, rgba(235, 247, 238, 0.7), rgba(255, 252, 247, 0.78)),
        rgba(255, 252, 247, 0.72);
    }

    .fengshui-detail-facts b {
      display: block;
      margin-top: 5px;
      color: var(--ink);
      font-family: var(--serif);
      font-size: 16px;
      line-height: 1.34;
      letter-spacing: 0.04em;
      overflow-wrap: anywhere;
    }

    .fengshui-detail-room-list {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 7px;
    }

    .fengshui-detail-room-list article {
      display: grid;
      grid-template-columns: 28px minmax(0, 1fr);
      gap: 8px;
      align-items: center;
      min-height: 58px;
      padding: 9px 10px;
      border-color: rgba(173, 138, 77, 0.12);
      background:
        linear-gradient(135deg, rgba(255, 252, 247, 0.66), rgba(248, 241, 229, 0.28)),
        rgba(255, 252, 247, 0.46);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.46);
    }

    .fengshui-detail-room-list i {
      display: grid;
      place-items: center;
      width: 26px;
      height: 26px;
      border: 1px solid rgba(173, 138, 77, 0.24);
      border-radius: 50%;
      color: rgba(173, 138, 77, 0.98);
      background:
        radial-gradient(circle at 50% 36%, rgba(255, 255, 255, 0.92), transparent 58%),
        rgba(255, 252, 247, 0.86);
      font-family: var(--sans);
      font-style: normal;
      font-weight: 900;
      font-size: 12.5px;
      line-height: 1;
      box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.56),
        0 5px 12px rgba(54, 44, 32, 0.04);
    }

    .fengshui-detail-room-list b {
      display: block;
      color: var(--ink);
      font-family: var(--serif);
      font-size: 14.5px;
      line-height: 1.28;
      letter-spacing: 0.04em;
    }

    .fengshui-detail-room-list span {
      display: block;
      margin-top: 3px;
      color: rgba(54, 119, 83, 0.96);
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.06em;
    }

    .fengshui-detail-room-list p {
      margin: 5px 0 0;
      color: rgba(24, 23, 21, 0.5);
      font-size: 11.5px;
      line-height: 1.55;
      letter-spacing: 0.03em;
    }

    .fengshui-detail-room-list article.is-selected {
      border-color: rgba(45, 113, 130, 0.28);
      background:
        linear-gradient(135deg, rgba(232, 244, 245, 0.76), rgba(255, 252, 247, 0.66)),
        rgba(255, 252, 247, 0.72);
    }

    .fengshui-detail-room-list article button {
      width: fit-content;
      min-height: 28px;
      margin-top: 7px;
      padding: 0 10px;
      border: 1px solid rgba(45, 113, 130, 0.18);
      border-radius: 8px;
      background: rgba(255, 252, 247, 0.72);
      color: rgba(45, 113, 130, 0.96);
      font-family: var(--serif);
      font-size: 11.5px;
      font-weight: 850;
      letter-spacing: 0.06em;
      cursor: pointer;
    }

    .fengshui-palace-analysis-panel {
      grid-column: 1 / -1;
      align-items: start;
      min-height: 0;
      padding: 13px 14px;
      border-color: rgba(45, 113, 130, 0.22);
      background:
        linear-gradient(135deg, rgba(232, 244, 245, 0.74), rgba(255, 252, 247, 0.82)),
        rgba(255, 252, 247, 0.76);
    }

    .fengshui-palace-analysis-panel header {
      display: grid;
      gap: 4px;
    }

    .fengshui-palace-analysis-panel header span {
      color: rgba(45, 113, 130, 0.92);
    }

    .fengshui-palace-analysis-panel em {
      display: block;
      margin-top: 7px;
      color: rgba(128, 91, 36, 0.96);
      font-size: 11.5px;
      font-style: normal;
      font-weight: 850;
      line-height: 1.55;
      letter-spacing: 0.04em;
    }

    .fengshui-detail-room-list[data-layer="rooms"] {
      grid-template-columns: 1fr;
      gap: 8px;
    }

    .fengshui-detail-room-list article.room-detail {
      grid-template-columns: 30px minmax(0, 1fr);
      align-items: start;
      min-height: 0;
      padding: 11px 12px;
      border-color: rgba(173, 138, 77, 0.16);
      background:
        linear-gradient(135deg, rgba(255, 252, 247, 0.86), rgba(247, 239, 226, 0.54)),
        rgba(255, 252, 247, 0.72);
    }

    .fengshui-detail-room-list article.room-detail header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      min-width: 0;
    }

    .fengshui-detail-room-list article.room-detail b {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .fengshui-detail-room-list article.room-detail em {
      flex: 0 0 auto;
      max-width: 108px;
      overflow: hidden;
      padding: 3px 8px;
      border: 1px solid rgba(173, 138, 77, 0.18);
      border-radius: 999px;
      color: rgba(128, 91, 36, 0.92);
      background: rgba(255, 252, 247, 0.8);
      font-size: 10px;
      font-style: normal;
      font-weight: 850;
      line-height: 1.1;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .fengshui-detail-room-list article.room-detail span {
      color: rgba(31, 105, 71, 0.94);
      letter-spacing: 0.03em;
    }

    .fengshui-detail-notes {
      display: grid;
      gap: 10px;
    }

    .fengshui-detail-notes article {
      padding: 14px 15px;
    }

    .fengshui-detail-notes p {
      margin-top: 6px;
    }

    .fengshui-detail-empty {
      grid-column: 1 / -1;
      margin: 0;
      padding: 18px 16px;
      border: 1px dashed rgba(173, 138, 77, 0.24);
      border-radius: 8px;
      color: rgba(24, 23, 21, 0.5);
      background: rgba(255, 252, 247, 0.46);
      font-family: var(--serif);
      font-size: 13px;
      line-height: 1.7;
      text-align: center;
    }

    @media (max-width: 430px) {
      .fengshui-detail-facts,
      .fengshui-detail-room-list {
        grid-template-columns: 1fr;
      }

      .fengshui-detail-plan,
      .fengshui-detail-plan img {
        min-height: 300px;
      }
    }

    .fengshui-detail-hero {
      gap: 12px;
    }

    .fengshui-detail-layer-tabs {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 6px;
      padding: 5px;
      border: 1px solid rgba(173, 138, 77, 0.16);
      border-radius: 999px;
      background: rgba(73, 52, 29, 0.05);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.62);
    }

    .fengshui-detail-layer-tabs button {
      min-height: 38px;
      border: 0;
      border-radius: 999px;
      color: rgba(24, 23, 21, 0.58);
      background: transparent;
      font-family: var(--serif);
      font-size: 15px;
      font-weight: 800;
      letter-spacing: 0;
      cursor: pointer;
    }

    .fengshui-detail-layer-tabs button.is-active {
      color: rgba(158, 47, 37, 0.98);
      background:
        linear-gradient(180deg, rgba(255, 252, 247, 0.96), rgba(247, 235, 220, 0.92));
      box-shadow:
        0 8px 18px rgba(88, 57, 28, 0.08),
        inset 0 0 0 1px rgba(173, 138, 77, 0.16);
    }

    .fengshui-detail-layer-tabs button:disabled {
      opacity: 0.42;
      cursor: not-allowed;
    }

    .fengshui-detail-plan {
      min-height: 0;
      aspect-ratio: auto;
      overflow: visible;
      padding: 8px;
      background:
        linear-gradient(180deg, rgba(255, 252, 247, 0.94), rgba(247, 239, 226, 0.72)),
        rgba(255, 252, 247, 0.78);
    }

    .fengshui-detail-plan-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 6px 8px 10px;
    }

    .fengshui-detail-plan-head small {
      display: block;
      color: rgba(78, 136, 101, 0.88);
      font-size: 10.5px;
      font-weight: 850;
      letter-spacing: 0.12em;
    }

    .fengshui-detail-plan-head strong {
      display: block;
      margin-top: 3px;
      color: var(--ink);
      font-family: var(--serif);
      font-size: 19px;
      line-height: 1.16;
      letter-spacing: 0.03em;
    }

    .fengshui-detail-plan-head span {
      flex: 0 0 auto;
      padding: 6px 10px;
      border: 1px solid rgba(173, 138, 77, 0.18);
      border-radius: 999px;
      color: rgba(128, 91, 36, 0.92);
      background: rgba(255, 252, 247, 0.86);
      font-size: 11px;
      font-weight: 850;
      letter-spacing: 0.04em;
      white-space: nowrap;
    }

    .fengshui-detail-plan-media {
      position: relative;
      overflow: hidden;
      border: 1px solid rgba(173, 138, 77, 0.16);
      border-radius: 8px;
      background:
        linear-gradient(135deg, rgba(255, 252, 247, 0.9), rgba(238, 226, 206, 0.34));
    }

    .fengshui-detail-plan img[data-fengshui-asset-detail-image] {
      display: block;
      width: 100%;
      height: auto;
      min-height: 0;
      padding: 12px;
      box-sizing: border-box;
      object-fit: contain;
      background: transparent;
      filter: saturate(0.82) contrast(1.02);
    }

    .fengshui-detail-overlay,
    .fengshui-detail-palace-buttons,
    .fengshui-detail-labels {
      position: absolute;
      inset: 12px;
      z-index: 2;
      width: auto;
      height: auto;
      pointer-events: none;
    }

    .fengshui-detail-palace-buttons {
      z-index: 3;
    }

    .fengshui-detail-palace-buttons button {
      position: absolute;
      display: block;
      padding: 0;
      border: 1px solid transparent;
      border-radius: 6px;
      background: transparent;
      cursor: pointer;
      pointer-events: auto;
      appearance: none;
      transition: background 160ms var(--ease), border-color 160ms var(--ease);
    }

    .fengshui-detail-palace-buttons button:hover,
    .fengshui-detail-palace-buttons button:focus-visible,
    .fengshui-detail-palace-buttons button.is-selected {
      border-color: rgba(24, 23, 21, 0.34);
      background: rgba(255, 252, 247, 0.08);
      outline: none;
    }

    .fengshui-detail-labels {
      z-index: 4;
    }

    .fengshui-detail-labels > span {
      position: absolute;
      transform: translate(-50%, -50%);
      pointer-events: none;
      user-select: none;
    }

    .fengshui-detail-user-outline {
      fill: rgba(31, 105, 71, 0.075);
      stroke: rgba(22, 91, 58, 0.98);
      stroke-width: 1.55;
      stroke-linejoin: round;
      pointer-events: none;
      vector-effect: non-scaling-stroke;
    }

    .fengshui-detail-user-outline.is-ai {
      stroke-dasharray: 2 1.8;
      opacity: 0.72;
    }

    .fengshui-detail-completion-frame {
      fill: rgba(255, 252, 247, 0.045);
      stroke: rgba(167, 52, 39, 0.76);
      stroke-width: 0.95;
      stroke-dasharray: 2.4 2.4;
      pointer-events: none;
      vector-effect: non-scaling-stroke;
    }

    .fengshui-detail-grid-line {
      stroke: rgba(119, 82, 48, 0.54);
      stroke-width: 0.82;
      pointer-events: none;
      vector-effect: non-scaling-stroke;
    }

    .fengshui-detail-outside-frame-mask {
      fill: rgba(73, 52, 29, 0.18);
      pointer-events: none;
    }

    .fengshui-detail-palace-fill {
      opacity: 0.46;
      vector-effect: non-scaling-stroke;
      pointer-events: none;
      transition: opacity 160ms var(--ease), stroke 160ms var(--ease);
    }

    .fengshui-detail-palace-fill.is-selected {
      opacity: 0.66;
      stroke: rgba(24, 23, 21, 0.46);
      stroke-width: 0.62;
      vector-effect: non-scaling-stroke;
    }

    .fengshui-detail-palace-fill.is-north { fill: rgba(84, 121, 166, 0.4); }
    .fengshui-detail-palace-fill.is-northeast { fill: rgba(139, 128, 103, 0.42); }
    .fengshui-detail-palace-fill.is-east { fill: rgba(59, 142, 101, 0.38); }
    .fengshui-detail-palace-fill.is-southeast { fill: rgba(60, 151, 136, 0.38); }
    .fengshui-detail-palace-fill.is-south { fill: rgba(190, 79, 66, 0.36); }
    .fengshui-detail-palace-fill.is-southwest { fill: rgba(191, 137, 72, 0.38); }
    .fengshui-detail-palace-fill.is-west { fill: rgba(177, 154, 93, 0.38); }
    .fengshui-detail-palace-fill.is-northwest { fill: rgba(119, 112, 151, 0.38); }
    .fengshui-detail-palace-fill.is-center { fill: rgba(212, 161, 75, 0.42); }

    .fengshui-detail-palace-hitbox {
      cursor: pointer;
    }

    .fengshui-detail-center-dot,
    .fengshui-detail-center-line {
      fill: rgba(170, 56, 47, 0.12);
      stroke: rgba(170, 56, 47, 0.82);
      stroke-width: 0.58;
      pointer-events: none;
      vector-effect: non-scaling-stroke;
    }

    .fengshui-detail-room-shape {
      fill: rgba(183, 138, 66, 0.095);
      stroke: rgba(151, 105, 42, 0.72);
      stroke-width: 0.72;
      vector-effect: non-scaling-stroke;
    }

    .fengshui-detail-room-shape.is-wet {
      fill: rgba(84, 121, 135, 0.09);
      stroke: rgba(84, 121, 135, 0.7);
    }

    .fengshui-detail-palace-token {
      display: grid;
      place-items: center;
      min-width: clamp(34px, 9vw, 46px);
      height: clamp(22px, 6vw, 30px);
      padding: 0 8px;
      border: 1px solid rgba(255, 252, 247, 0.68);
      border-radius: 999px;
      background: rgba(255, 252, 247, 0.64);
      box-shadow: 0 5px 12px rgba(73, 52, 29, 0.08);
      color: rgba(139, 96, 32, 0.98);
      font-family: var(--serif);
      font-size: clamp(11px, 3vw, 14px);
      font-weight: 850;
      letter-spacing: 0;
      text-shadow: 0 1px 0 rgba(255, 255, 255, 0.72);
    }

    .fengshui-detail-palace-token.is-blue {
      background: rgba(231, 241, 244, 0.66);
      color: rgba(70, 112, 130, 0.98);
    }

    .fengshui-detail-palace-token.is-jade {
      background: rgba(228, 244, 237, 0.66);
      color: rgba(31, 105, 71, 0.98);
    }

    .fengshui-detail-palace-token.is-seal {
      background: rgba(250, 232, 226, 0.66);
      color: rgba(170, 56, 47, 0.98);
    }

    .fengshui-detail-room-tag {
      display: grid;
      place-items: center;
      min-width: 78px;
      min-height: 42px;
      padding: 10px 14px;
      background: url("/prototype/assets/fengshui-ink/archive-detail/chroma/room-marker-base-chroma-v1.png") center / 100% 100% no-repeat;
      color: var(--ink);
      text-align: center;
      filter: drop-shadow(0 8px 14px rgba(73, 52, 29, 0.12));
    }

    .fengshui-detail-room-tag strong {
      max-width: 72px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-family: var(--serif);
      font-size: 13px;
      line-height: 1.1;
    }

    .fengshui-detail-room-tag em {
      display: block;
      margin-top: 4px;
      color: rgba(128, 91, 36, 0.88);
      font-size: 10px;
      font-style: normal;
      font-weight: 850;
      letter-spacing: 0;
    }

    .fengshui-detail-room-tag.is-wet em {
      color: rgba(70, 112, 130, 0.96);
    }

    .fengshui-detail-room-tag.is-entry em {
      color: rgba(170, 56, 47, 0.96);
    }

    .fengshui-detail-room-tag.is-compact {
      min-width: 38px;
      width: 38px;
      min-height: 48px;
      padding: 5px 5px 6px;
      border-radius: 17px;
      background:
        radial-gradient(circle at 50% 24%, rgba(255, 255, 255, 0.94), rgba(255, 252, 247, 0.7) 44%, transparent 68%),
        linear-gradient(180deg, rgba(255, 252, 247, 0.94), rgba(244, 234, 215, 0.9));
      box-shadow:
        0 8px 16px rgba(73, 52, 29, 0.14),
        inset 0 0 0 1px rgba(173, 138, 77, 0.22);
      filter: none;
    }

    .fengshui-detail-room-tag.is-compact strong {
      display: grid;
      place-items: center;
      width: 22px;
      height: 22px;
      max-width: none;
      border-radius: 50%;
      color: #fffaf1;
      background: rgba(31, 105, 71, 0.92);
      font-family: var(--sans);
      font-size: 12px;
      line-height: 1;
      box-shadow: 0 4px 10px rgba(31, 105, 71, 0.16);
    }

    .fengshui-detail-room-tag.is-compact em {
      max-width: 34px;
      margin-top: 3px;
      overflow: hidden;
      color: rgba(128, 91, 36, 0.86);
      font-size: 8.5px;
      line-height: 1.05;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .fengshui-detail-room-tag.is-compact.is-wet strong {
      background: rgba(70, 112, 130, 0.94);
    }

    .fengshui-detail-room-tag.is-compact.is-entry strong {
      background: rgba(170, 56, 47, 0.94);
    }

    .fengshui-detail-entrance-pin {
      display: grid;
      place-items: center;
      width: 58px;
      height: 72px;
      padding-top: 16px;
      background: url("/prototype/assets/fengshui-ink/archive-detail/chroma/entrance-pin-chroma-v1.png") center / contain no-repeat;
      color: rgba(170, 56, 47, 0.98);
      font-family: var(--serif);
      filter: drop-shadow(0 8px 16px rgba(73, 52, 29, 0.14));
    }

    .fengshui-detail-entrance-pin strong {
      font-size: 18px;
      line-height: 1;
    }

    .fengshui-detail-entrance-pin em {
      margin-top: 4px;
      font-size: 9px;
      font-style: normal;
      font-weight: 850;
      line-height: 1;
    }

    .fengshui-detail-star-token {
      display: grid;
      place-items: center;
      width: clamp(60px, 16vw, 74px);
      min-height: clamp(60px, 16vw, 74px);
      padding: 9px 8px;
      background: url("/prototype/assets/fengshui-ink/archive-detail/chroma/flying-star-token-chroma-v1.png") center / 120% 120% no-repeat;
      color: rgba(24, 23, 21, 0.72);
      text-align: center;
      filter: drop-shadow(0 9px 18px rgba(73, 52, 29, 0.12));
    }

    .fengshui-detail-star-token b {
      display: block;
      color: rgba(170, 56, 47, 0.96);
      font-family: var(--serif);
      font-size: 12px;
      line-height: 1.05;
    }

    .fengshui-detail-star-token span {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 3px;
      min-height: 14px;
      font-size: 10px;
      font-weight: 850;
      line-height: 1;
    }

    .fengshui-detail-star-token i {
      display: grid;
      place-items: center;
      width: 15px;
      height: 15px;
      border-radius: 50%;
      color: #fffaf1;
      background: rgba(183, 138, 66, 0.96);
      font-size: 9px;
      font-style: normal;
      font-weight: 900;
    }

    .fengshui-detail-star-token span:nth-child(3) i {
      background: rgba(84, 121, 135, 0.96);
    }

    .fengshui-detail-star-token span:nth-child(4) i {
      background: rgba(31, 105, 71, 0.96);
    }

    .fengshui-detail-corner-callout,
    .fengshui-detail-layer-lock {
      display: grid;
      place-items: center;
      min-width: 96px;
      min-height: 34px;
      padding: 8px 12px;
      border: 1px dashed rgba(170, 56, 47, 0.58);
      border-radius: 12px;
      color: rgba(170, 56, 47, 0.96);
      background: rgba(255, 252, 247, 0.9);
      font-family: var(--serif);
      font-size: 13px;
      font-weight: 850;
      box-shadow: 0 8px 18px rgba(73, 52, 29, 0.08);
    }

    .fengshui-detail-layer-lock {
      gap: 4px;
      min-width: min(210px, 72%);
      border-style: solid;
      color: rgba(128, 91, 36, 0.96);
    }

    .fengshui-detail-layer-lock strong {
      font-size: 16px;
    }

    .fengshui-detail-layer-lock span {
      color: rgba(24, 23, 21, 0.56);
      font-size: 11px;
      font-weight: 750;
    }

    .fengshui-detail-north-chip {
      position: absolute;
      right: 14px;
      top: 14px;
      z-index: 6;
      width: 48px;
      height: 48px;
      border-radius: 50%;
      background: rgba(255, 252, 247, 0.86);
      box-shadow: 0 10px 20px rgba(73, 52, 29, 0.12);
    }

    .fengshui-detail-north-chip img {
      width: 100%;
      height: 100%;
      transform: rotate(var(--north-angle, 0deg));
      transform-origin: 50% 50%;
    }

    .fengshui-detail-plan-legend {
      display: flex;
      gap: 12px;
      overflow-x: auto;
      padding: 9px 8px 2px;
      color: rgba(24, 23, 21, 0.5);
      font-size: 11px;
      font-weight: 750;
      letter-spacing: 0.03em;
      white-space: nowrap;
      scrollbar-width: none;
    }

    .fengshui-detail-plan-legend::-webkit-scrollbar {
      display: none;
    }

    .fengshui-detail-plan-legend span {
      display: inline-flex;
      align-items: center;
      gap: 5px;
    }

    .fengshui-detail-plan-legend i {
      width: 18px;
      height: 0;
      border-top: 2px solid rgba(31, 105, 71, 0.86);
    }

    .fengshui-detail-plan-legend span.is-fill i {
      width: 20px;
      height: 10px;
      border: 0;
      border-radius: 3px;
      background: linear-gradient(90deg, rgba(84, 121, 166, 0.42), rgba(59, 142, 101, 0.38), rgba(190, 79, 66, 0.36));
    }

    .fengshui-detail-plan-legend span.is-frame i {
      border-top: 1px dashed rgba(183, 138, 66, 0.96);
    }

    .fengshui-detail-plan-legend span.is-grid i {
      border-top: 1px solid rgba(170, 56, 47, 0.76);
    }

    .fengshui-detail-plan-legend span.is-room i {
      border-top-color: rgba(151, 105, 42, 0.72);
    }

    .fengshui-detail-plan-legend span.is-entrance i {
      border-top-color: rgba(170, 56, 47, 0.86);
    }

    .fengshui-detail-plan-legend span.is-star i {
      border-top-color: rgba(183, 138, 66, 0.96);
    }

    .fengshui-detail-facts {
      grid-template-columns: 1fr;
      gap: 0;
      overflow: hidden;
      padding: 6px;
      border: 1px solid rgba(173, 138, 77, 0.14);
      border-radius: 8px;
      background: rgba(73, 52, 29, 0.045);
    }

    .fengshui-detail-facts article {
      display: grid;
      grid-template-columns: 36px minmax(0, 1fr) auto;
      gap: 10px;
      align-items: center;
      min-height: 58px;
      padding: 9px 10px;
      border: 0;
      border-bottom: 1px solid rgba(73, 52, 29, 0.08);
      border-radius: 0;
      background: rgba(255, 252, 247, 0.68);
      box-shadow: none;
    }

    .fengshui-detail-facts article:first-child {
      border-top-left-radius: 7px;
      border-top-right-radius: 7px;
    }

    .fengshui-detail-facts article:last-child {
      border-bottom: 0;
      border-bottom-left-radius: 7px;
      border-bottom-right-radius: 7px;
    }

    .fengshui-detail-facts article i {
      display: grid;
      place-items: center;
      width: 34px;
      height: 34px;
      border: 1px solid rgba(173, 138, 77, 0.18);
      border-radius: 12px;
      color: rgba(31, 105, 71, 0.96);
      background: rgba(255, 252, 247, 0.82);
      font-family: var(--serif);
      font-style: normal;
      font-weight: 900;
    }

    .fengshui-detail-facts article b {
      margin-top: 0;
      font-size: 15px;
      line-height: 1.16;
    }

    .fengshui-detail-facts article span {
      display: block;
      margin-top: 4px;
      color: rgba(24, 23, 21, 0.5);
      font-size: 11px;
      font-weight: 700;
      line-height: 1.35;
      letter-spacing: 0.02em;
    }

    .fengshui-detail-facts article em {
      display: inline-flex;
      align-items: center;
      min-height: 26px;
      padding: 0 9px;
      border: 1px solid rgba(31, 105, 71, 0.14);
      border-radius: 999px;
      color: rgba(31, 105, 71, 0.96);
      background: rgba(232, 241, 233, 0.72);
      font-size: 11px;
      font-style: normal;
      font-weight: 850;
      white-space: nowrap;
    }

    .fengshui-detail-facts article em.warn {
      border-color: rgba(183, 138, 66, 0.22);
      color: rgba(138, 100, 29, 0.98);
      background: rgba(253, 244, 226, 0.88);
    }

    .fengshui-detail-room-list article.warn {
      border-color: rgba(183, 138, 66, 0.26);
      background: rgba(253, 244, 226, 0.52);
    }

    .fengshui-detail-room-list article.star i {
      color: rgba(170, 56, 47, 0.96);
    }

    @media (max-width: 430px) {
      .fengshui-detail-plan,
      .fengshui-detail-plan img[data-fengshui-asset-detail-image] {
        min-height: 0;
      }

      .fengshui-detail-palace-token {
        width: 43px;
        height: 43px;
        font-size: 13px;
      }

      .fengshui-detail-star-token {
        width: 58px;
        min-height: 58px;
        padding: 7px 6px;
      }

      .fengshui-detail-room-tag {
        min-width: 68px;
        padding: 8px 12px;
      }

      .fengshui-detail-facts article {
        grid-template-columns: 34px minmax(0, 1fr);
      }

      .fengshui-detail-facts article em {
        grid-column: 2;
        width: fit-content;
      }
    }

    [data-screen="fengshui-asset-detail"] .fengshui-evidence-actions {
      grid-template-columns: minmax(0, 0.9fr) minmax(0, 0.95fr) minmax(0, 1.22fr);
    }

    .fengshui-evidence-danger {
      border-color: rgba(167, 52, 39, 0.34);
      color: rgba(167, 52, 39, 0.96);
      background: rgba(255, 244, 239, 0.7);
    }

    .fengshui-tabs {
      margin-top: 12px;
      border-color: rgba(24, 23, 21, 0.1);
    }

    .fengshui-map-stage {
      min-height: 396px;
      margin-top: 6px;
    }

    .fengshui-floorplan-art {
      width: 392px;
      opacity: 0.9;
    }

    .fengshui-compass-ring {
      position: absolute;
      left: 50%;
      top: 52%;
      width: min(352px, calc(100% - 46px));
      aspect-ratio: 1;
      border: 1px solid rgba(173, 138, 77, 0.28);
      border-radius: 50%;
      background:
        radial-gradient(circle, transparent 0 41%, rgba(173, 138, 77, 0.11) 41.4% 41.8%, transparent 42.2% 57%, rgba(173, 138, 77, 0.16) 57.4% 57.8%, transparent 58.2%),
        conic-gradient(from 45deg, transparent 0 11%, rgba(173, 138, 77, 0.14) 11.2% 11.6%, transparent 11.8% 23%, rgba(173, 138, 77, 0.12) 23.2% 23.6%, transparent 23.8%);
      pointer-events: none;
      transform: translate(-50%, -50%);
    }

    .fengshui-palace-grid {
      position: absolute;
      left: 50%;
      top: 52%;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: repeat(3, 1fr);
      width: min(284px, calc(100% - 92px));
      aspect-ratio: 1;
      border: 1px solid rgba(24, 23, 21, 0.11);
      opacity: 0.62;
      pointer-events: none;
      transform: translate(-50%, -50%);
    }

    .fengshui-palace-grid span {
      display: grid;
      place-items: start end;
      padding: 8px;
      border-right: 1px solid rgba(24, 23, 21, 0.09);
      border-bottom: 1px solid rgba(24, 23, 21, 0.09);
      color: rgba(24, 23, 21, 0.48);
      font-family: var(--serif);
      font-size: 13px;
      letter-spacing: 0.08em;
    }

    .fengshui-palace-grid span:nth-child(3n) {
      border-right: 0;
    }

    .fengshui-palace-grid span:nth-child(n + 7) {
      border-bottom: 0;
    }

    [data-screen="fengshui-floorplan-review"] .fengshui-review-stage:not(.has-compass-calibration) .fengshui-compass-ring,
    [data-screen="fengshui-floorplan-review"] .fengshui-review-stage:not(.has-compass-calibration) .fengshui-palace-grid,
    [data-screen="fengshui-floorplan-review"] .fengshui-review-stage:not(.has-compass-calibration) .fengshui-direction,
    [data-screen="fengshui-floorplan-review"] .fengshui-review-stage:not(.has-compass-calibration) .fengshui-annotate.center {
      opacity: 0;
      visibility: hidden;
    }

    .fengshui-direction {
      z-index: 6;
      border-color: rgba(173, 138, 77, 0.22);
      background: rgba(255, 252, 247, 0.92);
      box-shadow: 0 8px 18px rgba(54, 44, 32, 0.08);
    }

    .fengshui-annotate {
      position: absolute;
      display: grid;
      gap: 2px;
      min-width: 64px;
      color: rgba(24, 23, 21, 0.58);
      font-family: var(--serif);
      font-size: 12px;
      letter-spacing: 0.06em;
      pointer-events: none;
    }

    .fengshui-annotate strong {
      color: var(--seal);
      font-size: 16px;
      letter-spacing: 0.12em;
    }

    .fengshui-annotate.center { left: calc(50% - 24px); top: calc(52% - 28px); text-align: center; }
    .fengshui-annotate.entry { left: calc(50% - 10px); bottom: 46px; }
    .fengshui-annotate.wet { right: 42px; top: 52%; }
    .fengshui-annotate.window { left: 96px; top: 70px; }
    .fengshui-annotate.bed { right: 50px; bottom: 62px; }

    .fengshui-review-stage .fengshui-annotate,
    .fengshui-review-stage.has-dynamic-annotations .fengshui-annotate {
      display: none;
    }

    .fengshui-scroll-copy {
      display: grid;
      gap: 16px;
      margin: 8px auto 0;
      max-width: 326px;
      color: rgba(24, 23, 21, 0.68);
      font-size: 14px;
      line-height: 1.82;
      letter-spacing: 0.05em;
    }

    .fengshui-scroll-copy h2 {
      margin: 0;
      color: var(--ink);
      font-size: 22px;
      letter-spacing: 0.1em;
      line-height: 1.18;
    }

    .fengshui-scroll-copy p {
      margin: 0;
    }

    .fengshui-reading-list {
      display: grid;
      gap: 15px;
      margin-top: 4px;
      padding-top: 14px;
      border-top: 1px solid rgba(24, 23, 21, 0.1);
    }

    .fengshui-reading-item {
      display: grid;
      grid-template-columns: 34px 1fr;
      gap: 12px;
      align-items: start;
    }

    .fengshui-reading-item i {
      display: grid;
      place-items: center;
      width: 30px;
      height: 30px;
      border: 1px solid rgba(173, 138, 77, 0.26);
      border-radius: 50%;
      color: var(--gold);
      background: rgba(255, 252, 247, 0.58);
      font-style: normal;
      font-size: 16px;
      font-weight: 800;
    }

    .fengshui-reading-item strong {
      display: block;
      margin-bottom: 4px;
      color: var(--wood);
      font-size: 17px;
      letter-spacing: 0.1em;
    }

    .fengshui-reading-item.warn strong {
      color: var(--seal);
    }

    .fengshui-reading-item span {
      color: rgba(24, 23, 21, 0.58);
      font-family: var(--serif);
      font-size: 13px;
      line-height: 1.66;
      letter-spacing: 0.04em;
    }

    .fengshui-room-stage {
      min-height: 338px;
      margin-top: 8px;
    }

    .fengshui-room-art {
      width: 474px;
      opacity: 0.84;
    }

    .fengshui-room-stage .fengshui-palace-grid {
      top: 51%;
      width: min(270px, calc(100% - 116px));
      opacity: 0.38;
    }

    .fengshui-current {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0;
      margin-top: 2px;
      border-top: 1px solid rgba(24, 23, 21, 0.1);
      border-bottom: 1px solid rgba(24, 23, 21, 0.1);
    }

    .fengshui-current div {
      min-height: 76px;
      padding: 13px 14px 12px 0;
      color: rgba(24, 23, 21, 0.58);
      font-size: 12px;
      line-height: 1.58;
      letter-spacing: 0.05em;
    }

    .fengshui-current div:nth-child(2n) {
      padding-left: 14px;
      border-left: 1px solid rgba(24, 23, 21, 0.08);
    }

    .fengshui-current strong {
      display: block;
      margin-bottom: 4px;
      color: var(--wood);
      font-size: 16px;
      letter-spacing: 0.1em;
    }

    .fengshui-current .warn strong {
      color: var(--seal);
    }

    .fengshui-quiet-link {
      display: grid;
      place-items: center;
      min-height: 44px;
      width: min(100%, 324px);
      margin: 18px auto 0;
      border: 1px solid rgba(173, 138, 77, 0.26);
      border-radius: 999px;
      background:
        linear-gradient(180deg, rgba(255, 252, 247, 0.82), rgba(247, 239, 224, 0.56));
      color: rgba(24, 23, 21, 0.72);
      font-family: var(--serif);
      font-size: 15px;
      letter-spacing: 0.12em;
      cursor: pointer;
      box-shadow: 0 12px 26px rgba(113, 93, 62, 0.08);
    }

    .fengshui-report-cover-screen,
    .fengshui-report-reader-screen,
    .fengshui-match-screen {
      padding-bottom: 188px;
    }

    .report-cover-hero {
      display: grid;
      gap: 18px;
      margin-top: 8px;
    }

    .report-plan-sheet {
      position: relative;
      min-height: 272px;
      margin: 0 -12px;
      display: grid;
      place-items: center;
      overflow: hidden;
      border-bottom: 1px solid rgba(173, 138, 77, 0.16);
    }

    .report-plan-sheet::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(180deg, rgba(255, 252, 247, 0.18), rgba(247, 242, 234, 0.72)),
        url("/prototype/assets/fengshui-ink/fengshui-evidence-landscape-v1.svg") center bottom / 108% auto no-repeat;
      opacity: 0.38;
      pointer-events: none;
      mix-blend-mode: multiply;
    }

    .report-plan-stage {
      position: relative;
      z-index: 1;
      width: min(118%, 418px);
      max-width: none;
    }

    .report-plan-stage img,
    .report-plan-sheet > img {
      position: relative;
      z-index: 1;
      width: 100%;
      opacity: 0.92;
      mix-blend-mode: multiply;
      filter: drop-shadow(0 18px 38px rgba(54, 44, 32, 0.08));
    }

    .report-plan-stage img.is-user-upload {
      opacity: 0.82;
      mix-blend-mode: normal;
    }

    .report-compass-ring {
      position: absolute;
      left: -36px;
      top: 26px;
      z-index: 0;
      width: 178px;
      aspect-ratio: 1;
      border: 1px solid rgba(173, 138, 77, 0.34);
      border-radius: 50%;
      box-shadow:
        inset 0 0 0 18px rgba(173, 138, 77, 0.035),
        inset 0 0 0 34px rgba(173, 138, 77, 0.04);
    }

    .report-facing-badge,
    .report-pin {
      position: absolute;
      z-index: 2;
      display: inline-grid;
      place-items: center;
      min-height: 28px;
      padding: 5px 9px;
      border: 1px solid rgba(167, 52, 39, 0.26);
      border-radius: 999px;
      background: rgba(255, 252, 247, 0.78);
      color: var(--seal);
      font-family: var(--serif);
      font-size: 11px;
      font-style: normal;
      font-weight: 800;
      letter-spacing: 0.08em;
      box-shadow: 0 8px 18px rgba(54, 44, 32, 0.06);
    }

    .report-facing-badge {
      right: 28px;
      top: 20px;
      color: var(--gold);
      border-color: rgba(173, 138, 77, 0.28);
    }

    .report-plan-stage .report-pin {
      left: var(--pin-x, 50%);
      top: var(--pin-y, 50%);
      transform: translate(-50%, -50%);
    }

    .report-plan-stage .report-pin[hidden] {
      display: none;
    }

    .report-pin-entry {
      color: var(--seal);
      border-color: rgba(167, 52, 39, 0.26);
    }

    .report-pin-hall {
      color: var(--water);
      border-color: rgba(45, 113, 130, 0.26);
    }

    .report-pin-center {
      color: var(--ink-soft);
      border-color: rgba(24, 23, 21, 0.16);
    }

    .report-cover-title {
      position: relative;
      display: grid;
      gap: 8px;
      overflow: hidden;
      padding-bottom: 16px;
      border-bottom: 1px solid rgba(24, 23, 21, 0.1);
    }

    .report-cover-title::after {
      content: "";
      position: absolute;
      right: -30px;
      top: -26px;
      z-index: 0;
      width: 148px;
      aspect-ratio: 1.025;
      opacity: 0.16;
      pointer-events: none;
      background: url("/prototype/assets/fengshui-ink/zhai-jing/zhai-jing-ornament-xingsheng-v1.webp") center / contain no-repeat;
      filter: saturate(0.92);
    }

    .report-cover-title > * {
      position: relative;
      z-index: 1;
    }

    .report-cover-title small,
    .report-reader-title p,
    .report-section-head,
    .match-house-card small,
    .match-person-card small {
      color: rgba(24, 23, 21, 0.48);
      font-family: var(--serif);
      font-size: 12px;
      letter-spacing: 0.12em;
    }

    .report-cover-title h2,
    .report-reader-title h2 {
      margin: 0;
      color: var(--ink);
      font-family: var(--serif);
      font-size: 28px;
      line-height: 1.26;
      letter-spacing: 0.08em;
    }

    .report-cover-title p {
      margin: 0;
      color: rgba(24, 23, 21, 0.66);
      font-family: var(--serif);
      font-size: 14px;
      line-height: 1.78;
      letter-spacing: 0.04em;
    }

    .report-evidence-chips {
      display: flex;
      gap: 8px;
      margin: 14px -2px 0;
      overflow-x: auto;
      padding-bottom: 4px;
      scrollbar-width: none;
    }

    .report-evidence-chips::-webkit-scrollbar {
      display: none;
    }

    .report-evidence-chips span {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      flex: 0 0 auto;
      min-height: 34px;
      padding: 0 10px;
      border: 1px solid rgba(173, 138, 77, 0.22);
      border-radius: 999px;
      background: rgba(255, 252, 247, 0.62);
      color: rgba(24, 23, 21, 0.68);
      font-size: 12px;
      line-height: 1;
    }

    .report-evidence-chips svg {
      width: 16px;
      height: 16px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
    }

    .report-core-card,
    .report-priority-card,
    .report-match-strip,
    .match-trust-strip {
      margin-top: 16px;
      border: 1px solid rgba(173, 138, 77, 0.18);
      border-radius: 8px;
      background: rgba(255, 252, 247, 0.58);
      box-shadow: 0 18px 42px rgba(54, 44, 32, 0.06);
    }

    .report-core-card {
      position: relative;
      display: grid;
      gap: 10px;
      padding: 17px 17px 17px 74px;
    }

    .report-core-card.floorplan-core-card {
      padding-left: 17px;
    }

    .report-core-card i {
      display: grid;
      place-items: center;
      border: 1px solid rgba(167, 52, 39, 0.36);
      border-radius: 6px;
      background: rgba(167, 52, 39, 0.08);
      color: var(--seal);
      font-family: var(--serif);
      font-style: normal;
      font-weight: 800;
      letter-spacing: 0.12em;
      writing-mode: vertical-rl;
    }

    .report-core-card i {
      position: absolute;
      left: 16px;
      top: 18px;
      width: 42px;
      min-height: 104px;
      font-size: 17px;
    }

    .report-core-card h2 {
      margin: 0;
      color: var(--ink);
      font-family: var(--serif);
      font-size: 24px;
      line-height: 1.3;
      letter-spacing: 0.08em;
    }

    .report-core-card p,
    .report-match-strip p,
    .match-trust-strip p {
      margin: 0;
      color: rgba(24, 23, 21, 0.64);
      font-size: 13px;
      line-height: 1.68;
      letter-spacing: 0.04em;
    }

    .report-priority-card {
      padding: 0 16px 3px;
    }

    .report-section-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      min-height: 48px;
      border-bottom: 1px solid rgba(24, 23, 21, 0.09);
    }

    .report-section-head span {
      color: var(--ink);
      font-weight: 800;
    }

    .report-section-head button {
      border: 0;
      background: transparent;
      color: var(--seal);
      font-family: var(--serif);
      font-size: 12px;
      font-weight: 800;
      letter-spacing: 0.1em;
      cursor: pointer;
    }

    .report-priority-list,
    .match-action-ladder {
      display: grid;
    }

    .report-priority-list article,
    .report-priority-list .fengshui-reading-item {
      display: grid;
      grid-template-columns: 40px 1fr;
      gap: 12px;
      min-height: 82px;
      align-items: center;
      border-bottom: 1px solid rgba(24, 23, 21, 0.08);
    }

    .report-priority-list article:last-child,
    .report-priority-list .fengshui-reading-item:last-child {
      border-bottom: 0;
    }

    .report-priority-list i,
    .report-priority-list .fengshui-reading-item i,
    .match-action-ladder i {
      display: grid;
      place-items: center;
      width: 34px;
      height: 34px;
      border-radius: 50%;
      background: var(--seal);
      color: #fffaf1;
      font-family: var(--serif);
      font-size: 18px;
      font-style: normal;
      font-weight: 800;
      box-shadow: 0 0 0 5px rgba(167, 52, 39, 0.06);
    }

    .report-priority-list article:nth-child(2) i,
    .report-priority-list .fengshui-reading-item:nth-child(2) i {
      background: var(--gold);
    }

    .report-priority-list article:nth-child(3) i,
    .report-priority-list .fengshui-reading-item:nth-child(3) i {
      background: var(--wood);
    }

    .report-priority-list strong,
    .report-priority-list .fengshui-reading-item strong,
    .match-action-ladder strong {
      display: block;
      margin-bottom: 4px;
      color: var(--ink);
      font-family: var(--serif);
      font-size: 18px;
      letter-spacing: 0.08em;
    }

    .report-priority-list span,
    .report-priority-list .fengshui-reading-item span,
    .match-action-ladder span {
      color: rgba(24, 23, 21, 0.58);
      font-size: 12px;
      line-height: 1.5;
      letter-spacing: 0.04em;
    }

    .report-match-strip {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 14px;
      align-items: center;
      padding: 14px 14px 14px 16px;
    }

    .report-match-strip strong {
      display: block;
      margin: 4px 0 5px;
      color: var(--water);
      font-family: var(--serif);
      font-size: 17px;
      letter-spacing: 0.08em;
    }

    .report-match-strip button {
      min-height: 38px;
      padding: 0 13px;
      border: 1px solid rgba(45, 113, 130, 0.24);
      border-radius: 999px;
      background: rgba(45, 113, 130, 0.08);
      color: var(--water);
      font-family: var(--serif);
      font-size: 13px;
      font-weight: 800;
      letter-spacing: 0.08em;
      cursor: pointer;
    }

    .match-profile-picker {
      display: grid;
      gap: 12px;
      margin-top: 16px;
      padding: 14px 14px 15px;
      border: 1px solid rgba(173, 138, 77, 0.18);
      border-radius: 8px;
      background: rgba(255, 252, 247, 0.62);
      box-shadow: 0 16px 34px rgba(54, 44, 32, 0.05);
    }

    .match-profile-picker.compact {
      margin: 12px 0 14px;
    }

    .match-profile-picker small,
    .match-profile-option small {
      color: rgba(24, 23, 21, 0.48);
      font-family: var(--serif);
      font-size: 12px;
      letter-spacing: 0.12em;
    }

    .match-profile-picker strong {
      display: block;
      margin-top: 4px;
      color: var(--ink);
      font-family: var(--serif);
      font-size: 18px;
      letter-spacing: 0.08em;
    }

    .match-profile-picker p {
      margin: 6px 0 0;
      color: rgba(24, 23, 21, 0.58);
      font-size: 12px;
      line-height: 1.58;
      letter-spacing: 0.04em;
    }

    .match-profile-options {
      display: flex;
      gap: 9px;
      overflow-x: auto;
      padding-bottom: 2px;
      scrollbar-width: none;
    }

    .match-profile-options::-webkit-scrollbar {
      display: none;
    }

    .match-profile-option {
      display: grid;
      grid-template-columns: 32px minmax(94px, 1fr);
      gap: 9px;
      align-items: center;
      flex: 0 0 auto;
      min-width: 146px;
      min-height: 58px;
      padding: 8px 10px;
      border: 1px solid rgba(173, 138, 77, 0.22);
      border-radius: 8px;
      background: rgba(255, 252, 247, 0.72);
      color: rgba(24, 23, 21, 0.7);
      text-align: left;
      cursor: pointer;
    }

    .match-profile-option i {
      display: grid;
      place-items: center;
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: rgba(173, 138, 77, 0.16);
      color: var(--gold);
      font-family: var(--serif);
      font-size: 18px;
      font-style: normal;
      font-weight: 800;
    }

    .match-profile-option b {
      display: block;
      color: var(--ink);
      font-family: var(--serif);
      font-size: 15px;
      letter-spacing: 0.06em;
    }

    .match-profile-option.is-active {
      border-color: rgba(167, 52, 39, 0.28);
      background: rgba(167, 52, 39, 0.06);
      color: var(--seal);
    }

    .match-profile-option.is-active i {
      background: var(--seal);
      color: #fffaf1;
      box-shadow: 0 0 0 5px rgba(167, 52, 39, 0.06);
    }

    .report-bottom-actions,
    .report-reader-actions {
      position: sticky;
      z-index: 8;
      bottom: calc(80px + env(safe-area-inset-bottom));
      display: grid;
      grid-template-columns: 0.78fr 1.22fr;
      gap: 12px;
      margin: 20px 0 0;
      padding-top: 8px;
      border-top: 1px solid rgba(173, 138, 77, 0.14);
      background: rgba(247, 242, 234, 0.97);
      box-shadow: 0 -18px 30px rgba(247, 242, 234, 0.92);
      backdrop-filter: blur(10px);
    }

    .report-bottom-actions button,
    .report-reader-actions button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      min-height: 50px;
      border: 1px solid rgba(173, 138, 77, 0.3);
      border-radius: 8px;
      background: rgba(255, 252, 247, 0.84);
      color: rgba(24, 23, 21, 0.76);
      font-family: var(--serif);
      font-size: 16px;
      font-weight: 800;
      letter-spacing: 0.1em;
      cursor: pointer;
      box-shadow: 0 14px 30px rgba(54, 44, 32, 0.08);
    }

    .report-bottom-actions .primary,
    .report-reader-actions .primary {
      border-color: rgba(167, 52, 39, 0.18);
      background: linear-gradient(180deg, #b53d2d, #9f2f25);
      color: #fffaf1;
    }

    .report-bottom-actions svg,
    .report-reader-actions svg {
      width: 20px;
      height: 20px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
    }

    .report-chapter-rail,
    .match-tabs {
      display: flex;
      gap: 8px;
      margin: 12px -2px 0;
      overflow-x: auto;
      padding-bottom: 8px;
      scrollbar-width: none;
    }

    .report-chapter-rail::-webkit-scrollbar,
    .match-tabs::-webkit-scrollbar {
      display: none;
    }

    .report-chapter-rail button,
    .match-tabs button {
      flex: 0 0 auto;
      min-height: 38px;
      padding: 0 15px;
      border: 1px solid rgba(173, 138, 77, 0.28);
      border-radius: 999px;
      background: rgba(255, 252, 247, 0.56);
      color: rgba(24, 23, 21, 0.66);
      font-family: var(--serif);
      font-size: 14px;
      font-weight: 800;
      letter-spacing: 0.08em;
      cursor: pointer;
    }

    .report-chapter-rail button.active,
    .match-tabs button.active {
      color: var(--seal);
      border-color: rgba(167, 52, 39, 0.3);
      background: rgba(167, 52, 39, 0.065);
    }

    .report-reader-title {
      display: grid;
      gap: 8px;
      margin: 22px 0 16px;
      padding-bottom: 16px;
      border-bottom: 1px solid rgba(24, 23, 21, 0.1);
    }

    .report-reader-title p {
      margin: 0;
      color: var(--gold);
      font-size: 15px;
    }

    .report-reader-title div {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      color: rgba(24, 23, 21, 0.55);
      font-size: 12px;
      letter-spacing: 0.04em;
    }

    .report-reader-title span + span::before {
      content: "";
      display: inline-block;
      width: 1px;
      height: 12px;
      margin-right: 10px;
      vertical-align: -2px;
      background: rgba(24, 23, 21, 0.16);
    }

    .report-reader-layout {
      position: relative;
      display: grid;
      grid-template-columns: 1fr;
      gap: 0;
      align-items: start;
    }

    .report-reader-body {
      grid-column: 1;
      display: grid;
      gap: 22px;
    }

    .report-chapter {
      position: relative;
      scroll-margin-top: 18px;
      padding: 18px 0 22px;
      border-bottom: 1px solid rgba(24, 23, 21, 0.1);
    }

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

    .report-chapter h2 {
      margin: 0 0 12px;
      color: var(--ink);
      font-family: var(--serif);
      font-size: 25px;
      line-height: 1.34;
      letter-spacing: 0.08em;
    }

    .report-chapter p,
    .report-chapter li,
    .report-action-steps span {
      color: rgba(24, 23, 21, 0.68);
      font-family: var(--serif);
      font-size: 14px;
      line-height: 1.82;
      letter-spacing: 0.04em;
    }

    .report-chapter p {
      margin: 0 0 12px;
    }

    .report-chapter blockquote {
      margin: 14px 0;
      padding: 14px 16px;
      border: 1px solid rgba(173, 138, 77, 0.18);
      border-radius: 8px;
      background: rgba(255, 252, 247, 0.58);
      color: var(--gold);
      font-family: var(--serif);
      font-size: 17px;
      line-height: 1.72;
      letter-spacing: 0.08em;
    }

    .report-person-note {
      margin: 14px 0;
      padding: 13px 14px;
      border-left: 2px solid rgba(45, 113, 130, 0.42);
      background: rgba(45, 113, 130, 0.055);
    }

    .report-person-note strong {
      display: block;
      margin-bottom: 5px;
      color: var(--water);
      font-family: var(--serif);
      font-size: 16px;
      letter-spacing: 0.08em;
    }

    .report-person-note p {
      margin: 0;
      color: rgba(24, 23, 21, 0.62);
      font-size: 13px;
      line-height: 1.72;
    }

    .report-check-list,
    .report-action-steps {
      display: grid;
      gap: 8px;
      margin: 14px 0 0;
      padding: 0;
      list-style: none;
    }

    .report-check-list li {
      position: relative;
      padding-left: 24px;
      border-bottom: 1px solid rgba(24, 23, 21, 0.07);
      padding-bottom: 8px;
    }

    .report-check-list li::before {
      content: "";
      position: absolute;
      left: 0;
      top: 9px;
      width: 9px;
      height: 9px;
      border-radius: 50%;
      background: var(--wood);
      box-shadow: 0 0 0 4px rgba(76, 139, 102, 0.08);
    }

    .report-action-steps li {
      display: grid;
      grid-template-columns: 1fr;
      gap: 3px;
      padding: 12px 0;
      border-bottom: 1px solid rgba(24, 23, 21, 0.08);
    }

    .report-action-steps strong {
      color: var(--ink);
      font-family: var(--serif);
      font-size: 17px;
      letter-spacing: 0.08em;
    }

    .report-disclaimer {
      margin-top: 16px !important;
      padding-top: 14px;
      border-top: 1px dashed rgba(173, 138, 77, 0.32);
      color: rgba(24, 23, 21, 0.52) !important;
      font-size: 12px !important;
    }

    .report-reader-actions {
      grid-template-columns: 0.8fr 1.2fr;
    }

    .report-reader-actions.is-single {
      grid-template-columns: minmax(0, 1fr);
    }

    .report-reader-actions .primary i {
      font-style: normal;
      font-size: 20px;
      line-height: 1;
    }

    .match-hero {
      position: relative;
      display: grid;
      grid-template-columns: minmax(0, 1fr) 34px minmax(0, 0.88fr);
      gap: 10px;
      align-items: center;
      margin: 18px 0 16px;
    }

    .match-house-card,
    .match-person-card {
      min-height: 194px;
      border: 1px solid rgba(173, 138, 77, 0.2);
      border-radius: 8px;
      background: rgba(255, 252, 247, 0.58);
      box-shadow: 0 18px 40px rgba(54, 44, 32, 0.06);
    }

    .match-house-card {
      display: grid;
      align-content: end;
      gap: 6px;
      padding: 12px;
      overflow: hidden;
    }

    .match-house-card img {
      width: 122%;
      margin: -22px -24px 0;
      opacity: 0.78;
      mix-blend-mode: multiply;
    }

    .match-house-card strong,
    .match-person-card strong {
      color: var(--ink);
      font-family: var(--serif);
      font-size: 17px;
      line-height: 1.25;
      letter-spacing: 0.08em;
    }

    .match-link-line {
      display: grid;
      place-items: center;
      min-height: 86px;
      color: var(--gold);
      font-family: var(--serif);
      font-size: 12px;
      font-weight: 800;
      letter-spacing: 0.1em;
      writing-mode: vertical-rl;
    }

    .match-link-line::before,
    .match-link-line::after {
      content: "";
      width: 1px;
      height: 36px;
      background: rgba(173, 138, 77, 0.34);
    }

    .match-person-card {
      display: grid;
      justify-items: center;
      align-content: center;
      gap: 9px;
      padding: 14px 10px;
      text-align: center;
    }

    .match-person-card i {
      display: grid;
      place-items: center;
      width: 64px;
      height: 64px;
      border-radius: 50%;
      background: rgba(45, 113, 130, 0.82);
      color: #fffaf1;
      font-family: var(--serif);
      font-size: 38px;
      font-style: normal;
      font-weight: 800;
      box-shadow: 0 0 0 8px rgba(45, 113, 130, 0.08);
    }

    .match-person-card i.wood {
      background: rgba(76, 139, 102, 0.88);
      box-shadow: 0 0 0 8px rgba(76, 139, 102, 0.08);
    }

    .match-person-card i.fire {
      background: rgba(167, 52, 39, 0.88);
      box-shadow: 0 0 0 8px rgba(167, 52, 39, 0.08);
    }

    .match-person-card i.earth {
      background: rgba(189, 145, 75, 0.9);
      box-shadow: 0 0 0 8px rgba(189, 145, 75, 0.08);
    }

    .match-person-card i.metal {
      background: rgba(126, 133, 130, 0.9);
      box-shadow: 0 0 0 8px rgba(126, 133, 130, 0.08);
    }

    .match-person-card i.water {
      background: rgba(45, 113, 130, 0.82);
      box-shadow: 0 0 0 8px rgba(45, 113, 130, 0.08);
    }

    .match-person-card div {
      display: flex;
      gap: 10px;
    }

    .match-person-card b,
    .match-action-ladder b {
      display: grid;
      place-items: center;
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: rgba(173, 138, 77, 0.86);
      color: #fffaf1;
      font-family: var(--serif);
      font-size: 18px;
      line-height: 1;
    }

    .match-person-card b.water,
    .match-action-ladder b.water {
      background: rgba(45, 113, 130, 0.86);
    }

    .match-person-card b.wood,
    .match-action-ladder b.wood {
      background: rgba(76, 139, 102, 0.9);
    }

    .match-person-card b.fire,
    .match-action-ladder b.fire {
      background: rgba(167, 52, 39, 0.88);
    }

    .match-person-card b.earth,
    .match-action-ladder b.earth {
      background: rgba(189, 145, 75, 0.9);
    }

    .match-person-card b.metal,
    .match-action-ladder b.metal {
      background: rgba(126, 133, 130, 0.9);
    }

    .match-person-card b.neutral,
    .match-action-ladder b.neutral {
      background: rgba(173, 138, 77, 0.86);
    }

    .match-panel {
      display: none;
      margin-top: 8px;
      border: 1px solid rgba(173, 138, 77, 0.18);
      border-radius: 8px;
      background: rgba(255, 252, 247, 0.58);
      overflow: hidden;
    }

    .match-panel.active {
      display: grid;
    }

    .match-panel > article {
      display: grid;
      gap: 5px;
      padding: 14px 16px;
      border-bottom: 1px solid rgba(24, 23, 21, 0.08);
    }

    .match-panel > article:last-child {
      border-bottom: 0;
    }

    .match-panel > article strong {
      color: var(--ink);
      font-family: var(--serif);
      font-size: 17px;
      letter-spacing: 0.08em;
    }

    .match-panel > article span {
      color: rgba(24, 23, 21, 0.62);
      font-size: 13px;
      line-height: 1.62;
      letter-spacing: 0.04em;
    }

    .match-action-ladder article {
      display: grid;
      grid-template-columns: 36px minmax(0, 1fr) 34px;
      gap: 10px;
      align-items: center;
      min-height: 82px;
      padding: 11px 12px;
      border-bottom: 1px solid rgba(24, 23, 21, 0.08);
    }

    .match-action-ladder article:last-child {
      border-bottom: 0;
    }

    .match-action-ladder i {
      width: 30px;
      height: 30px;
      font-size: 16px;
    }

    .match-action-ladder em {
      grid-column: 2 / 4;
      color: rgba(24, 23, 21, 0.42);
      font-size: 11px;
      font-style: normal;
      letter-spacing: 0.06em;
    }

    .match-trust-strip {
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 12px;
      align-items: center;
      padding: 14px 16px;
    }

    .match-trust-strip .seal {
      display: grid;
      place-items: center;
      width: 36px;
      height: 50px;
      border: 1px solid rgba(167, 52, 39, 0.34);
      border-radius: 6px;
      color: var(--seal);
      font-family: var(--serif);
      font-size: 14px;
      font-style: normal;
      font-weight: 800;
      line-height: 1.1;
      writing-mode: vertical-rl;
    }

    .match-actions {
      grid-template-columns: 0.82fr 1.18fr;
    }

    .fengshui-room-cover-screen,
    .fengshui-room-reader-screen {
      padding-bottom: 188px;
    }

    .room-report-hero {
      gap: 15px;
    }

    .room-report-sheet {
      min-height: 318px;
      margin: 0 -12px;
      border-bottom-color: rgba(45, 113, 130, 0.16);
    }

    .room-report-sheet::before {
      background:
        linear-gradient(180deg, rgba(255, 252, 247, 0.1), rgba(247, 242, 234, 0.72)),
        url("/prototype/assets/fengshui-ink/fengshui-evidence-landscape-v1.svg") center bottom / 112% auto no-repeat;
      opacity: 0.34;
    }

    .room-report-sheet img {
      width: min(128%, 520px);
      transform: translateX(4px);
      opacity: 0.86;
    }

    .room-report-sheet img.is-user-upload {
      width: 100%;
      height: 318px;
      object-fit: cover;
      transform: none;
      opacity: 0.82;
      mix-blend-mode: normal;
    }

    .room-pin-window {
      left: 24px;
      top: 84px;
      color: var(--water);
      border-color: rgba(45, 113, 130, 0.24);
    }

    .room-pin-bed {
      right: 26px;
      bottom: 54px;
      color: var(--wood);
      border-color: rgba(76, 139, 102, 0.24);
    }

    .room-pin-entry {
      left: 44px;
      bottom: 28px;
      color: var(--seal);
    }

    .room-report-chips {
      margin-top: 12px;
    }

    .room-photo-evidence-strip {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
      margin-top: 14px;
    }

    .room-photo-evidence-strip article {
      min-width: 0;
      overflow: hidden;
      border: 1px solid rgba(173, 138, 77, 0.18);
      border-radius: 8px;
      background: rgba(255, 252, 247, 0.62);
      box-shadow: 0 12px 28px rgba(54, 44, 32, 0.05);
    }

    .room-photo-evidence-strip img {
      display: block;
      width: 100%;
      aspect-ratio: 1 / 1;
      object-fit: cover;
      background: rgba(247, 239, 224, 0.72);
    }

    .room-photo-evidence-strip div {
      display: grid;
      gap: 2px;
      padding: 8px 8px 9px;
    }

    .room-photo-evidence-strip strong {
      color: var(--ink);
      font-family: var(--serif);
      font-size: 13px;
      line-height: 1.25;
      letter-spacing: 0.06em;
    }

    .room-photo-evidence-strip span {
      color: rgba(24, 23, 21, 0.52);
      font-size: 11px;
      line-height: 1.35;
      letter-spacing: 0.04em;
    }

    .room-report-score-card {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      margin-top: 14px;
      border: 1px solid rgba(173, 138, 77, 0.18);
      border-radius: 8px;
      background: rgba(255, 252, 247, 0.62);
      overflow: hidden;
      box-shadow: 0 16px 36px rgba(54, 44, 32, 0.055);
    }

    .room-report-score-card div {
      display: grid;
      align-content: center;
      justify-items: center;
      min-height: 102px;
      padding: 11px 6px;
      text-align: center;
      border-right: 1px solid rgba(24, 23, 21, 0.08);
    }

    .room-report-score-card div:last-child {
      border-right: 0;
    }

    .room-report-score-card small,
    .room-report-score-card span {
      color: rgba(24, 23, 21, 0.5);
      font-size: 11px;
      line-height: 1.4;
      letter-spacing: 0.06em;
    }

    .room-report-score-card strong {
      display: block;
      margin: 4px 0 3px;
      color: var(--ink);
      font-family: var(--serif);
      font-size: 18px;
      line-height: 1.2;
      letter-spacing: 0.08em;
    }

    .room-report-score-card [data-fengshui-room-score] {
      color: var(--seal);
      font-family: var(--serif);
      font-size: 20px;
      line-height: 1.24;
      letter-spacing: 0.05em;
    }

    .room-core-card {
      margin-top: 16px;
    }

    .room-score-breakdown {
      display: grid;
      gap: 9px;
      margin-top: 14px;
      padding: 13px;
      border: 1px solid rgba(173, 138, 77, 0.16);
      border-radius: 8px;
      background: rgba(255, 252, 247, 0.58);
    }

    .room-score-breakdown article {
      display: grid;
      grid-template-columns: 74px minmax(0, 1fr) 34px;
      gap: 9px;
      align-items: center;
      min-width: 0;
    }

    .room-score-breakdown strong,
    .room-score-breakdown b {
      color: rgba(24, 23, 21, 0.68);
      font-size: 12px;
      line-height: 1.2;
      letter-spacing: 0.05em;
      white-space: nowrap;
    }

    .room-score-breakdown b {
      color: var(--seal);
      font-family: Georgia, var(--serif);
      font-size: 14px;
      text-align: right;
      letter-spacing: 0;
    }

    .room-score-bar {
      height: 8px;
      overflow: hidden;
      border-radius: 999px;
      background: rgba(24, 23, 21, 0.08);
    }

    .room-score-bar i {
      display: block;
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, var(--gold), var(--wood));
    }

    .room-term-card {
      display: grid;
      gap: 11px;
      margin-top: 14px;
      padding: 14px;
      border: 1px solid rgba(46, 122, 82, 0.16);
      border-radius: 8px;
      background:
        linear-gradient(180deg, rgba(255, 252, 247, 0.74), rgba(238, 246, 239, 0.44));
      box-shadow: 0 16px 36px rgba(46, 122, 82, 0.055);
    }

    .room-term-head {
      display: grid;
      gap: 4px;
    }

    .room-term-head span {
      color: var(--wood);
      font-size: 12px;
      line-height: 1.2;
      letter-spacing: 0.12em;
    }

    .room-term-head strong {
      color: var(--ink);
      font-family: var(--serif);
      font-size: 18px;
      line-height: 1.35;
      letter-spacing: 0.06em;
    }

    .room-term-strip,
    .room-term-grid {
      display: grid;
      gap: 9px;
      min-width: 0;
    }

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

    .room-term-strip article,
    .room-term-grid article {
      display: grid;
      align-content: start;
      gap: 6px;
      min-width: 0;
      padding: 11px;
      border: 1px solid rgba(173, 138, 77, 0.16);
      border-radius: 8px;
      background: rgba(255, 252, 247, 0.58);
    }

    .room-term-grid {
      margin-top: 14px;
    }

    .room-term-grid header {
      display: flex;
      flex-wrap: wrap;
      gap: 7px;
      align-items: center;
      min-width: 0;
    }

    .room-term-strip em,
    .room-term-grid em {
      display: inline-grid;
      place-items: center;
      justify-self: start;
      min-height: 25px;
      padding: 0 9px;
      border: 1px solid rgba(46, 122, 82, 0.2);
      border-radius: 999px;
      color: var(--wood);
      background: rgba(46, 122, 82, 0.07);
      font-size: 12px;
      font-style: normal;
      font-weight: 700;
      line-height: 1.2;
      letter-spacing: 0.06em;
      white-space: nowrap;
    }

    .room-term-strip strong,
    .room-term-grid strong {
      color: var(--ink);
      font-family: var(--serif);
      font-size: 15px;
      line-height: 1.35;
      letter-spacing: 0.05em;
    }

    .room-term-strip p,
    .room-term-grid p {
      margin: 0;
      color: rgba(24, 23, 21, 0.62);
      font-size: 12px;
      line-height: 1.65;
      letter-spacing: 0.03em;
    }

    .room-enhance-card {
      display: grid;
      grid-template-columns: 42px minmax(0, 1fr);
      gap: 12px;
      align-items: center;
      margin-top: 14px;
      padding: 13px;
      border: 1px solid rgba(167, 52, 39, 0.18);
      border-radius: 8px;
      background:
        linear-gradient(180deg, rgba(255, 252, 247, 0.78), rgba(251, 239, 229, 0.58));
      box-shadow: 0 14px 32px rgba(167, 52, 39, 0.055);
    }

    .room-enhance-card i {
      display: grid;
      place-items: center;
      width: 42px;
      height: 42px;
      border-radius: 50%;
      color: var(--seal);
      background: rgba(167, 52, 39, 0.08);
      font-family: var(--serif);
      font-style: normal;
      font-weight: 800;
    }

    .room-enhance-card strong {
      display: block;
      color: var(--ink);
      font-family: var(--serif);
      font-size: 16px;
      line-height: 1.35;
      letter-spacing: 0.08em;
    }

    .room-enhance-card span {
      display: block;
      margin-top: 3px;
      color: rgba(24, 23, 21, 0.58);
      font-size: 12px;
      line-height: 1.55;
      letter-spacing: 0.04em;
    }

    .room-enhance-card button {
      justify-self: start;
      min-height: 34px;
      margin-top: 8px;
      padding: 0 13px;
      border: 1px solid rgba(167, 52, 39, 0.22);
      border-radius: 999px;
      color: var(--seal);
      background: rgba(255, 252, 247, 0.72);
      font: inherit;
      font-size: 12px;
      letter-spacing: 0.06em;
    }

    .room-free-card {
      margin-top: 14px;
    }

    .room-unlock-card {
      display: grid;
      gap: 14px;
      margin-top: 16px;
      padding: 15px 15px 16px;
      border: 1px solid rgba(24, 23, 21, 0.1);
      border-radius: 8px;
      background:
        linear-gradient(180deg, rgba(255, 252, 247, 0.72), rgba(247, 239, 224, 0.52));
      box-shadow: 0 18px 42px rgba(54, 44, 32, 0.06);
    }

    .room-unlock-head {
      display: grid;
      grid-template-columns: 42px 1fr;
      gap: 12px;
      align-items: center;
    }

    .room-unlock-head i {
      display: grid;
      place-items: center;
      width: 42px;
      height: 42px;
      border: 1px solid rgba(167, 52, 39, 0.28);
      border-radius: 50%;
      color: var(--seal);
      background: rgba(167, 52, 39, 0.055);
      font-style: normal;
    }

    .room-unlock-head svg {
      width: 20px;
      height: 20px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
    }

    .room-unlock-head small {
      display: block;
      margin-bottom: 3px;
      color: rgba(24, 23, 21, 0.48);
      font-family: var(--serif);
      font-size: 12px;
      letter-spacing: 0.12em;
    }

    .room-unlock-head strong {
      color: var(--ink);
      font-family: var(--serif);
      font-size: 18px;
      letter-spacing: 0.08em;
    }

    .room-unlock-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
    }

    .room-unlock-grid span {
      display: grid;
      place-items: center;
      min-height: 36px;
      border: 1px solid rgba(173, 138, 77, 0.16);
      border-radius: 999px;
      background: rgba(255, 252, 247, 0.54);
      color: rgba(24, 23, 21, 0.58);
      font-size: 12px;
      letter-spacing: 0.06em;
      white-space: nowrap;
    }

    .room-link-strip strong {
      color: var(--wood);
    }

    .room-evidence-ledger,
    .room-reset-grid {
      display: grid;
      gap: 9px;
      margin-top: 14px;
    }

    .room-evidence-ledger article {
      display: grid;
      gap: 4px;
      padding: 12px 13px;
      border: 1px solid rgba(173, 138, 77, 0.16);
      border-radius: 8px;
      background: rgba(255, 252, 247, 0.56);
    }

    .room-evidence-ledger strong {
      color: var(--ink);
      font-family: var(--serif);
      font-size: 16px;
      letter-spacing: 0.08em;
    }

    .room-evidence-ledger span {
      color: rgba(24, 23, 21, 0.6);
      font-size: 13px;
      line-height: 1.6;
      letter-spacing: 0.04em;
    }

    .room-finding-cards {
      display: grid;
      gap: 10px;
      margin-top: 14px;
    }

    .room-finding-cards article {
      display: grid;
      gap: 9px;
      padding: 13px;
      border: 1px solid rgba(173, 138, 77, 0.16);
      border-radius: 8px;
      background: rgba(255, 252, 247, 0.58);
    }

    .room-finding-cards header {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 10px;
      align-items: start;
    }

    .room-finding-cards h3 {
      margin: 0;
      color: var(--ink);
      font-family: var(--serif);
      font-size: 18px;
      line-height: 1.35;
      letter-spacing: 0.06em;
    }

    .room-finding-cards em {
      display: inline-grid;
      place-items: center;
      min-height: 25px;
      padding: 0 9px;
      border: 1px solid rgba(173, 138, 77, 0.18);
      border-radius: 999px;
      color: rgba(24, 23, 21, 0.58);
      background: rgba(247, 239, 224, 0.58);
      font-size: 11px;
      font-style: normal;
      letter-spacing: 0.08em;
      white-space: nowrap;
    }

    .room-finding-cards em.warn {
      color: var(--seal);
      border-color: rgba(167, 52, 39, 0.22);
      background: rgba(167, 52, 39, 0.06);
    }

    .room-finding-cards p {
      margin: 0;
      color: rgba(24, 23, 21, 0.64);
      font-size: 13px;
      line-height: 1.7;
      letter-spacing: 0.04em;
    }

    .room-finding-evidence {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }

    .room-finding-evidence span {
      min-width: 0;
      padding: 5px 8px;
      border-radius: 999px;
      color: rgba(24, 23, 21, 0.58);
      background: rgba(24, 23, 21, 0.055);
      font-size: 11px;
      line-height: 1.2;
      letter-spacing: 0.04em;
    }

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

    .room-reset-grid article {
      display: grid;
      align-content: start;
      gap: 6px;
      min-height: 136px;
      padding: 12px;
      border: 1px solid rgba(173, 138, 77, 0.16);
      border-radius: 8px;
      background: rgba(255, 252, 247, 0.56);
    }

    .room-reset-grid i {
      display: grid;
      place-items: center;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background: var(--gold);
      color: #fffaf1;
      font-family: Georgia, var(--serif);
      font-size: 15px;
      font-style: normal;
      font-weight: 800;
    }

    .room-reset-grid strong {
      color: var(--ink);
      font-family: var(--serif);
      font-size: 16px;
      letter-spacing: 0.08em;
    }

    .room-reset-grid span {
      color: rgba(24, 23, 21, 0.6);
      font-size: 12px;
      line-height: 1.58;
      letter-spacing: 0.04em;
    }

    @media (max-width: 430px) {
      .room-term-strip {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 380px) {
      .room-report-score-card strong {
        font-size: 16px;
      }

      .room-report-score-card [data-fengshui-room-score] {
        font-size: 18px;
      }

      .room-unlock-grid,
      .room-reset-grid {
        grid-template-columns: 1fr;
      }

      .room-score-breakdown article {
        grid-template-columns: 64px minmax(0, 1fr) 30px;
        gap: 7px;
      }
    }

    .fengshui-flow-dots {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
      margin: 14px 0 0;
      padding: 10px 0;
      border-top: 1px solid rgba(24, 23, 21, 0.08);
      border-bottom: 1px solid rgba(24, 23, 21, 0.08);
    }

    .fengshui-flow-dots span {
      display: grid;
      justify-items: center;
      gap: 4px;
      color: rgba(24, 23, 21, 0.5);
      font-family: var(--serif);
      font-size: 11px;
      letter-spacing: 0.08em;
    }

    .fengshui-flow-dots i,
    .fengshui-row-mark,
    .fengshui-mini-seal {
      display: grid;
      place-items: center;
      border: 1px solid rgba(173, 138, 77, 0.26);
      border-radius: 50%;
      color: var(--gold);
      background: rgba(255, 252, 247, 0.58);
      font-family: var(--serif);
      font-style: normal;
      font-weight: 800;
    }

    .fengshui-flow-dots i {
      width: 24px;
      height: 24px;
      font-size: 12px;
    }

    .fengshui-capture-tabs {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      margin-top: 14px;
      border-top: 1px solid rgba(24, 23, 21, 0.1);
      border-bottom: 1px solid rgba(24, 23, 21, 0.08);
    }

    .fengshui-capture-tabs span {
      display: grid;
      place-items: center;
      min-height: 42px;
      color: rgba(24, 23, 21, 0.52);
      font-family: var(--serif);
      font-size: 14px;
      letter-spacing: 0.12em;
    }

    .fengshui-capture-tabs .active {
      color: var(--seal);
      box-shadow: inset 0 -1px 0 rgba(167, 52, 39, 0.58);
    }

    .fengshui-upload-only {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 14px;
      align-items: center;
      width: 100%;
      margin-top: 14px;
      padding: 12px 14px;
      border: 1px solid rgba(173, 138, 77, 0.18);
      border-radius: 8px;
      background:
        radial-gradient(circle at 12% 18%, rgba(76, 139, 102, 0.06), transparent 35%),
        linear-gradient(180deg, rgba(255, 252, 247, 0.76), rgba(248, 241, 229, 0.5));
      color: inherit;
      cursor: pointer;
      font: inherit;
      text-align: left;
      appearance: none;
      transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
    }

    .fengshui-upload-only:hover,
    .fengshui-upload-only:focus-visible {
      border-color: rgba(76, 139, 102, 0.3);
      background:
        radial-gradient(circle at 12% 18%, rgba(76, 139, 102, 0.1), transparent 35%),
        linear-gradient(180deg, rgba(255, 252, 247, 0.86), rgba(238, 248, 242, 0.52));
      box-shadow: 0 10px 24px rgba(54, 44, 32, 0.07);
    }

    .fengshui-upload-only:focus-visible {
      outline: 2px solid rgba(76, 139, 102, 0.36);
      outline-offset: 3px;
    }

    .fengshui-upload-only.has-file {
      border-color: rgba(76, 139, 102, 0.28);
      background:
        radial-gradient(circle at 12% 18%, rgba(76, 139, 102, 0.1), transparent 35%),
        linear-gradient(180deg, rgba(255, 252, 247, 0.8), rgba(238, 248, 242, 0.46));
    }

    .fengshui-upload-only-copy {
      min-width: 0;
    }

    .fengshui-upload-only small,
    .fengshui-upload-only span {
      display: block;
      color: rgba(24, 23, 21, 0.52);
      font-size: 12px;
      line-height: 1.45;
      letter-spacing: 0.03em;
    }

    .fengshui-upload-only b {
      display: block;
      margin: 2px 0 3px;
      color: var(--ink);
      font-family: var(--serif);
      font-size: 18px;
      line-height: 1.2;
      letter-spacing: 0.08em;
    }

    .fengshui-upload-only em {
      display: grid;
      place-items: center;
      width: 36px;
      height: 36px;
      border: 1px solid rgba(167, 52, 39, 0.24);
      border-radius: 50%;
      color: var(--wood);
      background: rgba(255, 252, 247, 0.72);
      font-family: Georgia, var(--serif);
      font-size: 22px;
      font-style: normal;
      font-weight: 800;
      line-height: 1;
      box-shadow: inset 0 0 0 6px rgba(76, 139, 102, 0.04);
      transform: translateY(-1px);
    }

    .fengshui-upload-stage,
    .fengshui-photo-capture {
      position: relative;
      display: grid;
      place-items: center;
      width: 100%;
      max-width: 100%;
      margin: 14px 0 0;
      border: 1px dashed rgba(173, 138, 77, 0.34);
      overflow: hidden;
      background:
        linear-gradient(180deg, rgba(255, 252, 247, 0.5), rgba(255, 252, 247, 0.24)),
        radial-gradient(circle at 50% 42%, rgba(173, 138, 77, 0.08), transparent 42%);
      color: var(--ink);
      cursor: pointer;
      font: inherit;
    }

    .fengshui-upload-stage {
      min-height: 76px;
      padding: 10px;
      border-style: solid;
      border-color: rgba(173, 138, 77, 0.22);
      border-radius: 8px;
      place-items: stretch;
      text-align: left;
      background:
        linear-gradient(180deg, rgba(255, 252, 247, 0.74), rgba(248, 241, 229, 0.5));
    }

    .fengshui-upload-stage.has-file {
      min-height: 72px;
      margin-top: 10px;
      border-style: solid;
      border-color: rgba(76, 139, 102, 0.28);
      background:
        linear-gradient(180deg, rgba(255, 252, 247, 0.78), rgba(238, 248, 242, 0.46));
    }

    .fengshui-photo-capture {
      min-height: 300px;
      border-style: solid;
    }

    .fengshui-photo-capture::before,
    .fengshui-photo-capture::after {
      content: "";
      position: absolute;
      inset: 14px;
      border: 1px solid rgba(173, 138, 77, 0.16);
      pointer-events: none;
    }

    .fengshui-photo-capture::after {
      inset: 26px;
      border-style: dashed;
      opacity: 0.72;
    }

    .fengshui-upload-stage img {
      width: min(340px, calc(100vw - 64px));
      max-width: 100%;
      opacity: 0.64;
      mix-blend-mode: multiply;
      filter: drop-shadow(0 18px 34px rgba(54, 44, 32, 0.08));
    }

    .fengshui-photo-capture img {
      width: min(448px, calc(100vw + 18px));
      max-width: none;
      opacity: 0.72;
      mix-blend-mode: multiply;
      transform: translateX(8px);
    }

    .fengshui-upload-stage img.is-user-upload,
    .fengshui-photo-capture img.is-user-upload,
    .fengshui-review-stage img.is-user-upload {
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: 0.82;
      filter: none;
      mix-blend-mode: normal;
      transform: none;
    }

    .fengshui-review-stage .fengshui-plan-frame .fengshui-floorplan-art.is-user-upload {
      width: 100%;
      height: auto;
      object-fit: contain;
    }

    .fengshui-upload-stage.has-file img.is-user-upload {
      display: none;
    }

    .fengshui-demo-badge {
      position: absolute;
      z-index: 4;
      right: 12px;
      bottom: 12px;
      display: inline-grid;
      place-items: center;
      min-height: 25px;
      padding: 0 9px 1px;
      border: 1px solid rgba(173, 138, 77, 0.18);
      border-radius: 999px;
      color: rgba(24, 23, 21, 0.46);
      background: rgba(255, 252, 247, 0.82);
      font-size: 11px;
      font-weight: 750;
      letter-spacing: 0.04em;
      pointer-events: none;
      box-shadow: 0 8px 18px rgba(54, 44, 32, 0.06);
    }

    .fengshui-upload-stage.has-file .fengshui-demo-badge,
    .fengshui-outline-stage img.is-user-upload + svg + .fengshui-compass-dial + .fengshui-demo-badge {
      display: none;
    }

    .fengshui-upload-stamp {
      position: static;
      display: grid;
      grid-template-columns: 34px 1fr;
      align-items: center;
      gap: 10px;
      width: 100%;
      min-width: 0;
      min-height: 54px;
      padding: 10px 12px;
      border: 1px solid rgba(24, 23, 21, 0.1);
      border-radius: 8px;
      background: rgba(255, 252, 247, 0.86);
      box-shadow: none;
      transform: none;
    }

    .fengshui-upload-stage.has-file .fengshui-upload-stamp {
      width: 100%;
      border-color: rgba(173, 138, 77, 0.18);
      background: rgba(255, 252, 247, 0.68);
    }

    .fengshui-upload-stamp i,
    .fengshui-camera-mark {
      display: grid;
      place-items: center;
      border: 1px solid rgba(167, 52, 39, 0.3);
      border-radius: 50%;
      color: var(--seal);
      background: rgba(255, 252, 247, 0.82);
      font-family: Georgia, var(--serif);
      font-style: normal;
    }

    .fengshui-upload-stamp i {
      width: 32px;
      height: 32px;
      font-size: 20px;
    }

    .fengshui-camera-mark {
      position: absolute;
      z-index: 2;
      width: 64px;
      height: 64px;
      font-size: 28px;
      box-shadow: 0 16px 36px rgba(54, 44, 32, 0.1);
    }

    .fengshui-upload-stamp b {
      display: block;
      margin-bottom: 2px;
      font-family: var(--serif);
      font-size: 15px;
      letter-spacing: 0.09em;
    }

    .fengshui-upload-stamp span span {
      color: rgba(24, 23, 21, 0.46);
      font-size: 11px;
      letter-spacing: 0.04em;
    }

    .fengshui-room-upload-screen {
      padding-bottom: 124px;
    }

    .room-upload-brief {
      display: grid;
      gap: 13px;
      margin-top: 18px;
      padding: 15px 0 16px;
      border-top: 1px solid rgba(173, 138, 77, 0.22);
      border-bottom: 1px solid rgba(24, 23, 21, 0.08);
    }

    .room-upload-brief small {
      display: block;
      margin-bottom: 5px;
      color: rgba(173, 138, 77, 0.82);
      font-family: var(--serif);
      font-size: 11px;
      letter-spacing: 0.18em;
    }

    .room-upload-brief h2 {
      margin: 0;
      max-width: 13em;
      font-family: var(--serif);
      font-size: 24px;
      line-height: 1.22;
      letter-spacing: 0.08em;
      text-wrap: balance;
    }

    .room-upload-brief p {
      margin: 8px 0 0;
      max-width: 27em;
      color: rgba(24, 23, 21, 0.58);
      font-size: 13px;
      line-height: 1.58;
      letter-spacing: 0.04em;
    }

    .room-upload-proof-row {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
    }

    .room-upload-proof-row span {
      display: grid;
      place-items: center;
      align-content: center;
      min-width: 0;
      min-height: 56px;
      padding: 10px 8px;
      border-top: 1px solid rgba(24, 23, 21, 0.1);
      background: rgba(255, 252, 247, 0.46);
    }

    .room-upload-proof-row b,
    .room-upload-proof-row em {
      display: block;
      font-style: normal;
      text-align: center;
    }

    .room-upload-proof-row b {
      color: var(--seal);
      font-family: var(--serif);
      font-size: 17px;
      letter-spacing: 0.08em;
    }

    .room-upload-proof-row em {
      margin-top: 3px;
      color: rgba(24, 23, 21, 0.48);
      font-size: 11px;
      letter-spacing: 0.06em;
      white-space: nowrap;
    }

    .room-upload-stage {
      min-height: 338px;
      margin-top: 14px;
      background:
        linear-gradient(180deg, rgba(255, 252, 247, 0.34), rgba(242, 235, 221, 0.24)),
        radial-gradient(circle at 50% 42%, rgba(173, 138, 77, 0.1), transparent 44%);
    }

    .room-upload-stage .fengshui-camera-mark {
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

    .room-upload-corner {
      position: absolute;
      z-index: 3;
      width: 30px;
      height: 30px;
      color: rgba(255, 252, 247, 0.92);
      pointer-events: none;
      filter: drop-shadow(0 2px 8px rgba(24, 23, 21, 0.18));
    }

    .room-upload-corner.top-left {
      top: 22px;
      left: 22px;
      border-top: 2px solid;
      border-left: 2px solid;
    }

    .room-upload-corner.top-right {
      top: 22px;
      right: 22px;
      border-top: 2px solid;
      border-right: 2px solid;
    }

    .room-upload-corner.bottom-left {
      bottom: 22px;
      left: 22px;
      border-bottom: 2px solid;
      border-left: 2px solid;
    }

    .room-upload-corner.bottom-right {
      right: 22px;
      bottom: 22px;
      border-right: 2px solid;
      border-bottom: 2px solid;
    }

    .room-upload-frame-copy {
      position: absolute;
      right: 14px;
      bottom: 14px;
      left: 14px;
      z-index: 4;
      display: grid;
      justify-self: stretch;
      gap: 3px;
      width: calc(100% - 28px);
      min-width: 0;
      padding: 11px 13px 12px;
      border: 1px solid rgba(24, 23, 21, 0.1);
      background: rgba(255, 252, 247, 0.88);
      box-shadow: 0 14px 34px rgba(54, 44, 32, 0.1);
      text-align: left;
    }

    .room-upload-frame-copy b {
      font-family: var(--serif);
      font-size: 16px;
      letter-spacing: 0.08em;
    }

    .room-upload-frame-copy span {
      color: rgba(24, 23, 21, 0.52);
      font-size: 12px;
      line-height: 1.4;
      letter-spacing: 0.04em;
    }

    .room-upload-guide-panel {
      margin-top: 14px;
      padding: 14px 0 2px;
      border-top: 1px solid rgba(24, 23, 21, 0.1);
    }

    .room-upload-guide-head {
      display: grid;
      grid-template-columns: 34px 1fr;
      align-items: center;
      gap: 10px;
    }

    .room-upload-guide-head i {
      display: grid;
      place-items: center;
      width: 30px;
      height: 30px;
      border: 1px solid rgba(167, 52, 39, 0.28);
      border-radius: 50%;
      color: var(--seal);
      background: rgba(167, 52, 39, 0.035);
      font-family: var(--serif);
      font-style: normal;
      font-weight: 800;
    }

    .room-upload-guide-head b {
      display: block;
      font-family: var(--serif);
      font-size: 16px;
      letter-spacing: 0.1em;
    }

    .room-upload-guide-head span {
      display: block;
      margin-top: 2px;
      color: rgba(24, 23, 21, 0.48);
      font-size: 12px;
      letter-spacing: 0.04em;
    }

    .room-upload-guide-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 7px;
      margin-top: 12px;
    }

    .room-upload-guide-grid span {
      display: grid;
      place-items: center;
      min-height: 35px;
      border-bottom: 1px solid rgba(76, 139, 102, 0.24);
      color: var(--wood);
      font-family: var(--serif);
      font-size: 13px;
      letter-spacing: 0.07em;
      white-space: nowrap;
    }

    .room-upload-panel .fengshui-section-label {
      margin-top: 15px;
    }

    .single-room-capture-screen,
    .single-room-review-screen {
      padding-bottom: 124px;
      overflow-x: hidden;
    }

    .single-room-intro h2 {
      max-width: 10em;
    }

    .single-room-type-panel {
      margin-top: 14px;
    }

    .single-room-type-grid {
      display: grid;
      gap: 9px;
      width: 100%;
      max-width: 100%;
    }

    .single-room-type-grid button {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 8px 12px;
      align-items: center;
      min-width: 0;
      min-height: 62px;
      padding: 12px 13px;
      border: 1px solid rgba(24, 23, 21, 0.09);
      border-radius: 8px;
      background:
        linear-gradient(180deg, rgba(255, 252, 247, 0.74), rgba(248, 241, 229, 0.46));
      color: var(--ink);
      text-align: left;
      cursor: pointer;
    }

    .single-room-type-grid button::after {
      content: "›";
      color: rgba(24, 23, 21, 0.34);
      font-family: Georgia, var(--serif);
      font-size: 24px;
    }

    .single-room-type-grid button.active {
      border-color: rgba(167, 52, 39, 0.28);
      background:
        linear-gradient(180deg, rgba(255, 248, 244, 0.84), rgba(255, 252, 247, 0.58));
      box-shadow: inset 3px 0 0 rgba(167, 52, 39, 0.42);
    }

    .single-room-type-grid strong,
    .single-room-type-grid span {
      min-width: 0;
      overflow-wrap: anywhere;
    }

    .single-room-type-grid strong {
      display: block;
      font-family: var(--serif);
      font-size: 16px;
      letter-spacing: 0.08em;
    }

    .single-room-type-grid span {
      display: block;
      grid-column: 1 / 2;
      color: rgba(24, 23, 21, 0.52);
      font-size: 12px;
      line-height: 1.45;
      letter-spacing: 0.03em;
    }

    .single-room-required-panel {
      margin-top: 18px;
      max-width: 100%;
    }

    .single-room-boundary-note {
      margin: 8px 0 0;
      color: rgba(24, 23, 21, 0.56);
      font-size: 12px;
      line-height: 1.6;
      letter-spacing: 0.03em;
    }

    .single-room-photo-list {
      display: grid;
      gap: 12px;
      width: 100%;
      max-width: 100%;
      margin-top: 12px;
    }

    .single-room-photo-card {
      display: grid;
      gap: 10px;
      min-width: 0;
      padding: 13px;
      border: 1px solid rgba(113, 93, 62, 0.14);
      border-radius: 8px;
      background:
        linear-gradient(180deg, rgba(255, 252, 247, 0.72), rgba(248, 241, 229, 0.42));
      box-shadow: 0 14px 34px rgba(54, 44, 32, 0.06);
    }

    .single-room-photo-card.uploaded {
      border-color: rgba(76, 139, 102, 0.22);
    }

    .single-room-photo-card.uploading {
      opacity: 0.72;
    }

    .single-room-photo-top {
      display: grid;
      grid-template-columns: 32px minmax(0, 1fr) auto;
      gap: 9px;
      align-items: start;
      min-width: 0;
    }

    .single-room-photo-top i,
    .single-room-check-head i {
      display: grid;
      place-items: center;
      width: 30px;
      height: 30px;
      border: 1px solid rgba(167, 52, 39, 0.28);
      border-radius: 50%;
      color: var(--seal);
      background: rgba(167, 52, 39, 0.035);
      font-family: var(--serif);
      font-style: normal;
      font-weight: 800;
    }

    .single-room-photo-top small {
      display: block;
      color: rgba(173, 138, 77, 0.82);
      font-size: 11px;
      letter-spacing: 0.12em;
    }

    .single-room-photo-top h3 {
      margin: 2px 0 0;
      min-width: 0;
      font-family: var(--serif);
      font-size: 16px;
      line-height: 1.35;
      letter-spacing: 0.06em;
      overflow-wrap: anywhere;
    }

    .single-room-photo-top span {
      display: inline-grid;
      place-items: center;
      min-width: 52px;
      min-height: 24px;
      padding: 0 7px 2px;
      border-bottom: 1px solid rgba(167, 52, 39, 0.28);
      color: var(--seal);
      font-family: var(--serif);
      font-size: 11px;
      letter-spacing: 0.06em;
      white-space: nowrap;
    }

    .single-room-photo-top span.ok {
      border-color: rgba(76, 139, 102, 0.28);
      color: var(--wood);
    }

    .single-room-photo-card p {
      margin: 0;
      color: rgba(24, 23, 21, 0.58);
      font-size: 12px;
      line-height: 1.58;
      letter-spacing: 0.03em;
      overflow-wrap: anywhere;
    }

    .single-room-photo-reason {
      padding: 8px 10px;
      border-left: 2px solid rgba(173, 138, 77, 0.42);
      background: rgba(255, 252, 247, 0.54);
    }

    .single-room-photo-preview {
      position: relative;
      display: grid;
      place-items: center;
      width: 100%;
      max-width: 100%;
      aspect-ratio: 4 / 3;
      overflow: hidden;
      border: 1px dashed rgba(173, 138, 77, 0.28);
      border-radius: 8px;
      background:
        radial-gradient(circle at 50% 42%, rgba(173, 138, 77, 0.12), transparent 40%),
        linear-gradient(180deg, rgba(255, 252, 247, 0.76), rgba(242, 235, 221, 0.42));
    }

    .single-room-photo-preview img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .single-room-photo-preview b,
    .single-room-photo-preview em {
      font-style: normal;
    }

    .single-room-photo-preview b {
      color: rgba(167, 52, 39, 0.72);
      font-family: Georgia, var(--serif);
      font-size: 42px;
      line-height: 1;
    }

    .single-room-photo-preview em {
      position: absolute;
      bottom: 12px;
      color: rgba(24, 23, 21, 0.46);
      font-family: var(--serif);
      font-size: 12px;
      letter-spacing: 0.12em;
    }

    .single-room-purpose-list {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      min-width: 0;
    }

    .single-room-purpose-list span {
      max-width: 100%;
      padding: 4px 7px 5px;
      border-bottom: 1px solid rgba(76, 139, 102, 0.22);
      color: var(--wood);
      background: rgba(76, 139, 102, 0.035);
      font-size: 11px;
      line-height: 1.3;
      letter-spacing: 0.03em;
      overflow-wrap: anywhere;
    }

    .single-room-photo-actions {
      display: flex;
      justify-content: flex-end;
    }

    .single-room-photo-actions button,
    .single-room-secondary-action {
      min-height: 38px;
      padding: 0 13px 2px;
      border: 1px solid rgba(24, 23, 21, 0.1);
      border-radius: 8px;
      background: rgba(255, 252, 247, 0.76);
      color: var(--ink);
      font-family: var(--serif);
      font-size: 13px;
      letter-spacing: 0.08em;
      cursor: pointer;
    }

    .single-room-check-card {
      margin-top: 16px;
      padding: 14px;
      border: 1px solid rgba(113, 93, 62, 0.14);
      border-radius: 8px;
      background:
        radial-gradient(circle at 86% 12%, rgba(76, 139, 102, 0.08), transparent 32%),
        linear-gradient(180deg, rgba(255, 252, 247, 0.76), rgba(248, 241, 229, 0.48));
    }

    .single-room-check-head {
      display: grid;
      grid-template-columns: 34px minmax(0, 1fr);
      gap: 10px;
      align-items: start;
      min-width: 0;
    }

    .single-room-check-head small {
      display: block;
      color: rgba(173, 138, 77, 0.82);
      font-size: 11px;
      letter-spacing: 0.12em;
    }

    .single-room-check-head h2 {
      margin: 3px 0 0;
      font-family: var(--serif);
      font-size: 19px;
      line-height: 1.35;
      letter-spacing: 0.06em;
      overflow-wrap: anywhere;
    }

    .single-room-check-head p {
      margin: 7px 0 0;
      color: rgba(24, 23, 21, 0.56);
      font-size: 12px;
      line-height: 1.58;
      letter-spacing: 0.03em;
    }

    .single-room-check-signals {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 7px;
      margin-top: 13px;
    }

    .single-room-check-signals span {
      display: grid;
      gap: 3px;
      min-width: 0;
      padding: 7px 6px;
      border: 1px solid rgba(24, 23, 21, 0.08);
      border-radius: 8px;
      background: rgba(255, 252, 247, 0.48);
      color: rgba(24, 23, 21, 0.5);
      font-size: 11px;
      text-align: center;
    }

    .single-room-check-signals span.ok {
      color: var(--wood);
      border-color: rgba(76, 139, 102, 0.2);
    }

    .single-room-check-signals span.warn {
      color: var(--seal);
      border-color: rgba(167, 52, 39, 0.2);
    }

    .single-room-check-signals b {
      font-family: var(--serif);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.04em;
      white-space: nowrap;
    }

    .single-room-uploaded-strip {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
      margin-top: 12px;
    }

    .single-room-uploaded-strip article {
      position: relative;
      min-width: 0;
      aspect-ratio: 1;
      overflow: hidden;
      border-radius: 8px;
      border: 1px solid rgba(24, 23, 21, 0.08);
      background: rgba(255, 252, 247, 0.52);
    }

    .single-room-uploaded-strip img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .single-room-uploaded-strip span {
      position: absolute;
      left: 6px;
      bottom: 6px;
      padding: 3px 6px 4px;
      border-radius: 6px;
      background: rgba(255, 252, 247, 0.86);
      color: rgba(24, 23, 21, 0.62);
      font-size: 11px;
    }

    .single-room-uploaded-strip p {
      grid-column: 1 / -1;
      margin: 0;
      color: rgba(24, 23, 21, 0.5);
      font-size: 12px;
    }

    .single-room-supplemental-panel {
      margin-top: 16px;
    }

    .single-room-photo-list.supplemental .single-room-photo-card {
      border-color: rgba(167, 52, 39, 0.16);
      background:
        linear-gradient(180deg, rgba(255, 248, 244, 0.78), rgba(255, 252, 247, 0.5));
    }

    .single-room-review-actions {
      display: grid;
      gap: 10px;
      margin-top: 16px;
    }

    .single-room-secondary-action {
      width: 100%;
      color: rgba(24, 23, 21, 0.66);
    }

    .single-room-capture-screen {
      padding-inline: 18px;
      padding-bottom: 112px;
      animation: none;
    }

    .workspace[data-current-route="fengshui-room-upload"] .nav {
      display: none;
    }

    .single-room-capture-screen .fortune-top {
      margin-bottom: 18px;
    }

    .single-room-intro {
      padding: 0;
      border: 0;
      background: transparent;
      box-shadow: none;
    }

    .single-room-intro h2 {
      max-width: none;
      font-size: 30px;
      line-height: 1.16;
      letter-spacing: 0.04em;
    }

    .single-room-intro p {
      margin-top: 8px;
      max-width: 31em;
      font-size: 12px;
      line-height: 1.62;
    }

    .single-room-capture-screen.has-room-type .single-room-intro {
      display: none;
    }

    .room-upload-proof-row {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 7px;
      margin-top: 13px;
    }

    .room-upload-proof-row span {
      min-height: 42px;
      border-radius: 8px;
      background: rgba(255, 252, 247, 0.46);
    }

    .single-room-type-panel {
      margin-top: 18px;
    }

    .single-room-type-grid {
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 8px;
    }

    .single-room-type-grid button {
      display: grid;
      grid-template-columns: 1fr;
      align-content: center;
      min-height: 70px;
      padding: 9px 7px;
      border-color: rgba(113, 93, 62, 0.16);
      border-radius: 8px;
      background:
        linear-gradient(180deg, rgba(255, 252, 247, 0.72), rgba(246, 239, 226, 0.42));
      text-align: center;
    }

    .single-room-type-grid button::after {
      display: none;
    }

    .single-room-type-grid button.active {
      border-color: rgba(48, 112, 77, 0.56);
      background:
        linear-gradient(180deg, rgba(241, 249, 242, 0.72), rgba(255, 252, 247, 0.58));
      box-shadow: inset 0 0 0 1px rgba(48, 112, 77, 0.16);
      color: #286947;
    }

    .single-room-type-grid strong {
      font-size: 15px;
      line-height: 1.15;
      letter-spacing: 0.04em;
    }

    .single-room-type-grid span {
      display: none;
    }

    .single-room-required-panel {
      margin-top: 19px;
      padding: 0;
    }

    .single-room-required-panel .fengshui-section-label {
      align-items: end;
      padding-left: 10px;
      border-left: 4px solid rgba(48, 112, 77, 0.78);
    }

    .single-room-required-panel .fengshui-section-label h2 {
      font-size: 20px;
      line-height: 1.25;
      letter-spacing: 0.06em;
    }

    .single-room-required-meta {
      display: flex;
      align-items: center;
      gap: 8px;
      flex: 0 0 auto;
    }

    .single-room-required-meta button {
      min-height: 28px;
      border: 1px solid rgba(48, 112, 77, 0.22);
      border-radius: 999px;
      padding: 0 10px 2px;
      background: rgba(255, 252, 247, 0.64);
      color: #2f6f4b;
      font-family: var(--serif);
      font-size: 12px;
      letter-spacing: 0;
    }

    .single-room-boundary-note {
      margin-top: 10px;
      padding: 9px 11px;
      border: 1px solid rgba(173, 138, 77, 0.14);
      border-radius: 8px;
      background: rgba(255, 252, 247, 0.48);
    }

    .single-room-capture-screen.has-room-type .single-room-boundary-note {
      display: none;
    }

    .single-room-photo-list {
      gap: 10px;
      margin-top: 12px;
    }

    .single-room-photo-card {
      box-shadow: none;
    }

    .single-room-photo-card-featured {
      gap: 0;
      overflow: hidden;
      padding: 0;
      border-color: rgba(48, 112, 77, 0.48);
      background:
        linear-gradient(180deg, rgba(255, 252, 247, 0.82), rgba(246, 239, 226, 0.5));
    }

    .single-room-featured-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      min-height: 42px;
      padding: 0 12px;
      background:
        linear-gradient(90deg, rgba(41, 104, 70, 0.98), rgba(48, 112, 77, 0.78));
      color: rgba(255, 252, 247, 0.94);
    }

    .single-room-featured-head span,
    .single-room-featured-head b {
      overflow-wrap: anywhere;
      font-family: var(--serif);
      letter-spacing: 0.07em;
    }

    .single-room-featured-head span {
      font-size: 16px;
      line-height: 1.25;
    }

    .single-room-featured-head b {
      flex: 0 0 auto;
      padding: 4px 8px 5px;
      border: 1px solid rgba(255, 252, 247, 0.48);
      border-radius: 999px;
      font-size: 12px;
    }

    .single-room-photo-preview-featured {
      aspect-ratio: 4 / 3;
      border: 0;
      border-radius: 0;
      background: rgba(244, 237, 223, 0.56);
    }

    .single-room-photo-preview-featured img {
      object-fit: cover;
    }

    .single-room-featured-copy {
      display: grid;
      grid-template-columns: 32px minmax(0, 1fr);
      gap: 10px;
      padding: 13px 13px 0;
      min-width: 0;
    }

    .single-room-featured-copy i {
      display: grid;
      place-items: center;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      color: #fffaf1;
      background: #31704d;
      font-family: var(--serif);
      font-style: normal;
      font-weight: 800;
    }

    .single-room-featured-copy h3 {
      margin: 0;
      font-family: var(--serif);
      font-size: 20px;
      line-height: 1.28;
      letter-spacing: 0.05em;
      overflow-wrap: anywhere;
    }

    .single-room-featured-copy p {
      margin: 6px 0 0;
      color: rgba(24, 23, 21, 0.58);
      font-size: 12px;
      line-height: 1.55;
    }

    .single-room-featured-action {
      display: grid;
      grid-template-columns: 1fr auto;
      align-items: center;
      gap: 10px;
      padding: 12px 13px 14px;
    }

    .single-room-featured-action span,
    .single-room-queue-action span {
      color: rgba(133, 95, 32, 0.9);
      font-size: 12px;
      letter-spacing: 0.06em;
      white-space: nowrap;
    }

    .single-room-featured-action span.ok,
    .single-room-queue-action span.ok {
      color: var(--wood);
    }

    .single-room-featured-action span.warn,
    .single-room-queue-action span.warn {
      color: var(--seal);
    }

    .single-room-featured-action span.busy,
    .single-room-queue-action span.busy {
      color: #b98220;
    }

    .single-room-featured-action button {
      min-height: 42px;
      min-width: 128px;
      border: 0;
      border-radius: 999px;
      padding: 0 18px 2px;
      background:
        linear-gradient(180deg, #347a54, #286947);
      color: #fffaf1;
      box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.12);
      font-family: var(--serif);
      font-size: 17px;
      letter-spacing: 0.08em;
    }

    .single-room-queue-list {
      display: grid;
      gap: 9px;
    }

    .single-room-photo-card-queue {
      grid-template-columns: 86px minmax(0, 1fr) auto;
      align-items: center;
      gap: 11px;
      padding: 9px;
      border-color: rgba(113, 93, 62, 0.14);
      background: rgba(255, 252, 247, 0.54);
    }

    .single-room-queue-thumb {
      display: grid;
      place-items: center;
      width: 86px;
      aspect-ratio: 4 / 3;
      overflow: hidden;
      border: 1px solid rgba(173, 138, 77, 0.14);
      border-radius: 8px;
      background: rgba(242, 235, 221, 0.4);
    }

    .single-room-queue-thumb img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .single-room-queue-thumb b {
      color: rgba(48, 112, 77, 0.52);
      font-family: var(--serif);
      font-size: 24px;
    }

    .single-room-queue-copy {
      min-width: 0;
    }

    .single-room-queue-copy small {
      display: block;
      color: rgba(173, 138, 77, 0.84);
      font-size: 11px;
      letter-spacing: 0.09em;
    }

    .single-room-queue-copy h3 {
      margin: 3px 0 0;
      font-family: var(--serif);
      font-size: 16px;
      line-height: 1.25;
      letter-spacing: 0.04em;
      overflow-wrap: anywhere;
    }

    .single-room-queue-copy p {
      margin: 4px 0 0;
      color: rgba(24, 23, 21, 0.52);
      font-size: 11px;
      line-height: 1.35;
      overflow-wrap: anywhere;
    }

    .single-room-queue-action {
      display: grid;
      justify-items: center;
      gap: 5px;
      min-width: 58px;
    }

    .single-room-queue-action button {
      min-height: 31px;
      padding: 0 10px 2px;
      border: 1px solid rgba(48, 112, 77, 0.22);
      border-radius: 999px;
      background: rgba(255, 252, 247, 0.72);
      color: #2f6f4b;
      font-family: var(--serif);
      font-size: 12px;
      letter-spacing: 0.05em;
    }

    .single-room-status-legend {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 5px;
      color: rgba(24, 23, 21, 0.46);
      font-size: 11px;
      letter-spacing: 0.03em;
      text-align: center;
    }

    .single-room-status-legend span {
      min-width: 0;
      overflow-wrap: anywhere;
    }

    .room-upload-evidence {
      margin-top: 13px;
      border-radius: 8px;
      padding: 0 10px;
      background: rgba(255, 252, 247, 0.42);
    }

    .single-room-capture-screen [data-fengshui-submit="room"] {
      position: fixed;
      left: 50%;
      bottom: max(8px, env(safe-area-inset-bottom));
      z-index: 29;
      width: min(calc(100% - 36px), 444px);
      min-height: 52px;
      margin: 14px 0 0;
      border: 1px solid rgba(24, 23, 21, 0.08);
      border-radius: 8px;
      background:
        linear-gradient(180deg, rgba(65, 65, 62, 0.28), rgba(42, 42, 40, 0.24));
      color: rgba(255, 252, 247, 0.86);
      box-shadow:
        0 16px 34px rgba(54, 44, 32, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
      backdrop-filter: blur(14px);
      transform: translateX(-50%);
    }

    .single-room-capture-screen [data-fengshui-submit="room"]::before {
      border-color: rgba(255, 252, 247, 0.28);
      color: rgba(255, 252, 247, 0.82);
      background: rgba(255, 252, 247, 0.08);
    }

    .single-room-capture-screen [data-fengshui-submit="room"] span {
      color: inherit;
      font-size: 16px;
      letter-spacing: 0;
    }

    .single-room-capture-screen [data-fengshui-submit="room"] i {
      color: rgba(255, 252, 247, 0.68);
    }

    .single-room-capture-screen [data-fengshui-submit="room"]:not(:disabled) {
      border-color: rgba(48, 112, 77, 0.32);
      background:
        linear-gradient(180deg, #347a54, #286947);
      color: #fffaf1;
    }

    .single-room-capture-screen [data-fengshui-submit="room"]:disabled {
      cursor: not-allowed;
      opacity: 1;
    }

    .room-upload-evidence {
      margin-top: 16px;
    }

    .single-room-capture-screen:not(.has-room-type) {
      min-height: 100dvh;
      padding: max(24px, env(safe-area-inset-top) + 14px) 20px max(112px, env(safe-area-inset-bottom) + 96px);
      background:
        radial-gradient(circle at 80% 18%, rgba(173, 138, 77, 0.09), transparent 24%),
        radial-gradient(circle at 14% 5%, rgba(255, 255, 255, 0.86), transparent 33%),
        linear-gradient(180deg, rgba(255, 252, 247, 0.54), rgba(246, 240, 230, 0.38));
    }

    .single-room-capture-screen:not(.has-room-type) .fortune-top {
      grid-template-columns: 54px minmax(0, 1fr) 54px;
      align-items: start;
      margin-bottom: 24px;
    }

    .single-room-capture-screen:not(.has-room-type) .fortune-title h1 {
      font-size: 32px;
      line-height: 1.05;
      letter-spacing: 0;
    }

    .single-room-capture-screen:not(.has-room-type) .fortune-title .sub {
      margin-top: 7px;
      font-family: var(--serif);
      font-size: 15px;
      letter-spacing: 0;
    }

    .single-room-capture-screen:not(.has-room-type) .icon-button {
      width: 50px;
      height: 50px;
      border-radius: 14px;
      background: rgba(255, 252, 247, 0.62);
      box-shadow: 0 12px 28px rgba(54, 44, 32, 0.08);
    }

    .single-room-capture-screen:not(.has-room-type) .single-room-intro {
      display: grid;
      gap: 18px;
      margin-top: 0;
    }

    .single-room-capture-screen:not(.has-room-type) .single-room-intro small {
      margin-bottom: 9px;
      color: rgba(173, 138, 77, 0.92);
      font-size: 13px;
      letter-spacing: 0;
    }

    .single-room-capture-screen:not(.has-room-type) .single-room-intro h2 {
      position: relative;
      display: inline-block;
      font-size: 34px;
      line-height: 1.12;
      letter-spacing: 0;
      white-space: nowrap;
    }

    .single-room-capture-screen:not(.has-room-type) .single-room-intro h2::after {
      content: "";
      position: absolute;
      right: -5px;
      bottom: 2px;
      left: 52%;
      height: 2px;
      border-radius: 999px;
      background: linear-gradient(90deg, rgba(173, 138, 77, 0.08), rgba(173, 138, 77, 0.48), transparent);
    }

    .single-room-capture-screen:not(.has-room-type) .single-room-intro p {
      max-width: 30em;
      color: rgba(24, 23, 21, 0.62);
      font-family: var(--serif);
      font-size: 14px;
      line-height: 1.62;
      letter-spacing: 0;
    }

    .single-room-capture-screen:not(.has-room-type) .room-upload-proof-row {
      position: relative;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 0;
      margin-top: 6px;
      padding: 12px 10px;
      border: 1px solid rgba(173, 138, 77, 0.19);
      border-radius: 8px;
      background: rgba(255, 252, 247, 0.56);
      box-shadow: 0 18px 46px rgba(54, 44, 32, 0.055);
    }

    .single-room-capture-screen:not(.has-room-type) .room-upload-proof-row span {
      position: relative;
      grid-template-columns: 34px minmax(0, 1fr);
      grid-template-rows: auto auto;
      place-items: start;
      align-items: center;
      min-height: 47px;
      padding: 1px 4px 0;
      border: 0;
      background: transparent;
      text-align: left;
    }

    .single-room-capture-screen:not(.has-room-type) .room-upload-proof-row span:not(:last-child)::after {
      content: "";
      position: absolute;
      top: 22px;
      right: -3px;
      width: 13px;
      border-top: 1px dashed rgba(173, 138, 77, 0.46);
    }

    .room-upload-step-mark {
      display: grid;
      grid-row: 1 / 3;
      place-items: center;
      width: 28px;
      height: 28px;
      border: 1px solid rgba(173, 138, 77, 0.3);
      border-radius: 50%;
      color: rgba(130, 98, 45, 0.84);
      background: rgba(255, 252, 247, 0.76);
    }

    .room-upload-proof-row .active .room-upload-step-mark {
      border-color: rgba(48, 112, 77, 0.42);
      color: #2f6f4b;
      background: rgba(48, 112, 77, 0.08);
    }

    .room-upload-step-mark svg,
    .single-room-type-grid button > svg {
      width: 19px;
      height: 19px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.7;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .single-room-type-art {
      display: block;
      width: 64px;
      height: 48px;
      max-width: 100%;
      object-fit: contain;
      pointer-events: none;
      filter: drop-shadow(0 9px 12px rgba(54, 44, 32, 0.08));
    }

    .single-room-capture-screen:not(.has-room-type) .room-upload-proof-row b {
      align-self: end;
      color: rgba(24, 23, 21, 0.76);
      font-size: 14px;
      line-height: 1.1;
      letter-spacing: 0;
      text-align: left;
    }

    .single-room-capture-screen:not(.has-room-type) .room-upload-proof-row .active b {
      color: #2f6f4b;
    }

    .single-room-capture-screen:not(.has-room-type) .room-upload-proof-row em {
      align-self: start;
      max-width: 100%;
      margin-top: 4px;
      color: rgba(24, 23, 21, 0.46);
      font-size: 11px;
      letter-spacing: 0;
      overflow: hidden;
      text-align: left;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .single-room-type-heading,
    .room-upload-evidence-title {
      display: grid;
      grid-template-columns: minmax(18px, 1fr) auto minmax(18px, 1fr);
      align-items: center;
      gap: 11px;
      min-width: 0;
      color: rgba(24, 23, 21, 0.72);
      font-family: var(--serif);
      font-size: 15px;
      letter-spacing: 0;
      text-align: center;
    }

    .single-room-type-heading span,
    .room-upload-evidence-title span {
      height: 1px;
      min-width: 0;
      background: linear-gradient(90deg, transparent, rgba(173, 138, 77, 0.3), transparent);
    }

    .single-room-type-heading b,
    .room-upload-evidence-title b {
      font-weight: 700;
      overflow-wrap: anywhere;
    }

    .single-room-capture-screen.has-room-type .single-room-type-heading {
      display: none;
    }

    .single-room-capture-screen.has-room-type .single-room-type-panel {
      display: none;
    }

    .single-room-capture-screen:not(.has-room-type) .single-room-type-panel {
      margin-top: 23px;
    }

    .single-room-capture-screen:not(.has-room-type) .single-room-type-grid {
      grid-template-columns: repeat(8, minmax(0, 1fr));
      gap: 10px;
      margin-top: 14px;
    }

    .single-room-capture-screen:not(.has-room-type) .single-room-type-grid button {
      grid-column: span 2;
      grid-template-columns: 1fr;
      justify-items: center;
      align-content: center;
      gap: 6px;
      min-height: 120px;
      padding: 11px 6px 10px;
      border-color: rgba(113, 93, 62, 0.18);
      border-radius: 8px;
      background:
        radial-gradient(circle at 50% 14%, rgba(255, 255, 255, 0.74), transparent 50%),
        linear-gradient(180deg, rgba(255, 252, 247, 0.82), rgba(246, 239, 226, 0.48));
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.46);
      text-align: center;
    }

    .single-room-capture-screen:not(.has-room-type) .single-room-type-grid button:nth-child(5) {
      grid-column: 2 / span 2;
    }

    .single-room-capture-screen:not(.has-room-type) .single-room-type-grid button.active {
      border-color: rgba(48, 112, 77, 0.72);
      background:
        radial-gradient(circle at 50% 12%, rgba(255, 255, 255, 0.88), transparent 48%),
        linear-gradient(180deg, rgba(244, 251, 246, 0.86), rgba(255, 252, 247, 0.58));
      box-shadow:
        inset 0 0 0 1px rgba(48, 112, 77, 0.22),
        0 14px 28px rgba(48, 112, 77, 0.08);
      color: #286947;
    }

    .single-room-capture-screen:not(.has-room-type) .single-room-type-grid button > svg {
      width: 31px;
      height: 31px;
      color: rgba(24, 23, 21, 0.58);
      stroke-width: 1.55;
    }

    .single-room-capture-screen:not(.has-room-type) .single-room-type-art {
      width: 70px;
      height: 50px;
      margin-bottom: 1px;
    }

    .single-room-capture-screen:not(.has-room-type) .single-room-type-grid button.active > svg {
      color: #2f6f4b;
    }

    .single-room-capture-screen:not(.has-room-type) .single-room-type-grid button.active .single-room-type-art {
      filter:
        drop-shadow(0 10px 14px rgba(48, 112, 77, 0.12))
        saturate(1.08);
    }

    .single-room-capture-screen:not(.has-room-type) .single-room-type-grid strong {
      font-size: 16px;
      line-height: 1.12;
      letter-spacing: 0;
    }

    .single-room-capture-screen:not(.has-room-type) .single-room-type-grid span {
      display: block;
      grid-column: auto;
      color: rgba(24, 23, 21, 0.5);
      font-family: var(--serif);
      font-size: 11px;
      line-height: 1.25;
      letter-spacing: 0;
      white-space: normal;
    }

    .single-room-capture-screen:not(.has-room-type) .room-upload-evidence {
      position: relative;
      margin-top: 25px;
      padding: 16px 16px 4px;
      border: 1px solid rgba(173, 138, 77, 0.16);
      border-radius: 8px;
      background:
        radial-gradient(circle at 11% 17%, rgba(48, 112, 77, 0.06), transparent 22%),
        linear-gradient(180deg, rgba(255, 252, 247, 0.7), rgba(248, 241, 229, 0.42));
      box-shadow: 0 18px 50px rgba(54, 44, 32, 0.06);
    }

    .single-room-capture-screen:not(.has-room-type) .room-upload-evidence-title {
      margin-bottom: 8px;
      font-size: 16px;
    }

    .single-room-capture-screen.has-room-type .room-upload-evidence-title {
      display: none;
    }

    .single-room-capture-screen:not(.has-room-type) .room-upload-evidence .fengshui-field-row {
      grid-template-columns: 42px minmax(0, 1fr) auto;
      min-height: 70px;
      gap: 12px;
      border-bottom-color: rgba(173, 138, 77, 0.16);
    }

    .single-room-capture-screen:not(.has-room-type) .room-upload-evidence .fengshui-row-mark {
      width: 33px;
      height: 33px;
      border-color: rgba(173, 138, 77, 0.32);
      color: rgba(130, 98, 45, 0.88);
      background: rgba(255, 252, 247, 0.7);
      font-size: 18px;
    }

    .single-room-capture-screen:not(.has-room-type) .room-upload-evidence .fengshui-field-row:first-of-type .fengshui-row-mark {
      border-color: rgba(48, 112, 77, 0.34);
      color: #fffaf1;
      background:
        radial-gradient(circle at 36% 28%, rgba(255, 255, 255, 0.26), transparent 36%),
        #447d59;
    }

    .single-room-capture-screen:not(.has-room-type) .room-upload-evidence .fengshui-field-row b {
      font-family: var(--serif);
      font-size: 18px;
      letter-spacing: 0;
    }

    .single-room-capture-screen:not(.has-room-type) .room-upload-evidence .fengshui-field-row span:not(.fengshui-status) {
      margin-top: 3px;
      color: rgba(24, 23, 21, 0.48);
      font-size: 12px;
      line-height: 1.45;
    }

    .single-room-capture-screen:not(.has-room-type) .room-upload-evidence .fengshui-status {
      min-width: 54px;
      border-bottom-color: rgba(167, 52, 39, 0.3);
      color: var(--seal);
      font-family: var(--serif);
      font-size: 14px;
      text-align: center;
    }

    .single-room-capture-screen:not(.has-room-type) [data-fengshui-submit="room"] {
      position: static;
      width: 100%;
      min-height: 60px;
      margin-top: 16px;
      border-radius: 14px;
      background:
        linear-gradient(180deg, rgba(105, 109, 110, 0.42), rgba(79, 82, 83, 0.38));
      box-shadow:
        0 18px 38px rgba(54, 44, 32, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.24);
      transform: none;
    }

    .single-room-capture-screen:not(.has-room-type) [data-fengshui-submit="room"] span {
      font-family: var(--serif);
      font-size: 19px;
      letter-spacing: 0;
    }

    .room-upload-split {
      margin-top: 13px;
    }

    .fengshui-field-group,
    .fengshui-evidence-panel {
      margin-top: 15px;
      border-top: 1px solid rgba(24, 23, 21, 0.1);
    }

    .fengshui-field-row {
      display: grid;
      grid-template-columns: 34px 1fr auto;
      align-items: center;
      gap: 10px;
      min-height: 55px;
      border-bottom: 1px solid rgba(24, 23, 21, 0.08);
    }

    .fengshui-row-mark {
      width: 28px;
      height: 28px;
      font-size: 13px;
    }

    .fengshui-field-row b {
      display: block;
      margin-bottom: 2px;
      font-family: var(--serif);
      font-size: 15px;
      letter-spacing: 0.08em;
    }

    .fengshui-field-row span {
      color: rgba(24, 23, 21, 0.48);
      font-size: 11px;
      line-height: 1.4;
      letter-spacing: 0.03em;
    }

    .fengshui-status {
      display: inline-grid;
      place-items: center;
      min-width: 44px;
      height: 25px;
      padding-bottom: 2px;
      border-bottom: 1px solid rgba(76, 139, 102, 0.24);
      color: var(--wood);
      font-family: var(--serif);
      font-size: 11px;
      letter-spacing: 0.08em;
      white-space: nowrap;
    }

    .fengshui-status.warn {
      border-color: rgba(167, 52, 39, 0.3);
      color: var(--seal);
    }

    .fengshui-field-row .fengshui-status,
    .fengshui-evidence-row .fengshui-status {
      color: var(--wood);
      font-family: var(--serif);
      font-size: 11px;
      line-height: 1.3;
    }

    .fengshui-field-row .fengshui-status.warn,
    .fengshui-evidence-row .fengshui-status.warn {
      color: var(--seal);
    }

    .fengshui-action-row {
      display: grid;
      grid-template-columns: 46px 1fr 34px;
      align-items: center;
      width: 100%;
      min-height: 54px;
      margin-top: 18px;
      border: 1px solid rgba(24, 23, 21, 0.1);
      background: rgba(255, 252, 247, 0.76);
      color: var(--ink);
      box-shadow: 0 14px 34px rgba(54, 44, 32, 0.08);
      padding: 0;
      text-align: left;
      cursor: pointer;
    }

    .fengshui-action-row::before {
      content: attr(data-mark);
      display: grid;
      place-items: center;
      width: 28px;
      height: 28px;
      margin-left: 12px;
      border: 1px solid rgba(167, 52, 39, 0.36);
      border-radius: 50%;
      color: var(--seal);
      background: rgba(167, 52, 39, 0.035);
      font-family: var(--serif);
      font-size: 13px;
      font-weight: 800;
    }

    .fengshui-action-row span {
      padding-left: 4px;
      font-family: var(--serif);
      font-size: 16px;
      letter-spacing: 0.13em;
    }

    .fengshui-action-row i {
      display: grid;
      place-items: center;
      height: 100%;
      color: rgba(24, 23, 21, 0.42);
      font-family: Georgia, var(--serif);
      font-size: 24px;
      font-style: normal;
    }

    .fengshui-action-row:disabled {
      opacity: 0.62;
      cursor: wait;
    }

    .fengshui-reset-action {
      display: grid;
      place-items: center;
      width: 100%;
      min-height: 42px;
      margin-top: 10px;
      border: 0;
      border-bottom: 1px solid rgba(167, 52, 39, 0.24);
      background: transparent;
      color: var(--seal);
      font-family: var(--serif);
      font-size: 14px;
      letter-spacing: 0.08em;
      cursor: pointer;
    }

    .fengshui-header-spacer {
      visibility: hidden;
      pointer-events: none;
    }

    .fengshui-review-stage {
      min-height: 330px;
      margin-top: 8px;
    }

    .fengshui-plan-frame {
      position: relative;
      z-index: 1;
      display: grid;
      place-items: center;
      width: min(360px, calc(100vw - 54px));
      max-width: 100%;
      isolation: isolate;
      overflow: visible;
    }

    .fengshui-review-stage.is-rotated-plan .fengshui-plan-frame {
      width: min(330px, calc(100vw - 88px));
    }

    .fengshui-plan-redraw {
      display: none;
      grid-area: 1 / 1;
      width: 100%;
      aspect-ratio: 1;
      overflow: visible;
      border: 1px solid rgba(173, 138, 77, 0.18);
      background:
        linear-gradient(135deg, rgba(255, 252, 247, 0.96), rgba(247, 239, 225, 0.88)),
        rgba(255, 252, 247, 0.96);
      box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.56),
        0 18px 36px rgba(54, 44, 32, 0.08);
    }

    .fengshui-review-stage.has-standard-redraw .fengshui-plan-redraw {
      display: block;
    }

    .fengshui-review-stage.has-standard-redraw .fengshui-plan-frame .fengshui-floorplan-art,
    .fengshui-review-stage.has-standard-redraw .fengshui-floorplan-overlay,
    .fengshui-review-stage.has-standard-redraw .fengshui-floorplan-labels {
      display: none;
    }

    .fengshui-redraw-bg {
      fill: rgba(255, 252, 247, 0.96);
    }

    .fengshui-redraw-grid {
      stroke: rgba(173, 138, 77, 0.16);
      stroke-width: 0.22;
      vector-effect: non-scaling-stroke;
    }

    .fengshui-redraw-wall {
      stroke: rgba(24, 23, 21, 0.5);
      stroke-width: 0.58;
      stroke-linecap: round;
      vector-effect: non-scaling-stroke;
    }

    .fengshui-redraw-outline {
      fill: rgba(250, 244, 233, 0.84);
      stroke: rgba(167, 52, 39, 0.82);
      stroke-width: 0.9;
      stroke-linejoin: round;
      vector-effect: non-scaling-stroke;
    }

    .fengshui-redraw-room {
      fill: rgba(255, 252, 247, 0.78);
      stroke: rgba(116, 98, 72, 0.42);
      stroke-width: 0.44;
      stroke-linejoin: round;
      vector-effect: non-scaling-stroke;
    }

    .fengshui-redraw-room-node {
      cursor: pointer;
    }

    .fengshui-redraw-room.is-wet {
      fill: rgba(235, 248, 248, 0.74);
      stroke: rgba(58, 116, 128, 0.44);
    }

    .fengshui-redraw-room.is-selected {
      fill: rgba(255, 246, 239, 0.9);
      stroke: rgba(167, 52, 39, 0.7);
      stroke-width: 0.75;
    }

    .fengshui-redraw-room.is-uncertain {
      stroke-dasharray: 2 1.6;
    }

    .fengshui-redraw-door {
      stroke: rgba(167, 52, 39, 0.92);
      stroke-width: 2.2;
      stroke-linecap: round;
      vector-effect: non-scaling-stroke;
    }

    .fengshui-redraw-door-label,
    .fengshui-redraw-room-icon,
    .fengshui-redraw-room-name,
    .fengshui-redraw-risk-label,
    .fengshui-redraw-note {
      font-family: var(--serif);
      text-anchor: middle;
      dominant-baseline: middle;
      pointer-events: none;
    }

    .fengshui-redraw-door-label {
      fill: var(--seal);
      font-size: 4px;
      font-weight: 800;
    }

    .fengshui-redraw-room-icon {
      fill: rgba(24, 23, 21, 0.72);
      font-size: 6px;
      font-weight: 800;
    }

    .fengshui-redraw-room-name {
      fill: rgba(24, 23, 21, 0.58);
      font-size: 3.4px;
      letter-spacing: 0;
    }

    .fengshui-redraw-risk-line {
      stroke: rgba(167, 52, 39, 0.56);
      stroke-width: 0.55;
      stroke-dasharray: 2.4 1.8;
      vector-effect: non-scaling-stroke;
    }

    .fengshui-redraw-risk-label {
      fill: var(--seal);
      font-size: 3.3px;
    }

    .fengshui-redraw-note {
      fill: rgba(24, 23, 21, 0.42);
      font-size: 3.2px;
    }

    .fengshui-plan-frame .fengshui-floorplan-art {
      grid-area: 1 / 1;
      width: 100%;
    }

    .fengshui-plan-redraw,
    .fengshui-plan-frame .fengshui-floorplan-art,
    .fengshui-floorplan-overlay {
      transform: rotate(var(--fengshui-plan-rotation, 0deg));
      transform-origin: 50% 50%;
      transition: transform 260ms var(--ease);
    }

    .fengshui-review-stage .fengshui-floorplan-art {
      width: min(360px, calc(100vw - 54px));
    }

    .fengshui-review-stage .fengshui-plan-frame .fengshui-floorplan-art {
      width: 100%;
    }

    .fengshui-review-stage .fengshui-room-art {
      width: min(460px, calc(100vw + 24px));
      opacity: 0.78;
    }

    .fengshui-floorplan-overlay,
    .fengshui-floorplan-labels {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      z-index: 2;
      pointer-events: none;
    }

    .fengshui-floorplan-overlay {
      overflow: visible;
      filter: drop-shadow(0 1px 2px rgba(255, 252, 247, 0.72));
    }

    .fengshui-detail-plan-media > .fengshui-detail-overlay,
    .fengshui-detail-plan-media > .fengshui-detail-palace-buttons,
    .fengshui-detail-plan-media > .fengshui-detail-labels {
      inset: auto;
      left: 12px;
      top: 12px;
      width: calc(100% - 24px);
      height: calc(100% - 24px);
    }

    .fengshui-overlay-outline {
      fill: rgba(167, 52, 39, 0.055);
      stroke: rgba(167, 52, 39, 0.78);
      stroke-width: 0.8;
      stroke-linejoin: round;
      vector-effect: non-scaling-stroke;
    }

    .fengshui-overlay-user-boundary {
      fill: rgba(173, 138, 77, 0.11);
      stroke: rgba(173, 138, 77, 0.92);
      stroke-width: 1.1;
      stroke-linejoin: round;
      vector-effect: non-scaling-stroke;
    }

    .fengshui-overlay-room {
      fill: rgba(173, 138, 77, 0.08);
      stroke: rgba(173, 138, 77, 0.54);
      stroke-width: 0.46;
      stroke-dasharray: 2.6 2.2;
      stroke-linejoin: round;
      vector-effect: non-scaling-stroke;
    }

    .fengshui-overlay-room.is-wet {
      fill: rgba(58, 116, 128, 0.08);
      stroke: rgba(58, 116, 128, 0.48);
    }

    .fengshui-overlay-corner {
      fill: rgba(167, 52, 39, 0.12);
      stroke: rgba(167, 52, 39, 0.68);
      stroke-width: 0.64;
      stroke-dasharray: 3.4 2.4;
      stroke-linejoin: round;
      vector-effect: non-scaling-stroke;
    }

    .fengshui-overlay-risk-line {
      stroke: rgba(167, 52, 39, 0.62);
      stroke-width: 0.78;
      stroke-dasharray: 4 3;
      stroke-linecap: round;
      vector-effect: non-scaling-stroke;
    }

    .fengshui-overlay-risk-label,
    .fengshui-overlay-door-candidate-label {
      fill: var(--seal);
      font-family: var(--serif);
      font-size: 4px;
      font-weight: 800;
      text-anchor: middle;
      dominant-baseline: middle;
      pointer-events: none;
    }

    .fengshui-overlay-door-candidate {
      fill: rgba(255, 252, 247, 0.92);
      stroke: rgba(167, 52, 39, 0.58);
      stroke-width: 0.56;
      stroke-dasharray: 1.6 1.4;
      vector-effect: non-scaling-stroke;
    }

    .fengshui-overlay-empty {
      display: none;
      position: absolute;
      left: 50%;
      bottom: 8px;
      width: min(236px, 82%);
      transform: translateX(-50%);
      padding: 10px 12px;
      border: 1px solid rgba(167, 52, 39, 0.2);
      background: rgba(255, 252, 247, 0.88);
      color: rgba(24, 23, 21, 0.58);
      font-size: 12px;
      line-height: 1.55;
      letter-spacing: 0.04em;
      text-align: center;
      box-shadow: 0 10px 24px rgba(54, 44, 32, 0.08);
    }

    .fengshui-room-label,
    .fengshui-entrance-label,
    .fengshui-contour-label,
    .fengshui-corner-label {
      position: absolute;
      z-index: 3;
      transform: translate(-50%, -50%);
      max-width: 92px;
      padding: 5px 8px 6px;
      border: 1px solid rgba(173, 138, 77, 0.28);
      background: rgba(255, 252, 247, 0.9);
      color: rgba(24, 23, 21, 0.68);
      font-size: 11px;
      line-height: 1.25;
      letter-spacing: 0.03em;
      text-align: center;
      box-shadow: 0 8px 20px rgba(54, 44, 32, 0.08);
    }

    .fengshui-room-label.is-number-only,
    .fengshui-entrance-label.is-number-only,
    .fengshui-contour-label.is-number-only {
      display: grid;
      place-items: center;
      width: 34px;
      min-width: 34px;
      height: 32px;
      max-width: none;
      padding: 0;
      border-radius: 999px;
      background: rgba(255, 252, 247, 0.94);
      box-shadow:
        0 8px 18px rgba(54, 44, 32, 0.1),
        inset 0 0 0 1px rgba(255, 255, 255, 0.56);
      cursor: grab;
      pointer-events: auto;
      touch-action: none;
      user-select: none;
    }

    .fengshui-room-label.is-number-only.is-dragging,
    .fengshui-entrance-label.is-number-only.is-dragging,
    .fengshui-contour-label.is-number-only.is-dragging {
      z-index: 8;
      cursor: grabbing;
      transform: translate(-50%, -50%) scale(1.08);
      box-shadow:
        0 14px 26px rgba(54, 44, 32, 0.16),
        0 0 0 4px rgba(167, 52, 39, 0.08),
        inset 0 0 0 1px rgba(255, 255, 255, 0.62);
    }

    .fengshui-room-label strong,
    .fengshui-entrance-label strong,
    .fengshui-contour-label strong,
    .fengshui-corner-label strong {
      display: block;
      overflow: hidden;
      color: rgba(24, 23, 21, 0.8);
      font-family: var(--serif);
      font-size: 12px;
      letter-spacing: 0.06em;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .fengshui-room-label.is-number-only strong,
    .fengshui-entrance-label.is-number-only strong,
    .fengshui-contour-label.is-number-only strong {
      display: block;
      color: rgba(173, 138, 77, 0.92);
      font-family: var(--sans);
      font-size: 14px;
      font-weight: 900;
      line-height: 1;
      letter-spacing: 0;
    }

    .fengshui-room-label strong i {
      margin-right: 4px;
      color: rgba(173, 138, 77, 0.82);
      font-style: normal;
    }

    .fengshui-room-label span,
    .fengshui-entrance-label span,
    .fengshui-contour-label span,
    .fengshui-corner-label span {
      display: block;
      overflow: hidden;
      margin-top: 2px;
      color: rgba(24, 23, 21, 0.5);
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .fengshui-room-label.is-wet {
      border-color: rgba(58, 116, 128, 0.28);
      background: rgba(247, 252, 251, 0.9);
    }

    .fengshui-room-label.is-number-only.is-wet strong {
      color: rgba(58, 116, 128, 0.9);
    }

    .fengshui-room-label.is-uncertain {
      border-style: dashed;
      color: rgba(24, 23, 21, 0.5);
    }

    .fengshui-entrance-label {
      border-color: rgba(167, 52, 39, 0.34);
      color: var(--seal);
      background: rgba(255, 248, 244, 0.92);
    }

    .fengshui-entrance-label.is-number-only strong,
    .fengshui-contour-label.is-number-only strong {
      color: var(--seal);
    }

    .fengshui-corner-label {
      border-color: rgba(167, 52, 39, 0.28);
      color: var(--seal);
      background: rgba(255, 248, 244, 0.9);
    }

    .fengshui-contour-label {
      border-color: rgba(167, 52, 39, 0.3);
      color: var(--seal);
      background: rgba(255, 248, 244, 0.92);
    }

    .fengshui-question-box {
      margin-top: 12px;
      padding: 13px 13px 14px;
      border: 1px solid rgba(167, 52, 39, 0.16);
      background: rgba(167, 52, 39, 0.035);
    }

    .fengshui-proof-hero {
      position: relative;
      margin: 14px -4px 0;
      padding: 12px 10px 10px;
      border: 1px solid rgba(113, 93, 62, 0.14);
      border-radius: 8px;
      background:
        radial-gradient(circle at 18% 18%, rgba(255, 252, 247, 0.92), transparent 34%),
        radial-gradient(circle at 86% 20%, rgba(76, 139, 102, 0.09), transparent 30%),
        linear-gradient(180deg, rgba(250, 244, 232, 0.72), rgba(255, 252, 247, 0.5));
      box-shadow: 0 18px 42px rgba(54, 44, 32, 0.07);
      overflow: hidden;
    }

    .fengshui-proof-hero::before {
      content: "";
      position: absolute;
      inset: 12px;
      border: 1px solid rgba(173, 138, 77, 0.12);
      pointer-events: none;
    }

    .fengshui-proof-progress {
      position: relative;
      z-index: 2;
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 5px;
      margin: 0 2px 8px;
    }

    .fengshui-proof-progress span {
      display: grid;
      justify-items: center;
      align-content: center;
      gap: 3px;
      min-height: 34px;
      padding: 5px 3px;
      border: 1px solid rgba(113, 93, 62, 0.12);
      border-radius: 8px;
      background: rgba(255, 252, 247, 0.54);
      color: rgba(24, 23, 21, 0.48);
      font-family: var(--sans);
      font-size: 10px;
      font-weight: 750;
      letter-spacing: 0.03em;
      white-space: nowrap;
    }

    .fengshui-proof-progress b {
      display: grid;
      place-items: center;
      width: 19px;
      height: 19px;
      border-radius: 50%;
      background: rgba(24, 23, 21, 0.08);
      color: rgba(24, 23, 21, 0.5);
      font-family: Georgia, var(--serif);
      font-size: 12px;
      font-weight: 700;
    }

    .fengshui-proof-progress .done {
      color: var(--wood);
    }

    .fengshui-proof-progress .done b {
      background: rgba(76, 139, 102, 0.14);
      color: var(--wood);
    }

    .fengshui-proof-progress .active {
      border-color: rgba(167, 52, 39, 0.18);
      background: rgba(255, 248, 244, 0.72);
      color: var(--seal);
    }

    .fengshui-proof-progress .active b {
      background: rgba(167, 52, 39, 0.12);
      color: var(--seal);
    }

    .fengshui-proof-hero .fengshui-review-stage {
      min-height: clamp(374px, 58vw, 520px);
      margin: 2px -10px 0;
    }

    .fengshui-proof-hero .fengshui-plan-frame {
      --fengshui-plan-frame-padding: clamp(8px, 1.7vw, 14px);
      width: min(560px, calc(100% - 20px));
      padding: var(--fengshui-plan-frame-padding);
      border: 1px solid rgba(173, 138, 77, 0.13);
      background: rgba(255, 252, 247, 0.54);
      box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.42),
        0 16px 36px rgba(54, 44, 32, 0.08);
    }

    .fengshui-proof-hero .fengshui-floorplan-overlay,
    .fengshui-proof-hero .fengshui-floorplan-labels {
      inset: var(--fengshui-plan-frame-padding);
      width: calc(100% - (var(--fengshui-plan-frame-padding) * 2));
      height: calc(100% - (var(--fengshui-plan-frame-padding) * 2));
    }

    .fengshui-proof-hero .fengshui-review-stage.is-rotated-plan .fengshui-plan-frame {
      width: min(520px, calc(100% - 30px));
    }

    .fengshui-proof-hero .fengshui-compass-ring {
      width: min(500px, calc(100% - 54px));
      opacity: 0.58;
    }

    .fengshui-proof-hero .fengshui-palace-grid {
      width: min(382px, calc(100% - 132px));
      opacity: 0.58;
    }

    [data-screen="fengshui-floorplan-review"] .fengshui-proof-hero .fengshui-review-stage:not(.has-compass-calibration) .fengshui-compass-ring,
    [data-screen="fengshui-floorplan-review"] .fengshui-proof-hero .fengshui-review-stage:not(.has-compass-calibration) .fengshui-palace-grid,
    [data-screen="fengshui-floorplan-review"] .fengshui-proof-hero .fengshui-review-stage:not(.has-compass-calibration) .fengshui-direction,
    [data-screen="fengshui-floorplan-review"] .fengshui-proof-hero .fengshui-review-stage:not(.has-compass-calibration) .fengshui-annotate.center {
      opacity: 0;
      visibility: hidden;
    }

    .fengshui-proof-hero .fengshui-direction {
      width: 28px;
      height: 28px;
      background: rgba(255, 252, 247, 0.86);
      font-size: 13px;
    }

    .fengshui-proof-hero .fengshui-direction.north {
      top: 8px;
    }

    .fengshui-proof-hero .fengshui-direction.south {
      bottom: 8px;
    }

    .fengshui-proof-ledger {
      position: relative;
      z-index: 2;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
      margin-top: 2px;
    }

    .fengshui-proof-ledger div {
      display: grid;
      align-content: start;
      gap: 4px;
      min-height: 76px;
      padding: 10px 9px;
      border: 1px solid rgba(113, 93, 62, 0.12);
      border-radius: 8px;
      background: rgba(255, 252, 247, 0.68);
    }

    .fengshui-proof-ledger b {
      color: var(--ink);
      font-family: Georgia, var(--serif);
      font-size: 22px;
      font-weight: 600;
      line-height: 1;
      letter-spacing: 0;
    }

    .fengshui-proof-ledger span {
      color: rgba(24, 23, 21, 0.72);
      font-size: 13px;
      letter-spacing: 0.06em;
    }

    .fengshui-proof-ledger small {
      color: rgba(24, 23, 21, 0.48);
      font-family: var(--sans);
      font-size: 10px;
      line-height: 1.35;
      letter-spacing: 0.02em;
    }

    .fengshui-proof-ledger .warn {
      border-color: rgba(167, 52, 39, 0.18);
      background: rgba(255, 248, 244, 0.64);
    }

    .fengshui-proof-ledger .warn b {
      color: var(--seal);
    }

    .fengshui-question-box .fengshui-question-head {
      display: grid;
      grid-template-columns: 40px minmax(0, 1fr);
      gap: 10px;
      align-items: start;
      margin-bottom: 11px;
    }

    .fengshui-question-head i,
    .fengshui-contour-head i,
    .fengshui-proof-task i {
      display: grid;
      place-items: center;
      width: 36px;
      height: 36px;
      border: 1px solid rgba(167, 52, 39, 0.22);
      border-radius: 50%;
      background: rgba(255, 252, 247, 0.7);
      color: var(--seal);
      font-family: var(--serif);
      font-style: normal;
      font-size: 16px;
      font-weight: 800;
    }

    .fengshui-question-head small {
      margin-bottom: 4px;
    }

    .fengshui-question-head p {
      margin: 0;
    }

    .fengshui-helper-copy {
      margin: 11px 0 8px;
      color: rgba(24, 23, 21, 0.52);
      font-family: var(--sans);
      font-size: 12px;
      line-height: 1.5;
      letter-spacing: 0.02em;
    }

    .fengshui-contour-card {
      display: grid;
      gap: 12px;
      margin-top: 12px;
      padding: 13px;
      border: 1px solid rgba(113, 93, 62, 0.14);
      border-radius: 8px;
      background:
        linear-gradient(180deg, rgba(255, 252, 247, 0.68), rgba(248, 241, 229, 0.52));
    }

    .fengshui-preflight-card {
      display: grid;
      gap: 11px;
      margin-top: 13px;
      padding: 13px;
      border: 1px solid rgba(167, 52, 39, 0.16);
      border-radius: 8px;
      background:
        radial-gradient(circle at 8% 14%, rgba(167, 52, 39, 0.055), transparent 34%),
        linear-gradient(180deg, rgba(255, 252, 247, 0.74), rgba(248, 241, 229, 0.48));
      box-shadow: 0 14px 32px rgba(54, 44, 32, 0.055);
    }

    .fengshui-outline-card {
      display: grid;
      gap: 11px;
      margin-top: 13px;
      padding: 14px;
      border: 1px solid rgba(173, 138, 77, 0.18);
      border-radius: 8px;
      background:
        radial-gradient(circle at 12% 18%, rgba(76, 139, 102, 0.07), transparent 36%),
        linear-gradient(180deg, rgba(255, 252, 247, 0.76), rgba(248, 241, 229, 0.5));
      box-shadow: 0 18px 42px rgba(54, 44, 32, 0.06);
    }

    .fengshui-outline-stage {
      position: relative;
      display: grid;
      place-items: center;
      width: 100%;
      max-width: min(100%, calc(460px * var(--fengshui-outline-natural-ratio, 1)));
      aspect-ratio: var(--fengshui-outline-aspect, 1 / 1);
      max-height: 460px;
      min-height: 218px;
      margin: 2px auto 0;
      padding: 0;
      border: 1px solid rgba(173, 138, 77, 0.2);
      border-radius: 8px;
      overflow: hidden;
      background:
        radial-gradient(circle at 50% 22%, rgba(255, 252, 247, 0.66), transparent 42%),
        rgba(248, 241, 229, 0.42);
      color: var(--ink);
      cursor: default;
      touch-action: manipulation;
    }

    .fengshui-outline-stage.is-ready {
      cursor: crosshair;
      touch-action: none;
    }

    .fengshui-outline-stage img,
    .fengshui-outline-stage svg {
      grid-area: 1 / 1;
      width: 100%;
      height: 100%;
    }

    .fengshui-outline-stage img {
      object-fit: cover;
      opacity: 0.78;
      mix-blend-mode: multiply;
    }

    .fengshui-outline-stage img.is-user-upload {
      opacity: 0.9;
      mix-blend-mode: normal;
    }

    .fengshui-outline-stage svg {
      position: absolute;
      inset: 0;
      z-index: 2;
      pointer-events: none;
    }

    .fengshui-outline-mask {
      fill: rgba(24, 23, 21, 0.24);
      fill-rule: evenodd;
    }

    .fengshui-outline-fill {
      fill: rgba(76, 139, 102, 0.14);
      stroke: rgba(22, 91, 58, 0.98);
      stroke-width: 1.55;
      stroke-dasharray: 4 2.4;
      stroke-linejoin: round;
      vector-effect: non-scaling-stroke;
    }

    .fengshui-outline-line {
      fill: none;
      stroke: rgba(22, 91, 58, 0.98);
      stroke-width: 1.45;
      stroke-dasharray: 4 2.4;
      stroke-linecap: round;
      stroke-linejoin: round;
      vector-effect: non-scaling-stroke;
    }

    .fengshui-outline-close-ring {
      fill: rgba(255, 252, 247, 0.78);
      stroke: rgba(167, 52, 39, 0.74);
      stroke-width: 1;
      stroke-dasharray: 3 2;
      vector-effect: non-scaling-stroke;
    }

    .fengshui-outline-point {
      fill: rgba(255, 252, 247, 0.95);
      stroke: rgba(35, 92, 64, 0.92);
      stroke-width: 1.15;
      vector-effect: non-scaling-stroke;
    }

    .fengshui-outline-point.is-first {
      fill: rgba(232, 246, 236, 0.98);
      stroke: rgba(167, 52, 39, 0.84);
      stroke-width: 1.5;
    }

    .fengshui-outline-point.is-selected {
      fill: rgba(255, 252, 247, 0.98);
      stroke: rgba(167, 52, 39, 0.95);
      stroke-width: 2;
      filter: drop-shadow(0 2px 4px rgba(167, 52, 39, 0.24));
    }

    .fengshui-outline-aim,
    .fengshui-outline-loupe {
      position: absolute;
      z-index: 5;
      pointer-events: none;
    }

    .fengshui-outline-aim {
      width: 24px;
      height: 24px;
      border: 1px solid rgba(167, 52, 39, 0.78);
      border-radius: 50%;
      background:
        linear-gradient(rgba(167, 52, 39, 0.82), rgba(167, 52, 39, 0.82)) center / 1px 18px no-repeat,
        linear-gradient(90deg, rgba(167, 52, 39, 0.82), rgba(167, 52, 39, 0.82)) center / 18px 1px no-repeat,
        rgba(255, 252, 247, 0.22);
      box-shadow:
        0 0 0 5px rgba(255, 252, 247, 0.42),
        0 8px 20px rgba(54, 44, 32, 0.18);
      transform: translate(-50%, -50%);
    }

    .fengshui-outline-stage.is-snapping .fengshui-outline-aim {
      border-color: rgba(35, 92, 64, 0.9);
      background:
        linear-gradient(rgba(35, 92, 64, 0.9), rgba(35, 92, 64, 0.9)) center / 1px 18px no-repeat,
        linear-gradient(90deg, rgba(35, 92, 64, 0.9), rgba(35, 92, 64, 0.9)) center / 18px 1px no-repeat,
        rgba(232, 246, 236, 0.3);
    }

    .fengshui-outline-loupe {
      width: var(--loupe-size, 104px);
      height: var(--loupe-size, 104px);
      border: 2px solid rgba(255, 252, 247, 0.94);
      border-radius: 50%;
      background-color: rgba(248, 241, 229, 0.92);
      background-repeat: no-repeat;
      box-shadow:
        0 0 0 1px rgba(173, 138, 77, 0.26),
        0 16px 34px rgba(54, 44, 32, 0.24);
    }

    .fengshui-outline-loupe::before,
    .fengshui-outline-loupe::after {
      content: "";
      position: absolute;
      left: 50%;
      top: 50%;
      background: rgba(167, 52, 39, 0.9);
      transform: translate(-50%, -50%);
    }

    .fengshui-outline-loupe::before {
      width: 1px;
      height: 58%;
    }

    .fengshui-outline-loupe::after {
      width: 58%;
      height: 1px;
    }

    .fengshui-completion-frame {
      fill: rgba(255, 252, 247, 0.065);
      stroke: rgba(167, 52, 39, 0.98);
      stroke-width: 1.45;
      stroke-dasharray: 5 2.5;
      vector-effect: non-scaling-stroke;
    }

    .fengshui-completion-frame.is-manual {
      stroke: rgba(167, 52, 39, 0.96);
      stroke-dasharray: 5 2;
    }

    .fengshui-completion-grid {
      stroke: rgba(167, 52, 39, 0.82);
      stroke-width: 1.05;
      stroke-dasharray: 3 2.2;
      vector-effect: non-scaling-stroke;
    }

    .fengshui-completion-grid-label {
      fill: rgba(107, 55, 38, 0.92);
      stroke: rgba(255, 252, 247, 0.84);
      stroke-width: 0.18;
      paint-order: stroke;
      font-family: var(--serif);
      font-size: 3.1px;
      font-weight: 700;
      letter-spacing: 0;
      text-anchor: middle;
      dominant-baseline: middle;
      pointer-events: none;
    }

    .fengshui-completion-center {
      fill: rgba(255, 252, 247, 0.96);
      stroke: rgba(167, 52, 39, 0.86);
      stroke-width: 1;
      vector-effect: non-scaling-stroke;
    }

    .fengshui-completion-center-line {
      stroke: rgba(167, 52, 39, 0.7);
      stroke-width: 0.75;
      vector-effect: non-scaling-stroke;
    }

    .fengshui-completion-draft-point {
      fill: rgba(167, 52, 39, 0.78);
      stroke: rgba(255, 252, 247, 0.92);
      stroke-width: 1.1;
      vector-effect: non-scaling-stroke;
    }

    .fengshui-outline-empty,
    .fengshui-outline-badge {
      position: absolute;
      z-index: 3;
      pointer-events: none;
    }

    .fengshui-outline-empty {
      left: 50%;
      bottom: 13px;
      width: min(280px, calc(100% - 28px));
      padding: 9px 11px 10px;
      border: 1px solid rgba(24, 23, 21, 0.1);
      border-radius: 8px;
      background: rgba(255, 252, 247, 0.86);
      color: rgba(24, 23, 21, 0.56);
      font-size: 12px;
      line-height: 1.46;
      letter-spacing: 0.03em;
      text-align: center;
      transform: translateX(-50%);
    }

    .fengshui-outline-empty[hidden] {
      display: none;
    }

    .fengshui-outline-badge {
      top: 10px;
      left: 10px;
      padding: 5px 8px 6px;
      border: 1px solid rgba(173, 138, 77, 0.24);
      border-radius: 999px;
      background: rgba(255, 252, 247, 0.82);
      color: rgba(35, 92, 64, 0.78);
      font-family: var(--serif);
      font-size: 11px;
      letter-spacing: 0.08em;
      box-shadow: 0 8px 18px rgba(54, 44, 32, 0.08);
    }

    .fengshui-outline-stage.is-confirmed .fengshui-outline-badge {
      border-color: rgba(76, 139, 102, 0.26);
      color: var(--wood);
    }

    .fengshui-outline-legend {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
    }

    .fengshui-outline-legend span {
      display: flex;
      align-items: center;
      min-width: 0;
      gap: 6px;
      color: rgba(24, 23, 21, 0.5);
      font-size: 11px;
      line-height: 1.35;
      letter-spacing: 0.02em;
    }

    .fengshui-outline-legend i {
      width: 12px;
      height: 8px;
      border: 1px dashed rgba(35, 92, 64, 0.78);
      background: rgba(76, 139, 102, 0.14);
      flex: 0 0 auto;
    }

    .fengshui-outline-legend span + span i {
      border-color: rgba(24, 23, 21, 0.18);
      background: rgba(24, 23, 21, 0.18);
    }

    .fengshui-outline-legend span:nth-child(3) i {
      border-color: rgba(167, 52, 39, 0.72);
      border-style: dashed;
      background: rgba(255, 252, 247, 0.5);
    }

    .fengshui-outline-actions {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 8px;
    }

    .fengshui-photo-rotate-actions {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
    }

    .fengshui-photo-rotate-actions button {
      display: grid;
      place-items: center;
      min-height: 36px;
      padding: 0 10px;
      border: 1px solid rgba(45, 113, 130, 0.18);
      border-radius: 8px;
      background: rgba(242, 248, 247, 0.66);
      color: rgba(45, 113, 130, 0.96);
      font-family: var(--serif);
      font-size: 13px;
      font-weight: 850;
      letter-spacing: 0.06em;
      cursor: pointer;
      transition: border-color 180ms var(--ease), background 180ms var(--ease), color 180ms var(--ease), opacity 180ms var(--ease);
    }

    .fengshui-photo-rotate-actions button:hover:not(:disabled) {
      border-color: rgba(45, 113, 130, 0.32);
      background: rgba(225, 240, 239, 0.78);
      color: rgba(32, 92, 108, 0.98);
    }

    .fengshui-photo-rotate-actions button:disabled {
      opacity: 0.45;
      cursor: not-allowed;
    }

    .fengshui-outline-actions button {
      display: grid;
      place-items: center;
      min-height: 34px;
      padding: 0 4px;
      border: 0;
      border-bottom: 1px solid rgba(24, 23, 21, 0.1);
      background: transparent;
      color: rgba(24, 23, 21, 0.58);
      font-family: var(--serif);
      font-size: 13px;
      letter-spacing: 0.08em;
      white-space: nowrap;
      cursor: pointer;
      transition: border-color 180ms var(--ease), color 180ms var(--ease), background 180ms var(--ease), opacity 180ms var(--ease);
    }

    .fengshui-outline-actions button:hover:not(:disabled) {
      border-color: rgba(76, 139, 102, 0.28);
      color: var(--wood);
      background: rgba(76, 139, 102, 0.035);
    }

    .fengshui-outline-actions button:disabled {
      opacity: 0.45;
      cursor: not-allowed;
    }

    .fengshui-outline-nudge {
      display: grid;
      grid-template-columns: minmax(82px, 1fr) auto;
      align-items: center;
      gap: 10px;
      padding: 8px 10px;
      border: 1px solid rgba(173, 138, 77, 0.18);
      border-radius: 8px;
      background: rgba(255, 252, 247, 0.66);
      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.34);
    }

    .fengshui-outline-nudge[hidden] {
      display: none;
    }

    .fengshui-outline-nudge span {
      min-width: 0;
      color: rgba(24, 23, 21, 0.58);
      font-family: var(--serif);
      font-size: 12px;
      letter-spacing: 0.06em;
    }

    .fengshui-outline-nudge div {
      display: grid;
      grid-template-columns: repeat(4, 32px);
      gap: 6px;
    }

    .fengshui-outline-nudge button {
      display: grid;
      place-items: center;
      width: 32px;
      height: 32px;
      border: 1px solid rgba(24, 23, 21, 0.1);
      border-radius: 8px;
      background: rgba(255, 252, 247, 0.9);
      color: rgba(107, 55, 38, 0.82);
      font-family: var(--serif);
      font-size: 17px;
      line-height: 1;
      cursor: pointer;
      box-shadow: 0 8px 16px rgba(54, 44, 32, 0.07);
    }

    .fengshui-outline-nudge button:active {
      transform: translateY(1px);
    }

    .fengshui-outline-card p {
      margin: 0;
      color: rgba(24, 23, 21, 0.52);
      font-size: 12px;
      line-height: 1.5;
      letter-spacing: 0.02em;
    }

    .fengshui-compass-card {
      display: grid;
      gap: 12px;
      margin-top: 13px;
      padding: 14px;
      border: 1px solid rgba(173, 138, 77, 0.18);
      border-radius: 8px;
      background:
        radial-gradient(circle at 12% 10%, rgba(76, 139, 102, 0.08), transparent 34%),
        radial-gradient(circle at 90% 14%, rgba(167, 52, 39, 0.055), transparent 32%),
        linear-gradient(180deg, rgba(255, 252, 247, 0.78), rgba(248, 241, 229, 0.54));
      box-shadow:
        0 16px 38px rgba(54, 44, 32, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.54);
      color: var(--ink);
      overflow: hidden;
    }

    .fengshui-compass-copy {
      display: grid;
      gap: 5px;
    }

    .fengshui-compass-copy span {
      color: rgba(76, 139, 102, 0.78);
      font-size: 11px;
      letter-spacing: 0.1em;
    }

    .fengshui-compass-copy h2 {
      margin: 0;
      color: var(--ink);
      font-family: var(--serif);
      font-size: 30px;
      font-weight: 600;
      letter-spacing: 0.02em;
    }

    .fengshui-compass-copy p {
      margin: 0;
      color: rgba(24, 23, 21, 0.56);
      font-size: 12px;
      line-height: 1.5;
      letter-spacing: 0.02em;
    }

    .fengshui-compass-board {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: 12px;
    }

    .fengshui-compass-plan {
      position: relative;
      min-height: 0;
      width: 100%;
      aspect-ratio: var(--fengshui-outline-aspect, 4 / 3);
      overflow: hidden;
      border: 1px solid rgba(214, 174, 104, 0.24);
      border-radius: 10px;
      background: rgba(245, 232, 210, 0.82);
      box-shadow:
        inset 0 1px 0 rgba(255, 252, 247, 0.26),
        0 18px 42px rgba(0, 0, 0, 0.2);
    }

    .fengshui-compass-plan > img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: 0.78;
      filter: grayscale(0.38) contrast(0.94) brightness(0.82);
    }

    .fengshui-compass-plan::after {
      content: "";
      position: absolute;
      inset: 0;
      background:
        radial-gradient(circle at 50% 50%, transparent 0 34%, rgba(14, 11, 9, 0.08) 52%, rgba(14, 11, 9, 0.22) 100%),
        linear-gradient(90deg, rgba(14, 11, 9, 0.1), transparent 18%, transparent 82%, rgba(14, 11, 9, 0.1));
      pointer-events: none;
      z-index: 1;
    }

    .fengshui-compass-plan-svg {
      position: absolute;
      inset: 0;
      z-index: 2;
      width: 100%;
      height: 100%;
      pointer-events: none;
    }

    .fengshui-compass-dial {
      --compass-angle: 0deg;
      position: absolute;
      left: 50%;
      top: 50%;
      z-index: 3;
      width: min(300px, calc(100% - 36px));
      max-width: calc(100% - 36px);
      aspect-ratio: 1;
      border-radius: 50%;
      transform: translate(-50%, -50%) rotate(var(--compass-angle));
      background:
        radial-gradient(circle at 45% 38%, rgba(255, 244, 216, 0.46), transparent 26%),
        radial-gradient(circle, rgba(23, 19, 15, 0.52) 0 52%, rgba(18, 15, 12, 0.76) 72%, rgba(18, 15, 12, 0.5) 100%);
      border: 1px solid rgba(214, 174, 104, 0.66);
      box-shadow:
        0 28px 40px rgba(18, 10, 6, 0.28),
        inset 0 0 0 9px rgba(0, 0, 0, 0.16),
        inset 0 0 0 23px rgba(214, 174, 104, 0.08),
        inset 0 0 0 74px rgba(255, 248, 234, 0.045);
      cursor: grab;
      touch-action: none;
      user-select: none;
      opacity: 1;
      transition: opacity 180ms var(--ease), filter 180ms var(--ease), box-shadow 180ms var(--ease);
    }

    .fengshui-outline-stage .fengshui-compass-dial {
      z-index: 4;
      width: min(260px, calc(100% - 42px));
      max-width: calc(100% - 42px);
      opacity: 0;
      pointer-events: none;
      filter: saturate(0.88);
    }

    .fengshui-outline-stage.has-compass .fengshui-compass-dial {
      opacity: 0.93;
      pointer-events: auto;
    }

    .fengshui-outline-stage.is-compass-confirmed .fengshui-compass-dial {
      opacity: 0.84;
      filter: saturate(0.94) contrast(1.03);
    }

    .fengshui-compass-dial:active,
    .fengshui-compass-dial.is-dragging {
      cursor: grabbing;
    }

    .fengshui-compass-dial::before,
    .fengshui-compass-dial::after {
      content: "";
      position: absolute;
      inset: 12.5%;
      border: 1px solid rgba(214, 174, 104, 0.28);
      border-radius: 50%;
      pointer-events: none;
    }

    .fengshui-compass-dial::after {
      inset: 27%;
      border-color: rgba(174, 58, 45, 0.2);
    }

    .fengshui-compass-tick-ring {
      position: absolute;
      inset: 4%;
      border-radius: 50%;
      background:
        repeating-conic-gradient(from 0deg, rgba(214, 174, 104, 0.58) 0deg 0.55deg, transparent 0.55deg 5deg),
        repeating-conic-gradient(from 0deg, rgba(214, 174, 104, 0.92) 0deg 1.15deg, transparent 1.15deg 45deg);
      -webkit-mask: radial-gradient(circle, transparent 0 80%, #000 80.5% 100%);
      mask: radial-gradient(circle, transparent 0 80%, #000 80.5% 100%);
      opacity: 0.74;
    }

    .fengshui-compass-dial .dir,
    .fengshui-compass-dial .gua {
      position: absolute;
      z-index: 2;
      left: 50%;
      top: 50%;
      color: rgba(255, 237, 198, 0.92);
      font-family: var(--serif);
      font-style: normal;
      font-weight: 600;
      text-shadow: 0 1px 8px rgba(0, 0, 0, 0.34);
      transform: translate(-50%, -50%);
      pointer-events: none;
    }

    .fengshui-compass-dial .dir {
      font-size: 18px;
      letter-spacing: 0;
      white-space: nowrap;
    }

    .fengshui-compass-dial .gua {
      color: rgba(255, 224, 161, 0.8);
      font-size: 12px;
      letter-spacing: 0;
    }

    .fengshui-compass-dial .dir.n { color: rgba(238, 92, 72, 0.98); transform: translate(-50%, -50%) translateY(-38%); top: 16%; }
    .fengshui-compass-dial .dir.ne { left: 76%; top: 27%; }
    .fengshui-compass-dial .dir.e { left: 84%; top: 50%; }
    .fengshui-compass-dial .dir.se { left: 76%; top: 73%; }
    .fengshui-compass-dial .dir.s { top: 84%; }
    .fengshui-compass-dial .dir.sw { left: 24%; top: 73%; }
    .fengshui-compass-dial .dir.w { left: 16%; top: 50%; }
    .fengshui-compass-dial .dir.nw { left: 24%; top: 27%; }

    .fengshui-compass-dial .gua.n { top: 25%; }
    .fengshui-compass-dial .gua.ne { left: 67%; top: 34%; }
    .fengshui-compass-dial .gua.e { left: 74%; top: 50%; }
    .fengshui-compass-dial .gua.se { left: 67%; top: 66%; }
    .fengshui-compass-dial .gua.s { top: 75%; }
    .fengshui-compass-dial .gua.sw { left: 33%; top: 66%; }
    .fengshui-compass-dial .gua.w { left: 26%; top: 50%; }
    .fengshui-compass-dial .gua.nw { left: 33%; top: 34%; }

    .fengshui-compass-needle {
      position: absolute;
      z-index: 4;
      left: 50%;
      top: 50%;
      width: 5.5%;
      height: 78%;
      border-radius: 999px;
      transform: translate(-50%, -50%);
      transform-origin: 50% 50%;
      filter: drop-shadow(0 10px 12px rgba(42, 15, 10, 0.36));
      pointer-events: none;
    }

    .fengshui-compass-needle::before,
    .fengshui-compass-needle::after {
      content: "";
      position: absolute;
      left: 50%;
      width: 100%;
      transform: translateX(-50%);
      clip-path: polygon(50% 0, 100% 100%, 50% 82%, 0 100%);
    }

    .fengshui-compass-needle::before {
      top: 0;
      height: 52%;
      background: linear-gradient(180deg, #f0a08f, #b93a2f 45%, #741b15);
    }

    .fengshui-compass-needle::after {
      bottom: 0;
      height: 48%;
      background: linear-gradient(180deg, #29302c, #5f7969);
      transform: translateX(-50%) rotate(180deg);
      opacity: 0.78;
    }

    .fengshui-compass-needle span {
      position: absolute;
      left: 50%;
      top: -4%;
      display: grid;
      place-items: center;
      width: 34px;
      height: 34px;
      border-radius: 50%;
      background: #b63a2f;
      color: rgba(255, 248, 234, 0.96);
      font-family: var(--serif);
      font-size: 15px;
      font-style: normal;
      transform: translateX(-50%);
      box-shadow: 0 10px 18px rgba(42, 15, 10, 0.28);
    }

    .fengshui-compass-center {
      position: absolute;
      z-index: 5;
      left: 50%;
      top: 50%;
      width: 44px;
      height: 44px;
      border: 6px solid rgba(214, 174, 104, 0.94);
      border-radius: 50%;
      background: rgba(255, 248, 234, 0.93);
      transform: translate(-50%, -50%);
      box-shadow: 0 12px 20px rgba(42, 15, 10, 0.28);
      pointer-events: none;
    }

    .fengshui-compass-center::after {
      content: "";
      position: absolute;
      inset: 10px;
      border-radius: 50%;
      background: #b63a2f;
    }

    .fengshui-compass-dial small {
      position: absolute;
      z-index: 5;
      left: 50%;
      top: calc(50% + 32px);
      color: rgba(255, 248, 234, 0.68);
      font-size: 10px;
      line-height: 1.35;
      text-align: center;
      transform: translateX(-50%);
      white-space: nowrap;
      pointer-events: none;
    }

    .fengshui-outline-stage .fengshui-compass-dial small {
      display: none;
    }

    .fengshui-compass-tools {
      display: grid;
      gap: 10px;
      padding: 12px;
      border: 1px solid rgba(173, 138, 77, 0.16);
      border-radius: 8px;
      background: rgba(255, 252, 247, 0.58);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.52);
    }

    .fengshui-compass-readout {
      display: grid;
      gap: 3px;
      min-height: 68px;
      padding: 13px 15px;
      border: 1px solid rgba(76, 139, 102, 0.16);
      border-radius: 8px;
      background:
        radial-gradient(circle at 90% 28%, rgba(76, 139, 102, 0.12), transparent 30%),
        rgba(255, 252, 247, 0.56);
    }

    .fengshui-compass-readout small {
      color: rgba(24, 23, 21, 0.46);
      font-size: 11px;
      letter-spacing: 0.05em;
    }

    .fengshui-compass-readout strong {
      color: rgba(35, 92, 64, 0.94);
      font-family: var(--serif);
      font-size: 30px;
      font-weight: 600;
      letter-spacing: 0.02em;
    }

    @media (max-width: 420px) {
      .fengshui-compass-copy h2 {
        font-size: 27px;
      }

      .fengshui-compass-dial {
        width: min(230px, calc(100% - 44px));
        max-width: calc(100% - 44px);
      }

      .fengshui-compass-dial .dir {
        font-size: 16px;
      }

      .fengshui-compass-dial .gua {
        font-size: 11px;
      }

      .fengshui-compass-readout strong {
        font-size: 28px;
      }
    }

    .fengshui-compass-range {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) auto;
      gap: 10px;
      align-items: center;
      padding: 11px 12px;
      border: 1px solid rgba(173, 138, 77, 0.14);
      border-radius: 8px;
      background: rgba(255, 252, 247, 0.48);
      color: rgba(24, 23, 21, 0.46);
      font-size: 11px;
    }

    .fengshui-compass-range input {
      width: 100%;
      accent-color: #b63a2f;
    }

    .fengshui-compass-nudges,
    .fengshui-compass-actions {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 8px;
    }

    .fengshui-compass-actions {
      grid-template-columns: 1fr 1.18fr;
    }

    .fengshui-compass-nudges button,
    .fengshui-compass-actions button {
      min-height: 38px;
      border: 1px solid rgba(173, 138, 77, 0.18);
      border-radius: 8px;
      background: rgba(255, 252, 247, 0.58);
      color: rgba(24, 23, 21, 0.68);
      font-family: var(--serif);
      font-size: 13px;
      letter-spacing: 0.04em;
      cursor: pointer;
      transition: transform 180ms var(--ease), border-color 180ms var(--ease), background 180ms var(--ease), color 180ms var(--ease), opacity 180ms var(--ease);
    }

    .fengshui-compass-actions button:last-child {
      border-color: rgba(35, 92, 64, 0.28);
      background: linear-gradient(180deg, #2f6c4b, #174c33);
      color: rgba(255, 248, 234, 0.96);
      box-shadow: 0 16px 28px rgba(35, 92, 64, 0.18);
    }

    .fengshui-compass-nudges button:hover:not(:disabled),
    .fengshui-compass-actions button:hover:not(:disabled) {
      transform: translateY(-1px);
      border-color: rgba(76, 139, 102, 0.26);
      background-color: rgba(255, 252, 247, 0.76);
    }

    .fengshui-compass-actions button:disabled,
    .fengshui-compass-nudges button:disabled {
      opacity: 0.48;
      cursor: not-allowed;
    }

    .fengshui-compass-tools p {
      margin: 0;
      color: rgba(24, 23, 21, 0.52);
      font-size: 12px;
      line-height: 1.48;
      letter-spacing: 0.02em;
    }

    .fengshui-compass-card.is-disabled .fengshui-compass-tools {
      opacity: 0.76;
    }

    .fengshui-preflight-head {
      display: grid;
      grid-template-columns: 40px minmax(0, 1fr);
      gap: 10px;
      align-items: center;
    }

    .fengshui-preflight-head i {
      display: grid;
      place-items: center;
      width: 36px;
      height: 36px;
      border: 1px solid rgba(167, 52, 39, 0.24);
      border-radius: 50%;
      background: rgba(255, 252, 247, 0.7);
      color: var(--seal);
      font-family: var(--serif);
      font-style: normal;
      font-size: 16px;
      font-weight: 800;
    }

    .fengshui-preflight-head b {
      display: block;
      margin-bottom: 3px;
      color: var(--ink);
      font-size: 16px;
      letter-spacing: 0.08em;
    }

    .fengshui-preflight-head span,
    .fengshui-preflight-card p {
      color: rgba(24, 23, 21, 0.52);
      font-family: var(--sans);
      font-size: 12px;
      line-height: 1.46;
      letter-spacing: 0.02em;
    }

    .fengshui-preflight-card p {
      margin: 0;
    }

    .fengshui-preflight-card .fengshui-choice-row {
      margin-top: 0;
    }

    .fengshui-latest-job {
      display: grid;
      grid-template-columns: 38px minmax(0, 1fr) auto;
      gap: 10px;
      align-items: center;
      margin-top: 12px;
      padding: 11px 12px;
      border: 1px solid rgba(167, 52, 39, 0.16);
      border-radius: 8px;
      background:
        linear-gradient(180deg, rgba(255, 252, 247, 0.84), rgba(248, 241, 229, 0.58));
      box-shadow: 0 12px 26px rgba(54, 44, 32, 0.052);
    }

    .fengshui-latest-job[hidden] {
      display: none;
    }

    .fengshui-latest-job i {
      display: grid;
      place-items: center;
      width: 32px;
      height: 32px;
      border: 1px solid rgba(167, 52, 39, 0.22);
      border-radius: 50%;
      background: rgba(255, 248, 244, 0.72);
      color: var(--seal);
      font-family: var(--serif);
      font-size: 13px;
      font-style: normal;
      font-weight: 800;
    }

    .fengshui-latest-job b,
    .fengshui-latest-job span {
      display: block;
    }

    .fengshui-latest-job b {
      margin-bottom: 2px;
      color: var(--ink);
      font-size: 14px;
      letter-spacing: 0.08em;
    }

    .fengshui-latest-job span {
      color: rgba(24, 23, 21, 0.54);
      font-family: var(--sans);
      font-size: 11px;
      line-height: 1.46;
      letter-spacing: 0.02em;
    }

    .fengshui-latest-job button {
      min-height: 32px;
      padding: 0 10px;
      border: 1px solid rgba(167, 52, 39, 0.18);
      border-radius: 8px;
      background: rgba(255, 248, 244, 0.66);
      color: var(--seal);
      font-family: var(--serif);
      font-size: 12px;
      letter-spacing: 0.08em;
      white-space: nowrap;
      cursor: pointer;
    }

    .fengshui-contour-head {
      display: grid;
      grid-template-columns: 40px minmax(0, 1fr);
      gap: 10px;
      align-items: center;
    }

    .fengshui-contour-head i {
      border-color: rgba(173, 138, 77, 0.24);
      color: var(--gold);
    }

    .fengshui-contour-head b {
      display: block;
      margin-bottom: 3px;
      color: var(--ink);
      font-size: 16px;
      letter-spacing: 0.08em;
    }

    .fengshui-contour-head span {
      display: block;
      color: rgba(24, 23, 21, 0.52);
      font-family: var(--sans);
      font-size: 12px;
      line-height: 1.46;
      letter-spacing: 0.02em;
    }

    .fengshui-contour-actions {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
    }

    .fengshui-contour-actions button,
    .fengshui-choice-row button {
      transition: transform 180ms var(--ease), border-color 180ms var(--ease), background 180ms var(--ease), color 180ms var(--ease);
    }

    .fengshui-contour-actions button {
      min-height: 38px;
      border: 1px solid rgba(113, 93, 62, 0.16);
      border-radius: 8px;
      background: rgba(255, 252, 247, 0.62);
      color: rgba(24, 23, 21, 0.62);
      font-family: var(--serif);
      font-size: 13px;
      letter-spacing: 0.06em;
      cursor: pointer;
    }

    .fengshui-contour-actions button:hover,
    .fengshui-choice-row button:hover {
      transform: translateY(-1px);
      border-color: rgba(167, 52, 39, 0.24);
      color: var(--seal);
      background: rgba(255, 248, 244, 0.72);
    }

    .fengshui-proof-tasks {
      display: grid;
      gap: 9px;
      margin-top: 12px;
    }

    .fengshui-proof-task {
      display: grid;
      grid-template-columns: 38px minmax(0, 1fr) auto;
      gap: 10px;
      align-items: center;
      min-height: 70px;
      padding: 11px 12px;
      border: 1px solid rgba(113, 93, 62, 0.13);
      border-radius: 8px;
      background: rgba(255, 252, 247, 0.58);
    }

    .fengshui-proof-task i {
      width: 32px;
      height: 32px;
      border-color: rgba(173, 138, 77, 0.22);
      color: var(--gold);
      font-size: 14px;
    }

    .fengshui-proof-task.done i {
      border-color: rgba(76, 139, 102, 0.24);
      color: var(--wood);
    }

    .fengshui-proof-task.warn i {
      border-color: rgba(167, 52, 39, 0.22);
      color: var(--seal);
    }

    .fengshui-proof-task b {
      display: block;
      margin-bottom: 3px;
      color: var(--ink);
      font-size: 15px;
      letter-spacing: 0.08em;
    }

    .fengshui-proof-task span {
      display: block;
      color: rgba(24, 23, 21, 0.52);
      font-family: var(--sans);
      font-size: 12px;
      line-height: 1.46;
      letter-spacing: 0.02em;
    }

    .fengshui-proof-task em {
      padding: 5px 0 4px;
      border-bottom: 1px solid rgba(173, 138, 77, 0.28);
      color: rgba(24, 23, 21, 0.48);
      font-style: normal;
      font-size: 11px;
      letter-spacing: 0.08em;
      white-space: nowrap;
    }

    .fengshui-proof-task.done em {
      border-color: rgba(76, 139, 102, 0.26);
      color: var(--wood);
    }

    .fengshui-proof-task.warn em {
      border-color: rgba(167, 52, 39, 0.28);
      color: var(--seal);
    }

    .fengshui-floorplan-review .fengshui-action-row,
    [data-screen="fengshui-floorplan-review"] .fengshui-action-row {
      position: sticky;
      bottom: calc(86px + env(safe-area-inset-bottom));
      z-index: 12;
      border-color: rgba(167, 52, 39, 0.18);
      background:
        linear-gradient(180deg, rgba(255, 252, 247, 0.94), rgba(250, 244, 232, 0.9));
      backdrop-filter: blur(10px);
    }

    [data-screen="fengshui-floorplan-review"] {
      padding-bottom: calc(176px + env(safe-area-inset-bottom));
    }

    .fengshui-question-box small {
      display: block;
      color: var(--seal);
      font-family: var(--serif);
      font-size: 11px;
      letter-spacing: 0.14em;
    }

    .fengshui-question-box p {
      margin: 5px 0 0;
      color: rgba(24, 23, 21, 0.64);
      font-size: 13px;
      line-height: 1.52;
      letter-spacing: 0.04em;
    }

    .fengshui-contour-card {
      margin-top: 12px;
      padding: 12px 13px 13px;
      border: 1px solid rgba(24, 23, 21, 0.1);
      background:
        linear-gradient(135deg, rgba(255, 252, 247, 0.86), rgba(248, 241, 229, 0.62)),
        rgba(255, 252, 247, 0.7);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.56);
    }

    .fengshui-contour-card[hidden] {
      display: none;
    }

    .fengshui-contour-head {
      display: grid;
      grid-template-columns: 34px 1fr;
      gap: 10px;
      align-items: center;
    }

    .fengshui-contour-head i {
      display: grid;
      place-items: center;
      width: 28px;
      height: 28px;
      border: 1px solid rgba(167, 52, 39, 0.28);
      border-radius: 50%;
      color: var(--seal);
      background: rgba(167, 52, 39, 0.035);
      font-family: var(--serif);
      font-size: 13px;
      font-style: normal;
      font-weight: 800;
    }

    .fengshui-contour-head b {
      display: block;
      margin-bottom: 2px;
      font-family: var(--serif);
      font-size: 15px;
      letter-spacing: 0.09em;
    }

    .fengshui-contour-head span {
      display: block;
      color: rgba(24, 23, 21, 0.52);
      font-size: 11px;
      line-height: 1.46;
      letter-spacing: 0.03em;
    }

    .fengshui-contour-actions {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
      margin-top: 12px;
    }

    .fengshui-contour-actions:has(.fengshui-contour-candidate) {
      grid-template-columns: 1fr;
    }

    .fengshui-contour-candidate {
      display: grid;
      gap: 7px;
      padding: 9px 0 10px;
      border-bottom: 1px solid rgba(24, 23, 21, 0.08);
    }

    .fengshui-contour-candidate:last-child {
      border-bottom: 0;
      padding-bottom: 0;
    }

    .fengshui-contour-candidate b,
    .fengshui-contour-candidate span {
      display: block;
    }

    .fengshui-contour-candidate b {
      color: var(--ink);
      font-family: var(--serif);
      font-size: 14px;
      letter-spacing: 0.08em;
    }

    .fengshui-contour-candidate span {
      color: rgba(24, 23, 21, 0.48);
      font-size: 11px;
      line-height: 1.45;
      letter-spacing: 0.02em;
    }

    .fengshui-contour-candidate div {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
    }

    .fengshui-contour-actions button {
      display: grid;
      place-items: center;
      min-height: 34px;
      padding: 0 4px;
      border: 0;
      border-bottom: 1px solid rgba(24, 23, 21, 0.1);
      background: transparent;
      color: rgba(24, 23, 21, 0.58);
      font-family: var(--serif);
      font-size: 13px;
      letter-spacing: 0.08em;
      white-space: nowrap;
      cursor: pointer;
    }

    .fengshui-contour-actions button.active {
      border-color: rgba(167, 52, 39, 0.38);
      color: var(--seal);
      background: rgba(167, 52, 39, 0.025);
      box-shadow: inset 0 -1px 0 rgba(167, 52, 39, 0.5);
    }

    .fengshui-orientation-card,
    .fengshui-supplement-card {
      display: grid;
      gap: 10px;
      margin-top: 12px;
      padding: 12px 13px 13px;
      border: 1px solid rgba(24, 23, 21, 0.1);
      background:
        linear-gradient(135deg, rgba(255, 252, 247, 0.88), rgba(248, 241, 229, 0.56)),
        rgba(255, 252, 247, 0.72);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.58);
    }

    .fengshui-orientation-card[hidden],
    .fengshui-supplement-card[hidden] {
      display: none;
    }

    .fengshui-facing-head i {
      border-color: rgba(173, 138, 77, 0.26);
      color: var(--gold);
      background: rgba(173, 138, 77, 0.05);
    }

    .fengshui-build-year-head i {
      border-color: rgba(88, 108, 144, 0.24);
      color: #586c90;
      background: rgba(88, 108, 144, 0.045);
    }

    .fengshui-city-card {
      margin-top: 14px;
    }

    .fengshui-city-card .fengshui-preflight-head i {
      border-color: rgba(45, 113, 130, 0.24);
      color: var(--water);
      background: rgba(45, 113, 130, 0.045);
    }

    .fengshui-zhai-jing-extra-card .fengshui-preflight-head i {
      border-color: rgba(167, 52, 39, 0.24);
      color: var(--seal);
      background: rgba(167, 52, 39, 0.045);
    }

    .fengshui-city-card p {
      margin: 8px 0 0;
      color: rgba(24, 23, 21, 0.5);
      font-size: 12px;
      line-height: 1.5;
    }

    .fengshui-city-input,
    .fengshui-year-input {
      display: grid;
      grid-template-columns: 54px minmax(0, 1fr);
      gap: 10px;
      align-items: center;
      min-height: 42px;
      padding: 8px 10px;
      border: 1px solid rgba(24, 23, 21, 0.1);
      background: rgba(255, 252, 247, 0.72);
    }

    .fengshui-facing-precision {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
    }

    .fengshui-city-input span,
    .fengshui-year-input span {
      color: rgba(24, 23, 21, 0.54);
      font-family: var(--serif);
      font-size: 13px;
      letter-spacing: 0.08em;
      white-space: nowrap;
    }

    .fengshui-city-input input,
    .fengshui-year-input input,
    .fengshui-year-input select {
      min-width: 0;
      height: 34px;
      border: 0;
      outline: 0;
      background: transparent;
      color: var(--ink);
      font: 13px/1.2 var(--sans);
      letter-spacing: 0.02em;
    }

    .fengshui-year-input select {
      width: 100%;
      appearance: none;
      cursor: pointer;
    }

    .fengshui-facing-degree-readout output {
      display: flex;
      align-items: center;
      min-width: 0;
      height: 34px;
      color: rgba(24, 23, 21, 0.62);
      font: 13px/1.2 var(--sans);
      letter-spacing: 0.02em;
    }

    .fengshui-city-input input::placeholder,
    .fengshui-year-input input::placeholder {
      color: rgba(24, 23, 21, 0.32);
    }

    .fengshui-city-input:focus-within,
    .fengshui-year-input:focus-within {
      border-color: rgba(88, 108, 144, 0.28);
      box-shadow: 0 0 0 3px rgba(88, 108, 144, 0.07);
    }

    @media (max-width: 430px) {
      .fengshui-facing-precision {
        grid-template-columns: minmax(0, 1fr);
      }
    }

    .fengshui-supplement-head {
      display: grid;
      grid-template-columns: 34px 1fr;
      gap: 10px;
      align-items: center;
    }

    .fengshui-supplement-head i {
      display: grid;
      place-items: center;
      width: 28px;
      height: 28px;
      border: 1px solid rgba(45, 132, 92, 0.24);
      border-radius: 50%;
      color: var(--wood);
      background: rgba(45, 132, 92, 0.04);
      font-family: var(--serif);
      font-size: 13px;
      font-style: normal;
      font-weight: 800;
    }

    .fengshui-supplement-head b {
      display: block;
      margin-bottom: 2px;
      font-family: var(--serif);
      font-size: 15px;
      letter-spacing: 0.09em;
    }

    .fengshui-supplement-head span {
      display: block;
      color: rgba(24, 23, 21, 0.52);
      font-size: 11px;
      line-height: 1.46;
      letter-spacing: 0.03em;
    }

    .fengshui-supplement-card textarea {
      width: 100%;
      min-height: 94px;
      resize: vertical;
      padding: 10px 11px;
      border: 1px solid rgba(24, 23, 21, 0.1);
      outline: 0;
      background: rgba(255, 252, 247, 0.74);
      color: var(--ink);
      font-family: var(--sans);
      font-size: 13px;
      line-height: 1.62;
      letter-spacing: 0.02em;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
    }

    .fengshui-supplement-card textarea::placeholder {
      color: rgba(24, 23, 21, 0.38);
    }

    .fengshui-supplement-card textarea:focus {
      border-color: rgba(45, 132, 92, 0.28);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.55),
        0 0 0 3px rgba(45, 132, 92, 0.07);
    }

    .fengshui-supplement-examples {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .fengshui-supplement-examples button {
      min-height: 30px;
      padding: 0 10px;
      border: 1px solid rgba(173, 138, 77, 0.18);
      border-radius: 999px;
      background: rgba(255, 252, 247, 0.72);
      color: rgba(24, 23, 21, 0.56);
      font-family: var(--serif);
      font-size: 12px;
      letter-spacing: 0.05em;
      cursor: pointer;
    }

    .fengshui-supplement-examples button:active {
      border-color: rgba(45, 132, 92, 0.28);
      color: var(--wood);
      background: rgba(241, 249, 244, 0.68);
    }

    .fengshui-room-checklist {
      display: grid;
      gap: 8px;
      margin-top: 12px;
      padding: 12px;
      border: 1px solid rgba(24, 23, 21, 0.1);
      background: rgba(255, 252, 247, 0.58);
    }

    .fengshui-room-checklist[hidden] {
      display: none;
    }

    .fengshui-room-checklist h2 {
      margin: 0;
      font-family: var(--serif);
      font-size: 15px;
      letter-spacing: 0.08em;
    }

    .fengshui-room-checklist p {
      margin: 0;
      color: rgba(24, 23, 21, 0.54);
      font-size: 11px;
      line-height: 1.5;
      letter-spacing: 0.03em;
    }

    .fengshui-room-coverage-note {
      padding: 8px 10px;
      border-left: 2px solid rgba(167, 52, 39, 0.45);
      background: rgba(167, 52, 39, 0.06);
      color: rgba(96, 40, 32, 0.78);
      font-size: 11px;
      line-height: 1.45;
      letter-spacing: 0.02em;
    }

    .fengshui-room-checklist-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
      margin-top: 2px;
    }

    .fengshui-room-check-item {
      display: grid;
      grid-template-columns: 28px 1fr;
      gap: 8px;
      align-items: center;
      min-height: 44px;
      padding: 8px;
      border: 1px solid rgba(173, 138, 77, 0.18);
      background: rgba(255, 252, 247, 0.72);
      color: rgba(24, 23, 21, 0.62);
      text-align: left;
      cursor: pointer;
    }

    .fengshui-room-check-item i {
      display: grid;
      place-items: center;
      width: 26px;
      height: 26px;
      border: 1px solid rgba(173, 138, 77, 0.26);
      border-radius: 50%;
      color: rgba(173, 138, 77, 0.86);
      font-family: var(--serif);
      font-size: 12px;
      font-style: normal;
      font-weight: 800;
    }

    .fengshui-room-check-item b,
    .fengshui-room-check-item span {
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .fengshui-room-check-item b {
      color: rgba(24, 23, 21, 0.76);
      font-family: var(--serif);
      font-size: 13px;
      letter-spacing: 0.06em;
    }

    .fengshui-room-check-item span {
      margin-top: 2px;
      color: rgba(24, 23, 21, 0.46);
      font-size: 10px;
      letter-spacing: 0.02em;
    }

    .fengshui-room-check-item.active {
      border-color: rgba(45, 132, 92, 0.28);
      background: rgba(241, 249, 244, 0.66);
    }

    .fengshui-room-check-item.active i {
      border-color: rgba(45, 132, 92, 0.3);
      color: var(--positive);
    }

    .fengshui-function-picker {
      display: grid;
      gap: 10px;
      margin-top: 10px;
      padding: 12px;
      border: 1px solid rgba(167, 52, 39, 0.14);
      background:
        linear-gradient(135deg, rgba(255, 252, 247, 0.94), rgba(248, 241, 229, 0.7)),
        rgba(255, 252, 247, 0.86);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.56);
    }

    .fengshui-function-picker[hidden] {
      display: none;
    }

    .fengshui-function-picker h2 {
      margin: 0;
      font-family: var(--serif);
      font-size: 15px;
      letter-spacing: 0.08em;
    }

    .fengshui-function-picker p {
      margin: -4px 0 0;
      color: rgba(24, 23, 21, 0.52);
      font-size: 11px;
      line-height: 1.45;
      letter-spacing: 0.03em;
    }

    .fengshui-function-grid {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 8px;
    }

    .fengshui-function-option {
      display: grid;
      place-items: center;
      gap: 4px;
      min-height: 56px;
      padding: 7px 4px;
      border: 1px solid rgba(173, 138, 77, 0.2);
      background: rgba(255, 252, 247, 0.72);
      color: rgba(24, 23, 21, 0.62);
      font-size: 10px;
      letter-spacing: 0.02em;
      cursor: pointer;
    }

    .fengshui-function-option i {
      display: grid;
      place-items: center;
      width: 28px;
      height: 28px;
      border: 1px solid rgba(173, 138, 77, 0.22);
      border-radius: 50%;
      color: rgba(24, 23, 21, 0.72);
      font-family: var(--serif);
      font-size: 15px;
      font-style: normal;
      font-weight: 800;
    }

    .fengshui-function-option.active {
      border-color: rgba(167, 52, 39, 0.32);
      color: var(--seal);
      background: rgba(167, 52, 39, 0.04);
    }

    .fengshui-function-option.active i {
      border-color: rgba(167, 52, 39, 0.3);
      color: var(--seal);
    }

    .fengshui-choice-row,
    .fengshui-chip-row {
      display: grid;
      gap: 8px;
      margin-top: 12px;
    }

    .fengshui-choice-row {
      grid-template-columns: repeat(4, 1fr);
    }

    .fengshui-choice-row.five {
      grid-template-columns: repeat(5, 1fr);
    }

    .fengshui-choice-row.nine {
      grid-template-columns: repeat(3, 1fr);
    }

    .fengshui-chip-row {
      grid-template-columns: repeat(5, 1fr);
    }

    .fengshui-choice-row span,
    .fengshui-chip-row span,
    .fengshui-choice-row button,
    .fengshui-chip-row button {
      display: grid;
      place-items: center;
      min-height: 34px;
      padding: 0 4px;
      border: 0;
      border-bottom: 1px solid rgba(24, 23, 21, 0.1);
      background: transparent;
      color: rgba(24, 23, 21, 0.58);
      font-family: var(--serif);
      font-size: 13px;
      letter-spacing: 0.08em;
      white-space: nowrap;
      cursor: pointer;
    }

    .fengshui-choice-row .active,
    .fengshui-chip-row .active {
      border-color: rgba(167, 52, 39, 0.38);
      color: var(--seal);
      background: rgba(167, 52, 39, 0.025);
      box-shadow: inset 0 -1px 0 rgba(167, 52, 39, 0.5);
    }

    .fengshui-section-label {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 16px;
      padding-top: 13px;
      border-top: 1px solid rgba(24, 23, 21, 0.1);
    }

    .fengshui-section-label h2 {
      margin: 0;
      font-family: var(--serif);
      font-size: 18px;
      letter-spacing: 0.12em;
    }

    .fengshui-section-label span {
      color: rgba(24, 23, 21, 0.44);
      font-size: 11px;
      letter-spacing: 0.08em;
    }

    .fengshui-split-row {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 10px;
      margin-top: 12px;
    }

    .fengshui-split-row div {
      min-height: 72px;
      padding: 11px 0;
      border-top: 1px solid rgba(24, 23, 21, 0.1);
      color: rgba(24, 23, 21, 0.56);
      font-size: 12px;
      line-height: 1.48;
      letter-spacing: 0.04em;
    }

    .fengshui-split-row b {
      display: block;
      margin-bottom: 4px;
      color: var(--wood);
      font-family: var(--serif);
      font-size: 15px;
      letter-spacing: 0.09em;
    }

    .fengshui-evidence-row {
      display: grid;
      grid-template-columns: 66px 1fr auto;
      align-items: center;
      gap: 10px;
      min-height: 70px;
      border-bottom: 1px solid rgba(24, 23, 21, 0.08);
    }

    .fengshui-evidence-row strong {
      color: var(--seal);
      font-family: var(--serif);
      font-size: 20px;
      letter-spacing: 0.1em;
    }

    .fengshui-evidence-row b {
      display: block;
      margin-bottom: 2px;
      font-family: var(--serif);
      font-size: 16px;
      letter-spacing: 0.09em;
    }

    .fengshui-evidence-row span {
      color: rgba(24, 23, 21, 0.5);
      font-size: 12px;
      line-height: 1.44;
      letter-spacing: 0.04em;
    }

    [data-screen="fengshui-evidence"] {
      padding-bottom: 112px;
    }

    .fengshui-evidence-hero {
      display: grid;
      grid-template-columns: 82px 1fr;
      gap: 15px;
      align-items: start;
      min-height: 154px;
      margin-top: 18px;
      padding: 19px 17px 18px;
      border: 1px solid rgba(173, 138, 77, 0.22);
      background:
        linear-gradient(135deg, rgba(255, 252, 247, 0.92), rgba(248, 241, 229, 0.68)),
        repeating-linear-gradient(135deg, rgba(173, 138, 77, 0.035) 0 1px, transparent 1px 13px),
        rgba(255, 252, 247, 0.8);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.58),
        0 20px 50px rgba(54, 44, 32, 0.07);
    }

    .fengshui-evidence-hero i {
      display: grid;
      place-items: center;
      width: 70px;
      height: 70px;
      margin-top: 2px;
      border: 2px solid rgba(167, 52, 39, 0.42);
      border-radius: 18px;
      color: var(--seal);
      background:
        radial-gradient(circle at 50% 48%, rgba(167, 52, 39, 0.06), transparent 64%),
        rgba(167, 52, 39, 0.025);
      font-family: var(--serif);
      font-size: 19px;
      font-style: normal;
      font-weight: 800;
      line-height: 1.05;
      text-align: center;
      letter-spacing: 0.05em;
      transform: rotate(-4deg);
      box-shadow: inset 0 0 0 1px rgba(167, 52, 39, 0.12);
    }

    .fengshui-evidence-hero small {
      display: block;
      margin: 2px 0 8px;
      color: rgba(173, 138, 77, 0.82);
      font-family: var(--serif);
      font-size: 11px;
      letter-spacing: 0.14em;
    }

    .fengshui-evidence-hero b {
      display: block;
      margin-top: 1px;
      font-family: var(--serif);
      font-size: 25px;
      line-height: 1.2;
      letter-spacing: 0.08em;
      text-wrap: balance;
    }

    .fengshui-evidence-hero p {
      max-width: 24em;
      margin: 9px 0 0;
      color: rgba(24, 23, 21, 0.58);
      font-size: 14px;
      line-height: 1.72;
      letter-spacing: 0.03em;
    }

    [data-screen="fengshui-evidence"] .fengshui-evidence-panel {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 9px;
      margin-top: 13px;
      border-top: 0;
    }

    [data-screen="fengshui-evidence"] .fengshui-evidence-row {
      grid-template-columns: 30px 1fr;
      gap: 9px;
      min-height: 0;
      padding: 11px 10px;
      border: 1px solid rgba(173, 138, 77, 0.16);
      background: rgba(255, 252, 247, 0.52);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.46);
    }

    [data-screen="fengshui-evidence"] .fengshui-evidence-row[hidden] {
      display: none;
    }

    [data-screen="fengshui-evidence"] .fengshui-evidence-row strong {
      display: grid;
      place-items: center;
      width: 28px;
      height: 28px;
      border: 1px solid rgba(173, 138, 77, 0.28);
      border-radius: 50%;
      color: var(--gold);
      background: rgba(255, 252, 247, 0.7);
      font-size: 12px;
      letter-spacing: 0;
      white-space: nowrap;
    }

    [data-screen="fengshui-evidence"] .fengshui-evidence-row b {
      margin-bottom: 2px;
      font-size: 13px;
      letter-spacing: 0.06em;
      white-space: nowrap;
    }

    [data-screen="fengshui-evidence"] .fengshui-evidence-row span {
      display: block;
      max-width: 22em;
      color: rgba(24, 23, 21, 0.46);
      font-size: 10px;
      line-height: 1.54;
      letter-spacing: 0.02em;
    }

    [data-screen="fengshui-evidence"] .fengshui-evidence-row .fengshui-status {
      min-width: 48px;
      align-self: center;
      color: var(--seal);
    }

    [data-screen="fengshui-evidence"] .fengshui-scroll-copy {
      gap: 12px;
      max-width: none;
      margin-top: 15px;
      padding: 14px 15px;
      border: 1px solid rgba(173, 138, 77, 0.15);
      background:
        linear-gradient(90deg, rgba(255, 252, 247, 0.7), rgba(248, 241, 229, 0.42)),
        rgba(255, 252, 247, 0.45);
    }

    [data-screen="fengshui-evidence"] .fengshui-scroll-copy h2 {
      color: rgba(167, 52, 39, 0.86);
      font-size: 13px;
      letter-spacing: 0.16em;
      text-wrap: balance;
    }

    [data-screen="fengshui-evidence"] .fengshui-scroll-copy p {
      max-width: 25em;
      color: var(--ink);
      font-family: Georgia, var(--serif);
      font-size: 20px;
      line-height: 1.25;
      letter-spacing: 0.06em;
    }

    [data-screen="fengshui-evidence"] .fengshui-reading-list {
      gap: 10px;
      padding-top: 0;
      border-top: 0;
    }

    [data-screen="fengshui-evidence"] .fengshui-reading-item {
      grid-template-columns: 30px 1fr;
      gap: 10px;
      padding: 2px 0 0;
      border-bottom: 0;
    }

    [data-screen="fengshui-evidence"] .fengshui-reading-item:last-child {
      border-bottom: 0;
    }

    [data-screen="fengshui-evidence"] .fengshui-reading-item i {
      width: 28px;
      height: 28px;
      color: var(--seal);
      background: rgba(255, 252, 247, 0.7);
      font-size: 12px;
    }

    [data-screen="fengshui-evidence"] .fengshui-reading-item strong {
      margin-bottom: 3px;
      color: var(--ink);
      font-size: 15px;
      letter-spacing: 0.06em;
    }

    [data-screen="fengshui-evidence"] .fengshui-reading-item span {
      color: rgba(24, 23, 21, 0.54);
      font-family: var(--sans);
      font-size: 12px;
      line-height: 1.58;
      letter-spacing: 0.02em;
      box-shadow: none;
      padding: 0;
    }

    [data-screen="fengshui-evidence"] .fengshui-evidence-cta {
      position: sticky;
      bottom: calc(80px + env(safe-area-inset-bottom));
      z-index: 5;
      min-height: 58px;
      margin-top: 18px;
      border-color: rgba(173, 138, 77, 0.28);
      background:
        linear-gradient(180deg, rgba(176, 61, 47, 0.94), rgba(147, 42, 34, 0.94)),
        var(--seal);
      color: rgba(255, 252, 247, 0.96);
      box-shadow: 0 18px 42px rgba(127, 40, 30, 0.18);
      backdrop-filter: blur(12px);
    }

    [data-screen="fengshui-evidence"] .fengshui-evidence-cta::before {
      border-color: rgba(255, 252, 247, 0.42);
      color: rgba(255, 252, 247, 0.96);
      background: rgba(255, 252, 247, 0.1);
    }

    [data-screen="fengshui-evidence"] .fengshui-evidence-cta span {
      font-size: 17px;
      letter-spacing: 0.1em;
    }

    [data-screen="fengshui-evidence"] .fengshui-evidence-cta i {
      color: rgba(255, 252, 247, 0.72);
    }

    .fengshui-meter {
      display: grid;
      grid-template-columns: repeat(8, 5px);
      gap: 3px;
    }

    .fengshui-meter i {
      width: 5px;
      height: 24px;
      border-radius: 99px;
      background: rgba(173, 138, 77, 0.18);
    }

    .fengshui-meter i.on {
      background: rgba(167, 52, 39, 0.62);
    }

    .home-profile-screen {
      padding-top: 20px;
      font-family: var(--serif);
      background:
        radial-gradient(circle at 80% 10%, rgba(173, 138, 77, 0.08), transparent 30%),
        radial-gradient(circle at 16% 42%, rgba(76, 139, 102, 0.05), transparent 30%);
    }

    .profile-head {
      display: grid;
      grid-template-columns: 1fr auto;
      align-items: start;
      gap: 12px;
      min-height: 44px;
      margin-bottom: 14px;
    }

    .profile-head h1 {
      margin: 0;
      font-size: 24px;
      font-weight: 800;
      letter-spacing: 0.12em;
      line-height: 1.1;
    }

    .profile-head-actions {
      display: flex;
      gap: 8px;
    }

    .home-identity {
      position: relative;
      display: block;
      min-height: 58px;
      margin-top: 4px;
      z-index: 45;
      overflow: visible;
    }

    .home-identity-main {
      display: grid;
      gap: 8px;
      min-width: 0;
    }

    .home-profile-switcher {
      max-width: min(100%, 232px);
    }

    .home-profile-switcher .profile-switcher-trigger {
      min-height: 38px;
    }

    .home-profile-switcher .profile-switcher-name {
      max-width: 150px;
      font-size: 23px;
    }

    .home-profile-switcher .profile-switcher-menu {
      width: min(292px, calc(100vw - 32px));
    }

    .home-identity h2,
    .profile-card h2,
    .account-card h2 {
      margin: 0;
      font-family: Georgia, var(--serif);
      font-size: 28px;
      font-weight: 600;
      line-height: 1;
      letter-spacing: 0;
    }

    .home-identity p,
    .profile-card p,
    .account-card p {
      margin: 7px 0 0;
      color: rgba(24, 23, 21, 0.6);
      font-size: 13px;
      line-height: 1.45;
      letter-spacing: 0.08em;
    }

    .profile-avatar-art {
      width: 68px;
      height: 68px;
      object-fit: contain;
      mix-blend-mode: multiply;
      filter: drop-shadow(0 10px 22px rgba(54, 44, 32, 0.08));
    }

    .home-daily {
      position: relative;
      display: grid;
      grid-template-columns: 66px 1fr 84px;
      align-items: stretch;
      width: 100%;
      min-height: 96px;
      margin-top: 2px;
      padding: 0;
      border: 1px solid rgba(113, 93, 62, 0.16);
      border-radius: 8px;
      background: rgba(255, 252, 247, 0.62);
      color: inherit;
      font: inherit;
      text-align: left;
      overflow: hidden;
      box-shadow: 0 16px 40px rgba(54, 44, 32, 0.06);
      cursor: pointer;
      transition: border-color 240ms var(--ease), box-shadow 240ms var(--ease), transform 240ms var(--ease);
    }

    .home-daily:hover,
    .home-daily:focus-visible {
      border-color: rgba(173, 138, 77, 0.34);
      box-shadow: 0 18px 46px rgba(54, 44, 32, 0.1);
      transform: translateY(-1px);
    }

    .home-daily:focus-visible {
      outline: 2px solid rgba(177, 47, 35, 0.24);
      outline-offset: 3px;
    }

    .home-daily-label {
      display: grid;
      place-items: center;
      padding: 10px 0;
      color: #fffaf1;
      background: rgba(76, 139, 102, 0.72);
      font-size: 16px;
      font-weight: 800;
      line-height: 1.4;
      letter-spacing: 0.14em;
      writing-mode: vertical-rl;
    }

    .home-daily-copy {
      align-self: center;
      padding: 12px 8px 12px 16px;
    }

    .home-daily-title {
      display: block;
      margin: 0 0 8px;
      color: var(--ink);
      font-size: 17px;
      font-weight: 800;
      letter-spacing: 0.08em;
    }

    .home-daily-text {
      display: block;
      margin: 0;
      color: rgba(24, 23, 21, 0.62);
      font-size: 12px;
      line-height: 1.62;
      letter-spacing: 0.06em;
    }

    .home-daily-link {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      margin-top: 8px;
      color: var(--cinnabar);
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.12em;
    }

    .home-daily-link::after {
      content: "›";
      font-family: Georgia, var(--serif);
      font-size: 16px;
      line-height: 1;
    }

    .home-daily-art {
      align-self: center;
      width: 78px;
      margin-left: -8px;
      opacity: 0.94;
      mix-blend-mode: multiply;
    }

    .home-dragon-stage {
      position: relative;
      min-height: 430px;
      margin: 6px -22px 8px;
      overflow: visible;
    }

    .home-dragon-art {
      position: absolute;
      left: 50%;
      top: 0;
      width: min(300px, calc(100vw - 90px));
      max-width: none;
      mix-blend-mode: multiply;
      transform: translateX(-50%);
      filter: drop-shadow(0 20px 42px rgba(54, 44, 32, 0.08));
    }

    .profile-card,
    .account-card {
      position: relative;
      display: grid;
      grid-template-columns: 86px 1fr;
      gap: 16px;
      align-items: center;
      min-height: 160px;
      margin-top: 18px;
      overflow: hidden;
    }

    .account-card {
      grid-template-columns: 76px 1fr;
      min-height: 142px;
    }

    .account-card h2,
    .account-card p {
      overflow-wrap: anywhere;
    }

    .account-public-id {
      display: flex;
      align-items: center;
      gap: 7px;
      margin: 7px 0 0;
      color: rgba(24, 23, 21, 0.5);
      font-family: var(--sans);
      font-size: 11px;
      letter-spacing: 0.06em;
    }

    .account-public-id b {
      color: rgba(24, 23, 21, 0.82);
      font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
      font-size: 12px;
      letter-spacing: 0.07em;
    }

    .account-public-id button {
      min-height: 26px;
      padding: 0 8px;
      border: 1px solid rgba(173, 138, 77, 0.2);
      border-radius: 999px;
      background: rgba(255, 252, 247, 0.58);
      color: rgba(113, 93, 62, 0.88);
      font: 700 10px/1 var(--sans);
      cursor: pointer;
    }

    .profile-card .profile-avatar-art {
      width: 86px;
      height: 86px;
    }

    .account-mark {
      display: grid;
      place-items: center;
      width: 70px;
      height: 70px;
      border: 1px solid rgba(173, 138, 77, 0.26);
      border-radius: 50%;
      background: rgba(255, 252, 247, 0.58);
      box-shadow: 0 18px 36px rgba(54, 44, 32, 0.08);
    }

    .account-mark svg {
      width: 34px;
      height: 34px;
      fill: none;
      stroke: rgba(113, 93, 62, 0.9);
      stroke-width: 1.55;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .profile-badge {
      display: inline-grid;
      place-items: center;
      width: fit-content;
      min-height: 26px;
      margin-top: 8px;
      padding: 0 12px;
      border: 1px solid rgba(173, 138, 77, 0.24);
      border-radius: 999px;
      color: rgba(113, 93, 62, 0.86);
      background: rgba(255, 252, 247, 0.54);
      font-size: 12px;
      letter-spacing: 0.12em;
    }

    .profile-meta {
      display: flex;
      align-items: center;
      gap: 10px;
      margin: 16px -22px 0;
      padding: 13px 22px 14px;
      border-top: 1px solid rgba(24, 23, 21, 0.08);
      border-bottom: 1px solid rgba(24, 23, 21, 0.08);
      color: rgba(24, 23, 21, 0.68);
      font-size: 13px;
      letter-spacing: 0.04em;
      white-space: nowrap;
      overflow: auto;
      scrollbar-width: none;
    }

    .profile-meta::-webkit-scrollbar {
      display: none;
    }

    .profile-meta span + span {
      padding-left: 12px;
      border-left: 1px solid rgba(24, 23, 21, 0.14);
    }

    .profile-meta b {
      color: var(--ink);
      font-weight: 800;
    }

    .credits-summary-card {
      display: grid;
      grid-template-columns: 76px minmax(0, 1fr) auto;
      align-items: center;
      gap: 2px;
      width: 100%;
      min-height: 102px;
      margin-top: 18px;
      padding: 8px 14px 8px 6px;
      border: 1px solid rgba(117, 108, 64, 0.2);
      border-radius: 13px;
      background:
        radial-gradient(circle at 82% 18%, rgba(206, 174, 92, 0.18), transparent 34%),
        linear-gradient(125deg, rgba(239, 247, 235, 0.82), rgba(255, 252, 246, 0.86));
      box-shadow: 0 14px 34px rgba(54, 44, 32, 0.07);
      color: inherit;
      font-family: var(--serif);
      text-align: left;
      cursor: pointer;
    }

    .credit-entry-cost {
      position: relative;
      z-index: 3;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 3px;
      min-width: 42px;
      min-height: 24px;
      padding: 3px 7px 3px 4px;
      border: 1px solid rgba(151, 122, 56, 0.24);
      border-radius: 999px;
      background: rgba(255, 252, 242, 0.76);
      color: #6d5630;
      font-family: var(--sans);
      font-size: 11px;
      font-weight: 900;
      line-height: 1;
      letter-spacing: 0;
      white-space: nowrap;
    }

    .credit-entry-cost img {
      width: 16px;
      height: 16px;
      object-fit: contain;
      filter: drop-shadow(0 1px 2px rgba(49, 71, 51, 0.16));
    }

    .credit-entry-cost b {
      font: inherit;
    }

    button:disabled .credit-entry-cost {
      opacity: 0.62;
      filter: grayscale(0.25);
    }

    .dimension-row {
      grid-template-columns: 46px minmax(0, 1fr) auto 24px;
    }

    .fortune-home-entry-card {
      grid-template-columns: minmax(0, 1fr) 38px;
    }

    .dream-submit,
    .dream-report-actions button,
    .relationship-generate-button,
    .annual-unlock-actions .primary,
    .zhai-jing-book-card > button,
    [data-create-fengshui-report] {
      align-items: center;
      justify-content: center;
      gap: 7px;
    }

    .dream-submit,
    .dream-report-actions button,
    .relationship-generate-button,
    .annual-unlock-actions .primary,
    .zhai-jing-book-card > button {
      display: inline-flex;
    }

    .dream-submit .credit-entry-cost,
    .relationship-generate-button .credit-entry-cost,
    .annual-unlock-actions .primary .credit-entry-cost,
    .advanced-book-unlock-actions .primary .credit-entry-cost,
    .fortune-button .credit-entry-cost {
      border-color: rgba(255, 245, 214, 0.24);
      background: rgba(255, 252, 242, 0.11);
      color: #f4dfa7;
    }

    .dream-report-actions button .credit-entry-cost,
    .zhai-jing-book-card > button .credit-entry-cost,
    [data-create-fengshui-report] .credit-entry-cost {
      min-height: 21px;
      padding-block: 2px;
    }

    .fengshui-action-row {
      grid-template-columns: 46px minmax(0, 1fr) auto 34px;
    }

    .fengshui-action-row .credit-entry-cost {
      min-width: 42px;
      min-height: 24px;
      padding: 3px 7px 3px 4px;
      font-family: var(--sans);
      font-size: 11px;
      letter-spacing: 0;
    }

    @media (max-width: 390px) {
      .credit-entry-cost {
        min-width: 38px;
        padding-right: 5px;
      }

      .credit-entry-cost img {
        width: 14px;
        height: 14px;
      }

      .dimension-row {
        gap: 7px;
      }
    }

    .credits-summary-card:hover,
    .credits-summary-card:focus-visible {
      border-color: rgba(151, 122, 56, 0.45);
      box-shadow: 0 18px 38px rgba(54, 44, 32, 0.12);
      transform: translateY(-1px);
    }

    .credits-summary-card > img {
      width: 74px;
      height: 74px;
      object-fit: contain;
      filter: drop-shadow(0 8px 10px rgba(49, 71, 51, 0.15));
    }

    .credits-summary-copy {
      display: grid;
      gap: 3px;
      min-width: 0;
    }

    .credits-summary-copy small,
    .credits-summary-copy em {
      color: rgba(67, 74, 58, 0.72);
      font-size: 11px;
      font-style: normal;
      letter-spacing: 0.08em;
      line-height: 1.4;
    }

    .credits-summary-copy strong {
      color: #2f503c;
      font-size: 22px;
      line-height: 1;
      letter-spacing: 0.02em;
    }

    .credits-summary-copy strong b {
      margin-right: 2px;
      font-family: Georgia, var(--serif);
      font-size: 29px;
    }

    .credits-summary-copy .entitlement-summary-pools {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
      margin: 2px 0;
      line-height: 1;
    }

    .entitlement-summary-pools > span {
      min-width: 0;
      display: grid;
      grid-template-columns: auto 1fr;
      align-items: end;
      gap: 4px;
    }

    .entitlement-summary-pools > span + span {
      padding-left: 10px;
      border-left: 1px solid rgba(72, 91, 69, 0.18);
    }

    .credits-summary-copy .entitlement-summary-pools b {
      margin: 0;
      font-size: 24px;
      font-weight: 700;
    }

    .credits-summary-copy .entitlement-summary-pools small {
      padding-bottom: 2px;
      font-size: 9px;
      letter-spacing: 0.04em;
      white-space: nowrap;
    }

    .credits-summary-card > i,
    .credits-actions i {
      color: rgba(94, 74, 43, 0.72);
      font-family: Georgia, var(--serif);
      font-size: 27px;
      font-style: normal;
    }

    .profile-list button[data-route="profile-invite"] svg {
      color: var(--seal);
      stroke: currentColor;
    }

    .profile-invite-center-screen {
      font-family: var(--serif);
    }

    .invite-center-hero {
      position: relative;
      min-height: 184px;
      margin-top: 14px;
      padding: 25px 24px;
      overflow: hidden;
      border: 1px solid rgba(141, 112, 62, 0.2);
      border-radius: 18px 15px 20px 14px;
      background:
        radial-gradient(circle at 78% 22%, rgba(167, 52, 39, 0.12), transparent 30%),
        radial-gradient(circle at 9% 100%, rgba(76, 139, 102, 0.13), transparent 34%),
        linear-gradient(135deg, rgba(255, 252, 247, 0.96), rgba(239, 231, 216, 0.9));
      box-shadow: 0 18px 42px rgba(79, 58, 32, 0.08);
    }

    .invite-center-hero::after {
      content: "";
      position: absolute;
      right: -42px;
      bottom: -62px;
      width: 210px;
      height: 210px;
      border: 1px solid rgba(167, 52, 39, 0.09);
      border-radius: 50%;
      box-shadow: inset 0 0 0 24px rgba(167, 52, 39, 0.025), inset 0 0 0 48px rgba(167, 52, 39, 0.02);
    }

    .invite-center-hero-copy {
      position: relative;
      z-index: 1;
      display: grid;
      gap: 8px;
      max-width: 76%;
    }

    .invite-center-hero-copy > small,
    .invite-center-share header small,
    .invite-center-flow header small {
      color: rgba(146, 49, 38, 0.82);
      font-size: 10px;
      font-weight: 800;
      letter-spacing: 0.14em;
    }

    .invite-center-hero-copy > strong {
      color: #2f5b49;
      font: 800 30px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
      letter-spacing: 0.08em;
      font-variant-numeric: tabular-nums;
    }

    .invite-center-hero-copy > p {
      max-width: 30em;
      margin: 0;
      color: rgba(24, 23, 21, 0.58);
      font-size: 12px;
      line-height: 1.75;
      text-wrap: pretty;
    }

    .invite-center-hero > button {
      position: relative;
      z-index: 1;
      min-height: 38px;
      margin-top: 18px;
      padding: 0 15px;
      border: 1px solid rgba(47, 91, 73, 0.3);
      border-radius: 9px;
      background: rgba(247, 251, 246, 0.74);
      color: #2f5b49;
      font-size: 12px;
      font-weight: 800;
      letter-spacing: 0.06em;
      cursor: pointer;
      transition: transform 220ms var(--ease), background 220ms var(--ease), border-color 220ms var(--ease);
    }

    .invite-center-hero > button:hover {
      border-color: rgba(47, 91, 73, 0.5);
      background: rgba(255, 253, 248, 0.92);
      transform: translateY(-1px);
    }

    .invite-center-hero > button:active,
    .invite-center-actions button:active {
      transform: translateY(1px);
    }

    .invite-center-seal {
      position: absolute;
      z-index: 1;
      top: 24px;
      right: 22px;
      display: grid;
      place-items: center;
      width: 52px;
      height: 52px;
      border: 3px double rgba(167, 52, 39, 0.55);
      border-radius: 14px 11px 15px 10px;
      color: var(--seal);
      background: rgba(255, 250, 241, 0.58);
      font-size: 25px;
      font-weight: 900;
      transform: rotate(-2deg);
    }

    .invite-center-share {
      margin-top: 28px;
      padding: 22px 0 27px;
      border-top: 1px solid rgba(24, 23, 21, 0.11);
      border-bottom: 1px solid rgba(24, 23, 21, 0.11);
    }

    .invite-center-share > header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 18px;
    }

    .invite-center-share header > span,
    .invite-center-flow > header {
      display: grid;
      gap: 5px;
    }

    .invite-center-share h2,
    .invite-center-flow h2 {
      margin: 0;
      font-size: 19px;
      line-height: 1.35;
      letter-spacing: 0.04em;
      text-wrap: balance;
    }

    .invite-center-share header em {
      flex: 0 0 auto;
      padding-top: 4px;
      color: #2f6b5a;
      font-size: 11px;
      font-style: normal;
      font-weight: 800;
      letter-spacing: 0.08em;
    }

    .invite-center-share > p {
      max-width: 42em;
      margin: 13px 0 18px;
      color: rgba(24, 23, 21, 0.56);
      font-size: 12px;
      line-height: 1.75;
      text-wrap: pretty;
    }

    .invite-center-link {
      display: grid;
      gap: 7px;
    }

    .invite-center-link > span {
      color: rgba(24, 23, 21, 0.52);
      font-size: 10px;
      letter-spacing: 0.1em;
    }

    .invite-center-link input {
      width: 100%;
      min-width: 0;
      height: 45px;
      padding: 0 12px;
      border: 1px solid rgba(141, 112, 62, 0.2);
      border-radius: 8px;
      outline: 0;
      background: rgba(255, 252, 247, 0.72);
      color: rgba(24, 23, 21, 0.72);
      font: 11px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
    }

    .invite-center-link input:focus {
      border-color: rgba(47, 107, 90, 0.48);
      box-shadow: 0 0 0 3px rgba(47, 107, 90, 0.08);
    }

    .invite-center-actions {
      display: grid;
      grid-template-columns: 0.88fr 1.12fr;
      gap: 9px;
      margin-top: 11px;
    }

    .invite-center-actions button {
      min-height: 45px;
      border: 1px solid rgba(141, 112, 62, 0.28);
      border-radius: 9px;
      background: rgba(255, 252, 247, 0.76);
      color: rgba(91, 71, 42, 0.92);
      font-size: 12px;
      font-weight: 800;
      letter-spacing: 0.05em;
      cursor: pointer;
      transition: transform 220ms var(--ease), background 220ms var(--ease), box-shadow 220ms var(--ease);
    }

    .invite-center-actions button.primary {
      border-color: rgba(123, 34, 27, 0.34);
      background: linear-gradient(180deg, #ae3b30, #8f2d25);
      box-shadow: 0 10px 22px rgba(118, 44, 35, 0.13);
      color: #fffaf1;
    }

    .invite-center-actions button:hover {
      background: #fffdf8;
      transform: translateY(-1px);
    }

    .invite-center-actions button.primary:hover {
      background: linear-gradient(180deg, #b84538, #962f26);
    }

    .invite-center-flow {
      margin-top: 28px;
    }

    .invite-center-flow ol {
      margin: 15px 0 0;
      padding: 0;
      list-style: none;
      border-top: 1px solid rgba(24, 23, 21, 0.1);
    }

    .invite-center-flow li {
      min-height: 76px;
      display: grid;
      grid-template-columns: 38px 1fr;
      align-items: center;
      gap: 13px;
      border-bottom: 1px solid rgba(24, 23, 21, 0.1);
    }

    .invite-center-flow li > i {
      display: grid;
      place-items: center;
      width: 34px;
      height: 34px;
      border: 1px solid rgba(141, 112, 62, 0.22);
      border-radius: 50%;
      color: #8d6a34;
      background: rgba(255, 252, 247, 0.68);
      font-size: 13px;
      font-style: normal;
      font-weight: 800;
    }

    .invite-center-flow li > span {
      display: grid;
      gap: 5px;
    }

    .invite-center-flow li strong {
      font-size: 14px;
      letter-spacing: 0.04em;
    }

    .invite-center-flow li small {
      color: rgba(24, 23, 21, 0.55);
      font-family: var(--sans);
      font-size: 11px;
      line-height: 1.55;
    }

    .invite-center-note {
      margin-top: 24px;
      padding: 15px 16px 17px;
      border-left: 3px solid rgba(47, 107, 90, 0.5);
      background: rgba(233, 241, 234, 0.54);
    }

    .invite-center-note strong {
      color: #2f5b49;
      font-size: 13px;
      letter-spacing: 0.08em;
    }

    .invite-center-note p {
      margin: 7px 0 0;
      color: rgba(24, 23, 21, 0.58);
      font-family: var(--sans);
      font-size: 11px;
      line-height: 1.7;
    }

    .profile-invite-center-screen.is-unavailable {
      opacity: 0.6;
    }

    .profile-invite-center-screen.is-unavailable [data-copy-public-user-id],
    .profile-invite-center-screen.is-unavailable [data-copy-personal-invite-link],
    .profile-invite-center-screen.is-unavailable [data-open-personal-invite-poster] {
      pointer-events: none;
    }

    @media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
      .profile-invite-center-screen.is-active {
        display: grid;
        grid-template-columns: minmax(300px, 0.82fr) minmax(430px, 1.18fr);
        grid-template-rows: auto auto auto;
        column-gap: 42px;
        row-gap: 22px;
        align-content: start;
      }

      .profile-invite-center-screen > .fortune-top {
        grid-column: 1 / -1;
      }

      .profile-invite-center-screen > .invite-center-hero {
        grid-column: 1;
        grid-row: 2;
        min-height: 240px;
        margin-top: 0;
      }

      .profile-invite-center-screen > .invite-center-share {
        grid-column: 2;
        grid-row: 2 / 4;
        margin-top: 0;
        padding-top: 14px;
      }

      .profile-invite-center-screen > .invite-center-flow {
        grid-column: 1;
        grid-row: 3;
        margin-top: 0;
      }

      .profile-invite-center-screen > .invite-center-note {
        grid-column: 1 / -1;
        grid-row: 4;
        margin-top: 0;
      }
    }

    .personal-invite-poster header b {
      width: auto;
      min-width: 82px;
      padding: 0 10px;
      border-radius: 999px;
      font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
      font-size: 11px;
      letter-spacing: 0.05em;
    }

    .personal-invite-poster section h2 {
      font-size: 27px;
    }

    .credits-screen {
      padding-top: 18px;
      font-family: var(--serif);
      background:
        radial-gradient(circle at 76% 2%, rgba(194, 167, 85, 0.12), transparent 28%),
        radial-gradient(circle at 16% 34%, rgba(76, 139, 102, 0.08), transparent 33%);
    }

    .credits-reload {
      display: grid;
      place-items: center;
      width: 36px;
      height: 36px;
      padding: 0;
      border: 1px solid rgba(113, 93, 62, 0.16);
      border-radius: 50%;
      background: rgba(255, 252, 247, 0.64);
      color: rgba(113, 93, 62, 0.88);
      font: 23px/1 Georgia, var(--serif);
      cursor: pointer;
    }

    .credits-balance-card {
      display: grid;
      grid-template-columns: 118px minmax(0, 1fr);
      align-items: center;
      min-height: 156px;
      margin: 18px 0 16px;
      padding: 14px 16px 14px 8px;
      border: 1px solid rgba(107, 113, 77, 0.22);
      border-radius: 16px;
      background:
        radial-gradient(circle at 72% 18%, rgba(235, 215, 146, 0.28), transparent 36%),
        linear-gradient(135deg, rgba(232, 243, 227, 0.94), rgba(255, 251, 242, 0.92));
      box-shadow: 0 18px 42px rgba(54, 44, 32, 0.08);
    }

    .credits-balance-card img {
      width: 112px;
      height: 112px;
      object-fit: contain;
      filter: drop-shadow(0 12px 15px rgba(49, 71, 51, 0.16));
    }

    .credits-balance-card > div {
      display: grid;
      gap: 6px;
      min-width: 0;
    }

    .credits-balance-card span {
      color: rgba(64, 76, 60, 0.74);
      font-size: 12px;
      letter-spacing: 0.1em;
    }

    .credits-balance-card strong {
      color: #2e513c;
      font-size: 40px;
      font-weight: 600;
      line-height: 0.95;
      letter-spacing: -0.03em;
    }

    .credits-balance-card strong small {
      margin-left: 5px;
      color: rgba(48, 80, 59, 0.8);
      font-size: 13px;
      font-weight: 800;
      letter-spacing: 0.08em;
    }

    .credits-balance-card p {
      margin: 2px 0 0;
      color: rgba(51, 62, 49, 0.64);
      font-size: 11px;
      line-height: 1.6;
      letter-spacing: 0.04em;
    }

    .credits-actions {
      display: grid;
      gap: 9px;
    }

    .credits-actions button {
      display: grid;
      grid-template-columns: 36px minmax(0, 1fr) auto;
      grid-template-areas: "seal title arrow" "seal sub arrow";
      align-items: center;
      column-gap: 10px;
      width: 100%;
      min-height: 66px;
      padding: 10px 13px;
      border: 1px solid rgba(24, 23, 21, 0.11);
      border-radius: 11px;
      background: rgba(255, 252, 247, 0.66);
      color: inherit;
      font-family: var(--serif);
      text-align: left;
      cursor: pointer;
    }

    .credits-actions button > span {
      grid-area: seal;
      display: grid;
      place-items: center;
      width: 32px;
      height: 32px;
      border: 1px solid rgba(135, 102, 47, 0.36);
      border-radius: 50%;
      color: #9b7937;
      font-size: 15px;
      font-weight: 800;
    }

    .credits-actions button > b {
      grid-area: title;
      color: var(--ink);
      font-size: 14px;
      letter-spacing: 0.08em;
    }

    .credits-actions button > small {
      grid-area: sub;
      color: rgba(24, 23, 21, 0.57);
      font-size: 11px;
      letter-spacing: 0.04em;
    }

    .credits-actions button > i { grid-area: arrow; }

    .credits-ledger-section { margin-top: 26px; }

    .credits-section-head {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 8px;
    }

    .credits-section-head h2 {
      margin: 0;
      color: var(--ink);
      font-size: 17px;
      letter-spacing: 0.1em;
    }

    .credits-section-head small {
      color: rgba(24, 23, 21, 0.54);
      font-size: 11px;
      letter-spacing: 0.05em;
    }

    .credits-ledger-list {
      border-top: 1px solid rgba(24, 23, 21, 0.1);
    }

    .credits-ledger-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 12px;
      align-items: center;
      min-height: 61px;
      border-bottom: 1px solid rgba(24, 23, 21, 0.1);
    }

    .credits-ledger-row strong,
    .credits-ledger-row small {
      display: block;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .credits-ledger-row strong {
      color: var(--ink);
      font-size: 13px;
      letter-spacing: 0.05em;
    }

    .credits-ledger-row small {
      margin-top: 4px;
      color: rgba(24, 23, 21, 0.56);
      font-size: 10px;
      letter-spacing: 0.04em;
    }

    .credits-ledger-row b {
      color: #3d7851;
      font-family: Georgia, var(--serif);
      font-size: 18px;
    }

    .credits-ledger-row.is-spend b { color: var(--cinnabar); }

    .credits-empty {
      margin: 0;
      padding: 22px 0;
      color: rgba(24, 23, 21, 0.54);
      font-size: 12px;
      letter-spacing: 0.05em;
      text-align: center;
    }

    .credits-modal[hidden] { display: none; }

    .credits-modal {
      position: fixed;
      z-index: 300;
      inset: 0;
      display: grid;
      place-items: end center;
      padding: 18px;
    }

    .credits-modal-scrim {
      position: absolute;
      inset: 0;
      background: rgba(24, 23, 21, 0.42);
      backdrop-filter: blur(3px);
    }

    .credits-modal-card {
      position: relative;
      width: min(100%, 440px);
      padding: 22px;
      border: 1px solid rgba(151, 122, 56, 0.2);
      border-radius: 16px;
      background: #fffaf2;
      box-shadow: 0 24px 70px rgba(27, 23, 18, 0.28);
    }

    .credits-modal-card h2 {
      margin: 0;
      color: var(--ink);
      font-size: 20px;
      letter-spacing: 0.1em;
    }

    .credits-modal-card p {
      margin: 9px 0 16px;
      color: rgba(24, 23, 21, 0.62);
      font-size: 12px;
      line-height: 1.65;
    }

    .credits-voucher-input {
      width: 100%;
      min-height: 48px;
      box-sizing: border-box;
      padding: 0 13px;
      border: 1px solid rgba(113, 93, 62, 0.22);
      border-radius: 9px;
      background: rgba(255,255,255,0.76);
      color: var(--ink);
      font: 600 15px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .credits-modal-actions {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 9px;
      margin-top: 14px;
    }

    .credits-modal-actions button {
      min-height: 44px;
      border: 1px solid rgba(113, 93, 62, 0.18);
      border-radius: 8px;
      background: rgba(255,255,255,0.6);
      color: var(--ink);
      font-family: var(--serif);
      font-size: 13px;
      cursor: pointer;
    }

    .credits-modal-actions .primary {
      border-color: #3f7351;
      background: #3f7351;
      color: #fffaf1;
    }

    .credits-catalog-list {
      display: grid;
      gap: 8px;
      max-height: min(54vh, 420px);
      overflow-y: auto;
    }

    .credits-catalog-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 11px 0;
      border-bottom: 1px solid rgba(24, 23, 21, 0.09);
    }

    .credits-catalog-row span {
      color: var(--ink);
      font-size: 13px;
      letter-spacing: 0.04em;
    }

    .credits-catalog-row b {
      flex: 0 0 auto;
      color: #3d7851;
      font-size: 13px;
    }

    .profile-section-title {
      margin: 22px 0 10px;
      color: var(--ink);
      font-size: 17px;
      letter-spacing: 0.12em;
    }

    .profile-manage {
      margin-top: 22px;
    }

    .profile-manage-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 12px;
    }

    .profile-manage-toggle {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 8px;
      min-width: 0;
      padding: 0;
      border: 0;
      background: transparent;
      color: inherit;
      font: inherit;
      text-align: left;
      cursor: pointer;
    }

    .profile-manage-toggle strong {
      display: block;
      color: var(--ink);
      font-size: 17px;
      line-height: 1.25;
      letter-spacing: 0.12em;
    }

    .profile-manage-toggle small {
      display: block;
      margin-top: 3px;
      color: rgba(24, 23, 21, 0.54);
      font-size: 11px;
      line-height: 1.35;
      letter-spacing: 0.06em;
    }

    .profile-manage-toggle i {
      display: grid;
      place-items: center;
      width: 24px;
      height: 24px;
      color: rgba(113, 93, 62, 0.82);
      font-style: normal;
      transform: rotate(0deg);
      transition: transform 220ms var(--ease);
    }

    .profile-manage.is-expanded .profile-manage-toggle i {
      transform: rotate(180deg);
    }

    .profile-manage-add {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      min-height: 34px;
      padding: 0 11px;
      border: 1px solid rgba(76, 139, 102, 0.28);
      border-radius: 8px;
      background: rgba(246, 251, 245, 0.74);
      color: var(--wood);
      font-family: var(--serif);
      font-size: 13px;
      font-weight: 800;
      letter-spacing: 0.08em;
      cursor: pointer;
    }

    .managed-profile-summary {
      display: grid;
      grid-template-columns: 44px minmax(0, 1fr);
      align-items: center;
      gap: 12px;
      width: 100%;
      min-height: 68px;
      padding: 12px;
      border: 1px solid rgba(113, 93, 62, 0.14);
      border-radius: 8px;
      background: rgba(255, 252, 247, 0.52);
      color: inherit;
      font: inherit;
      text-align: left;
      cursor: pointer;
      box-shadow: 0 12px 28px rgba(54, 44, 32, 0.045);
    }

    .profile-manage.is-expanded .managed-profile-summary {
      display: none;
    }

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

    .managed-profile-list[hidden] {
      display: none;
    }

    .managed-profile-item {
      display: grid;
      grid-template-columns: 44px minmax(0, 1fr) auto;
      align-items: center;
      gap: 12px;
      min-height: 76px;
      padding: 12px;
      border: 1px solid rgba(113, 93, 62, 0.16);
      border-radius: 8px;
      background: rgba(255, 252, 247, 0.56);
      box-shadow: 0 14px 32px rgba(54, 44, 32, 0.05);
    }

    .managed-profile-item.is-active {
      border-color: rgba(76, 139, 102, 0.28);
      background: rgba(247, 252, 247, 0.78);
    }

    .managed-profile-mark {
      display: grid;
      place-items: center;
      width: 44px;
      height: 44px;
      border-radius: 50%;
      color: rgba(92, 71, 46, 0.92);
      background: rgba(229, 217, 193, 0.4);
      font-family: Georgia, var(--serif);
      font-size: 21px;
      font-weight: 700;
      letter-spacing: 0;
    }

    .managed-profile-main {
      min-width: 0;
    }

    .managed-profile-main strong {
      display: flex;
      align-items: center;
      gap: 6px;
      min-width: 0;
      color: var(--ink);
      font-size: 15px;
      line-height: 1.25;
      letter-spacing: 0.06em;
    }

    .managed-profile-name {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .managed-profile-gender {
      flex: 0 0 auto;
      font-size: 13px;
      letter-spacing: 0;
    }

    .managed-profile-gender.female {
      color: var(--cinnabar);
    }

    .managed-profile-gender.male {
      color: var(--wood);
    }

    .managed-profile-main small {
      display: block;
      margin-top: 4px;
      color: rgba(24, 23, 21, 0.58);
      font-size: 11px;
      line-height: 1.45;
      letter-spacing: 0.04em;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .managed-profile-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-top: 7px;
    }

    .managed-profile-tags span {
      display: inline-flex;
      align-items: center;
      min-height: 20px;
      padding: 0 7px;
      border-radius: 999px;
      background: rgba(229, 217, 193, 0.34);
      color: rgba(113, 93, 62, 0.84);
      font-size: 10px;
      letter-spacing: 0.08em;
    }

    .managed-profile-tags .managed-profile-current {
      background: rgba(76, 139, 102, 0.13);
      color: var(--wood);
      font-weight: 800;
    }

    .managed-profile-actions {
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .managed-profile-action {
      display: grid;
      place-items: center;
      width: 34px;
      height: 34px;
      padding: 0;
      border: 1px solid rgba(113, 93, 62, 0.16);
      border-radius: 8px;
      background: rgba(255, 252, 247, 0.72);
      color: rgba(113, 93, 62, 0.82);
      cursor: pointer;
    }

    .managed-profile-action svg {
      width: 17px;
      height: 17px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.7;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .managed-profile-action.danger {
      color: rgba(177, 47, 35, 0.86);
    }

    .managed-profile-action:disabled {
      opacity: 0.42;
      cursor: default;
    }

    .profile-list {
      margin-top: 18px;
      border-top: 1px solid rgba(24, 23, 21, 0.1);
    }

    .profile-list button {
      display: grid;
      grid-template-columns: 28px 1fr auto auto;
      align-items: center;
      gap: 12px;
      width: 100%;
      min-height: 54px;
      padding: 0;
      border: 0;
      border-bottom: 1px solid rgba(24, 23, 21, 0.1);
      background: transparent;
      color: rgba(24, 23, 21, 0.72);
      font-family: var(--serif);
      font-size: 15px;
      letter-spacing: 0.08em;
      text-align: left;
      cursor: pointer;
      transition: color 320ms var(--ease), background 320ms var(--ease), padding 320ms var(--ease);
    }

    .profile-list svg {
      width: 23px;
      height: 23px;
      fill: none;
      stroke: rgba(113, 93, 62, 0.9);
      stroke-width: 1.6;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .profile-list small {
      color: var(--wood);
      font-size: 12px;
      letter-spacing: 0.08em;
    }

    .profile-list i {
      color: rgba(24, 23, 21, 0.38);
      font-style: normal;
      font-size: 18px;
    }

    .profile-edit-screen {
      font-family: var(--serif);
    }

    .edit-lock-banner {
      display: grid;
      gap: 6px;
      margin: 6px 0 18px;
      padding: 13px 14px;
      border: 1px solid rgba(167, 52, 39, 0.22);
      border-radius: 8px;
      background: rgba(167, 52, 39, 0.055);
      color: rgba(24, 23, 21, 0.76);
    }

    .edit-lock-banner strong {
      color: var(--seal);
      font-size: 15px;
      letter-spacing: 0.08em;
    }

    .edit-lock-banner p {
      margin: 0;
      font-size: 12px;
      line-height: 1.62;
      letter-spacing: 0.05em;
    }

    .profile-edit-form {
      display: grid;
      gap: 16px;
    }

    .edit-field {
      display: grid;
      gap: 8px;
    }

    .edit-field label,
    .edit-field > span,
    .edit-toggle span {
      color: rgba(24, 23, 21, 0.74);
      font-size: 15px;
      font-weight: 700;
      letter-spacing: 0.08em;
    }

    .edit-field input {
      width: 100%;
      min-height: 48px;
      padding: 0 14px;
      border: 1px solid rgba(24, 23, 21, 0.14);
      border-radius: 12px;
      background: rgba(255, 252, 247, 0.74);
      color: var(--ink);
      font: 600 16px/1.2 var(--sans);
      box-shadow: inset 0 1px 0 rgba(255, 252, 247, 0.7);
    }

    .edit-field input:focus {
      outline: 2px solid rgba(167, 52, 39, 0.2);
      border-color: rgba(167, 52, 39, 0.42);
    }

    .datetime-grid {
      display: grid;
      grid-template-columns: 1fr 128px;
      gap: 10px;
    }

    .datetime-input {
      position: relative;
    }

    .datetime-input.picker-shell {
      display: flex;
      align-items: center;
      min-height: 48px;
      padding: 0 14px;
      border: 1px solid rgba(24, 23, 21, 0.14);
      border-radius: 12px;
      background: rgba(255, 252, 247, 0.74);
      box-shadow: inset 0 1px 0 rgba(255, 252, 247, 0.7);
    }

    .datetime-input.picker-shell:focus-within {
      outline: 2px solid rgba(167, 52, 39, 0.2);
      border-color: rgba(167, 52, 39, 0.42);
    }

    .datetime-input.picker-shell.has-icon {
      padding-left: 42px;
    }

    .datetime-input svg {
      position: absolute;
      left: 14px;
      top: 50%;
      width: 18px;
      height: 18px;
      transform: translateY(-50%);
      color: rgba(24, 23, 21, 0.62);
      pointer-events: none;
    }

    .datetime-input.has-icon input {
      padding-left: 42px;
    }

    .datetime-input.picker-shell input {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      min-height: 0;
      padding: 0;
      border: 0;
      border-radius: 12px;
      background: transparent;
      color: transparent;
      box-shadow: none;
      opacity: 0;
      cursor: pointer;
    }

    .datetime-input.picker-shell.has-icon input {
      padding-left: 0;
    }

    .picker-display {
      color: var(--ink);
      font: 600 16px/1.2 var(--sans);
      pointer-events: none;
    }

    .picker-display.is-placeholder {
      color: rgba(24, 23, 21, 0.48);
    }

    .datetime-input input[type="date"],
    .datetime-input input[type="time"] {
      appearance: none;
      -webkit-appearance: none;
    }

    .datetime-input input[type="date"]::-webkit-calendar-picker-indicator,
    .datetime-input input[type="time"]::-webkit-calendar-picker-indicator {
      opacity: 0;
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      cursor: pointer;
    }

    .gender-choice {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }

    .gender-choice button {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      min-height: 50px;
      border: 1px solid rgba(24, 23, 21, 0.14);
      border-radius: 12px;
      background: rgba(255, 252, 247, 0.64);
      color: rgba(24, 23, 21, 0.72);
      font-size: 15px;
      font-weight: 700;
      letter-spacing: 0.08em;
    }

    .gender-choice button.active {
      border-color: rgba(45, 113, 130, 0.4);
      background: rgba(45, 113, 130, 0.08);
      color: var(--water);
      box-shadow: inset 0 0 0 1px rgba(45, 113, 130, 0.08);
    }

    .edit-toggle {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      min-height: 48px;
      border: 0;
      background: transparent;
      padding: 0;
      text-align: left;
      cursor: pointer;
    }

    .toggle-copy {
      display: grid;
      gap: 4px;
    }

    .toggle-copy small,
    .solar-time-hint,
    .location-match-note {
      color: rgba(45, 58, 75, 0.66);
      font-size: 12px;
      line-height: 1.48;
      letter-spacing: 0.04em;
    }

    .toggle-pill {
      position: relative;
      flex: 0 0 auto;
      width: 50px;
      height: 28px;
      border: 1px solid rgba(24, 23, 21, 0.16);
      border-radius: 999px;
      background: rgba(24, 23, 21, 0.18);
      box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08);
      transition: background 260ms var(--ease), border-color 260ms var(--ease);
    }

    .toggle-pill::after {
      content: "";
      position: absolute;
      left: 3px;
      top: 3px;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: #fffaf1;
      box-shadow: 0 2px 7px rgba(0, 0, 0, 0.18);
      transition: transform 260ms var(--ease);
    }

    .edit-toggle.is-active .toggle-pill {
      border-color: rgba(24, 23, 21, 0.28);
      background: rgba(24, 23, 21, 0.86);
    }

    .edit-toggle.is-active .toggle-pill::after {
      transform: translateX(22px);
    }

    .location-picker {
      position: relative;
      display: grid;
      gap: 7px;
      z-index: 1;
    }

    .location-picker.is-open {
      z-index: 62;
    }

    .location-suggestions {
      position: absolute;
      left: 0;
      right: 0;
      top: auto;
      bottom: calc(100% + 6px);
      z-index: 46;
      display: none;
      max-height: min(280px, 44dvh);
      overflow-y: auto;
      overscroll-behavior: contain;
      border: 1px solid rgba(24, 23, 21, 0.16);
      border-radius: 12px;
      background: rgba(255, 252, 247, 0.98);
      box-shadow: 0 18px 44px rgba(54, 44, 32, 0.16);
    }

    .location-picker.is-open .location-suggestions {
      display: grid;
    }

    .fengshui-house-location-picker {
      z-index: 3;
    }

    .fengshui-house-location-picker .location-suggestions {
      top: auto;
      bottom: calc(100% + 6px);
      border-radius: 8px;
    }

    .location-suggestion {
      display: grid;
      gap: 4px;
      padding: 12px 14px;
      border: 0;
      border-bottom: 1px solid rgba(24, 23, 21, 0.07);
      background: transparent;
      color: var(--ink);
      text-align: left;
      cursor: pointer;
    }

    .location-suggestion:last-child {
      border-bottom: 0;
    }

    .location-suggestion:hover,
    .location-suggestion:focus-visible {
      outline: none;
      background: rgba(45, 113, 130, 0.08);
    }

    .location-suggestion strong {
      font-size: 15px;
      line-height: 1.2;
      letter-spacing: 0.04em;
    }

    .location-suggestion small {
      color: rgba(45, 58, 75, 0.68);
      font: 500 12px/1.35 var(--sans);
    }

    .location-suggestion-status,
    .location-suggestion-status:hover,
    .location-suggestion-status:focus-visible {
      background: rgba(255, 252, 247, 0.72);
      cursor: default;
    }

    .location-suggestion-status strong {
      color: rgba(24, 23, 21, 0.56);
    }

    .edit-actions {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      margin-top: 4px;
    }

    .edit-actions button {
      min-height: 46px;
      border: 1px solid rgba(24, 23, 21, 0.14);
      border-radius: 999px;
      background: rgba(255, 252, 247, 0.76);
      color: rgba(24, 23, 21, 0.72);
      font-size: 15px;
      font-weight: 800;
      letter-spacing: 0.12em;
      box-shadow: 0 12px 28px rgba(54, 44, 32, 0.08);
      cursor: pointer;
    }

    .edit-actions .primary {
      border-color: rgba(24, 23, 21, 0.32);
      background: rgba(24, 23, 21, 0.9);
      color: #fffaf1;
    }

    .toast {
      position: fixed;
      left: 50%;
      bottom: calc(var(--nav-height) + 14px);
      z-index: 50;
      max-width: min(360px, calc(100vw - 44px));
      padding: 10px 14px;
      border: 1px solid rgba(24, 23, 21, 0.1);
      border-radius: 14px;
      background: rgba(24, 23, 21, 0.86);
      color: #fffaf1;
      font-size: 12px;
      line-height: 1.5;
      letter-spacing: 0.06em;
      text-align: center;
      opacity: 0;
      pointer-events: none;
      transform: translate(-50%, 12px);
      transition: opacity 360ms var(--ease), transform 360ms var(--ease);
    }

    .toast.show {
      opacity: 1;
      transform: translate(-50%, 0);
    }

    @media (hover: hover) and (pointer: fine) {
      .icon-button:hover {
        border-color: rgba(167, 52, 39, 0.28);
        background: rgba(255, 252, 247, 0.94);
        color: var(--seal);
        box-shadow: 0 14px 34px rgba(54, 44, 32, 0.13);
        transform: translateY(-2px);
      }

      .ritual-action:hover .round-seal,
      .season-pill:hover .season-name {
        border-color: rgba(167, 52, 39, 0.28);
        background: rgba(255, 252, 247, 0.88);
        box-shadow: inset 0 0 0 6px rgba(167, 52, 39, 0.04), 0 12px 26px rgba(54, 44, 32, 0.09);
        transform: translateY(-3px);
      }

      .nav button:hover {
        color: rgba(24, 23, 21, 0.72);
        transform: translateY(-1px);
      }

      .nav button.active:hover {
        color: var(--seal);
      }

      .dimension-row:hover,
      .fortune-entry:hover,
      .fengshui-mode:hover {
        border-color: rgba(167, 52, 39, 0.18);
        background: rgba(255, 252, 247, 0.82);
        box-shadow: 0 18px 44px rgba(54, 44, 32, 0.1);
        transform: translateY(-2px);
      }

      .profile-list button:hover {
        padding-left: 8px;
        color: var(--ink);
        background: rgba(255, 252, 247, 0.34);
      }

      .topic-tabs button:hover,
      .spacetime-tabs button:hover,
      .oracle-topic:hover {
        color: var(--seal);
        background: rgba(167, 52, 39, 0.035);
      }
    }

    @media (prefers-reduced-motion: reduce) {
      html,
      body {
        scroll-behavior: auto;
      }

      *,
      *::before,
      *::after {
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 1ms !important;
      }
    }

    @media (min-width: 760px) and (hover: hover) and (pointer: fine) {
      body {
        padding: 24px 0;
      }

      .workspace,
      .nav {
        width: min(100%, 480px);
      }

      .workspace {
        min-height: calc(100dvh - 48px);
        border: 1px solid rgba(24, 23, 21, 0.08);
        box-shadow: var(--shadow);
      }

      .screen {
        min-height: calc(100dvh - 48px - var(--nav-height));
      }
    }

    @media (max-width: 374px) {
      .screen {
        padding-inline: 16px;
      }

      .name {
        font-size: 25px;
      }

      .hero .dragon-art {
        left: 18px;
        width: 250px;
      }

      .bazi-grid {
        grid-template-columns: 48px repeat(4, minmax(0, 1fr));
        font-size: 12px;
      }

      .stem-token {
        width: 34px;
        height: 34px;
        font-size: 20px;
      }
    }

    .workspace[data-current-route="fengshui-evidence"] .nav {
      display: none;
    }

    [data-screen="fengshui-evidence"] {
      min-height: 100dvh;
      padding: max(26px, env(safe-area-inset-top) + 18px) 18px max(20px, env(safe-area-inset-bottom) + 18px);
      background:
        radial-gradient(circle at 50% 2%, rgba(255, 255, 255, 0.9), transparent 34%),
        linear-gradient(180deg, rgba(255, 252, 247, 0.96), rgba(247, 241, 231, 0.96));
    }

    [data-screen="fengshui-evidence"] .fortune-top {
      grid-template-columns: 48px minmax(0, 1fr) 56px;
      align-items: start;
      gap: 10px;
      margin-bottom: 18px;
    }

    [data-screen="fengshui-evidence"] .icon-button {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      border-color: rgba(173, 138, 77, 0.22);
      background: rgba(255, 252, 247, 0.74);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.72),
        0 12px 26px rgba(54, 44, 32, 0.06);
    }

    [data-screen="fengshui-evidence"] .fortune-title {
      padding-top: 2px;
    }

    [data-screen="fengshui-evidence"] .fortune-title h1 {
      color: var(--ink);
      font-size: clamp(30px, 7.6vw, 40px);
      line-height: 1.08;
      letter-spacing: 0.12em;
      text-align: center;
      text-wrap: nowrap;
    }

    [data-screen="fengshui-evidence"] .fortune-title .sub {
      margin-top: 6px;
      color: rgba(24, 23, 21, 0.48);
      font-family: var(--serif);
      font-size: 15px;
      line-height: 1.25;
      letter-spacing: 0.22em;
      text-align: center;
    }

    [data-screen="fengshui-evidence"] .seal {
      margin-left: 2px;
      vertical-align: 0.16em;
    }

    .fengshui-archive-button {
      width: 50px;
      height: 50px;
      color: rgba(128, 91, 36, 0.96);
    }

    .fengshui-archive-button svg {
      width: 24px;
      height: 24px;
    }

    .fengshui-archive-button span {
      top: 51px;
      font-size: 11px;
      letter-spacing: 0.08em;
    }

    .fengshui-voucher-card {
      position: relative;
      display: grid;
      grid-template-columns: 96px minmax(0, 1fr);
      align-items: center;
      gap: 14px;
      min-height: 184px;
      margin-top: 14px;
      padding: 30px 22px 22px;
      overflow: hidden;
      border: 1px solid rgba(173, 138, 77, 0.2);
      border-radius: 8px;
      background: rgba(255, 250, 242, 0.96);
      box-shadow:
        0 18px 40px rgba(54, 44, 32, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.7);
    }

    .fengshui-voucher-card::before,
    .fengshui-voucher-card::after {
      display: none;
    }

    .fengshui-voucher-watermark {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      max-width: none;
      object-fit: cover;
      object-position: center;
      opacity: 0.78;
      mix-blend-mode: multiply;
      pointer-events: none;
      user-select: none;
      -webkit-user-drag: none;
    }

    .fengshui-voucher-seal {
      position: relative;
      z-index: 1;
      width: 74px;
      height: 74px;
      margin: 0 0 0 2px;
      border: 2px solid rgba(167, 52, 39, 0.76);
      border-radius: 7px;
      color: var(--seal);
      background:
        repeating-linear-gradient(0deg, rgba(167, 52, 39, 0.05) 0 2px, transparent 2px 8px),
        rgba(255, 252, 247, 0.64);
      font-size: 22px;
      font-weight: 900;
      line-height: 1.12;
      letter-spacing: 0.08em;
      box-shadow:
        inset 0 0 0 2px rgba(167, 52, 39, 0.16),
        0 8px 20px rgba(127, 40, 30, 0.08);
      transform: rotate(-1deg);
    }

    .fengshui-voucher-body {
      position: relative;
      z-index: 1;
      min-width: 0;
      padding-top: 2px;
    }

    .fengshui-voucher-body small {
      margin: 0 0 8px;
      color: rgba(24, 23, 21, 0.58);
      font-family: var(--serif);
      font-size: 12px;
      letter-spacing: 0.08em;
    }

    .fengshui-voucher-body b {
      color: var(--ink);
      font-size: clamp(21px, 5.1vw, 27px);
      line-height: 1.2;
      letter-spacing: 0.08em;
      text-wrap: balance;
    }

    .fengshui-voucher-body p {
      max-width: 18em;
      margin: 8px 0 14px;
      color: rgba(24, 23, 21, 0.68);
      font-family: var(--serif);
      font-size: 13px;
      line-height: 1.7;
      letter-spacing: 0.04em;
    }

    .fengshui-voucher-code {
      width: min(100%, 248px);
      padding-top: 11px;
      border-top: 1px dashed rgba(173, 138, 77, 0.34);
    }

    .fengshui-voucher-code span {
      color: rgba(24, 23, 21, 0.62);
      font-size: 14px;
      letter-spacing: 0.16em;
    }

    .fengshui-voucher-code strong {
      color: var(--seal);
      font-size: 17px;
      letter-spacing: 0.06em;
    }

    .fengshui-section-title {
      display: grid;
      grid-template-columns: 4px max-content minmax(0, 1fr);
      align-items: center;
      gap: 9px;
      margin: 16px 0 10px;
      color: var(--ink);
      font-family: var(--serif);
      font-size: 20px;
      line-height: 1.25;
      letter-spacing: 0.08em;
    }

    .fengshui-section-title i {
      width: 3px;
      height: 19px;
      border-radius: 99px;
      background: rgba(167, 52, 39, 0.88);
    }

    .fengshui-section-title span {
      color: var(--ink);
      font-family: var(--serif);
      font-size: inherit;
      font-weight: 800;
      letter-spacing: inherit;
      white-space: nowrap;
    }

    .fengshui-section-title span::after {
      content: "";
      display: inline-block;
      width: 22px;
      height: 10px;
      margin-left: 10px;
      vertical-align: 0.1em;
      background: url("/assets/fengshui-ink/fengshui-evidence-divider-cloud-v1.svg") center / contain no-repeat;
      opacity: 0.82;
    }

    .fengshui-section-title em {
      display: block;
      height: 1px;
      background: linear-gradient(90deg, rgba(173, 138, 77, 0.28), transparent);
    }

    [data-screen="fengshui-evidence"] .fengshui-asset-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
      margin: 0;
      border: 0;
    }

    [data-screen="fengshui-evidence"] .fengshui-asset-grid .fengshui-evidence-row {
      position: relative;
      display: grid;
      grid-template-columns: 46px minmax(0, 1fr);
      align-items: center;
      gap: 10px;
      min-height: 58px;
      padding: 8px 12px;
      overflow: hidden;
      border: 1px solid rgba(173, 138, 77, 0.22);
      border-radius: 8px;
      background:
        linear-gradient(135deg, rgba(255, 252, 247, 0.9), rgba(250, 245, 237, 0.64)),
        rgba(255, 252, 247, 0.7);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
    }

    [data-screen="fengshui-evidence"] .fengshui-asset-grid .fengshui-evidence-row-wide {
      grid-column: 1 / -1;
      min-height: 60px;
    }

    [data-screen="fengshui-evidence"] .fengshui-asset-grid .fengshui-evidence-row-wide::after,
    .fengshui-evidence-note::after {
      content: "";
      position: absolute;
      right: 0;
      bottom: 0;
      width: 58%;
      height: 92%;
      background: url("/assets/fengshui-ink/fengshui-evidence-landscape-v1.svg") right bottom / contain no-repeat;
      opacity: 0.52;
      mix-blend-mode: multiply;
      pointer-events: none;
    }

    [data-screen="fengshui-evidence"] .fengshui-asset-grid .fengshui-evidence-row strong,
    .fengshui-link-card i,
    .fengshui-evidence-note > i {
      position: relative;
      z-index: 1;
      display: grid;
      place-items: center;
      border: 1px solid rgba(173, 138, 77, 0.3);
      border-radius: 50%;
      color: rgba(128, 91, 36, 0.94);
      background: rgba(255, 252, 247, 0.78);
      font-size: 0;
      letter-spacing: 0;
      white-space: nowrap;
    }

    [data-screen="fengshui-evidence"] .fengshui-asset-grid .fengshui-evidence-row strong {
      width: 34px;
      height: 34px;
    }

    [data-screen="fengshui-evidence"] .fengshui-asset-grid .fengshui-evidence-row:nth-child(1) strong,
    [data-screen="fengshui-evidence"] .fengshui-asset-grid .fengshui-evidence-row:nth-child(4) strong {
      border-color: rgba(78, 136, 101, 0.26);
      color: rgba(54, 119, 83, 0.96);
      background: rgba(232, 243, 235, 0.68);
    }

    [data-screen="fengshui-evidence"] .fengshui-asset-grid .fengshui-evidence-row svg,
    .fengshui-link-card i svg,
    .fengshui-evidence-note > i svg {
      width: 21px;
      height: 21px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.7;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    [data-screen="fengshui-evidence"] .fengshui-asset-grid .fengshui-evidence-row div,
    .fengshui-link-card div,
    .fengshui-evidence-note p {
      position: relative;
      z-index: 1;
    }

    [data-screen="fengshui-evidence"] .fengshui-asset-grid .fengshui-evidence-row b {
      margin: 0 0 5px;
      color: var(--ink);
      font-size: 14px;
      line-height: 1.2;
      letter-spacing: 0.08em;
      white-space: normal;
    }

    [data-screen="fengshui-evidence"] .fengshui-asset-grid .fengshui-evidence-row span {
      color: rgba(54, 119, 83, 0.96);
      font-family: var(--serif);
      font-size: 12px;
      font-weight: 700;
      line-height: 1.3;
      letter-spacing: 0.06em;
    }

    .fengshui-asset-link-grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 14px minmax(0, 1fr) 14px minmax(0, 1fr);
      align-items: center;
      gap: 7px;
    }

    .fengshui-link-card {
      display: grid;
      justify-items: center;
      align-content: center;
      min-height: 96px;
      padding: 8px 7px 9px;
      border: 1px solid rgba(173, 138, 77, 0.22);
      border-radius: 8px;
      background:
        linear-gradient(180deg, rgba(255, 252, 247, 0.78), rgba(250, 244, 235, 0.52)),
        rgba(255, 252, 247, 0.64);
      text-align: center;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.58);
    }

    .fengshui-link-card.active {
      border-color: rgba(78, 136, 101, 0.24);
      background: linear-gradient(180deg, rgba(235, 246, 239, 0.78), rgba(255, 252, 247, 0.58));
    }

    .fengshui-link-card i {
      width: 34px;
      height: 34px;
      margin-bottom: 6px;
    }

    .fengshui-link-card.active i {
      border-color: rgba(78, 136, 101, 0.26);
      color: rgba(54, 119, 83, 0.96);
      background: rgba(232, 243, 235, 0.72);
    }

    .fengshui-link-card small,
    .fengshui-link-card span {
      display: block;
      color: rgba(24, 23, 21, 0.5);
      font-size: 10.5px;
      line-height: 1.45;
      letter-spacing: 0.04em;
    }

    .fengshui-link-card b {
      display: block;
      margin: 3px 0 6px;
      color: var(--ink);
      font-family: var(--serif);
      font-size: 14px;
      line-height: 1.35;
      letter-spacing: 0.04em;
      overflow-wrap: anywhere;
    }

    .fengshui-link-card.active b {
      color: rgba(54, 119, 83, 0.96);
    }

    .fengshui-link-card:last-child b {
      color: rgba(167, 52, 39, 0.96);
      font-size: 12.5px;
      letter-spacing: 0.02em;
      white-space: nowrap;
    }

    .fengshui-link-arrow {
      color: rgba(128, 91, 36, 0.62);
      font-family: Georgia, var(--serif);
      font-size: 24px;
      text-align: center;
      transform: translateY(-2px);
    }

    .fengshui-evidence-note {
      position: relative;
      display: grid;
      grid-template-columns: 46px minmax(0, 1fr);
      gap: 11px;
      align-items: center;
      min-height: 66px;
      padding: 10px 13px;
      overflow: hidden;
      border: 1px solid rgba(173, 138, 77, 0.22);
      border-radius: 8px;
      background:
        linear-gradient(90deg, rgba(255, 252, 247, 0.9), rgba(248, 241, 229, 0.52)),
        rgba(255, 252, 247, 0.7);
    }

    .fengshui-evidence-note::after {
      width: 64%;
      height: 100%;
      opacity: 0.46;
    }

    .fengshui-evidence-note > i {
      width: 34px;
      height: 34px;
    }

    .fengshui-evidence-note p {
      max-width: 21em;
      margin: 0;
      color: rgba(24, 23, 21, 0.72);
      font-family: var(--serif);
      font-size: 13.5px;
      line-height: 1.62;
      letter-spacing: 0.04em;
    }

    .fengshui-evidence-actions {
      position: sticky;
      bottom: 0;
      z-index: 8;
      display: grid;
      grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.35fr);
      gap: 12px;
      margin: 18px -2px 0;
      padding: 10px 0 max(6px, env(safe-area-inset-bottom));
      background: linear-gradient(180deg, transparent, rgba(247, 241, 231, 0.9) 32%, rgba(247, 241, 231, 0.98));
      backdrop-filter: blur(14px);
    }

    .fengshui-evidence-secondary,
    .fengshui-evidence-primary {
      min-height: 54px;
      padding: 0 13px;
      border-radius: 8px;
      font-family: var(--serif);
      font-size: clamp(16px, 4.4vw, 20px);
      font-weight: 800;
      line-height: 1.2;
      letter-spacing: 0.1em;
      cursor: pointer;
    }

    .fengshui-evidence-secondary {
      border: 1px solid rgba(173, 138, 77, 0.58);
      color: rgba(128, 91, 36, 0.96);
      background: rgba(255, 252, 247, 0.86);
    }

    .fengshui-evidence-primary {
      position: relative;
      overflow: hidden;
      border: 1px solid rgba(127, 40, 30, 0.26);
      color: rgba(255, 252, 247, 0.96);
      background:
        linear-gradient(180deg, rgba(181, 58, 43, 0.98), rgba(145, 38, 31, 0.99)),
        var(--seal);
      box-shadow:
        0 16px 34px rgba(127, 40, 30, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
    }

    .fengshui-evidence-primary::after {
      content: "";
      position: absolute;
      right: -22px;
      bottom: -9px;
      width: 132px;
      height: 48px;
      background: url("/assets/fengshui-ink/fengshui-evidence-cloud-press-v1.svg") right bottom / contain no-repeat;
      opacity: 0.58;
      pointer-events: none;
    }

    .fengshui-evidence-primary span {
      position: relative;
      z-index: 1;
      font-size: inherit;
      letter-spacing: inherit;
      white-space: nowrap;
    }

    @media (max-width: 390px) {
      [data-screen="fengshui-evidence"] {
        padding-inline: 14px;
      }

      .fengshui-voucher-card {
        grid-template-columns: 82px minmax(0, 1fr);
        min-height: 198px;
        padding: 30px 18px 22px;
      }

      .fengshui-voucher-seal {
        width: 72px;
        height: 72px;
        font-size: 21px;
      }

      [data-screen="fengshui-evidence"] .fengshui-asset-grid .fengshui-evidence-row {
        grid-template-columns: 44px minmax(0, 1fr);
        gap: 10px;
        padding-inline: 11px;
      }

      [data-screen="fengshui-evidence"] .fengshui-asset-grid .fengshui-evidence-row strong,
      .fengshui-link-card i,
      .fengshui-evidence-note > i {
        width: 38px;
        height: 38px;
      }

      .fengshui-link-card b {
        font-size: 14px;
      }

      .fengshui-evidence-secondary,
      .fengshui-evidence-primary {
        min-height: 54px;
        font-size: 16px;
        letter-spacing: 0.06em;
      }
    }

    [data-screen="fengshui-room-review"] .fengshui-review-stage {
      display: grid;
      place-items: center;
      height: clamp(310px, 76vw, 420px);
      min-height: 0;
      margin: 14px 0 0;
      padding: 12px;
      overflow: hidden;
      border: 1px solid rgba(173, 138, 77, 0.2);
      background:
        linear-gradient(180deg, rgba(255, 252, 247, 0.68), rgba(247, 241, 231, 0.58)),
        rgba(255, 252, 247, 0.56);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.56);
    }

    [data-screen="fengshui-room-review"] .fengshui-review-stage .fengshui-room-art {
      position: relative;
      left: auto;
      bottom: auto;
      display: block;
      width: 100%;
      max-width: 100%;
      height: 100%;
      max-height: 100%;
      object-fit: contain;
      opacity: 0.86;
      mix-blend-mode: multiply;
      transform: none;
    }

    [data-screen="fengshui-room-review"] .fengshui-review-stage .fengshui-room-art.is-user-upload {
      width: 100%;
      height: 100%;
      object-fit: contain;
      opacity: 0.94;
      background: rgba(255, 252, 247, 0.76);
      mix-blend-mode: normal;
    }

    [data-screen="fengshui-room-review"] .fengshui-review-stage .fengshui-palace-grid {
      top: 50%;
      width: min(270px, calc(100% - 82px));
      opacity: 0.28;
    }

    @media (max-width: 430px) {
      [data-screen="fengshui-room-review"] .fengshui-review-stage {
        height: 318px;
        padding: 10px;
      }
    }

    .zhai-jing-screen {
      padding-bottom: 188px;
    }

    .zhai-jing-current-home {
      display: grid;
      grid-template-columns: 42px minmax(0, 1fr) auto;
      align-items: center;
      gap: 11px;
      margin: 12px 0 0;
      padding: 12px 12px;
      border: 1px solid rgba(173, 138, 77, 0.18);
      border-radius: 8px;
      background:
        linear-gradient(180deg, rgba(255, 252, 247, 0.78), rgba(246, 239, 225, 0.46)),
        var(--paper);
      box-shadow: 0 14px 34px rgba(77, 55, 29, 0.055);
    }

    .zhai-jing-current-home-mark {
      display: grid;
      place-items: center;
      width: 42px;
      height: 42px;
      border: 1px solid rgba(167, 52, 39, 0.28);
      border-radius: 50%;
      background: rgba(167, 52, 39, 0.08);
      color: var(--seal);
      font-family: var(--serif);
      font-size: 17px;
      font-weight: 800;
      letter-spacing: 0;
    }

    .zhai-jing-current-home-copy {
      display: grid;
      gap: 3px;
      min-width: 0;
    }

    .zhai-jing-current-home-copy small {
      color: rgba(167, 52, 39, 0.72);
      font-family: var(--serif);
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0;
    }

    .zhai-jing-current-home-copy strong {
      overflow: hidden;
      color: var(--ink);
      font-family: var(--serif);
      font-size: 17px;
      line-height: 1.24;
      letter-spacing: 0;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .zhai-jing-current-home-copy p {
      margin: 0;
      overflow: hidden;
      color: rgba(24, 23, 21, 0.58);
      font-size: 12px;
      line-height: 1.45;
      letter-spacing: 0;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .zhai-jing-current-home-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
      margin-top: 3px;
    }

    .zhai-jing-current-home-tags em {
      padding: 3px 7px;
      border: 1px solid rgba(76, 139, 102, 0.18);
      border-radius: 999px;
      background: rgba(76, 139, 102, 0.08);
      color: rgba(48, 100, 75, 0.86);
      font-size: 10px;
      font-style: normal;
      font-weight: 800;
      letter-spacing: 0;
      white-space: nowrap;
    }

    .zhai-jing-current-home-switch {
      min-width: 56px;
      min-height: 36px;
      padding: 0 11px;
      border: 1px solid rgba(167, 52, 39, 0.3);
      border-radius: 8px;
      background: rgba(167, 52, 39, 0.09);
      color: var(--seal);
      font-family: var(--serif);
      font-size: 13px;
      font-weight: 800;
      letter-spacing: 0;
      cursor: pointer;
    }

    .zhai-jing-current-home.is-empty {
      border-style: dashed;
    }

    .zhai-jing-home-switcher[hidden] {
      display: none;
    }

    .zhai-jing-home-switcher {
      position: fixed;
      inset: 0 auto 0 50%;
      z-index: 122;
      display: grid;
      align-items: end;
      justify-items: center;
      width: min(430px, 100vw);
      padding: 18px 14px calc(18px + env(safe-area-inset-bottom));
      color: var(--ink);
      pointer-events: none;
      transform: translateX(-50%);
    }

    .zhai-jing-home-switcher.is-open {
      pointer-events: auto;
    }

    .zhai-jing-home-switcher-scrim {
      position: absolute;
      inset: 0;
      border: 0;
      background: rgba(24, 23, 21, 0.25);
      opacity: 0;
      backdrop-filter: blur(14px);
      transition: opacity 260ms var(--ease);
      cursor: pointer;
    }

    .zhai-jing-home-switcher.is-open .zhai-jing-home-switcher-scrim {
      opacity: 1;
    }

    .zhai-jing-home-switcher-panel {
      position: relative;
      display: grid;
      gap: 13px;
      width: 100%;
      max-height: min(78dvh, 680px);
      overflow: auto;
      padding: 23px 18px 17px;
      border: 1px solid rgba(173, 138, 77, 0.26);
      border-radius: 8px;
      background:
        linear-gradient(180deg, #fffaf4, #f8f1e7),
        var(--paper);
      box-shadow: 0 34px 72px rgba(54, 44, 32, 0.22);
      opacity: 0;
      outline: none;
      transform: translateY(18px);
      transition:
        opacity 260ms var(--ease),
        transform 260ms var(--ease);
    }

    .zhai-jing-home-switcher.is-open .zhai-jing-home-switcher-panel {
      opacity: 1;
      transform: translateY(0);
    }

    .zhai-jing-home-switcher-panel::before {
      content: "";
      position: absolute;
      inset: 9px;
      border: 1px solid rgba(173, 138, 77, 0.14);
      pointer-events: none;
    }

    .zhai-jing-home-switcher-panel > * {
      position: relative;
    }

    .zhai-jing-home-switcher-panel small {
      color: var(--seal);
      font-family: var(--serif);
      font-size: 12px;
      font-weight: 800;
      letter-spacing: 0;
    }

    .zhai-jing-home-switcher-panel h2 {
      margin: -6px 40px 2px 0;
      color: #1f1e1b;
      font-family: var(--serif);
      font-size: 24px;
      line-height: 1.22;
      letter-spacing: 0;
    }

    .zhai-jing-home-switcher-close {
      position: absolute;
      top: 14px;
      right: 14px;
      z-index: 2;
      display: grid;
      place-items: center;
      width: 34px;
      height: 34px;
      border: 1px solid rgba(24, 23, 21, 0.1);
      border-radius: 50%;
      background: rgba(255, 252, 247, 0.78);
      color: rgba(24, 23, 21, 0.68);
      font-size: 23px;
      line-height: 1;
      cursor: pointer;
    }

    .zhai-jing-home-switcher-list {
      display: grid;
      gap: 9px;
    }

    .zhai-jing-home-option {
      display: grid;
      grid-template-columns: 48px minmax(0, 1fr);
      align-items: center;
      gap: 11px;
      width: 100%;
      min-height: 80px;
      padding: 10px 11px;
      border: 1px solid rgba(173, 138, 77, 0.18);
      border-radius: 8px;
      background: #fffaf4;
      color: inherit;
      text-align: left;
      cursor: pointer;
    }

    .zhai-jing-home-option.is-active {
      border-color: rgba(167, 52, 39, 0.34);
      background:
        linear-gradient(180deg, rgba(167, 52, 39, 0.08), rgba(255, 250, 244, 0.98)),
        #fffaf4;
      box-shadow: 0 12px 28px rgba(167, 52, 39, 0.08);
    }

    .zhai-jing-home-option-mark {
      display: grid;
      place-items: center;
      width: 48px;
      height: 48px;
      border: 1px solid rgba(167, 52, 39, 0.22);
      border-radius: 50%;
      background: rgba(167, 52, 39, 0.07);
      color: var(--seal);
      font-family: var(--serif);
      font-size: 12px;
      font-weight: 800;
      letter-spacing: 0;
    }

    .zhai-jing-home-option-copy {
      display: grid;
      gap: 5px;
      min-width: 0;
    }

    .zhai-jing-home-option-copy strong {
      overflow: hidden;
      color: var(--ink);
      font-family: var(--serif);
      font-size: 17px;
      line-height: 1.24;
      letter-spacing: 0;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .zhai-jing-home-option-copy small {
      overflow: hidden;
      color: rgba(24, 23, 21, 0.56);
      font-family: var(--sans);
      font-size: 12px;
      font-weight: 600;
      line-height: 1.35;
      letter-spacing: 0;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .zhai-jing-home-option-copy span {
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
    }

    .zhai-jing-home-option-copy em {
      padding: 3px 7px;
      border: 1px solid rgba(76, 139, 102, 0.18);
      border-radius: 999px;
      background: rgba(76, 139, 102, 0.08);
      color: rgba(48, 100, 75, 0.86);
      font-size: 10px;
      font-style: normal;
      font-weight: 800;
      letter-spacing: 0;
    }

    .zhai-jing-home-switcher-empty {
      padding: 16px 12px;
      border: 1px dashed rgba(173, 138, 77, 0.28);
      border-radius: 8px;
      color: rgba(24, 23, 21, 0.56);
      font-family: var(--serif);
      font-size: 14px;
      letter-spacing: 0;
      text-align: center;
    }

    .zhai-jing-home-switcher-actions {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 9px;
      padding-top: 2px;
    }

    .zhai-jing-home-switcher-actions button {
      min-height: 42px;
      border: 1px solid rgba(24, 23, 21, 0.1);
      border-radius: 8px;
      background: rgba(255, 252, 247, 0.78);
      color: rgba(24, 23, 21, 0.68);
      font-family: var(--serif);
      font-size: 14px;
      font-weight: 800;
      letter-spacing: 0;
      cursor: pointer;
    }

    .zhai-jing-home-switcher-actions button:first-child {
      border-color: rgba(167, 52, 39, 0.34);
      background: rgba(167, 52, 39, 0.09);
      color: var(--seal);
    }

    .fengshui-home-identity-modal[hidden] {
      display: none;
    }

    .fengshui-home-identity-modal {
      position: fixed;
      inset: 0 auto 0 50%;
      z-index: 123;
      display: grid;
      align-items: end;
      justify-items: center;
      width: min(430px, 100vw);
      padding: 18px 14px calc(18px + env(safe-area-inset-bottom));
      color: var(--ink);
      pointer-events: none;
      transform: translateX(-50%);
    }

    .fengshui-home-identity-modal.is-open {
      pointer-events: auto;
    }

    .fengshui-home-identity-scrim {
      position: absolute;
      inset: 0;
      border: 0;
      background: rgba(24, 23, 21, 0.25);
      opacity: 0;
      backdrop-filter: blur(14px);
      transition: opacity 260ms var(--ease);
      cursor: pointer;
    }

    .fengshui-home-identity-modal.is-open .fengshui-home-identity-scrim {
      opacity: 1;
    }

    .fengshui-home-identity-panel {
      position: relative;
      display: grid;
      gap: 14px;
      width: 100%;
      max-height: min(82dvh, 680px);
      overflow: auto;
      padding: 23px 18px 17px;
      border: 1px solid rgba(173, 138, 77, 0.26);
      border-radius: 8px;
      background:
        linear-gradient(180deg, #fffaf4, #f8f1e7),
        var(--paper);
      box-shadow: 0 34px 72px rgba(54, 44, 32, 0.22);
      opacity: 0;
      outline: none;
      transform: translateY(18px);
      transition:
        opacity 260ms var(--ease),
        transform 260ms var(--ease);
    }

    .fengshui-home-identity-modal.is-open .fengshui-home-identity-panel {
      opacity: 1;
      transform: translateY(0);
    }

    .fengshui-home-identity-panel::before {
      content: "";
      position: absolute;
      inset: 9px;
      border: 1px solid rgba(173, 138, 77, 0.14);
      pointer-events: none;
    }

    .fengshui-home-identity-panel > * {
      position: relative;
    }

    .fengshui-home-identity-panel small {
      color: var(--seal);
      font-family: var(--serif);
      font-size: 12px;
      font-weight: 800;
      letter-spacing: 0;
    }

    .fengshui-home-identity-panel h2 {
      margin: -7px 40px 1px 0;
      color: #1f1e1b;
      font-family: var(--serif);
      font-size: 24px;
      line-height: 1.22;
      letter-spacing: 0;
    }

    .fengshui-home-identity-close {
      position: absolute;
      top: 14px;
      right: 14px;
      z-index: 2;
      display: grid;
      place-items: center;
      width: 34px;
      height: 34px;
      border: 1px solid rgba(24, 23, 21, 0.1);
      border-radius: 50%;
      background: rgba(255, 252, 247, 0.78);
      color: rgba(24, 23, 21, 0.68);
      font-size: 23px;
      line-height: 1;
      cursor: pointer;
    }

    .fengshui-home-identity-field {
      display: grid;
      gap: 7px;
      min-width: 0;
    }

    .fengshui-home-identity-field span {
      color: rgba(24, 23, 21, 0.56);
      font-family: var(--sans);
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.08em;
    }

    .fengshui-home-identity-field input {
      width: 100%;
      min-height: 44px;
      padding: 0 12px;
      border: 1px solid rgba(173, 138, 77, 0.22);
      border-radius: 8px;
      background: rgba(255, 252, 247, 0.82);
      color: var(--ink);
      font-family: var(--serif);
      font-size: 16px;
      font-weight: 800;
      letter-spacing: 0;
      outline: none;
    }

    .fengshui-home-identity-field input:focus {
      border-color: rgba(167, 52, 39, 0.34);
      box-shadow: 0 0 0 3px rgba(167, 52, 39, 0.08);
    }

    .fengshui-home-identity-role-group {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
    }

    .fengshui-home-identity-role-group button {
      min-width: 0;
      min-height: 40px;
      padding: 0 8px;
      border: 1px solid rgba(173, 138, 77, 0.2);
      border-radius: 8px;
      background: rgba(255, 252, 247, 0.7);
      color: rgba(128, 91, 36, 0.92);
      font-family: var(--serif);
      font-size: 14px;
      font-weight: 800;
      line-height: 1.15;
      letter-spacing: 0;
      cursor: pointer;
    }

    .fengshui-home-identity-role-group button.is-active {
      border-color: rgba(167, 52, 39, 0.36);
      background: rgba(167, 52, 39, 0.09);
      color: var(--seal);
      box-shadow: 0 10px 20px rgba(167, 52, 39, 0.08);
    }

    .fengshui-home-identity-actions {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 9px;
      padding-top: 2px;
    }

    .fengshui-home-identity-actions button {
      min-height: 42px;
      border: 1px solid rgba(24, 23, 21, 0.1);
      border-radius: 8px;
      background: rgba(255, 252, 247, 0.78);
      color: rgba(24, 23, 21, 0.68);
      font-family: var(--serif);
      font-size: 14px;
      font-weight: 800;
      letter-spacing: 0;
      cursor: pointer;
    }

    .fengshui-home-identity-actions button.primary {
      border-color: rgba(167, 52, 39, 0.34);
      background: rgba(167, 52, 39, 0.09);
      color: var(--seal);
    }

    .zhai-jing-hero {
      position: relative;
      display: grid;
      grid-template-columns: minmax(0, 1fr) 116px;
      align-items: end;
      gap: 12px;
      margin: 12px -22px 0;
      padding: 20px 22px 18px;
      overflow: hidden;
      border-top: 1px solid rgba(173, 138, 77, 0.14);
      border-bottom: 1px solid rgba(173, 138, 77, 0.14);
      background:
        linear-gradient(92deg, rgba(255, 252, 247, 0.8), rgba(246, 238, 226, 0.42)),
        radial-gradient(circle at 88% 14%, rgba(167, 52, 39, 0.08), transparent 30%);
    }

    .zhai-jing-hero::before {
      content: "";
      position: absolute;
      right: -46px;
      top: -38px;
      width: 166px;
      aspect-ratio: 1;
      border: 1px solid rgba(173, 138, 77, 0.2);
      border-radius: 50%;
      box-shadow:
        inset 0 0 0 18px rgba(173, 138, 77, 0.035),
        inset 0 0 0 38px rgba(173, 138, 77, 0.035);
      pointer-events: none;
    }

    .zhai-jing-hero-copy {
      position: relative;
      z-index: 1;
      display: grid;
      gap: 9px;
      min-width: 0;
    }

    .zhai-jing-hero-copy small,
    .zhai-jing-book-card small,
    .zhai-jing-mini-shelf small {
      color: rgba(167, 52, 39, 0.72);
      font-family: var(--serif);
      font-size: 12px;
      letter-spacing: 0.12em;
    }

    .zhai-jing-hero-copy h2 {
      margin: 0;
      max-width: 260px;
      color: var(--ink);
      font-family: var(--serif);
      font-size: 25px;
      line-height: 1.24;
      letter-spacing: 0.04em;
    }

    .zhai-jing-hero-copy p,
    .zhai-jing-book-card p {
      margin: 0;
      color: rgba(24, 23, 21, 0.62);
      font-size: 13px;
      line-height: 1.65;
      letter-spacing: 0.04em;
    }

    .zhai-jing-hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 2px;
    }

    .zhai-jing-hero-actions button,
    .zhai-jing-book-card button {
      min-height: 38px;
      border: 1px solid rgba(173, 138, 77, 0.28);
      border-radius: 8px;
      background: rgba(255, 252, 247, 0.72);
      color: rgba(24, 23, 21, 0.72);
      font-family: var(--serif);
      font-size: 13px;
      font-weight: 800;
      letter-spacing: 0.08em;
      cursor: pointer;
    }

    .zhai-jing-hero-actions button:first-child,
    .zhai-jing-book-card.is-ready button {
      border-color: rgba(167, 52, 39, 0.3);
      background: rgba(167, 52, 39, 0.09);
      color: var(--seal);
    }

    .zhai-jing-hero-actions button {
      padding: 0 12px;
    }

    .zhai-jing-hero > img {
      position: relative;
      z-index: 1;
      align-self: center;
      width: min(116px, 28vw);
      aspect-ratio: 0.62;
      object-fit: contain;
      filter: drop-shadow(0 18px 28px rgba(54, 44, 32, 0.16));
    }

    .zhai-jing-progress {
      position: relative;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 0;
      margin-top: 16px;
      padding: 12px 10px;
      border: 1px solid rgba(173, 138, 77, 0.16);
      border-radius: 12px;
      background:
        linear-gradient(180deg, rgba(255, 252, 247, 0.74), rgba(246, 239, 225, 0.44));
      box-shadow: 0 16px 38px rgba(77, 55, 29, 0.055);
    }

    .zhai-jing-progress::before {
      content: "";
      position: absolute;
      left: 16.66%;
      right: 16.66%;
      top: 27px;
      height: 1px;
      background: linear-gradient(90deg, rgba(173, 138, 77, 0.18), rgba(167, 52, 39, 0.2), rgba(173, 138, 77, 0.18));
    }

    .zhai-jing-progress span {
      position: relative;
      z-index: 1;
      display: grid;
      justify-items: center;
      gap: 4px;
      min-width: 0;
      padding: 0 6px;
      color: rgba(24, 23, 21, 0.62);
      font-family: var(--serif);
      font-size: 12px;
      letter-spacing: 0.08em;
      text-align: center;
    }

    .zhai-jing-progress i {
      display: grid;
      place-items: center;
      width: 30px;
      height: 30px;
      border: 1px solid rgba(167, 52, 39, 0.24);
      border-radius: 50%;
      color: var(--seal);
      font-style: normal;
      font-weight: 800;
      background: rgba(255, 252, 247, 0.94);
      box-shadow: 0 0 0 5px rgba(255, 252, 247, 0.82);
    }

    .zhai-jing-progress b {
      margin-top: 6px;
      color: var(--ink);
      font-size: 13px;
      line-height: 1.2;
      letter-spacing: 0.08em;
    }

    .zhai-jing-progress em {
      max-width: 72px;
      color: rgba(24, 23, 21, 0.44);
      font-family: var(--sans);
      font-size: 10px;
      font-style: normal;
      font-weight: 500;
      line-height: 1.35;
      letter-spacing: 0.02em;
    }

    .zhai-jing-book-list {
      display: grid;
      gap: 12px;
      margin-top: 16px;
    }

    .zhai-jing-book-card {
      display: grid;
      grid-template-columns: 70px minmax(0, 1fr) 68px;
      align-items: center;
      gap: 12px;
      min-height: 132px;
      padding: 12px 0;
      border-top: 1px solid rgba(24, 23, 21, 0.1);
    }

    .zhai-jing-book-card:last-child {
      border-bottom: 1px solid rgba(24, 23, 21, 0.1);
    }

    .zhai-jing-book-card > img {
      width: 70px;
      aspect-ratio: 0.62;
      object-fit: contain;
      filter: drop-shadow(0 12px 18px rgba(54, 44, 32, 0.12));
    }

    .zhai-jing-book-card > div {
      display: grid;
      gap: 6px;
      min-width: 0;
    }

    .zhai-jing-book-card h2 {
      margin: 0;
      color: var(--ink);
      font-family: var(--serif);
      font-size: 20px;
      line-height: 1.25;
      letter-spacing: 0.05em;
    }

    .zhai-jing-book-card em {
      color: rgba(24, 23, 21, 0.48);
      font-size: 12px;
      font-style: normal;
      line-height: 1.45;
      letter-spacing: 0.04em;
    }

    .zhai-jing-book-card button {
      width: 68px;
      padding: 0;
    }

    .zhai-jing-mini-shelf {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 8px;
      margin-top: 14px;
    }

    .zhai-jing-mini-shelf article {
      display: grid;
      justify-items: center;
      gap: 5px;
      min-width: 0;
      padding: 8px 4px 9px;
      border: 1px solid rgba(173, 138, 77, 0.18);
      border-radius: 8px;
      background: rgba(255, 252, 247, 0.58);
    }

    .zhai-jing-mini-shelf article.is-active {
      border-color: rgba(167, 52, 39, 0.28);
      background: rgba(167, 52, 39, 0.06);
    }

    .zhai-jing-mini-shelf img {
      width: min(48px, 100%);
      aspect-ratio: 0.62;
      object-fit: contain;
      filter: drop-shadow(0 8px 12px rgba(54, 44, 32, 0.12));
    }

    .zhai-jing-mini-shelf span {
      color: var(--ink);
      font-family: var(--serif);
      font-size: 14px;
      font-weight: 800;
      letter-spacing: 0.08em;
      line-height: 1;
    }

    .zhai-jing-mini-shelf small {
      font-size: 10px;
      letter-spacing: 0.06em;
    }

    .zhai-jing-volume-screen {
      padding-bottom: 178px;
    }

    .zhai-jing-volume-hero {
      position: relative;
      display: grid;
      gap: 16px;
      margin: 12px -22px 0;
      padding: 20px 22px 22px;
      overflow: hidden;
      border-top: 1px solid rgba(173, 138, 77, 0.14);
      border-bottom: 1px solid rgba(173, 138, 77, 0.14);
      background:
        linear-gradient(180deg, rgba(255, 252, 247, 0.76), rgba(247, 242, 234, 0.5)),
        radial-gradient(circle at 74% 16%, rgba(173, 138, 77, 0.09), transparent 28%);
    }

    .zhai-jing-volume-hero img {
      justify-self: center;
      width: min(100%, 292px);
      max-height: 292px;
      object-fit: contain;
      filter: drop-shadow(0 18px 28px rgba(54, 44, 32, 0.1));
    }

    .zhai-jing-volume-hero.feixing img {
      width: min(100%, 310px);
    }

    .zhai-jing-volume-hero div {
      display: grid;
      gap: 8px;
      min-width: 0;
    }

    .zhai-jing-volume-hero small,
    .zhai-jing-volume-steps h2 {
      color: rgba(167, 52, 39, 0.72);
      font-family: var(--serif);
      font-size: 13px;
      font-weight: 800;
      letter-spacing: 0.12em;
    }

    .zhai-jing-volume-hero h2 {
      margin: 0;
      color: var(--ink);
      font-family: var(--serif);
      font-size: 28px;
      line-height: 1.26;
      letter-spacing: 0.06em;
    }

    .zhai-jing-volume-hero p,
    .zhai-jing-volume-steps li span {
      margin: 0;
      color: rgba(24, 23, 21, 0.62);
      font-size: 14px;
      line-height: 1.76;
      letter-spacing: 0.04em;
    }

    .zhai-jing-volume-meta {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
      margin-top: 14px;
    }

    .zhai-jing-volume-meta article {
      display: grid;
      gap: 7px;
      justify-items: center;
      min-width: 0;
      padding: 12px 7px;
      border: 1px solid rgba(173, 138, 77, 0.18);
      border-radius: 8px;
      background: rgba(255, 252, 247, 0.56);
      text-align: center;
    }

    .zhai-jing-volume-meta i {
      display: grid;
      place-items: center;
      width: 34px;
      height: 34px;
      border: 1px solid rgba(167, 52, 39, 0.24);
      border-radius: 50%;
      color: var(--seal);
      font-family: var(--serif);
      font-style: normal;
      font-weight: 800;
    }

    .zhai-jing-volume-meta strong {
      color: var(--ink);
      font-family: var(--serif);
      font-size: 14px;
      letter-spacing: 0.08em;
    }

    .zhai-jing-volume-meta span {
      color: rgba(24, 23, 21, 0.5);
      font-size: 11px;
      line-height: 1.45;
      letter-spacing: 0.04em;
    }

    .zhai-jing-volume-steps {
      display: grid;
      gap: 12px;
      margin-top: 16px;
      padding: 16px;
      border: 1px solid rgba(173, 138, 77, 0.18);
      border-radius: 8px;
      background: rgba(255, 252, 247, 0.58);
      box-shadow: 0 16px 34px rgba(54, 44, 32, 0.05);
    }

    .zhai-jing-volume-steps h2 {
      margin: 0;
    }

    .zhai-jing-volume-steps ol {
      display: grid;
      gap: 12px;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .zhai-jing-volume-steps li {
      display: grid;
      grid-template-columns: 32px minmax(0, 1fr);
      gap: 10px;
      align-items: start;
      counter-increment: zhai-step;
    }

    .zhai-jing-volume-steps ol {
      counter-reset: zhai-step;
    }

    .zhai-jing-volume-steps li::before {
      content: counter(zhai-step);
      display: grid;
      place-items: center;
      width: 28px;
      height: 28px;
      border: 1px solid rgba(173, 138, 77, 0.26);
      border-radius: 50%;
      color: var(--gold);
      font-family: Georgia, var(--serif);
      font-weight: 800;
    }

    .zhai-jing-volume-steps li strong,
    .zhai-jing-volume-steps li span {
      grid-column: 2;
    }

    .zhai-jing-volume-steps li strong {
      color: var(--ink);
      font-family: var(--serif);
      font-size: 16px;
      letter-spacing: 0.08em;
    }

    .zhai-jing-volume-actions {
      position: sticky;
      z-index: 8;
      bottom: calc(80px + env(safe-area-inset-bottom));
      display: grid;
      grid-template-columns: 0.88fr 1.12fr;
      gap: 12px;
      margin-top: 18px;
      padding-top: 8px;
      border-top: 1px solid rgba(173, 138, 77, 0.14);
      background: rgba(247, 242, 234, 0.96);
      box-shadow: 0 -18px 30px rgba(247, 242, 234, 0.9);
      backdrop-filter: blur(10px);
    }

    .zhai-jing-volume-actions button {
      min-height: 50px;
      border: 1px solid rgba(173, 138, 77, 0.3);
      border-radius: 8px;
      background: rgba(255, 252, 247, 0.84);
      color: rgba(24, 23, 21, 0.76);
      font-family: var(--serif);
      font-size: 15px;
      font-weight: 800;
      letter-spacing: 0.08em;
      cursor: pointer;
      box-shadow: 0 14px 30px rgba(54, 44, 32, 0.08);
    }

    .zhai-jing-volume-actions .primary {
      border-color: rgba(167, 52, 39, 0.18);
      background: linear-gradient(180deg, #b53d2d, #9f2f25);
      color: #fffaf1;
    }

    .match-hero {
      position: relative;
      overflow: hidden;
    }

    .match-ornament {
      position: absolute;
      left: 50%;
      top: 50%;
      z-index: 0;
      width: min(220px, 72vw);
      opacity: 0.18;
      pointer-events: none;
      transform: translate(-50%, -50%);
      filter: saturate(0.92);
    }

    .match-hero > :not(.match-ornament) {
      position: relative;
      z-index: 1;
    }

    @media (min-width: 760px) {
      .zhai-jing-screen {
        max-width: 980px;
        margin-inline: auto;
      }

      .zhai-jing-volume-screen {
        max-width: 980px;
        margin-inline: auto;
      }

      .zhai-jing-hero {
        grid-template-columns: minmax(0, 1fr) 178px;
        min-height: 272px;
        margin-inline: 0;
        padding-inline: 30px;
      }

      .zhai-jing-hero-copy h2 {
        max-width: 520px;
        font-size: 34px;
      }

      .zhai-jing-hero-copy p {
        max-width: 440px;
      }

      .zhai-jing-hero > img {
        width: 168px;
      }

      .zhai-jing-book-card {
        padding: 14px;
        border: 1px solid rgba(173, 138, 77, 0.18);
        border-radius: 8px;
        background: rgba(255, 252, 247, 0.5);
      }

      .zhai-jing-volume-hero {
        grid-template-columns: 300px minmax(0, 1fr);
        align-items: center;
        margin-inline: 0;
        padding-inline: 28px;
      }
    }

    @media (max-width: 374px) {
      .zhai-jing-hero {
        grid-template-columns: minmax(0, 1fr) 92px;
      }

      .zhai-jing-hero-copy h2 {
        font-size: 22px;
      }

      .zhai-jing-book-card {
        grid-template-columns: 58px minmax(0, 1fr);
      }

      .zhai-jing-book-card > img {
        width: 58px;
      }

      .zhai-jing-book-card button {
        grid-column: 2;
        width: min(100%, 110px);
        justify-self: start;
      }

      .zhai-jing-volume-meta {
        grid-template-columns: 1fr;
      }

      .zhai-jing-volume-hero h2 {
        font-size: 24px;
      }
    }

    /* Zhai Jing image/button hardening for cached or partially loaded states. */
    [data-screen="fengshui-zhai-jing"] .zhai-jing-hero {
      display: grid !important;
      grid-template-columns: minmax(0, 1fr) minmax(92px, 116px) !important;
      align-items: center;
      gap: 16px;
      overflow: hidden;
    }

    [data-screen="fengshui-zhai-jing"] .zhai-jing-hero > img {
      width: clamp(92px, 26vw, 116px) !important;
      max-width: 32vw;
      height: auto !important;
      aspect-ratio: 0.62;
      object-fit: contain;
    }

    [data-screen="fengshui-zhai-jing"] .zhai-jing-hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      min-width: 0;
    }

    [data-screen="fengshui-zhai-jing"] .zhai-jing-hero-actions button,
    [data-screen="fengshui-zhai-jing"] .zhai-jing-book-card button,
    [data-screen="fengshui-match"] .zhai-jing-volume-actions button,
    [data-screen="fengshui-younian"] .zhai-jing-volume-actions button,
    [data-screen="fengshui-feixing"] .zhai-jing-volume-actions button {
      -webkit-appearance: none;
      appearance: none;
      display: inline-grid;
      place-items: center;
      min-height: 40px;
      border: 1px solid rgba(173, 138, 77, 0.3);
      border-radius: 8px;
      background: rgba(255, 252, 247, 0.82);
      color: rgba(24, 23, 21, 0.76);
      font-family: var(--serif);
      font-size: 14px;
      font-weight: 800;
      letter-spacing: 0.06em;
      line-height: 1;
      box-shadow: 0 12px 24px rgba(54, 44, 32, 0.08);
      cursor: pointer;
    }

    [data-screen="fengshui-zhai-jing"] .zhai-jing-hero-actions button {
      padding: 0 13px;
    }

    [data-screen="fengshui-zhai-jing"] .zhai-jing-hero-actions button:first-child,
    [data-screen="fengshui-zhai-jing"] .zhai-jing-book-card.is-ready button,
    [data-screen="fengshui-match"] .zhai-jing-volume-actions .primary,
    [data-screen="fengshui-younian"] .zhai-jing-volume-actions .primary,
    [data-screen="fengshui-feixing"] .zhai-jing-volume-actions .primary {
      border-color: rgba(167, 52, 39, 0.2);
      background: linear-gradient(180deg, #b53d2d, #9f2f25);
      color: #fffaf1;
    }

    [data-screen="fengshui-zhai-jing"] .zhai-jing-book-card {
      display: grid !important;
      grid-template-columns: 70px minmax(0, 1fr) 68px !important;
      align-items: center;
      gap: 12px;
      min-width: 0;
    }

    [data-screen="fengshui-zhai-jing"] .zhai-jing-book-card > img,
    [data-screen="fengshui-floorplan"] .zhai-jing-mini-shelf img {
      width: 70px !important;
      max-width: 70px;
      max-height: 120px;
      height: auto !important;
      object-fit: contain;
    }

    [data-screen="fengshui-floorplan"] .zhai-jing-mini-shelf img {
      width: min(48px, 100%) !important;
      max-height: 78px;
    }

    [data-screen="fengshui-zhai-jing"] .zhai-jing-book-card button {
      width: 68px !important;
      padding: 0;
    }

    [data-screen="fengshui-match"] .zhai-jing-volume-hero,
    [data-screen="fengshui-younian"] .zhai-jing-volume-hero,
    [data-screen="fengshui-feixing"] .zhai-jing-volume-hero {
      display: grid !important;
      grid-template-columns: minmax(104px, 132px) minmax(0, 1fr) !important;
      align-items: center;
      gap: 14px;
    }

    [data-screen="fengshui-match"] .zhai-jing-volume-hero img,
    [data-screen="fengshui-younian"] .zhai-jing-volume-hero img,
    [data-screen="fengshui-feixing"] .zhai-jing-volume-hero img {
      justify-self: center;
      width: min(100%, 132px) !important;
      height: auto !important;
      max-height: 148px !important;
      object-fit: contain;
    }

    [data-screen="fengshui-feixing"] .zhai-jing-volume-hero img {
      width: min(100%, 144px) !important;
    }

    [data-screen="fengshui-match"] .match-ornament {
      width: min(220px, 72vw) !important;
      height: auto !important;
      max-height: 237px;
      object-fit: contain;
    }

    @media (min-width: 760px) {
      [data-screen="fengshui-zhai-jing"] .zhai-jing-hero {
        grid-template-columns: minmax(0, 1fr) 178px !important;
      }

      [data-screen="fengshui-zhai-jing"] .zhai-jing-hero > img {
        width: 168px !important;
        max-width: 168px;
      }

      [data-screen="fengshui-match"] .zhai-jing-volume-hero,
      [data-screen="fengshui-younian"] .zhai-jing-volume-hero,
      [data-screen="fengshui-feixing"] .zhai-jing-volume-hero {
        grid-template-columns: 176px minmax(0, 1fr) !important;
      }

      [data-screen="fengshui-match"] .zhai-jing-volume-hero img,
      [data-screen="fengshui-younian"] .zhai-jing-volume-hero img,
      [data-screen="fengshui-feixing"] .zhai-jing-volume-hero img {
        width: 160px !important;
        max-height: 170px !important;
      }

      [data-screen="fengshui-feixing"] .zhai-jing-volume-hero img {
        width: 168px !important;
      }
    }

    @media (max-width: 374px) {
      [data-screen="fengshui-zhai-jing"] .zhai-jing-book-card {
        grid-template-columns: 58px minmax(0, 1fr) !important;
      }

      [data-screen="fengshui-zhai-jing"] .zhai-jing-book-card > img {
        width: 58px !important;
      }

      [data-screen="fengshui-zhai-jing"] .zhai-jing-book-card button {
        grid-column: 2;
        width: min(100%, 110px) !important;
        justify-self: start;
      }

      [data-screen="fengshui-match"] .zhai-jing-volume-hero,
      [data-screen="fengshui-younian"] .zhai-jing-volume-hero,
      [data-screen="fengshui-feixing"] .zhai-jing-volume-hero {
        grid-template-columns: 88px minmax(0, 1fr) !important;
      }

      [data-screen="fengshui-match"] .zhai-jing-volume-hero img,
      [data-screen="fengshui-younian"] .zhai-jing-volume-hero img,
      [data-screen="fengshui-feixing"] .zhai-jing-volume-hero img {
        width: 88px !important;
        max-height: 104px !important;
      }
    }

    .zhai-jing-rule-strip,
    .zhai-jing-triad,
    .zhai-jing-prompt-ledger,
    .zhai-jing-example-card,
    .zhai-jing-palace-detail,
    .zhai-jing-heming-status,
    .zhai-jing-heming-evidence,
    .zhai-jing-heming-actions,
    .zhai-jing-younian-status,
    .zhai-jing-younian-chart-card,
    .zhai-jing-younian-actions,
    .zhai-jing-feixing-status,
    .zhai-jing-feixing-chart-card,
    .zhai-jing-feixing-annual,
    .zhai-jing-feixing-actions {
      border: 1px solid rgba(173, 138, 77, 0.18);
      border-radius: 8px;
      background: rgba(255, 252, 247, 0.58);
      box-shadow: 0 16px 34px rgba(54, 44, 32, 0.05);
    }

    .zhai-jing-younian-report {
      display: grid;
      gap: 16px;
      margin-top: 16px;
    }

    .zhai-jing-heming-report {
      display: grid;
      gap: 16px;
      margin-top: 16px;
    }

    .zhai-jing-feixing-report {
      display: grid;
      gap: 16px;
      margin-top: 16px;
    }

    .zhai-jing-volume-screen,
    .zhai-jing-heming-report,
    .zhai-jing-younian-report,
    .zhai-jing-feixing-report,
    .zhai-jing-heming-status,
    .zhai-jing-heming-evidence,
    .zhai-jing-heming-prose,
    .zhai-jing-heming-actions,
    .zhai-jing-younian-status,
    .zhai-jing-younian-chart-card,
    .zhai-jing-younian-prose,
    .zhai-jing-younian-actions,
    .zhai-jing-feixing-status,
    .zhai-jing-feixing-chart-card,
    .zhai-jing-feixing-prose,
    .zhai-jing-feixing-annual,
    .zhai-jing-feixing-actions,
    .zhai-jing-heming-chapter,
    .zhai-jing-heming-subchapter,
    .zhai-jing-younian-title,
    .zhai-jing-younian-chart-head,
    .zhai-jing-feixing-chapter-map {
      min-width: 0;
      max-width: 100%;
    }

    .zhai-jing-volume-screen :where(p, li, dd, blockquote, h2, h3, strong, span) {
      overflow-wrap: anywhere;
      word-break: break-word;
    }

    .zhai-jing-heming-picker {
      margin-top: 16px;
    }

    .zhai-jing-younian-report[hidden],
    .zhai-jing-feixing-report[hidden] {
      display: none;
    }

    .zhai-jing-heming-status,
    .zhai-jing-heming-evidence,
    .zhai-jing-heming-actions,
    .zhai-jing-younian-status,
    .zhai-jing-younian-chart-card,
    .zhai-jing-younian-actions,
    .zhai-jing-feixing-status,
    .zhai-jing-feixing-chart-card,
    .zhai-jing-feixing-annual,
    .zhai-jing-feixing-actions {
      padding: 16px;
    }

    .zhai-jing-younian-title {
      display: grid;
      gap: 8px;
    }

    .zhai-jing-younian-title small,
    .zhai-jing-younian-chart-head small,
    .zhai-jing-younian-star-group > h2 {
      color: rgba(167, 52, 39, 0.72);
      font-family: var(--serif);
      font-size: 13px;
      font-weight: 800;
      letter-spacing: 0.12em;
    }

    .zhai-jing-younian-title h2 {
      margin: 0;
      color: var(--ink);
      font-family: var(--serif);
      font-size: 29px;
      line-height: 1.25;
      letter-spacing: 0.06em;
    }

    .zhai-jing-younian-title p,
    .zhai-jing-younian-status blockquote,
    .zhai-jing-younian-actions p {
      margin: 0;
      color: rgba(24, 23, 21, 0.66);
      font-family: var(--serif);
      font-size: 14px;
      line-height: 1.82;
      letter-spacing: 0.04em;
    }

    .zhai-jing-younian-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 12px;
    }

    .zhai-jing-younian-tags span {
      padding: 6px 10px;
      border: 1px solid rgba(173, 138, 77, 0.2);
      border-radius: 999px;
      background: rgba(255, 252, 247, 0.72);
      color: rgba(24, 23, 21, 0.58);
      font-size: 12px;
      letter-spacing: 0.06em;
    }

    .zhai-jing-younian-status blockquote {
      margin-top: 14px;
      padding: 12px 14px;
      border-left: 2px solid rgba(173, 138, 77, 0.44);
      color: var(--gold);
      background: rgba(173, 138, 77, 0.045);
    }

    .zhai-jing-heming-evidence-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }

    .zhai-jing-heming-evidence-grid article {
      display: grid;
      gap: 5px;
      min-width: 0;
      padding: 13px 12px;
      border: 1px solid rgba(173, 138, 77, 0.16);
      border-radius: 8px;
      background:
        linear-gradient(180deg, rgba(255, 252, 247, 0.76), rgba(247, 239, 226, 0.42)),
        rgba(255, 252, 247, 0.62);
    }

    .zhai-jing-heming-evidence-grid small {
      color: rgba(167, 52, 39, 0.72);
      font-size: 11px;
      font-weight: 850;
      letter-spacing: 0.12em;
    }

    .zhai-jing-heming-evidence-grid strong {
      color: var(--ink);
      font-family: var(--serif);
      font-size: 20px;
      line-height: 1.25;
      letter-spacing: 0.05em;
    }

    .zhai-jing-heming-evidence-grid span {
      color: rgba(24, 23, 21, 0.58);
      font-size: 12px;
      line-height: 1.55;
      letter-spacing: 0.04em;
    }

    .zhai-jing-heming-prose {
      display: grid;
      gap: 0;
    }

    .zhai-jing-heming-chapter {
      margin: 0;
      padding: 28px 0 26px;
      border-bottom: 1px solid rgba(173, 138, 77, 0.14);
    }

    .zhai-jing-heming-chapter:first-child {
      padding-top: 4px;
    }

    .zhai-jing-heming-chapter h2 {
      margin: 0 0 14px;
      color: var(--ink);
      font-family: var(--serif);
      font-size: 28px;
      line-height: 1.28;
      letter-spacing: 0.06em;
    }

    .zhai-jing-heming-chapter p {
      margin: 0 0 12px;
      color: rgba(24, 23, 21, 0.68);
      font-family: var(--serif);
      font-size: 15px;
      line-height: 1.94;
      letter-spacing: 0.04em;
    }

    .zhai-jing-heming-subchapter {
      margin-top: 18px;
      padding-top: 15px;
      border-top: 1px solid rgba(24, 23, 21, 0.08);
    }

    .zhai-jing-heming-subchapter h3 {
      margin: 0 0 10px;
      color: rgba(128, 91, 36, 0.95);
      font-family: var(--serif);
      font-size: 18px;
      line-height: 1.35;
      letter-spacing: 0.08em;
    }

    .zhai-jing-heming-actions {
      display: grid;
      gap: 12px;
    }

    .zhai-jing-heming-actions h2 {
      margin: 0;
      color: var(--ink);
      font-family: var(--serif);
      font-size: 24px;
      line-height: 1.34;
      letter-spacing: 0.06em;
    }

    .zhai-jing-heming-palette {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
      margin-top: 4px;
    }

    .zhai-jing-heming-palette article {
      display: grid;
      gap: 4px;
      min-width: 0;
      padding: 11px 12px;
      border: 1px solid rgba(173, 138, 77, 0.14);
      border-radius: 8px;
      background: rgba(255, 252, 247, 0.54);
    }

    .zhai-jing-heming-palette small {
      color: rgba(24, 23, 21, 0.45);
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.12em;
    }

    .zhai-jing-heming-palette strong {
      color: rgba(24, 23, 21, 0.72);
      font-family: var(--serif);
      font-size: 13px;
      line-height: 1.5;
      letter-spacing: 0.04em;
    }

    .zhai-jing-younian-facts {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
      margin-top: 14px;
    }

    .zhai-jing-younian-facts article {
      display: grid;
      gap: 4px;
      min-width: 0;
      padding: 11px 10px;
      border: 1px solid rgba(173, 138, 77, 0.14);
      border-radius: 8px;
      background: rgba(255, 252, 247, 0.58);
    }

    .zhai-jing-younian-facts small {
      color: rgba(24, 23, 21, 0.45);
      font-size: 11px;
      letter-spacing: 0.08em;
    }

    .zhai-jing-younian-facts strong {
      color: var(--ink);
      font-family: var(--serif);
      font-size: 17px;
      letter-spacing: 0.05em;
    }

    .zhai-jing-younian-facts span {
      color: rgba(24, 23, 21, 0.58);
      font-size: 12px;
      line-height: 1.45;
    }

    .zhai-jing-younian-chart-head {
      display: grid;
      gap: 5px;
      margin-bottom: 12px;
    }

    .zhai-jing-younian-chart-head strong {
      color: var(--ink);
      font-family: var(--serif);
      font-size: 21px;
      line-height: 1.32;
      letter-spacing: 0.05em;
    }

    .zhai-jing-younian-plan-card {
      margin-bottom: 12px;
      padding: 8px;
      border: 1px solid rgba(173, 138, 77, 0.16);
      border-radius: 8px;
      background: rgba(255, 252, 247, 0.54);
    }

    .zhai-jing-younian-table-wrap {
      margin-top: 13px;
      overflow-x: auto;
      border: 1px solid rgba(173, 138, 77, 0.14);
      border-radius: 8px;
      background: rgba(255, 252, 247, 0.5);
    }

    .zhai-jing-younian-table {
      width: 100%;
      min-width: 640px;
      border-collapse: collapse;
      font-family: var(--serif);
      font-size: 13px;
    }

    .zhai-jing-younian-table :where(th, td, b, span) {
      overflow-wrap: normal;
      word-break: normal;
    }

    .zhai-jing-younian-table th,
    .zhai-jing-younian-table td {
      padding: 9px 10px;
      border-bottom: 1px solid rgba(24, 23, 21, 0.08);
      color: rgba(24, 23, 21, 0.62);
      text-align: left;
      white-space: nowrap;
    }

    .zhai-jing-younian-table th {
      color: rgba(24, 23, 21, 0.45);
      font-size: 11px;
      letter-spacing: 0.08em;
    }

    .zhai-jing-younian-table b.is-good {
      color: var(--wood);
    }

    .zhai-jing-younian-table b.is-bad {
      color: var(--seal);
    }

    .zhai-jing-younian-prose {
      display: grid;
      gap: 0;
    }

    .zhai-jing-younian-stars {
      display: grid;
      gap: 12px;
    }

    .zhai-jing-younian-detail {
      border-color: rgba(173, 138, 77, 0.2);
    }

    .zhai-jing-younian-detail.is-good {
      border-color: rgba(76, 139, 102, 0.2);
    }

    .zhai-jing-younian-detail.is-bad {
      border-color: rgba(167, 52, 39, 0.2);
    }

    .zhai-jing-younian-detail-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 7px;
      margin-top: 2px;
    }

    .zhai-jing-younian-detail-tags span {
      width: fit-content;
      padding: 4px 8px;
      border: 1px solid rgba(173, 138, 77, 0.18);
      border-radius: 999px;
      background: rgba(255, 252, 247, 0.72);
      color: rgba(128, 91, 36, 0.88);
      font-family: var(--serif);
      font-size: 11px;
      font-weight: 750;
      letter-spacing: 0.06em;
    }

    .zhai-jing-ai-state {
      display: inline-flex;
      align-items: center;
      margin-left: 9px;
      padding: 3px 7px;
      border: 1px solid rgba(167, 52, 39, 0.24);
      border-radius: 999px;
      color: var(--seal);
      background: rgba(167, 52, 39, 0.055);
      font-family: var(--serif);
      font-size: 12px;
      font-weight: 850;
      line-height: 1.1;
      letter-spacing: 0.04em;
      vertical-align: middle;
      white-space: nowrap;
    }

    .zhai-jing-younian-actions {
      display: grid;
      gap: 12px;
    }

    .zhai-jing-feixing-prose {
      display: grid;
      gap: 0;
    }

    .zhai-jing-feixing-chapter-map {
      display: grid;
      gap: 14px;
      margin: 18px 0 8px;
    }

    .zhai-jing-feixing-plan-card {
      margin-bottom: 12px;
      padding: 8px;
      border: 1px solid rgba(173, 138, 77, 0.16);
      border-radius: 8px;
      background: rgba(255, 252, 247, 0.54);
    }

    .zhai-jing-plan-palace-label.is-feixing {
      min-width: 70px;
      max-width: 112px;
      padding: 6px 8px;
      border-color: rgba(173, 138, 77, 0.2);
      background: rgba(255, 252, 247, 0.82);
    }

    .zhai-jing-plan-palace-label.is-feixing strong {
      font-size: clamp(11px, 2.8vw, 14px);
      line-height: 1.16;
      text-align: center;
      white-space: normal;
    }

    .zhai-jing-plan-palace-label.is-feixing span {
      margin-top: 4px;
      font-size: 9px;
      line-height: 1.15;
      text-align: center;
      white-space: normal;
    }

    .zhai-jing-plan-palace-label.is-feixing.is-good {
      border-color: rgba(76, 139, 102, 0.3);
      background: rgba(244, 251, 246, 0.86);
    }

    .zhai-jing-plan-palace-label.is-feixing.is-bad {
      border-color: rgba(167, 52, 39, 0.28);
      background: rgba(255, 247, 243, 0.88);
    }

    .zhai-jing-plan-palace-label.is-feixing.is-warn {
      border-color: rgba(173, 138, 77, 0.34);
      background: rgba(255, 247, 225, 0.86);
    }

    .zhai-jing-plan-hitbox.is-feixing.is-good:hover,
    .zhai-jing-plan-hitbox.is-feixing.is-good:focus-visible,
    .zhai-jing-plan-hitbox.is-feixing.is-good.is-active {
      border-color: rgba(76, 139, 102, 0.46);
      background: rgba(76, 139, 102, 0.08);
    }

    .zhai-jing-plan-hitbox.is-feixing.is-bad:hover,
    .zhai-jing-plan-hitbox.is-feixing.is-bad:focus-visible,
    .zhai-jing-plan-hitbox.is-feixing.is-bad.is-active {
      border-color: rgba(167, 52, 39, 0.48);
      background: rgba(167, 52, 39, 0.08);
    }

    .zhai-jing-plan-hitbox.is-feixing.is-warn:hover,
    .zhai-jing-plan-hitbox.is-feixing.is-warn:focus-visible,
    .zhai-jing-plan-hitbox.is-feixing.is-warn.is-active {
      border-color: rgba(173, 138, 77, 0.5);
      background: rgba(173, 138, 77, 0.08);
    }

    .zhai-jing-plan-legend span.is-feixing-good i,
    .zhai-jing-plan-legend span.is-feixing-bad i {
      width: 17px;
      height: 9px;
      border: 0;
      border-radius: 999px;
    }

    .zhai-jing-plan-legend span.is-feixing-good i {
      background: rgba(76, 139, 102, 0.34);
    }

    .zhai-jing-plan-legend span.is-feixing-bad i {
      background: rgba(167, 52, 39, 0.27);
    }

    .zhai-jing-feixing-detail.is-good {
      border-color: rgba(76, 139, 102, 0.22);
    }

    .zhai-jing-feixing-detail.is-bad {
      border-color: rgba(167, 52, 39, 0.24);
    }

    .zhai-jing-feixing-detail.is-warn {
      border-color: rgba(173, 138, 77, 0.28);
    }

    .zhai-jing-feixing-annual,
    .zhai-jing-feixing-actions {
      display: grid;
      gap: 12px;
    }

    .zhai-jing-feixing-annual h2,
    .zhai-jing-feixing-actions h2 {
      margin: 0;
      color: var(--ink);
      font-family: var(--serif);
      font-size: 24px;
      line-height: 1.34;
      letter-spacing: 0.06em;
    }

    .zhai-jing-feixing-annual p,
    .zhai-jing-feixing-actions p {
      margin: 0;
      color: rgba(24, 23, 21, 0.66);
      font-family: var(--serif);
      font-size: 14px;
      line-height: 1.82;
      letter-spacing: 0.04em;
    }

    .zhai-jing-younian-actions h2 {
      margin: 0;
      color: var(--ink);
      font-family: var(--serif);
      font-size: 24px;
      line-height: 1.34;
      letter-spacing: 0.06em;
    }

    @media (max-width: 430px) {
      .zhai-jing-heming-evidence-grid,
      .zhai-jing-heming-palette {
        grid-template-columns: 1fr;
      }

      .zhai-jing-younian-facts {
        grid-template-columns: 1fr;
      }
    }

    .zhai-jing-rule-strip {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 64px;
      gap: 14px;
      align-items: start;
      margin-top: 16px;
      padding: 17px 16px 15px;
      border: 1px solid rgba(173, 138, 77, 0.18);
      border-radius: 12px;
      background:
        linear-gradient(135deg, rgba(255, 252, 247, 0.88), rgba(246, 239, 225, 0.46));
      box-shadow: 0 18px 42px rgba(77, 55, 29, 0.065);
    }

    .zhai-jing-rule-strip small,
    .zhai-jing-triad small,
    .zhai-jing-prompt-head small {
      color: rgba(167, 52, 39, 0.72);
      font-family: var(--serif);
      font-size: 12px;
      font-weight: 850;
      letter-spacing: 0.12em;
    }

    .zhai-jing-rule-strip strong,
    .zhai-jing-triad strong,
    .zhai-jing-prompt-head strong {
      display: block;
      margin-top: 4px;
      color: var(--ink);
      font-family: var(--serif);
      font-size: 18px;
      line-height: 1.28;
      letter-spacing: 0.06em;
    }

    .zhai-jing-rule-strip p,
    .zhai-jing-triad p,
    .zhai-jing-prompt-ledger p,
    .zhai-jing-example-card p {
      margin: 6px 0 0;
      color: rgba(24, 23, 21, 0.6);
      font-size: 12px;
      line-height: 1.66;
      letter-spacing: 0.04em;
    }

    .zhai-jing-rule-strip > span {
      display: grid;
      place-items: center;
      width: 62px;
      height: 62px;
      border: 1px solid rgba(167, 52, 39, 0.22);
      border-radius: 50%;
      color: var(--seal);
      font-family: Georgia, var(--serif);
      font-weight: 850;
      background:
        radial-gradient(circle at 50% 44%, rgba(167, 52, 39, 0.09), transparent 70%),
        rgba(255, 252, 247, 0.74);
    }

    .zhai-jing-rule-strip b {
      font-size: 20px;
      line-height: 1;
    }

    .zhai-jing-rule-strip > span small {
      margin-top: -18px;
      color: rgba(167, 52, 39, 0.58);
      font-family: var(--serif);
      font-size: 10px;
      letter-spacing: 0.08em;
    }

    .zhai-jing-hub {
      position: relative;
      display: grid;
      gap: 13px;
      margin-top: 16px;
      padding: 16px;
      overflow: hidden;
      border: 1px solid rgba(173, 138, 77, 0.2);
      border-radius: 12px;
      background:
        radial-gradient(circle at 92% 12%, rgba(173, 138, 77, 0.1), transparent 30%),
        linear-gradient(145deg, rgba(255, 252, 247, 0.96), rgba(246, 239, 225, 0.58));
      box-shadow: 0 18px 42px rgba(77, 55, 29, 0.065);
    }

    .zhai-jing-hub::before {
      content: "";
      position: absolute;
      right: -28px;
      top: -38px;
      width: 150px;
      height: 150px;
      border: 1px solid rgba(173, 138, 77, 0.12);
      border-radius: 50%;
      pointer-events: none;
    }

    .zhai-jing-hub-head,
    .zhai-jing-hub-body,
    .zhai-jing-hub-chain {
      position: relative;
      z-index: 1;
    }

    .zhai-jing-hub-head small {
      color: rgba(167, 52, 39, 0.72);
      font-family: var(--serif);
      font-size: 12px;
      font-weight: 850;
      letter-spacing: 0.12em;
    }

    .zhai-jing-hub-head strong {
      display: block;
      margin-top: 6px;
      color: var(--ink);
      font-family: var(--serif);
      font-size: 22px;
      line-height: 1.24;
      letter-spacing: 0.05em;
    }

    .zhai-jing-hub-head p {
      max-width: 34em;
      margin: 7px 0 0;
      color: rgba(24, 23, 21, 0.62);
      font-size: 13px;
      line-height: 1.68;
      letter-spacing: 0.04em;
    }

    .zhai-jing-hub-body {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 182px;
      gap: 16px;
      align-items: center;
    }

    .zhai-jing-hub-relations {
      display: grid;
      min-width: 0;
      border-top: 1px solid rgba(173, 138, 77, 0.12);
      border-bottom: 1px solid rgba(173, 138, 77, 0.12);
    }

    .zhai-jing-hub-relation {
      display: grid;
      grid-template-columns: 39px minmax(0, 1fr);
      gap: 11px;
      align-items: start;
      min-width: 0;
      padding: 11px 0;
    }

    .zhai-jing-hub-relation + .zhai-jing-hub-relation {
      border-top: 1px solid rgba(173, 138, 77, 0.12);
    }

    .zhai-jing-hub-relation i {
      display: grid;
      place-items: center;
      width: 38px;
      height: 38px;
      border: 1px solid rgba(167, 52, 39, 0.18);
      border-radius: 50%;
      background: rgba(255, 248, 241, 0.82);
      color: var(--seal);
      font-family: var(--serif);
      font-size: 18px;
      font-style: normal;
      font-weight: 900;
      line-height: 1;
      box-shadow: inset 0 0 0 7px rgba(167, 52, 39, 0.035);
    }

    .zhai-jing-hub-relation.is-yun i {
      border-color: rgba(76, 139, 102, 0.2);
      color: var(--wood);
      box-shadow: inset 0 0 0 7px rgba(76, 139, 102, 0.045);
    }

    .zhai-jing-hub-relation.is-he i {
      border-color: rgba(173, 138, 77, 0.22);
      color: rgba(159, 111, 42, 0.96);
      box-shadow: inset 0 0 0 7px rgba(173, 138, 77, 0.06);
    }

    .zhai-jing-hub-relation h3 {
      margin: 0;
      color: var(--ink);
      font-family: var(--serif);
      font-size: 16px;
      line-height: 1.25;
      letter-spacing: 0.04em;
      white-space: nowrap;
    }

    .zhai-jing-hub-relation h3 b {
      display: inline;
      color: var(--wood);
      font-weight: 900;
    }

    .zhai-jing-hub-relation p {
      margin: 5px 0 0;
      color: rgba(24, 23, 21, 0.58);
      font-size: 11.5px;
      line-height: 1.5;
      letter-spacing: 0.03em;
    }

    .zhai-jing-hub-triad {
      justify-self: stretch;
      min-width: 0;
    }

    .zhai-jing-hub-triangle {
      --zhai-hub-triangle-scale: 1;
      position: relative;
      width: calc(182px * var(--zhai-hub-triangle-scale));
      height: calc(166px * var(--zhai-hub-triangle-scale));
      margin: 0 auto;
      color: var(--seal);
      font-family: var(--serif);
    }

    .zhai-jing-hub-triangle img {
      position: absolute;
      left: calc(58px * var(--zhai-hub-triangle-scale));
      top: calc(76px * var(--zhai-hub-triangle-scale));
      width: calc(66px * var(--zhai-hub-triangle-scale));
      height: auto;
      opacity: 0.88;
      pointer-events: none;
      user-select: none;
    }

    .zhai-jing-hub-triangle .triad-line {
      position: absolute;
      left: 0;
      top: 0;
      height: 1px;
      background: rgba(167, 52, 39, 0.72);
      transform-origin: left center;
    }

    .zhai-jing-hub-triangle .triad-line::before,
    .zhai-jing-hub-triangle .triad-line::after {
      content: "";
      position: absolute;
      top: calc(-2px * var(--zhai-hub-triangle-scale));
      width: calc(5px * var(--zhai-hub-triangle-scale));
      height: calc(5px * var(--zhai-hub-triangle-scale));
      border-radius: 50%;
      background: rgba(142, 83, 38, 0.86);
    }

    .zhai-jing-hub-triangle .triad-line::before {
      left: calc(-2px * var(--zhai-hub-triangle-scale));
    }

    .zhai-jing-hub-triangle .triad-line::after {
      right: calc(-2px * var(--zhai-hub-triangle-scale));
    }

    .zhai-jing-hub-triangle .line-left {
      left: calc(91px * var(--zhai-hub-triangle-scale));
      top: calc(46px * var(--zhai-hub-triangle-scale));
      width: calc(94px * var(--zhai-hub-triangle-scale));
      transform: rotate(120deg);
    }

    .zhai-jing-hub-triangle .line-right {
      left: calc(92px * var(--zhai-hub-triangle-scale));
      top: calc(46px * var(--zhai-hub-triangle-scale));
      width: calc(94px * var(--zhai-hub-triangle-scale));
      transform: rotate(60deg);
    }

    .zhai-jing-hub-triangle .line-bottom {
      left: calc(49px * var(--zhai-hub-triangle-scale));
      top: calc(134px * var(--zhai-hub-triangle-scale));
      width: calc(86px * var(--zhai-hub-triangle-scale));
      background: rgba(173, 138, 77, 0.72);
      transform: rotate(0deg);
    }

    .zhai-jing-hub-triangle .triad-label {
      position: absolute;
      z-index: 2;
      color: rgba(159, 111, 42, 0.72);
      font-family: var(--serif);
      font-size: calc(11px * var(--zhai-hub-triangle-scale));
      font-style: normal;
      letter-spacing: 0.08em;
      white-space: nowrap;
    }

    .zhai-jing-hub-triangle .label-left {
      left: calc(60px * var(--zhai-hub-triangle-scale));
      top: calc(74px * var(--zhai-hub-triangle-scale));
      transform: translate(-50%, -50%) rotate(-60deg);
    }

    .zhai-jing-hub-triangle .label-right {
      left: calc(123px * var(--zhai-hub-triangle-scale));
      top: calc(74px * var(--zhai-hub-triangle-scale));
      transform: translate(-50%, -50%) rotate(60deg);
    }

    .zhai-jing-hub-triangle .label-bottom {
      left: calc(92px * var(--zhai-hub-triangle-scale));
      top: calc(146px * var(--zhai-hub-triangle-scale));
      color: rgba(159, 111, 42, 0.68);
      transform: translate(-50%, -50%);
    }

    .zhai-jing-hub-triangle i {
      position: absolute;
      z-index: 3;
      display: grid;
      place-items: center;
      width: calc(39px * var(--zhai-hub-triangle-scale));
      height: calc(39px * var(--zhai-hub-triangle-scale));
      border: 1px solid rgba(167, 52, 39, 0.22);
      border-radius: 50%;
      background: rgba(255, 250, 244, 0.96);
      color: var(--seal);
      font-size: calc(18px * var(--zhai-hub-triangle-scale));
      font-style: normal;
      font-weight: 900;
      box-shadow:
        inset 0 0 0 calc(7px * var(--zhai-hub-triangle-scale)) rgba(167, 52, 39, 0.035),
        0 calc(8px * var(--zhai-hub-triangle-scale)) calc(16px * var(--zhai-hub-triangle-scale)) rgba(77, 55, 29, 0.06);
    }

    .zhai-jing-hub-triangle .is-ming {
      left: calc(72px * var(--zhai-hub-triangle-scale));
      top: 0;
    }

    .zhai-jing-hub-triangle .is-zhai {
      left: calc(23px * var(--zhai-hub-triangle-scale));
      top: calc(113px * var(--zhai-hub-triangle-scale));
    }

    .zhai-jing-hub-triangle .is-yun {
      right: calc(23px * var(--zhai-hub-triangle-scale));
      top: calc(113px * var(--zhai-hub-triangle-scale));
    }

    .zhai-jing-hub-chain {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 10px;
      padding-top: 2px;
    }

    .zhai-jing-hub-chain span {
      position: relative;
      display: grid;
      place-items: center;
      min-width: 0;
      min-height: 39px;
      padding: 7px 6px;
      border: 1px solid rgba(173, 138, 77, 0.24);
      background:
        linear-gradient(135deg, transparent 8px, rgba(255, 252, 247, 0.86) 0) top left,
        linear-gradient(225deg, transparent 8px, rgba(255, 252, 247, 0.86) 0) top right,
        linear-gradient(45deg, transparent 8px, rgba(255, 252, 247, 0.86) 0) bottom left,
        linear-gradient(315deg, transparent 8px, rgba(255, 252, 247, 0.86) 0) bottom right;
      background-size: 51% 51%;
      background-repeat: no-repeat;
      color: rgba(24, 23, 21, 0.72);
      font-family: var(--serif);
      font-size: 14px;
      font-weight: 850;
      letter-spacing: 0.06em;
    }

    .zhai-jing-hub-chain span::before,
    .zhai-jing-hub-chain span::after {
      content: "";
      position: absolute;
      top: 7px;
      bottom: 7px;
      width: 1px;
      background: rgba(173, 138, 77, 0.14);
    }

    .zhai-jing-hub-chain span::before {
      left: 7px;
    }

    .zhai-jing-hub-chain span::after {
      right: 7px;
    }

    .zhai-jing-volume-ribbon {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 7px;
      margin: 13px 0 0;
      padding: 0;
      list-style: none;
    }

    .zhai-jing-volume-ribbon li {
      display: grid;
      gap: 3px;
      min-width: 0;
      padding: 9px 6px 8px;
      border: 1px solid rgba(173, 138, 77, 0.16);
      border-radius: 8px;
      background: rgba(255, 252, 247, 0.58);
      text-align: center;
    }

    .zhai-jing-volume-ribbon li.is-ready {
      border-color: rgba(76, 139, 102, 0.2);
      background: rgba(76, 139, 102, 0.055);
    }

    .zhai-jing-volume-ribbon li.is-generating {
      border-color: rgba(173, 138, 77, 0.26);
      background: rgba(173, 138, 77, 0.08);
    }

    .zhai-jing-volume-ribbon i {
      color: var(--seal);
      font-family: var(--serif);
      font-size: 12px;
      font-style: normal;
      font-weight: 850;
      line-height: 1;
    }

    .zhai-jing-volume-ribbon b {
      color: var(--ink);
      font-family: var(--serif);
      font-size: 13px;
      line-height: 1.15;
      letter-spacing: 0.05em;
    }

    .zhai-jing-volume-ribbon span {
      color: rgba(24, 23, 21, 0.46);
      font-size: 10px;
      line-height: 1.2;
      letter-spacing: 0.02em;
    }

    .zhai-jing-triad {
      position: relative;
      display: grid;
      grid-template-columns: minmax(0, 1fr) 128px;
      gap: 14px;
      align-items: center;
      margin-top: 12px;
      padding: 17px 15px 15px;
      overflow: hidden;
      border: 1px solid rgba(173, 138, 77, 0.18);
      border-radius: 12px;
      background:
        radial-gradient(circle at 86% 20%, rgba(76, 139, 102, 0.09), transparent 32%),
        linear-gradient(140deg, rgba(255, 252, 247, 0.9), rgba(246, 239, 225, 0.42));
      box-shadow: 0 18px 42px rgba(77, 55, 29, 0.06);
    }

    .zhai-jing-triad-mark {
      position: relative;
      justify-self: end;
      width: 118px;
      height: 104px;
      color: var(--seal);
      font-family: var(--serif);
    }

    .zhai-jing-triad-mark::before,
    .zhai-jing-triad-mark::after {
      content: "";
      position: absolute;
      inset: 17px 17px 12px;
      clip-path: polygon(50% 0, 100% 100%, 0 100%);
      border: 1px solid rgba(173, 138, 77, 0.24);
      background: rgba(255, 252, 247, 0.42);
    }

    .zhai-jing-triad-mark::after {
      inset: 30px 33px 28px;
      border-color: rgba(167, 52, 39, 0.28);
      background: rgba(167, 52, 39, 0.07);
    }

    .zhai-jing-triad-mark span {
      position: absolute;
      z-index: 2;
      display: grid;
      place-items: center;
      width: 31px;
      height: 31px;
      border: 1px solid rgba(173, 138, 77, 0.28);
      border-radius: 50%;
      background: rgba(255, 252, 247, 0.9);
      color: var(--seal);
      font-weight: 850;
      box-shadow: 0 8px 18px rgba(77, 55, 29, 0.08);
    }

    .zhai-jing-triad-mark .is-ming {
      left: 43px;
      top: 0;
    }

    .zhai-jing-triad-mark .is-zhai {
      left: 0;
      bottom: 5px;
    }

    .zhai-jing-triad-mark .is-yun {
      right: 0;
      bottom: 5px;
    }

    .zhai-jing-triad-mark b {
      position: absolute;
      z-index: 3;
      left: 50%;
      top: 58%;
      width: 74px;
      transform: translate(-50%, -50%);
      color: rgba(24, 23, 21, 0.7);
      font-family: var(--serif);
      font-size: 11px;
      font-weight: 850;
      line-height: 1.35;
      text-align: center;
      letter-spacing: 0.05em;
    }

    .zhai-jing-triad ul {
      grid-column: 1 / -1;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 9px;
      margin: 2px 0 0;
      padding: 0;
      list-style: none;
    }

    .zhai-jing-triad li {
      display: grid;
      gap: 4px;
      min-height: 82px;
      padding: 10px 10px 9px;
      border: 1px solid rgba(173, 138, 77, 0.14);
      border-radius: 8px;
      background: rgba(255, 252, 247, 0.54);
      color: rgba(24, 23, 21, 0.54);
    }

    .zhai-jing-triad li b {
      color: var(--ink);
      font-family: Georgia, var(--serif);
      font-size: 17px;
      line-height: 1.1;
    }

    .zhai-jing-triad li span {
      color: var(--seal);
      font-family: var(--serif);
      font-size: 13px;
      font-weight: 850;
      letter-spacing: 0.05em;
    }

    .zhai-jing-triad li em {
      color: rgba(24, 23, 21, 0.52);
      font-size: 11px;
      font-style: normal;
      line-height: 1.45;
      letter-spacing: 0.02em;
    }

    .zhai-jing-triad li.is-ready {
      border-color: rgba(76, 139, 102, 0.18);
      background: rgba(76, 139, 102, 0.05);
    }

    .zhai-jing-triad li.is-ready span {
      color: var(--wood);
    }

    .zhai-jing-book-card.is-pending {
      background:
        repeating-linear-gradient(90deg, rgba(173, 138, 77, 0.045) 0 7px, transparent 7px 14px),
        rgba(255, 252, 247, 0.36);
    }

    .zhai-jing-book-card.is-pending > img {
      opacity: 0.72;
      filter: grayscale(0.12) drop-shadow(0 10px 16px rgba(54, 44, 32, 0.1));
    }

    .zhai-jing-book-card.is-pending button {
      color: var(--gold);
      border-color: rgba(173, 138, 77, 0.3);
      background: rgba(255, 252, 247, 0.86);
    }

    .zhai-jing-book-card.is-generating {
      background:
        linear-gradient(90deg, rgba(167, 52, 39, 0.06), rgba(255, 252, 247, 0.56)),
        rgba(255, 252, 247, 0.42);
    }

    .zhai-jing-book-card.is-generating button,
    .zhai-jing-book-card button:disabled {
      position: relative;
      border-color: rgba(167, 52, 39, 0.22);
      background: rgba(167, 52, 39, 0.12);
      color: var(--seal);
      cursor: wait;
      opacity: 1;
    }

    .zhai-jing-book-card.is-generating button::after {
      content: "";
      position: absolute;
      right: 7px;
      top: 50%;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: currentColor;
      transform: translateY(-50%);
      animation: zhaiJingPulse 1s ease-in-out infinite;
    }

    @keyframes zhaiJingPulse {
      0%,
      100% { opacity: 0.32; transform: translateY(-50%) scale(0.82); }
      50% { opacity: 1; transform: translateY(-50%) scale(1); }
    }

    .zhai-jing-prompt-ledger {
      display: grid;
      gap: 12px;
      margin-top: 14px;
      padding: 15px;
    }

    .zhai-jing-prompt-ledger.compact {
      margin: 14px 0;
      box-shadow: none;
    }

    .zhai-jing-input-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
    }

    .zhai-jing-input-grid article {
      display: grid;
      grid-template-columns: 30px minmax(0, 1fr);
      gap: 7px 9px;
      min-width: 0;
      padding: 10px;
      border: 1px solid rgba(173, 138, 77, 0.16);
      border-radius: 8px;
      background: rgba(255, 252, 247, 0.52);
    }

    .zhai-jing-input-grid i {
      grid-row: span 2;
      display: grid;
      place-items: center;
      width: 28px;
      height: 28px;
      border-radius: 50%;
      color: #fffaf1;
      background: var(--gold);
      font-family: var(--serif);
      font-style: normal;
      font-weight: 850;
      font-size: 12px;
    }

    .zhai-jing-input-grid .is-missing i {
      background: rgba(24, 23, 21, 0.34);
    }

    .zhai-jing-input-grid strong {
      color: var(--ink);
      font-family: var(--serif);
      font-size: 14px;
      letter-spacing: 0.06em;
    }

    .zhai-jing-input-grid span {
      color: rgba(24, 23, 21, 0.54);
      font-size: 11px;
      line-height: 1.45;
      letter-spacing: 0.03em;
    }

    .zhai-jing-prompt-columns {
      display: grid;
      grid-template-columns: 1fr;
      gap: 10px;
    }

    .zhai-jing-prompt-columns article {
      padding: 12px 13px;
      border-top: 1px solid rgba(24, 23, 21, 0.08);
    }

    .zhai-jing-prompt-columns h3 {
      margin: 0 0 8px;
      color: var(--water);
      font-family: var(--serif);
      font-size: 15px;
      letter-spacing: 0.08em;
    }

    .zhai-jing-prompt-columns ul {
      display: grid;
      gap: 6px;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .zhai-jing-prompt-columns li {
      position: relative;
      padding-left: 16px;
      color: rgba(24, 23, 21, 0.62);
      font-size: 12px;
      line-height: 1.56;
      letter-spacing: 0.04em;
    }

    .zhai-jing-prompt-columns li::before {
      content: "";
      position: absolute;
      left: 0;
      top: 0.72em;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--gold);
    }

    .zhai-jing-scroll-reader {
      display: grid;
      gap: 12px;
      margin: 16px 0;
    }

    .zhai-jing-bagua-map {
      display: block;
      min-width: 0;
      padding: 0;
      border: 1px solid rgba(173, 138, 77, 0.18);
      border-radius: 8px;
      background:
        linear-gradient(180deg, rgba(255, 252, 247, 0.76), rgba(247, 239, 226, 0.5)),
        rgba(255, 252, 247, 0.52);
      overflow: hidden;
    }

    .zhai-jing-plan-card {
      display: grid;
      gap: 9px;
      min-width: 0;
      padding: 8px;
    }

    .zhai-jing-plan-card header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 3px 4px 0;
    }

    .zhai-jing-plan-card header small {
      display: block;
      color: rgba(78, 136, 101, 0.88);
      font-size: 10.5px;
      font-weight: 850;
      letter-spacing: 0.12em;
    }

    .zhai-jing-plan-card header strong {
      display: block;
      margin-top: 3px;
      color: var(--ink);
      font-family: var(--serif);
      font-size: 18px;
      line-height: 1.2;
      letter-spacing: 0.04em;
    }

    .zhai-jing-plan-card header > span {
      flex: 0 0 auto;
      max-width: 148px;
      padding: 5px 8px;
      border: 1px solid rgba(78, 136, 101, 0.18);
      border-radius: 999px;
      color: rgba(54, 119, 83, 0.96);
      background: rgba(242, 249, 243, 0.84);
      font-size: 10px;
      font-weight: 850;
      line-height: 1.18;
      letter-spacing: 0.04em;
      text-align: center;
    }

    .zhai-jing-plan-card.is-fallback-plan header > span {
      color: rgba(128, 91, 36, 0.92);
      border-color: rgba(173, 138, 77, 0.18);
      background: rgba(255, 252, 247, 0.86);
    }

    .zhai-jing-plan-media {
      position: relative;
      overflow: hidden;
      border: 1px solid rgba(173, 138, 77, 0.16);
      border-radius: 8px;
      background:
        linear-gradient(135deg, rgba(255, 252, 247, 0.92), rgba(238, 226, 206, 0.28)),
        rgba(255, 252, 247, 0.78);
    }

    .zhai-jing-plan-media img {
      display: block;
      width: 100%;
      height: auto;
      min-height: 0;
      padding: 12px;
      box-sizing: border-box;
      object-fit: contain;
      background: transparent;
      filter: saturate(0.82) contrast(1.02);
    }

    .zhai-jing-plan-media img.is-user-upload {
      filter: saturate(0.9) contrast(1.02);
    }

    .zhai-jing-plan-overlay,
    .zhai-jing-plan-hitboxes,
    .zhai-jing-plan-labels {
      position: absolute;
      display: block;
      inset: auto;
      left: 12px;
      top: 12px;
      right: auto;
      bottom: auto;
      z-index: 2;
      width: calc(100% - 24px);
      height: calc(100% - 24px);
      max-width: none;
      max-height: none;
      pointer-events: none;
    }

    .zhai-jing-plan-hitboxes {
      z-index: 3;
    }

    .zhai-jing-plan-labels {
      z-index: 4;
    }

    .zhai-jing-plan-hitbox {
      position: absolute;
      display: block;
      padding: 0;
      border: 1px solid transparent;
      border-radius: 6px;
      background: transparent;
      appearance: none;
      cursor: pointer;
      pointer-events: auto;
    }

    .zhai-jing-plan-hitbox:hover,
    .zhai-jing-plan-hitbox:focus-visible,
    .zhai-jing-plan-hitbox.is-active {
      border-color: rgba(24, 23, 21, 0.32);
      background: rgba(255, 252, 247, 0.12);
      outline: none;
    }

    .zhai-jing-plan-labels > span {
      position: absolute;
      transform: translate(-50%, -50%);
      pointer-events: none;
      user-select: none;
    }

    .zhai-jing-plan-palace-label {
      display: grid;
      justify-items: center;
      min-width: 40px;
      padding: 5px 8px 6px;
      border: 1px solid rgba(255, 252, 247, 0.7);
      border-radius: 999px;
      background: rgba(255, 252, 247, 0.74);
      box-shadow: 0 6px 14px rgba(40, 31, 22, 0.12);
      color: rgba(24, 23, 21, 0.8);
      font-family: var(--serif);
      line-height: 1;
      text-shadow: 0 1px 0 rgba(255, 255, 255, 0.72);
      backdrop-filter: blur(4px);
    }

    .zhai-jing-plan-palace-label strong {
      color: var(--ink);
      font-size: clamp(13px, 3.2vw, 17px);
      font-weight: 850;
      letter-spacing: 0;
    }

    .zhai-jing-plan-palace-label span {
      margin-top: 3px;
      color: rgba(24, 23, 21, 0.5);
      font-size: 10px;
      font-family: Georgia, var(--serif);
      font-weight: 800;
    }

    .zhai-jing-plan-palace-label.is-negative {
      border-color: rgba(167, 52, 39, 0.26);
      color: rgba(167, 52, 39, 0.9);
      background: rgba(255, 247, 243, 0.82);
    }

    .zhai-jing-plan-palace-label.is-warning {
      border-color: rgba(173, 138, 77, 0.3);
      background: rgba(255, 247, 225, 0.82);
    }

    .zhai-jing-plan-palace-label.is-active {
      border-color: rgba(167, 52, 39, 0.5);
      color: rgba(167, 52, 39, 0.98);
      background: rgba(255, 250, 247, 0.94);
      box-shadow: 0 8px 18px rgba(167, 52, 39, 0.16);
    }

    .zhai-jing-plan-palace-label.is-younian {
      min-width: 58px;
      max-width: 88px;
      padding: 6px 8px;
      border-color: rgba(173, 138, 77, 0.22);
      background: rgba(255, 252, 247, 0.78);
    }

    .zhai-jing-plan-palace-label.is-younian strong {
      font-size: clamp(12px, 2.8vw, 15px);
      line-height: 1.18;
      text-align: center;
      white-space: normal;
    }

    .zhai-jing-plan-palace-label.is-younian span {
      margin-top: 4px;
      font-size: 9.5px;
      line-height: 1.15;
      text-align: center;
      white-space: normal;
    }

    .zhai-jing-plan-palace-label.is-younian.is-good {
      border-color: rgba(76, 139, 102, 0.28);
      background: rgba(244, 251, 246, 0.84);
    }

    .zhai-jing-plan-palace-label.is-younian.is-bad {
      border-color: rgba(167, 52, 39, 0.24);
      background: rgba(255, 247, 243, 0.86);
    }

    .zhai-jing-plan-palace-label.is-younian.is-entrance {
      box-shadow: 0 0 0 2px rgba(173, 138, 77, 0.16), 0 8px 18px rgba(40, 31, 22, 0.13);
    }

    .zhai-jing-plan-hitbox.is-younian.is-good:hover,
    .zhai-jing-plan-hitbox.is-younian.is-good:focus-visible,
    .zhai-jing-plan-hitbox.is-younian.is-good.is-active {
      border-color: rgba(76, 139, 102, 0.45);
      background: rgba(76, 139, 102, 0.08);
    }

    .zhai-jing-plan-hitbox.is-younian.is-bad:hover,
    .zhai-jing-plan-hitbox.is-younian.is-bad:focus-visible,
    .zhai-jing-plan-hitbox.is-younian.is-bad.is-active {
      border-color: rgba(167, 52, 39, 0.45);
      background: rgba(167, 52, 39, 0.07);
    }

    .zhai-jing-plan-legend {
      display: flex;
      gap: 10px;
      overflow-x: auto;
      padding: 0 4px 2px;
      color: rgba(24, 23, 21, 0.5);
      font-size: 10.5px;
      font-weight: 750;
      letter-spacing: 0.03em;
      white-space: nowrap;
      scrollbar-width: none;
    }

    .zhai-jing-plan-legend::-webkit-scrollbar {
      display: none;
    }

    .zhai-jing-plan-legend span {
      display: inline-flex;
      align-items: center;
      gap: 5px;
    }

    .zhai-jing-plan-legend i {
      width: 16px;
      height: 0;
      border-top: 2px solid rgba(31, 105, 71, 0.86);
    }

    .zhai-jing-plan-legend span.is-fill i {
      width: 18px;
      height: 9px;
      border: 0;
      border-radius: 3px;
      background: linear-gradient(90deg, rgba(84, 121, 166, 0.42), rgba(59, 142, 101, 0.38), rgba(190, 79, 66, 0.36));
    }

    .zhai-jing-plan-legend span.is-frame i {
      border-top: 1px dashed rgba(183, 138, 66, 0.96);
    }

    .zhai-jing-plan-legend span.is-grid i {
      border-top: 1px solid rgba(170, 56, 47, 0.76);
    }

    .zhai-jing-plan-legend span.is-younian-good i,
    .zhai-jing-plan-legend span.is-younian-bad i {
      width: 17px;
      height: 9px;
      border: 0;
      border-radius: 999px;
    }

    .zhai-jing-plan-legend span.is-younian-good i {
      background: rgba(76, 139, 102, 0.34);
    }

    .zhai-jing-plan-legend span.is-younian-bad i {
      background: rgba(167, 52, 39, 0.25);
    }

    .zhai-jing-palace-token {
      display: grid;
      grid-template-rows: auto auto auto;
      justify-items: center;
      gap: 2px;
      min-height: 82px;
      padding: 8px 4px;
      border: 1px solid rgba(173, 138, 77, 0.18);
      border-radius: 8px;
      background: rgba(255, 252, 247, 0.7);
      color: rgba(24, 23, 21, 0.68);
      cursor: pointer;
    }

    .zhai-jing-palace-token b {
      color: var(--ink);
      font-size: 24px;
      line-height: 1;
    }

    .zhai-jing-palace-token span {
      color: var(--ink);
      font-family: var(--serif);
      font-weight: 850;
      letter-spacing: 0.08em;
    }

    .zhai-jing-palace-token em {
      color: rgba(24, 23, 21, 0.48);
      font-size: 11px;
      font-style: normal;
    }

    .zhai-jing-palace-token.is-neutral {
      border-color: rgba(173, 138, 77, 0.22);
      background: rgba(255, 249, 234, 0.64);
    }

    .zhai-jing-palace-token.is-warning {
      border-color: rgba(173, 138, 77, 0.34);
      background: rgba(255, 244, 214, 0.76);
    }

    .zhai-jing-palace-token.is-negative {
      border-color: rgba(24, 23, 21, 0.24);
      background: rgba(54, 49, 42, 0.08);
    }

    .zhai-jing-palace-token.is-active {
      border-color: rgba(167, 52, 39, 0.34);
      background: rgba(167, 52, 39, 0.075);
      box-shadow: inset 0 0 0 1px rgba(167, 52, 39, 0.08);
    }

    .zhai-jing-palace-detail {
      padding: 15px;
    }

    .zhai-jing-palace-detail header {
      display: grid;
      gap: 6px;
      margin-bottom: 12px;
    }

    .zhai-jing-palace-detail small {
      color: var(--gold);
      font-family: var(--serif);
      font-size: 12px;
      font-weight: 850;
      letter-spacing: 0.12em;
    }

    .zhai-jing-palace-detail h3 {
      margin: 0;
      color: var(--ink);
      font-family: var(--serif);
      font-size: 21px;
      line-height: 1.3;
      letter-spacing: 0.06em;
    }

    .zhai-jing-palace-detail mark {
      width: fit-content;
      padding: 4px 8px;
      border-radius: 999px;
      color: #fffaf1;
      background: rgba(24, 23, 21, 0.76);
      font-family: var(--serif);
      font-size: 11px;
      letter-spacing: 0.08em;
    }

    .zhai-jing-palace-detail dl {
      display: grid;
      gap: 9px;
      margin: 0;
    }

    .zhai-jing-palace-detail dt {
      width: fit-content;
      padding: 2px 7px;
      border: 1px solid rgba(173, 138, 77, 0.22);
      border-radius: 999px;
      color: var(--seal);
      font-family: var(--serif);
      font-size: 12px;
      font-weight: 850;
      letter-spacing: 0.1em;
    }

    .zhai-jing-palace-detail dd {
      margin: -4px 0 4px;
      color: rgba(24, 23, 21, 0.68);
      font-family: var(--serif);
      font-size: 14px;
      line-height: 1.78;
      letter-spacing: 0.04em;
    }

    .zhai-jing-palace-detail dd p {
      margin: 0 0 8px;
    }

    .zhai-jing-palace-detail dd p:last-child {
      margin-bottom: 0;
    }

    .zhai-jing-example-card {
      margin: 14px 0;
      padding: 13px 14px;
    }

    .zhai-jing-example-card strong {
      color: var(--water);
      font-family: var(--serif);
      font-size: 15px;
      letter-spacing: 0.08em;
    }

    .zhai-jing-example-card p {
      margin: 8px 0 0;
      color: rgba(24, 23, 21, 0.66);
      font-family: var(--serif);
      font-size: 14px;
      line-height: 1.75;
      letter-spacing: 0.04em;
    }

    @media (min-width: 760px) {
      .zhai-jing-prompt-columns {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .zhai-jing-scroll-reader {
        grid-template-columns: minmax(260px, 0.9fr) minmax(0, 1.1fr);
        align-items: start;
      }
    }

    [data-screen="fengshui-report-reader"] .zhai-jing-scroll-reader,
    [data-screen="fengshui-room-reader"] .zhai-jing-scroll-reader {
      grid-template-columns: 1fr !important;
    }

    [data-screen="fengshui-report-reader"] .zhai-jing-prompt-columns {
      grid-template-columns: 1fr;
    }

    @media (max-width: 430px) {
      .zhai-jing-input-grid,
      .zhai-jing-triad {
        grid-template-columns: 1fr;
      }

      .zhai-jing-hub {
        padding: 16px 14px 15px;
      }

      .zhai-jing-hub-body {
        grid-template-columns: minmax(0, 1fr) calc(182px * 0.76);
        gap: 9px;
      }

      .zhai-jing-hub-triad {
        justify-self: end;
      }

      .zhai-jing-hub-triangle {
        --zhai-hub-triangle-scale: 0.76;
      }

      .zhai-jing-hub-relation {
        grid-template-columns: 34px minmax(0, 1fr);
        gap: 8px;
        padding: 9px 0;
      }

      .zhai-jing-hub-relation i {
        width: 34px;
        height: 34px;
        font-size: 16px;
      }

      .zhai-jing-hub-relation h3 {
        font-size: 14px;
        white-space: normal;
      }

      .zhai-jing-hub-relation p {
        font-size: 10.5px;
      }

      .zhai-jing-hub-chain {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
      }

      .zhai-jing-hub-head strong {
        font-size: 21px;
      }

      .zhai-jing-triad-mark {
        justify-self: center;
      }
    }

    .chevron,
    .fengshui-path .chevron,
    .profile-list i,
    .fengshui-link-arrow,
    .fengshui-row-arrow {
      position: relative;
      display: inline-grid;
      place-items: center;
      width: 22px;
      min-width: 22px;
      height: 22px;
      min-height: 22px;
      box-sizing: border-box;
      color: rgba(24, 23, 21, 0.38);
      font-size: 0;
      line-height: 1;
      text-align: center;
      transform: none;
    }

    .chevron::before,
    .fengshui-path .chevron::before,
    .profile-list i::before,
    .fengshui-link-arrow::before,
    .fengshui-row-arrow::before {
      content: "";
      width: 8px;
      height: 8px;
      border-top: 1.7px solid currentColor;
      border-right: 1.7px solid currentColor;
      transform: rotate(45deg) translate(-1px, 1px);
      transform-origin: center;
    }

    .relationship-entry-chevron,
    .fengshui-path .chevron {
      justify-self: end;
    }

    .dimension-row:hover .chevron,
    .fortune-entry:hover .chevron,
    .fengshui-path:hover .chevron,
    .bazi-relationship-entry:hover .relationship-entry-chevron,
    .profile-list button:hover i {
      color: var(--seal);
    }

    .relationship-match-screen .relationship-partner-list {
      display: grid;
      gap: 10px;
      max-height: none;
      overflow: visible;
      border-top: 0;
    }

    .relationship-match-screen .relationship-partner-select-card {
      display: grid;
      gap: 10px;
      padding: 12px;
      border: 1px solid rgba(113, 93, 62, 0.2);
      border-radius: 10px;
      background:
        linear-gradient(180deg, rgba(255, 252, 247, 0.88), rgba(246, 239, 226, 0.48)),
        radial-gradient(circle at 12% 18%, rgba(173, 138, 77, 0.1), transparent 40%);
      box-shadow: 0 10px 24px rgba(72, 51, 32, 0.08);
    }

    .relationship-match-screen .relationship-partner-selected {
      display: grid;
      grid-template-columns: 38px minmax(0, 1fr);
      align-items: center;
      gap: 12px;
      min-width: 0;
    }

    .relationship-match-screen .relationship-partner-selected > span:nth-child(2) {
      display: grid;
      gap: 3px;
      min-width: 0;
    }

    .relationship-match-screen .relationship-partner-selected small,
    .relationship-match-screen .relationship-select-field > span {
      color: rgba(24, 23, 21, 0.52);
      font-size: 11px;
      font-style: normal;
      line-height: 1.2;
    }

    .relationship-match-screen .relationship-partner-selected strong {
      overflow: hidden;
      color: var(--ink);
      font-family: var(--serif);
      font-size: 17px;
      line-height: 1.25;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .relationship-match-screen .relationship-partner-selected em {
      overflow: hidden;
      color: rgba(24, 23, 21, 0.54);
      font-size: 11px;
      font-style: normal;
      line-height: 1.35;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .relationship-match-screen .relationship-partner-select-card.has-selection .relationship-profile-mark {
      border-color: rgba(184, 54, 43, 0.28);
      background: rgba(184, 54, 43, 0.07);
      color: var(--seal);
    }

    .relationship-match-screen .relationship-select-field {
      position: relative;
      display: grid;
      gap: 6px;
      min-width: 0;
    }

    .relationship-match-screen .relationship-select-field select {
      width: 100%;
      min-height: 44px;
      padding: 0 42px 0 13px;
      border: 1px solid rgba(173, 138, 77, 0.28);
      border-radius: 8px;
      appearance: none;
      background:
        linear-gradient(180deg, rgba(255, 252, 247, 0.94), rgba(255, 252, 247, 0.66));
      color: rgba(24, 23, 21, 0.82);
      font-family: var(--serif);
      font-size: 15px;
      line-height: 1.2;
      outline: none;
      box-shadow: inset 0 0 0 1px rgba(255, 252, 247, 0.64);
    }

    .relationship-match-screen .relationship-select-field select:focus {
      border-color: rgba(184, 54, 43, 0.42);
      box-shadow:
        inset 0 0 0 1px rgba(255, 252, 247, 0.72),
        0 0 0 3px rgba(184, 54, 43, 0.08);
    }

    .relationship-match-screen .relationship-select-field select:disabled {
      color: rgba(24, 23, 21, 0.38);
      background: rgba(24, 23, 21, 0.05);
    }

    .relationship-match-screen .relationship-select-field i {
      position: absolute;
      right: 15px;
      bottom: 17px;
      width: 9px;
      height: 9px;
      border-right: 1.7px solid rgba(24, 23, 21, 0.42);
      border-bottom: 1.7px solid rgba(24, 23, 21, 0.42);
      transform: rotate(45deg);
      pointer-events: none;
    }

    .relationship-match-screen .relationship-partner-list .relationship-add-partner {
      min-height: 60px;
      border: 1px dashed rgba(173, 138, 77, 0.34);
      border-radius: 10px;
      background: rgba(255, 252, 247, 0.44);
    }

    .relationship-match-screen.is-report-step .relationship-brief {
      display: none !important;
    }

    .relationship-match-screen.is-report-step .relationship-report-shell {
      margin-top: 8px;
    }

    .relationship-match-screen .relationship-brief {
      border-color: rgba(173, 138, 77, 0.18);
    }

    .relationship-category-tabs {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 8px;
      margin-bottom: 14px;
    }

    .relationship-category-tabs button {
      position: relative;
      display: grid;
      justify-items: center;
      gap: 5px;
      min-width: 0;
      min-height: 68px;
      padding: 8px 4px 10px;
      border: 1px solid rgba(173, 138, 77, 0.22);
      border-radius: 8px 8px 12px 12px;
      background: rgba(255, 252, 247, 0.52);
      color: rgba(24, 23, 21, 0.58);
      cursor: pointer;
    }

    .relationship-category-tabs button::after {
      content: "";
      position: absolute;
      left: 50%;
      bottom: 5px;
      width: 18px;
      height: 2px;
      transform: translateX(-50%);
      background: transparent;
    }

    .relationship-category-tabs span {
      display: grid;
      place-items: center;
      width: 30px;
      height: 30px;
      border: 1px solid currentColor;
      border-radius: 50%;
      font-family: var(--serif);
      font-size: 17px;
      font-weight: 800;
      line-height: 1;
    }

    .relationship-category-tabs strong {
      overflow: hidden;
      width: 100%;
      font-family: var(--serif);
      font-size: 12px;
      line-height: 1.15;
      text-align: center;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .relationship-category-tabs button.active {
      border-color: rgba(184, 54, 43, 0.36);
      background: rgba(184, 54, 43, 0.06);
      color: var(--seal);
    }

    .relationship-category-tabs button.active::after {
      background: var(--seal);
    }

    .relationship-scenario-group.is-two-level {
      gap: 12px;
      padding-top: 2px;
    }

    .relationship-match-screen.is-scenario-step {
      animation: none;
      padding-bottom: calc(var(--screen-bottom-gutter) + 88px);
      transform: none;
    }

    .relationship-scenario-summary {
      display: grid;
      grid-template-columns: 48px minmax(0, 1fr);
      align-items: center;
      gap: 12px;
      padding: 4px 0 8px;
      border-bottom: 1px solid rgba(173, 138, 77, 0.16);
    }

    .relationship-scenario-summary .relationship-type-seal,
    .relationship-selected-scene .relationship-type-seal {
      display: grid;
      place-items: center;
      width: 42px;
      height: 42px;
      border: 1px solid rgba(184, 54, 43, 0.46);
      border-radius: 50%;
      background: rgba(255, 252, 247, 0.72);
      color: var(--seal);
      font-family: var(--serif);
      font-size: 22px;
      font-weight: 800;
      box-shadow: inset 0 0 0 5px rgba(184, 54, 43, 0.04);
    }

    .relationship-scenario-summary small {
      display: block;
      margin: 0 0 4px;
      color: rgba(173, 138, 77, 0.86);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.18em;
    }

    .relationship-scenario-summary h2 {
      margin: 0 0 4px;
      font-size: 19px;
    }

    .relationship-scenario-summary p {
      margin: 0;
      color: rgba(24, 23, 21, 0.56);
      font-size: 12px;
      line-height: 1.55;
    }

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

    .relationship-subtype-slip {
      position: relative;
      display: grid;
      grid-template-columns: 50px minmax(0, 1fr) auto;
      align-items: center;
      gap: 12px;
      min-height: 78px;
      padding: 12px 12px;
      border: 1px solid rgba(173, 138, 77, 0.2);
      border-radius: 8px;
      background:
        linear-gradient(90deg, rgba(255, 252, 247, 0.92), rgba(246, 239, 226, 0.58)),
        radial-gradient(circle at 90% 20%, rgba(173, 138, 77, 0.1), transparent 34%);
      color: var(--ink);
      text-align: left;
      cursor: pointer;
      box-shadow: 0 8px 16px rgba(72, 51, 32, 0.055);
    }

    .relationship-subtype-slip::before {
      content: "";
      position: absolute;
      inset: 6px;
      border: 1px solid rgba(173, 138, 77, 0.09);
      border-radius: 6px;
      pointer-events: none;
    }

    .relationship-subtype-slip.is-active {
      border-color: rgba(184, 54, 43, 0.3);
      background:
        linear-gradient(90deg, rgba(184, 54, 43, 0.075), rgba(255, 252, 247, 0.64)),
        radial-gradient(circle at 92% 18%, rgba(184, 54, 43, 0.1), transparent 36%);
    }

    .relationship-subtype-slip.is-active::after {
      content: "";
      position: absolute;
      left: 74px;
      bottom: 10px;
      width: 28px;
      height: 2px;
      background: var(--seal);
    }

    .relationship-subtype-seal {
      display: grid;
      place-items: center;
      width: 42px;
      height: 42px;
      border: 1px solid rgba(184, 54, 43, 0.46);
      border-radius: 50%;
      color: var(--seal);
      font-family: var(--serif);
      font-size: 23px;
      font-weight: 800;
    }

    .relationship-subtype-copy {
      display: grid;
      gap: 4px;
      min-width: 0;
    }

    .relationship-subtype-copy strong {
      font-family: var(--serif);
      font-size: 18px;
      letter-spacing: 0.04em;
      line-height: 1.25;
    }

    .relationship-subtype-copy small {
      color: rgba(24, 23, 21, 0.56);
      font-size: 12px;
      line-height: 1.45;
    }

    .relationship-subtype-slip em {
      display: grid;
      place-items: center;
      min-width: 34px;
      min-height: 24px;
      border: 1px solid rgba(173, 138, 77, 0.24);
      border-radius: 999px;
      color: rgba(24, 23, 21, 0.5);
      font-size: 11px;
      font-style: normal;
    }

    .relationship-subtype-slip.is-active em {
      border-color: rgba(184, 54, 43, 0.36);
      color: var(--seal);
      background: rgba(184, 54, 43, 0.06);
    }

    .relationship-other-categories {
      display: grid;
      gap: 0;
      margin-top: 2px;
      border-top: 1px solid rgba(173, 138, 77, 0.16);
    }

    .relationship-other-categories h3 {
      margin: 14px 0 4px;
      color: rgba(24, 23, 21, 0.66);
      font-family: var(--serif);
      font-size: 15px;
      letter-spacing: 0.08em;
    }

    .relationship-other-categories button {
      display: grid;
      grid-template-columns: 34px auto minmax(0, 1fr) 18px;
      align-items: center;
      gap: 9px;
      min-height: 52px;
      padding: 8px 0;
      border: 0;
      border-bottom: 1px solid rgba(24, 23, 21, 0.08);
      background: transparent;
      color: rgba(24, 23, 21, 0.68);
      text-align: left;
      cursor: pointer;
    }

    .relationship-other-categories span {
      display: grid;
      place-items: center;
      width: 28px;
      height: 28px;
      border: 1px solid rgba(173, 138, 77, 0.26);
      border-radius: 50%;
      color: var(--gold);
      font-family: var(--serif);
      font-weight: 800;
    }

    .relationship-other-categories strong {
      font-family: var(--serif);
      font-size: 15px;
      white-space: nowrap;
    }

    .relationship-other-categories small {
      overflow: hidden;
      color: rgba(24, 23, 21, 0.46);
      font-size: 11px;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .relationship-other-categories i,
    .relationship-preview-list i {
      position: relative;
      width: 16px;
      height: 16px;
      color: transparent;
      font-size: 0;
    }

    .relationship-other-categories i::before,
    .relationship-preview-list i::before {
      content: "";
      position: absolute;
      top: 4px;
      right: 4px;
      width: 7px;
      height: 7px;
      border-right: 1.7px solid rgba(24, 23, 21, 0.42);
      border-bottom: 1.7px solid rgba(24, 23, 21, 0.42);
      transform: rotate(-45deg);
    }

    .relationship-scenario-action {
      display: grid;
      gap: 10px;
      margin-top: 4px;
    }

    .relationship-match-screen.is-scenario-step .relationship-scenario-action {
      position: fixed;
      left: 22px;
      right: 22px;
      bottom: calc(var(--nav-height) + 12px);
      z-index: 70;
      margin: 0;
      padding: 10px;
      border: 1px solid rgba(173, 138, 77, 0.2);
      border-radius: 12px;
      background:
        linear-gradient(180deg, rgba(255, 252, 247, 0.96), rgba(248, 242, 231, 0.92)),
        radial-gradient(circle at 50% 0%, rgba(184, 54, 43, 0.08), transparent 42%);
      box-shadow: 0 18px 38px rgba(72, 51, 32, 0.16);
    }

    .relationship-scenario-action .relationship-generate-button {
      width: 100%;
    }

    .relationship-match-screen.is-scenario-step .relationship-scenario-action .relationship-privacy-note {
      display: none;
    }

    @media (min-width: 760px) and (hover: hover) and (pointer: fine) {
      .relationship-match-screen.is-scenario-step .relationship-scenario-action {
        left: 50%;
        right: auto;
        width: min(436px, calc(100vw - 44px));
        transform: translateX(-50%);
      }
    }

    .relationship-match-screen.is-people-step .relationship-profile-panel {
      position: relative;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      gap: 54px;
      align-items: stretch;
      margin: 4px 0 18px;
      padding: 18px 0 12px;
    }

    .relationship-match-screen.is-people-step .relationship-profile-panel::before {
      content: "";
      position: absolute;
      left: 50%;
      top: 48%;
      width: 164px;
      height: 164px;
      border: 1px solid rgba(173, 138, 77, 0.12);
      border-radius: 50%;
      transform: translate(-50%, -50%);
      box-shadow: 0 0 0 28px rgba(173, 138, 77, 0.025);
      pointer-events: none;
    }

    .relationship-match-screen.is-people-step .relationship-profile-panel::after {
      content: "合";
      position: absolute;
      left: 50%;
      top: 48%;
      z-index: 3;
      display: grid;
      place-items: center;
      width: 38px;
      height: 38px;
      border: 2px double rgba(184, 54, 43, 0.7);
      border-radius: 10px;
      transform: translate(-50%, -50%);
      background: rgba(255, 252, 247, 0.94);
      color: var(--seal);
      font-family: var(--serif);
      font-size: 24px;
      font-weight: 800;
      pointer-events: none;
    }

    .relationship-match-screen.is-people-step .relationship-profile-current,
    .relationship-match-screen.is-people-step .relationship-partner-list {
      position: relative;
      z-index: 1;
      min-width: 0;
    }

    .relationship-match-screen .relationship-partner-select-card {
      min-height: 182px;
      align-content: center;
      padding: 14px 12px;
      border-radius: 8px;
      background:
        linear-gradient(180deg, rgba(255, 252, 247, 0.94), rgba(246, 239, 226, 0.58)),
        radial-gradient(circle at 50% 18%, rgba(173, 138, 77, 0.11), transparent 38%);
    }

    .relationship-match-screen .relationship-current-select-card p {
      margin: 4px 0 0;
      color: rgba(24, 23, 21, 0.48);
      font-size: 11px;
      line-height: 1.45;
    }

    .relationship-match-screen .relationship-partner-selected {
      grid-template-columns: 42px minmax(0, 1fr);
      align-items: start;
    }

    .relationship-match-screen .relationship-profile-mark {
      border-radius: 50%;
      font-size: 20px;
    }

    .relationship-match-screen .relationship-select-field select {
      min-height: 42px;
      border-radius: 7px;
      font-size: 13px;
    }

    .relationship-selected-scene {
      position: relative;
      display: grid;
      grid-template-columns: 48px minmax(0, 1fr);
      gap: 12px;
      align-items: start;
      padding: 12px 0 14px;
      border-top: 1px solid rgba(173, 138, 77, 0.14);
      border-bottom: 1px solid rgba(173, 138, 77, 0.14);
      overflow: hidden;
    }

    .relationship-selected-scene .relationship-type-seal,
    .relationship-selected-scene > div {
      position: relative;
      z-index: 1;
    }

    .relationship-selected-scene-bg {
      position: absolute;
      top: 6px;
      right: 0;
      bottom: 6px;
      z-index: 0;
      width: min(40%, 190px);
      background-image: var(--relationship-scenario-bg);
      background-repeat: no-repeat;
      background-position: right center;
      background-size: contain;
      opacity: 0.22;
      filter: saturate(0.72) sepia(0.04);
      -webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, 0.28) 20%, #000 48%);
      mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, 0.28) 20%, #000 48%);
      pointer-events: none;
      mix-blend-mode: multiply;
    }

    .relationship-selected-scene small {
      color: var(--gold);
      font-family: var(--serif);
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.1em;
    }

    .relationship-selected-scene strong {
      display: block;
      margin: 3px 0 4px;
      font-family: var(--serif);
      font-size: 20px;
      letter-spacing: 0.05em;
    }

    .relationship-selected-scene p {
      margin: 0;
      color: rgba(24, 23, 21, 0.58);
      font-size: 12px;
      line-height: 1.6;
      text-align: left;
    }

    .relationship-book-cover {
      grid-template-columns: 1fr;
      justify-items: center;
      gap: 14px;
      padding: 12px 0 18px;
      text-align: center;
    }

    .relationship-book-copy {
      display: grid;
      gap: 6px;
      max-width: 100%;
    }

    .relationship-book-cover .relationship-book-copy small {
      color: var(--seal);
    }

    .relationship-book-cover h2 {
      margin: 0;
      font-size: 27px;
      letter-spacing: 0.04em;
    }

    .relationship-book-cover p {
      max-width: 36em;
      text-align: left;
    }

    .relationship-orbit {
      position: relative;
      width: min(292px, 100%);
      height: 174px;
      border: 0;
      background: transparent;
      box-shadow: none;
    }

    .relationship-orbit::before {
      content: "";
      position: absolute;
      inset: 12px 24px;
      border: 1px solid rgba(173, 138, 77, 0.18);
      border-radius: 50%;
      box-shadow:
        0 0 0 28px rgba(173, 138, 77, 0.025),
        inset 0 0 0 18px rgba(173, 138, 77, 0.026);
    }

    .relationship-orbit span {
      width: 132px;
      height: 132px;
      border-color: currentColor;
      border-radius: 50%;
      background:
        radial-gradient(circle at 42% 36%, rgba(255, 252, 247, 0.78), rgba(255, 252, 247, 0.44)),
        rgba(255, 252, 247, 0.5);
      font-size: 48px;
      box-shadow:
        inset 0 0 0 9px rgba(255, 252, 247, 0.58),
        0 10px 20px rgba(72, 51, 32, 0.08);
    }

    .relationship-orbit span:first-child {
      left: 14px;
      top: 21px;
    }

    .relationship-orbit span:last-child {
      right: 14px;
      top: 21px;
    }

    .relationship-orbit i {
      position: absolute;
      left: 50%;
      top: 50%;
      z-index: 2;
      display: grid;
      place-items: center;
      width: 42px;
      height: 42px;
      border: 2px double rgba(184, 54, 43, 0.72);
      border-radius: 10px;
      transform: translate(-50%, -50%);
      background: rgba(255, 252, 247, 0.92);
    }

    .relationship-orbit i::before {
      content: "合";
      color: var(--seal);
      font-family: var(--serif);
      font-size: 27px;
      font-style: normal;
      font-weight: 800;
      line-height: 1;
    }

    .relationship-score-strip {
      gap: 12px;
    }

    .relationship-score-strip span {
      min-height: 70px;
      border-color: rgba(173, 138, 77, 0.26);
      border-radius: 8px;
      background: rgba(255, 252, 247, 0.58);
    }

    .relationship-score-strip b {
      font-size: 28px;
    }

    .relationship-match-screen.is-people-step .relationship-profile-panel {
      grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1fr);
      gap: 8px;
      align-items: stretch;
      min-height: 0;
      margin: 6px 0 16px;
      padding: 4px 0 12px;
    }

    .relationship-match-screen.is-people-step .relationship-profile-panel::before,
    .relationship-match-screen.is-people-step .relationship-profile-panel::after {
      content: none;
    }

    .relationship-match-screen.is-people-step .relationship-profile-panel .relationship-section-head {
      grid-column: 1 / -1;
      margin-bottom: 4px;
    }

    .relationship-match-screen.is-people-step .relationship-profile-current {
      grid-column: 1;
      animation: relationshipCardSetDown 760ms var(--ease) both;
    }

    .relationship-match-screen.is-people-step .relationship-partner-list {
      grid-column: 3;
      gap: 0;
      border-top: 0;
      animation: relationshipCardSetDown 760ms var(--ease) 110ms both;
    }

    .relationship-profile-drawer {
      grid-column: 1 / -1;
      animation: relationshipInkLineIn 620ms var(--ease) 220ms both;
    }

    .relationship-flow-bridge {
      position: relative;
      z-index: 4;
      display: grid;
      grid-column: 2;
      place-items: center;
      min-height: 226px;
      pointer-events: none;
      animation: relationshipBridgeInk 680ms var(--ease) 120ms both;
    }

    .relationship-flow-bridge::before {
      content: "";
      position: absolute;
      left: -48px;
      right: -48px;
      top: 50%;
      height: 2px;
      border-radius: 999px;
      background:
        linear-gradient(90deg, transparent, rgba(173, 138, 77, 0.32), rgba(184, 54, 43, 0.36), rgba(173, 138, 77, 0.32), transparent);
      background-size: 220% 100%;
      opacity: 0.38;
      transform: translateY(-50%);
      animation: relationshipFlowLight 2800ms linear infinite;
    }

    .relationship-match-screen.has-relationship-partner .relationship-flow-bridge::before {
      opacity: 0.88;
      background:
        linear-gradient(90deg, transparent, rgba(76, 139, 102, 0.5), rgba(184, 54, 43, 0.62), rgba(173, 138, 77, 0.58), transparent);
      background-size: 220% 100%;
    }

    .relationship-flow-bridge i {
      position: relative;
      z-index: 2;
      display: grid;
      place-items: center;
      width: 42px;
      height: 42px;
      border: 2px double rgba(184, 54, 43, 0.72);
      border-radius: 10px;
      background: rgba(255, 252, 247, 0.94);
      color: var(--seal);
      box-shadow:
        0 12px 24px rgba(72, 51, 32, 0.12),
        inset 0 0 0 4px rgba(184, 54, 43, 0.035);
      animation: relationshipCentralSealFloat 3200ms var(--ease) infinite;
    }

    .relationship-flow-bridge i::before {
      content: "合";
      font-family: var(--serif);
      font-size: 27px;
      font-style: normal;
      font-weight: 800;
      line-height: 1;
    }

    .relationship-flow-bridge i::after {
      content: "";
      position: absolute;
      inset: -16px;
      border: 1px solid rgba(173, 138, 77, 0.28);
      border-radius: 50%;
      animation: relationshipSealPulse 2600ms var(--ease) infinite;
    }

    .relationship-match-screen.has-relationship-partner .relationship-flow-bridge i {
      border-color: rgba(184, 54, 43, 0.86);
      box-shadow:
        0 16px 30px rgba(72, 51, 32, 0.16),
        0 0 0 8px rgba(184, 54, 43, 0.055),
        inset 0 0 0 4px rgba(184, 54, 43, 0.05);
    }

    .relationship-match-screen .relationship-mandate-card {
      position: relative;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      min-height: 226px;
      padding: 54px 12px 14px;
      border: 1px solid rgba(173, 138, 77, 0.26);
      border-radius: 9px;
      background:
        linear-gradient(180deg, rgba(255, 252, 247, 0.95), rgba(246, 239, 226, 0.6)),
        radial-gradient(circle at 18% 15%, rgba(173, 138, 77, 0.12), transparent 38%);
      background-size: 100% 100%, 150% 150%;
      box-shadow:
        0 18px 30px rgba(72, 51, 32, 0.1),
        inset 0 0 0 1px rgba(255, 252, 247, 0.68);
      animation: relationshipMandateBreath 4200ms var(--ease) 900ms infinite;
    }

    .relationship-mandate-card::before {
      content: "";
      position: absolute;
      inset: 9px;
      border: 1px solid rgba(173, 138, 77, 0.12);
      border-radius: 7px;
      pointer-events: none;
    }

    .relationship-mandate-card::after {
      content: attr(data-watermark);
      position: absolute;
      right: 10px;
      bottom: -8px;
      color: rgba(173, 138, 77, 0.08);
      font-family: var(--serif);
      font-size: 78px;
      font-weight: 900;
      line-height: 1;
      pointer-events: none;
    }

    .relationship-mandate-card.is-awaiting {
      border-style: dashed;
      background:
        linear-gradient(180deg, rgba(255, 252, 247, 0.74), rgba(246, 239, 226, 0.38)),
        repeating-linear-gradient(-45deg, rgba(173, 138, 77, 0.04) 0 7px, transparent 7px 14px);
      background-size: 100% 100%, 28px 28px;
      animation: relationshipMandateBreath 4200ms var(--ease) 900ms infinite;
    }

    .relationship-mandate-card.is-awaiting::before {
      inset: 9px;
      border-color: rgba(173, 138, 77, 0.14);
      border-radius: 7px;
      background: none;
      transform: none;
      animation: none;
    }

    .relationship-mandate-ribbon {
      position: absolute;
      top: 16px;
      right: 16px;
      z-index: 2;
      min-width: 54px;
      margin: 0;
      padding: 3px 7px;
      border: 1px solid rgba(173, 138, 77, 0.24);
      border-radius: 999px;
      color: rgba(24, 23, 21, 0.46);
      font-size: 10px;
      line-height: 1.2;
      text-align: center;
      animation: relationshipInkLineIn 560ms var(--ease) 160ms both;
    }

    .relationship-mandate-card.has-selection .relationship-mandate-ribbon {
      border-color: rgba(184, 54, 43, 0.26);
      color: var(--seal);
      background: rgba(184, 54, 43, 0.045);
    }

    .relationship-match-screen .relationship-mandate-card .relationship-partner-selected {
      grid-template-columns: 42px minmax(0, 1fr);
      align-items: center;
      min-width: 0;
    }

    .relationship-match-screen .relationship-mandate-card .relationship-profile-mark {
      width: 42px;
      height: 42px;
      border-radius: 50%;
      background:
        radial-gradient(circle at 40% 34%, rgba(255, 252, 247, 0.96), rgba(246, 239, 226, 0.54));
      font-size: 21px;
      box-shadow: inset 0 0 0 5px rgba(173, 138, 77, 0.055);
      animation: relationshipInkPulse 3800ms var(--ease) infinite;
    }

    .relationship-match-screen .relationship-mandate-card .relationship-partner-selected {
      animation: relationshipInkLineIn 620ms var(--ease) 240ms both;
    }

    .relationship-match-screen .relationship-mandate-card .relationship-partner-selected strong {
      display: block;
      overflow: hidden;
      font-size: 16px;
      letter-spacing: 0.02em;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .relationship-match-screen .relationship-mandate-card .relationship-partner-selected em {
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .relationship-mandate-traits,
    .relationship-mandate-placeholder {
      position: relative;
      z-index: 1;
      display: grid;
      gap: 6px;
      margin: 14px 0 0;
      padding: 10px;
      border-top: 1px solid rgba(173, 138, 77, 0.14);
      border-bottom: 1px solid rgba(173, 138, 77, 0.14);
      color: rgba(24, 23, 21, 0.56);
      font-size: 10.5px;
      line-height: 1.35;
      animation: relationshipInkLineIn 620ms var(--ease) 360ms both;
    }

    .relationship-mandate-traits span,
    .relationship-mandate-placeholder span {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .relationship-match-screen .relationship-mandate-card p {
      position: relative;
      z-index: 1;
      display: flex;
      align-items: flex-end;
      min-height: 42px;
      margin: auto 0 0;
      padding-top: 10px;
      color: rgba(24, 23, 21, 0.48);
      font-size: 11px;
      line-height: 1.45;
      text-align: left;
      animation: relationshipInkLineIn 620ms var(--ease) 460ms both;
    }

    .relationship-drawer-actions button {
      min-height: 38px;
      border: 1px solid rgba(184, 54, 43, 0.28);
      border-radius: 999px;
      background:
        linear-gradient(180deg, rgba(255, 252, 247, 0.9), rgba(246, 239, 226, 0.56)),
        rgba(184, 54, 43, 0.05);
      color: var(--seal);
      font-family: var(--serif);
      font-size: 13px;
      font-weight: 900;
      letter-spacing: 0.08em;
      cursor: pointer;
      box-shadow: inset 0 0 0 1px rgba(255, 252, 247, 0.56);
      transition: transform 220ms var(--ease), border-color 220ms var(--ease), background 220ms var(--ease);
    }

    .relationship-drawer-actions button:active {
      transform: scale(0.98);
    }

	    .relationship-profile-drawer-card {
	      position: relative;
	      display: grid;
	      grid-template-columns: minmax(0, 1fr) minmax(180px, 0.82fr);
	      align-items: end;
	      gap: 12px;
	      overflow: hidden;
	      padding: 12px;
	      border: 1px solid rgba(173, 138, 77, 0.22);
	      border-radius: 9px;
	      background:
	        linear-gradient(90deg, rgba(255, 252, 247, 0.96) 0 48%, rgba(255, 252, 247, 0.74) 100%),
	        url("/prototype/assets/relationship-match/invite/generated-v1/relationship-invite-dossier-bg-v1.webp") right center / cover no-repeat;
	      box-shadow: 0 12px 22px rgba(72, 51, 32, 0.06);
	    }

    .relationship-profile-drawer-card::before {
      content: "";
      position: absolute;
      left: 16px;
      right: 16px;
      top: 8px;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(173, 138, 77, 0.28), transparent);
      pointer-events: none;
    }

	    .relationship-profile-drawer-card.has-selection {
	      border-color: rgba(184, 54, 43, 0.22);
	      background:
	        linear-gradient(90deg, rgba(255, 252, 247, 0.97) 0 46%, rgba(255, 252, 247, 0.72) 100%),
	        url("/prototype/assets/relationship-match/invite/generated-v1/relationship-invite-dossier-bg-v1.webp") right center / cover no-repeat;
	    }

    .relationship-profile-drawer-copy {
      display: grid;
      gap: 3px;
      min-width: 0;
    }

    .relationship-profile-drawer-copy span {
      color: var(--gold);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.12em;
    }

    .relationship-profile-drawer-copy strong {
      overflow: hidden;
      font-family: var(--serif);
      font-size: 17px;
      line-height: 1.25;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .relationship-profile-drawer-copy em {
      overflow: hidden;
      color: rgba(24, 23, 21, 0.52);
      font-size: 11px;
      font-style: normal;
      line-height: 1.35;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .relationship-profile-drawer-card .relationship-select-field {
      position: relative;
      z-index: 2;
      gap: 5px;
    }

    .relationship-profile-drawer-card .relationship-select-field > span {
      font-family: var(--serif);
      letter-spacing: 0.08em;
    }

    .relationship-profile-drawer-card .relationship-select-field select {
      min-height: 42px;
      border-radius: 7px;
      background:
        linear-gradient(180deg, rgba(255, 252, 247, 0.98), rgba(255, 252, 247, 0.72));
    }

    .relationship-drawer-actions {
      position: relative;
      z-index: 2;
      grid-column: 1 / -1;
      display: grid;
      grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr);
      align-items: center;
      gap: 10px;
      padding-top: 8px;
      border-top: 1px solid rgba(173, 138, 77, 0.14);
    }

    .relationship-drawer-actions small {
      color: rgba(24, 23, 21, 0.48);
      font-size: 11px;
      line-height: 1.45;
    }

    .relationship-match-screen.is-people-step .relationship-report-shell {
      order: 3;
    }

    .relationship-invite-overlay {
      position: fixed;
      inset: 0;
      z-index: 90;
      display: grid;
      place-items: center;
      padding: max(18px, env(safe-area-inset-top)) 18px max(22px, env(safe-area-inset-bottom));
      animation: relationshipShareIn 180ms var(--ease) both;
    }

    .relationship-invite-scrim {
      position: absolute;
      inset: 0;
      border: 0;
      background:
        radial-gradient(circle at 50% 30%, rgba(255, 252, 247, 0.18), transparent 42%),
        rgba(24, 20, 16, 0.42);
      backdrop-filter: blur(7px);
      cursor: pointer;
    }

    .relationship-invite-dialog {
      position: relative;
      z-index: 1;
      width: min(430px, 100%);
      max-height: min(78vh, 760px);
      overflow: auto;
      border-radius: 16px;
      filter: drop-shadow(0 24px 60px rgba(27, 21, 14, 0.26));
      scrollbar-width: none;
    }

    .relationship-invite-dialog::-webkit-scrollbar {
      display: none;
    }

	    .relationship-invite-card {
	      position: relative;
	      display: grid;
	      grid-template-columns: 44px minmax(0, 1fr);
	      gap: 12px;
	      overflow: hidden;
	      margin-top: 2px;
	      padding: 20px 18px;
	      border: 1px solid rgba(173, 138, 77, 0.22);
	      border-radius: 16px;
	      background:
	        linear-gradient(180deg, rgba(255, 252, 247, 0.92), rgba(255, 252, 247, 0.74)),
	        url("/prototype/assets/relationship-match/invite/generated-v1/relationship-invite-modal-bg-v1.webp") center / cover no-repeat;
	      box-shadow: 0 18px 40px rgba(72, 51, 32, 0.12);
	      animation: relationshipInviteOpen 420ms var(--ease) both;
	    }

    .relationship-invite-dialog .relationship-invite-card {
      margin: 0;
      border-radius: 16px;
    }

    .relationship-invite-card::before {
      content: none;
    }

    .relationship-invite-seal {
      position: relative;
      z-index: 1;
      display: grid;
      place-items: center;
      width: 40px;
      height: 40px;
      border: 1px solid rgba(184, 54, 43, 0.42);
      border-radius: 8px;
      color: var(--seal);
      font-family: var(--serif);
      font-size: 21px;
      font-weight: 800;
      box-shadow: inset 0 0 0 4px rgba(184, 54, 43, 0.04);
      animation: relationshipInkPulse 3200ms var(--ease) infinite;
    }

    .relationship-invite-card small {
      color: var(--gold);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.08em;
    }

    .relationship-invite-card h3 {
      margin: 3px 0 5px;
      font-family: var(--serif);
      font-size: 18px;
      line-height: 1.28;
      letter-spacing: 0.04em;
    }

    .relationship-invite-card p {
      margin: 0;
      color: rgba(24, 23, 21, 0.58);
      font-size: 12px;
      line-height: 1.65;
      text-align: left;
    }

    .relationship-invite-privacy,
    .relationship-invite-actions {
      position: relative;
      z-index: 1;
      grid-column: 1 / -1;
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .relationship-invite-privacy span {
      padding: 5px 8px;
      border: 1px solid rgba(173, 138, 77, 0.18);
      border-radius: 999px;
      background: rgba(255, 252, 247, 0.54);
      color: rgba(24, 23, 21, 0.52);
      font-size: 10.5px;
      line-height: 1.2;
    }

    .relationship-invite-actions {
      justify-content: flex-end;
      padding-top: 2px;
    }

    .relationship-invite-actions button {
      min-height: 34px;
      padding: 0 12px;
      border: 1px solid rgba(173, 138, 77, 0.28);
      border-radius: 8px;
      background: rgba(255, 252, 247, 0.62);
      color: rgba(24, 23, 21, 0.68);
      cursor: pointer;
      transition: transform 220ms var(--ease), border-color 220ms var(--ease), color 220ms var(--ease), background 220ms var(--ease);
    }

    .relationship-invite-actions button:first-child {
      border-color: rgba(184, 54, 43, 0.3);
      background: rgba(184, 54, 43, 0.065);
      color: var(--seal);
    }

    .relationship-invite-actions button:active {
      transform: scale(0.98);
    }

	    .relationship-invite-card.has-link,
	    .relationship-invite-card.is-authorized {
	      grid-template-columns: 48px minmax(0, 1fr);
	      gap: 14px;
	      padding: 22px 18px 18px;
	      border-color: rgba(173, 138, 77, 0.28);
	      background:
	        linear-gradient(180deg, rgba(255, 252, 247, 0.9), rgba(255, 252, 247, 0.7)),
	        url("/prototype/assets/relationship-match/invite/generated-v1/relationship-invite-modal-bg-v1.webp") center / cover no-repeat;
	    }

	    .relationship-invite-card.is-authorized {
	      border-color: rgba(77, 132, 91, 0.28);
	      background:
	        linear-gradient(180deg, rgba(255, 252, 247, 0.92), rgba(246, 250, 244, 0.7)),
	        url("/prototype/assets/relationship-match/invite/generated-v1/relationship-invite-modal-bg-v1.webp") center / cover no-repeat;
	    }

    .relationship-invite-main {
      position: relative;
      z-index: 1;
      min-width: 0;
    }

    .relationship-invite-demo-warning {
      position: relative;
      z-index: 1;
      grid-column: 1 / -1;
      display: grid;
      gap: 3px;
      padding: 9px 10px;
      border: 1px solid rgba(184, 54, 43, 0.34);
      border-radius: 8px;
      background: rgba(184, 54, 43, 0.085);
      color: rgba(123, 34, 27, 0.86);
    }

    .relationship-invite-demo-warning strong {
      font-size: 12px;
      line-height: 1.25;
    }

    .relationship-invite-demo-warning span {
      font-size: 11px;
      line-height: 1.45;
    }

    .relationship-invite-timeline {
      position: relative;
      z-index: 1;
      grid-column: 1 / -1;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
      padding: 8px 0 2px;
    }

    .relationship-invite-timeline span {
      display: grid;
      justify-items: center;
      gap: 5px;
      min-width: 0;
      color: rgba(24, 23, 21, 0.45);
      font-size: 11px;
      line-height: 1.2;
      text-align: center;
    }

    .relationship-invite-timeline i {
      display: grid;
      width: 24px;
      height: 24px;
      place-items: center;
      border: 1px solid rgba(173, 138, 77, 0.22);
      border-radius: 50%;
      background: rgba(255, 252, 247, 0.72);
      color: rgba(113, 93, 62, 0.58);
      font-family: var(--serif);
      font-style: normal;
      font-weight: 800;
    }

    .relationship-invite-timeline b {
      overflow: hidden;
      max-width: 100%;
      font-weight: 700;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .relationship-invite-timeline span.is-done {
      color: rgba(123, 34, 27, 0.78);
    }

    .relationship-invite-timeline span.is-done i {
      border-color: rgba(184, 54, 43, 0.34);
      background: rgba(184, 54, 43, 0.08);
      color: var(--seal);
    }

    .relationship-invite-link-sheet {
      position: relative;
      z-index: 1;
      grid-column: 1 / -1;
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      align-items: center;
      gap: 12px;
      min-height: 64px;
      padding: 10px 12px;
      border-top: 1px solid rgba(173, 138, 77, 0.18);
      border-bottom: 1px solid rgba(173, 138, 77, 0.14);
      background:
        linear-gradient(90deg, rgba(255, 252, 247, 0.72), rgba(255, 252, 247, 0.34));
    }

    .relationship-invite-link-sheet .relationship-qr-mark {
      width: 46px;
      height: 46px;
      background: rgba(255, 252, 247, 0.86);
      box-shadow: 0 8px 18px rgba(72, 51, 32, 0.08);
    }

    .relationship-invite-link-sheet div {
      display: grid;
      gap: 2px;
      min-width: 0;
    }

    .relationship-invite-link-sheet strong {
      overflow: hidden;
      color: rgba(24, 23, 21, 0.78);
      font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
      font-size: 12px;
      font-weight: 700;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .relationship-invite-link-sheet em {
      color: rgba(24, 23, 21, 0.48);
      font-size: 11px;
      font-style: normal;
      line-height: 1.45;
    }

    .relationship-invite-poster-layer {
      position: fixed;
      inset: 0;
      z-index: 3;
      display: grid;
      place-items: center;
      padding: max(18px, env(safe-area-inset-top)) 18px max(22px, env(safe-area-inset-bottom));
    }

    .relationship-invite-poster-scrim {
      position: absolute;
      inset: 0;
      border: 0;
      background: rgba(16, 13, 11, 0.48);
      backdrop-filter: blur(8px);
      cursor: pointer;
    }

	    .relationship-invite-poster {
	      position: relative;
	      z-index: 1;
	      display: grid;
	      gap: 12px;
	      width: min(315px, 88vw);
	      aspect-ratio: 9 / 16;
	      overflow: hidden;
	      padding: 28px 26px 26px;
	      border: 1px solid rgba(173, 138, 77, 0.22);
	      border-radius: 16px;
	      background:
	        linear-gradient(180deg, rgba(255, 252, 247, 0.72), rgba(255, 252, 247, 0.2)),
	        url("/prototype/assets/relationship-match/invite/generated-v1/relationship-invite-poster-bg-v2-light.webp") center / cover no-repeat;
	      color: var(--ink);
	      box-shadow: 0 24px 60px rgba(72, 51, 32, 0.2);
	      animation: relationshipShareIn 240ms var(--ease) both;
	    }

	    .relationship-invite-poster::before,
	    .relationship-invite-poster::after {
	      content: "";
	      position: absolute;
	      inset: 14px;
	      border: 1px solid rgba(173, 138, 77, 0.12);
	      border-radius: 12px;
	      pointer-events: none;
	    }

	    .relationship-invite-poster::after {
	      inset: auto 20px 92px;
	      height: 1px;
	      border: 0;
	      background: linear-gradient(90deg, transparent, rgba(173, 138, 77, 0.32), transparent);
	      opacity: 0.9;
	    }

    .relationship-invite-poster header,
    .relationship-invite-poster section,
    .relationship-invite-poster footer {
      position: relative;
      z-index: 1;
    }

	    .relationship-invite-poster header {
	      display: flex;
	      justify-content: space-between;
	      align-items: center;
	      color: rgba(113, 93, 62, 0.76);
	      font-family: var(--serif);
	      letter-spacing: 0.12em;
	    }

    .relationship-invite-poster header b {
      display: grid;
      width: 42px;
	      height: 42px;
	      place-items: center;
	      border: 1px solid rgba(184, 54, 43, 0.34);
	      border-radius: 50%;
	      background: rgba(255, 252, 247, 0.58);
	      color: var(--seal);
	      font-size: 15px;
	      letter-spacing: 0.02em;
	    }

	    .relationship-invite-poster-mark {
	      position: relative;
	      z-index: 1;
	      display: grid;
	      place-items: center;
	      min-height: 132px;
	      margin-top: 2px;
	    }

	    .relationship-invite-poster-mark span {
	      display: grid;
	      width: 74px;
	      height: 74px;
	      place-items: center;
	      border: 2px double rgba(184, 54, 43, 0.56);
	      border-radius: 18px;
	      background:
	        radial-gradient(circle at 50% 50%, rgba(255, 252, 247, 0.94), rgba(255, 252, 247, 0.64)),
	        rgba(184, 54, 43, 0.045);
	      color: var(--seal);
	      font-family: var(--serif);
	      font-size: 42px;
	      font-weight: 900;
	      line-height: 1;
	      box-shadow:
	        0 12px 28px rgba(184, 54, 43, 0.12),
	        0 0 0 10px rgba(184, 54, 43, 0.035);
	    }

	    .relationship-invite-poster section {
	      display: grid;
	      gap: 8px;
	      align-self: center;
	      margin-top: 18px;
	      text-align: center;
	    }

	    .relationship-invite-poster section small {
	      color: var(--seal);
	      font-weight: 700;
	      letter-spacing: 0.12em;
	    }

    .relationship-invite-poster section h2 {
      margin: 0;
	      font-family: var(--serif);
	      font-size: 32px;
	      line-height: 1.08;
	      letter-spacing: 0.06em;
	    }

	    .relationship-invite-poster section p {
	      margin: 0;
	      color: rgba(24, 23, 21, 0.6);
	      font-size: 12px;
	      line-height: 1.7;
	      text-align: left;
	    }

	    .relationship-invite-poster footer {
	      display: grid;
	      grid-template-columns: 64px minmax(0, 1fr);
	      align-items: center;
	      gap: 12px;
	      margin-top: auto;
	      padding: 12px;
	      border: 1px solid rgba(173, 138, 77, 0.16);
	      border-radius: 12px;
	      background: rgba(255, 252, 247, 0.62);
	    }

	    .relationship-invite-poster footer .relationship-qr-image-wrap,
	    .relationship-invite-poster footer .relationship-qr-mark {
	      width: 62px;
	      height: 62px;
	      background: #fffaf2;
	      box-shadow: 0 10px 24px rgba(72, 51, 32, 0.12);
	    }

	    .relationship-qr-image-wrap {
	      position: relative;
	      display: block;
	      overflow: hidden;
	      border-radius: 8px;
	      background: #fffaf2;
	    }

	    .relationship-qr-image-wrap .relationship-qr-mark {
	      position: absolute;
	      inset: 0;
	      z-index: 1;
	      width: 100%;
	      height: 100%;
	      box-sizing: border-box;
	      opacity: 1;
	      transition: opacity 180ms var(--ease);
	    }

	    .relationship-qr-image-wrap.is-loaded .relationship-qr-mark {
	      opacity: 0;
	    }

	    .relationship-invite-poster footer .relationship-qr-image {
	      display: block;
	      position: relative;
	      z-index: 2;
	      width: 100%;
	      height: 100%;
	      border: 6px solid #fffaf2;
	      border-radius: 8px;
	      background: #fffaf2;
	      object-fit: cover;
	      opacity: 0;
	      box-shadow: 0 10px 24px rgba(72, 51, 32, 0.12);
	    }

	    .relationship-qr-image-wrap.is-loaded .relationship-qr-image {
	      opacity: 1;
	    }

    .relationship-invite-poster footer div {
      display: grid;
      gap: 4px;
      min-width: 0;
    }

	    .relationship-invite-poster footer strong {
	      color: rgba(24, 23, 21, 0.82);
	      font-family: var(--serif);
	      font-size: 16px;
	      letter-spacing: 0.04em;
	    }

	    .relationship-invite-poster footer small {
	      overflow: hidden;
	      color: rgba(24, 23, 21, 0.48);
	      font-size: 11px;
	      text-overflow: ellipsis;
	      white-space: nowrap;
	    }

    .relationship-invite-poster-actions {
      position: relative;
      z-index: 1;
      display: flex;
      justify-content: center;
      gap: 10px;
      margin-top: 14px;
    }

	    .relationship-invite-poster-actions button {
	      min-height: 38px;
	      padding: 0 16px;
	      border: 1px solid rgba(173, 138, 77, 0.28);
	      border-radius: 999px;
	      background: rgba(255, 252, 247, 0.84);
	      color: rgba(24, 23, 21, 0.72);
	      cursor: pointer;
	    }

	    .relationship-invite-poster-actions button.primary {
	      border-color: rgba(123, 34, 27, 0.42);
	      background: linear-gradient(180deg, #b83a2d, #8f241b);
	      color: #fffaf1;
      font-family: var(--serif);
      font-weight: 900;
    }

    .relationship-invite-guest {
      position: relative;
      z-index: 1;
      grid-column: 1 / -1;
      display: grid;
      gap: 12px;
      padding: 14px;
      border: 1px solid rgba(173, 138, 77, 0.18);
      border-radius: 12px;
      background:
        radial-gradient(circle at 88% 16%, rgba(173, 138, 77, 0.1), transparent 32%),
        rgba(255, 252, 247, 0.58);
    }

    .relationship-invite-guest-head {
      display: grid;
      grid-template-columns: 36px minmax(0, 1fr);
      align-items: center;
      gap: 10px;
    }

    .relationship-invite-seal.is-small {
      width: 34px;
      height: 34px;
      border-radius: 8px;
      font-size: 18px;
      animation: none;
    }

    .relationship-invite-guest-head div {
      display: grid;
      gap: 2px;
      min-width: 0;
    }

    .relationship-invite-guest-head strong {
      font-family: var(--serif);
      font-size: 18px;
      letter-spacing: 0.04em;
    }

    .relationship-invite-form-preview {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
    }

    .relationship-invite-form-preview label {
      display: grid;
      gap: 4px;
      min-height: 58px;
      padding: 10px;
      border: 1px solid rgba(173, 138, 77, 0.15);
      border-radius: 10px;
      background: rgba(255, 252, 247, 0.62);
    }

    .relationship-invite-form-preview span {
      color: rgba(24, 23, 21, 0.76);
      font-family: var(--serif);
      font-size: 15px;
      font-weight: 800;
    }

    .relationship-invite-form-preview b {
      color: rgba(24, 23, 21, 0.44);
      font-size: 11px;
      font-weight: 600;
      line-height: 1.35;
    }

    .relationship-invite-guest > button.primary,
    .relationship-invite-actions button.primary {
      border-color: rgba(123, 34, 27, 0.46);
      background: linear-gradient(180deg, #b83a2d, #8f241b);
      color: #fffaf1;
      font-family: var(--serif);
      font-weight: 900;
    }

    .relationship-invite-guest > button.primary {
      min-height: 40px;
      border-radius: 10px;
      cursor: pointer;
    }

    .relationship-invite-card.is-authorized .relationship-invite-seal {
      border-color: rgba(77, 132, 91, 0.38);
      color: #4d845b;
      box-shadow: inset 0 0 0 4px rgba(77, 132, 91, 0.06);
    }

    .relationship-invite-card.is-authorized .relationship-invite-timeline span.is-done {
      color: rgba(77, 132, 91, 0.84);
    }

    .relationship-invite-card.is-authorized .relationship-invite-timeline span.is-done i {
      border-color: rgba(77, 132, 91, 0.34);
      background: rgba(77, 132, 91, 0.08);
      color: #4d845b;
    }

	    .relationship-invite-screen {
	      min-height: 100%;
	      padding-bottom: 28px;
	      background:
	        linear-gradient(180deg, rgba(255, 252, 247, 0.92), rgba(255, 252, 247, 0.78)),
	        url("/prototype/assets/relationship-match/invite/generated-v1/relationship-invite-fill-bg-v1.webp") center top / cover no-repeat;
	    }

    .relationship-invite-page-head {
      display: grid;
      grid-template-columns: 52px minmax(0, 1fr) 52px;
      align-items: center;
      gap: 12px;
      padding: 30px 26px 16px;
    }

    .relationship-invite-page-head .page-title {
      text-align: center;
    }

    .relationship-invite-page-stamp {
      display: grid;
      width: 44px;
      height: 44px;
      place-items: center;
      justify-self: end;
      border: 1px solid rgba(184, 54, 43, 0.34);
      border-radius: 50%;
      color: var(--seal);
      font-family: var(--serif);
      font-size: 18px;
      font-weight: 900;
      box-shadow: inset 0 0 0 6px rgba(184, 54, 43, 0.04);
    }

    .relationship-invite-landing {
      display: grid;
      gap: 18px;
      padding: 0 28px 30px;
    }

	    .relationship-invite-scroll,
	    .relationship-invite-form,
	    .relationship-invite-success-card {
	      position: relative;
	      overflow: hidden;
	      border: 1px solid rgba(173, 138, 77, 0.18);
	      border-radius: 14px;
	      background:
	        linear-gradient(180deg, rgba(255, 252, 247, 0.84), rgba(255, 252, 247, 0.62));
	      box-shadow: 0 14px 34px rgba(72, 51, 32, 0.07);
	    }

    .relationship-invite-scroll {
      display: grid;
      gap: 8px;
      min-height: 190px;
      padding: 28px 26px;
    }

	    .relationship-invite-scroll::before {
	      content: "";
	      position: absolute;
	      right: -18px;
	      bottom: -20px;
	      width: 220px;
	      height: 154px;
	      background: url("/prototype/assets/relationship-match/invite/generated-v1/relationship-invite-dossier-bg-v1.webp") right bottom / 280px auto no-repeat;
	      opacity: 0.42;
	      mix-blend-mode: multiply;
	      pointer-events: none;
	    }

    .relationship-invite-scroll small,
    .relationship-invite-form label span,
    .relationship-invite-consent b {
      color: var(--gold);
      font-weight: 800;
      letter-spacing: 0.12em;
    }

    .relationship-invite-scroll h2 {
      position: relative;
      z-index: 1;
      margin: 0;
      font-family: var(--serif);
      font-size: 34px;
      line-height: 1.18;
      letter-spacing: 0.04em;
    }

    .relationship-invite-scroll p {
      position: relative;
      z-index: 1;
      max-width: 24em;
      margin: 0;
      color: rgba(24, 23, 21, 0.58);
      font-size: 14px;
      line-height: 1.8;
    }

    .relationship-invite-scroll-line {
      position: relative;
      z-index: 1;
      display: flex;
      align-items: center;
      gap: 8px;
      margin-top: 8px;
      color: rgba(173, 138, 77, 0.52);
    }

    .relationship-invite-scroll-line::before,
    .relationship-invite-scroll-line::after {
      content: "";
      width: 54px;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(173, 138, 77, 0.44));
    }

    .relationship-invite-scroll-line::after {
      background: linear-gradient(90deg, rgba(173, 138, 77, 0.44), transparent);
    }

    .relationship-invite-scroll-line i {
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: currentColor;
    }

    .relationship-invite-form {
      display: grid;
      gap: 14px;
      padding: 18px;
    }

    .relationship-invite-form label {
      display: grid;
      gap: 7px;
      min-width: 0;
    }

    .relationship-invite-form input,
    .relationship-invite-form select {
      width: 100%;
      min-height: 48px;
      box-sizing: border-box;
      border: 1px solid rgba(173, 138, 77, 0.24);
      border-radius: 10px;
      background: rgba(255, 252, 247, 0.82);
      color: rgba(24, 23, 21, 0.82);
      font-size: 16px;
      padding: 0 14px;
      outline: none;
      box-shadow: inset 0 0 0 1px rgba(255, 252, 247, 0.42);
    }

    .relationship-invite-form input:focus,
    .relationship-invite-form select:focus {
      border-color: rgba(184, 54, 43, 0.36);
      box-shadow: 0 0 0 3px rgba(184, 54, 43, 0.08);
    }

    .relationship-invite-form label em {
      color: rgba(24, 23, 21, 0.46);
      font-size: 11px;
      font-style: normal;
      line-height: 1.45;
    }

    .relationship-invite-gender {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }

    .relationship-invite-gender button {
      min-height: 44px;
      border: 1px solid rgba(173, 138, 77, 0.22);
      border-radius: 999px;
      background: rgba(255, 252, 247, 0.7);
      color: rgba(24, 23, 21, 0.62);
      font-family: var(--serif);
      font-size: 17px;
      font-weight: 900;
      cursor: pointer;
    }

    .relationship-invite-gender button.active {
      border-color: rgba(184, 54, 43, 0.38);
      background: rgba(184, 54, 43, 0.08);
      color: var(--seal);
    }

    .relationship-invite-consent {
      display: grid;
      gap: 5px;
      padding: 12px;
      border-top: 1px solid rgba(173, 138, 77, 0.16);
      border-bottom: 1px solid rgba(173, 138, 77, 0.12);
      background: rgba(255, 252, 247, 0.38);
    }

    .relationship-invite-consent p {
      margin: 0;
      color: rgba(24, 23, 21, 0.54);
      font-size: 12px;
      line-height: 1.65;
    }

    .relationship-invite-form > button.primary,
    .relationship-invite-success-card button.primary {
      min-height: 50px;
      border: 1px solid rgba(123, 34, 27, 0.38);
      border-radius: 11px;
      background: linear-gradient(180deg, #b83a2d, #8f241b);
      color: #fffaf1;
      font-family: var(--serif);
      font-size: 18px;
      font-weight: 900;
      letter-spacing: 0.08em;
      cursor: pointer;
      box-shadow: 0 14px 26px rgba(123, 34, 27, 0.14);
    }

    .relationship-invite-form > button.primary:disabled {
      opacity: 0.58;
      cursor: wait;
    }

    .relationship-invite-success-card {
      display: grid;
      justify-items: center;
      gap: 10px;
      padding: 26px 18px;
      text-align: center;
    }

    .relationship-invite-success-card span {
      display: grid;
      width: 54px;
      height: 54px;
      place-items: center;
      border: 1px solid rgba(77, 132, 91, 0.34);
      border-radius: 50%;
      color: #4d845b;
      font-family: var(--serif);
      font-size: 28px;
      font-weight: 900;
      box-shadow: inset 0 0 0 8px rgba(77, 132, 91, 0.06);
    }

    .relationship-invite-success-card h3 {
      margin: 0;
      font-family: var(--serif);
      font-size: 24px;
    }

    .relationship-invite-success-card p {
      max-width: 24em;
      margin: 0;
      color: rgba(24, 23, 21, 0.56);
      line-height: 1.7;
    }

    @media (max-width: 520px) {
      .relationship-drawer-actions {
        grid-template-columns: 1fr;
      }

      .relationship-invite-overlay {
        align-items: end;
        padding-inline: 12px;
      }

      .relationship-invite-dialog {
        max-height: min(84vh, 760px);
      }

      .relationship-invite-dialog .relationship-invite-card {
        border-radius: 14px;
      }

      .relationship-invite-form-preview {
        grid-template-columns: 1fr;
      }

      .relationship-invite-actions {
        justify-content: stretch;
      }

      .relationship-invite-actions button {
        flex: 1 1 auto;
      }

      .relationship-invite-poster-layer {
        align-items: end;
        padding-inline: 12px;
      }

      .relationship-invite-poster {
        width: min(300px, 92vw);
      }

      .relationship-invite-page-head {
        grid-template-columns: 48px minmax(0, 1fr) 48px;
        padding-inline: 18px;
      }

      .relationship-invite-landing {
        padding-inline: 18px;
      }

      .relationship-invite-scroll h2 {
        font-size: 30px;
      }
    }

    @keyframes relationshipCardRise {
      from {
        opacity: 0;
        transform: translateY(14px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @keyframes relationshipCardSetDown {
      0% {
        opacity: 0;
        transform: translateY(20px) scale(0.985);
        filter: blur(2px);
      }
      58% {
        opacity: 1;
        transform: translateY(-3px) scale(1.006);
        filter: blur(0);
      }
      100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
      }
    }

    @keyframes relationshipBridgeInk {
      from {
        opacity: 0;
        transform: scaleX(0.82);
      }
      to {
        opacity: 1;
        transform: scaleX(1);
      }
    }

    @keyframes relationshipCentralSealFloat {
      0%, 100% {
        transform: translateY(0) scale(1);
      }
      50% {
        transform: translateY(-3px) scale(1.035);
      }
    }

    @keyframes relationshipFlowLight {
      from {
        background-position: 100% 50%;
      }
      to {
        background-position: -100% 50%;
      }
    }

    @keyframes relationshipSealPulse {
      0%, 100% {
        opacity: 0.28;
        transform: scale(0.86);
      }
      50% {
        opacity: 0.86;
        transform: scale(1.16);
      }
    }

    @keyframes relationshipMandateBreath {
      0%, 100% {
        box-shadow:
          0 18px 30px rgba(72, 51, 32, 0.1),
          inset 0 0 0 1px rgba(255, 252, 247, 0.68);
        filter: saturate(1);
      }
      50% {
        box-shadow:
          0 22px 38px rgba(72, 51, 32, 0.14),
          0 0 0 4px rgba(173, 138, 77, 0.035),
          inset 0 0 0 1px rgba(255, 252, 247, 0.78);
        filter: saturate(1.04);
      }
    }

    @keyframes relationshipInkLineIn {
      from {
        opacity: 0;
        transform: translateY(7px);
        filter: blur(1.5px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
      }
    }

    @keyframes relationshipInkPulse {
      0%, 100% {
        box-shadow:
          inset 0 0 0 5px rgba(173, 138, 77, 0.055),
          0 0 0 0 rgba(184, 54, 43, 0);
      }
      50% {
        box-shadow:
          inset 0 0 0 5px rgba(173, 138, 77, 0.08),
          0 0 0 5px rgba(184, 54, 43, 0.055);
      }
    }

    @keyframes relationshipInviteOpen {
      from {
        opacity: 0;
        transform: translateY(10px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @media (max-width: 430px) {
      .relationship-match-screen.is-people-step .relationship-profile-panel {
        grid-template-columns: 1fr;
        gap: 10px;
      }

      .relationship-match-screen.is-people-step .relationship-profile-current,
      .relationship-flow-bridge,
      .relationship-match-screen.is-people-step .relationship-partner-list,
      .relationship-profile-drawer {
        grid-column: 1;
      }

      .relationship-flow-bridge {
        min-height: 58px;
      }

      .relationship-flow-bridge::before {
        left: 50%;
        right: auto;
        top: -12px;
        bottom: -12px;
        width: 2px;
        height: auto;
        transform: translateX(-50%);
      }

      .relationship-mandate-card {
        min-height: 198px;
      }

      .relationship-profile-drawer-card {
        grid-template-columns: 1fr;
        align-items: stretch;
      }
    }

    @media (max-width: 374px) {
      .relationship-category-tabs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .relationship-match-screen.is-people-step .relationship-profile-panel {
        grid-template-columns: 1fr;
        gap: 10px;
      }

      .relationship-match-screen.is-people-step .relationship-profile-panel::before,
      .relationship-match-screen.is-people-step .relationship-profile-panel::after {
        content: none;
      }
    }

    .relationship-energy-card {
      position: relative;
      display: grid;
      gap: 12px;
      overflow: hidden;
      padding: 14px;
      border: 1px solid rgba(113, 93, 62, 0.18);
      border-radius: 14px;
      background:
        radial-gradient(circle at 24% 12%, color-mix(in srgb, var(--left-color) 18%, transparent), transparent 34%),
        radial-gradient(circle at 78% 14%, color-mix(in srgb, var(--right-color) 18%, transparent), transparent 35%),
        radial-gradient(circle at 50% 36%, rgba(232, 197, 116, 0.18), transparent 35%),
        linear-gradient(180deg, rgba(42, 37, 31, 0.98), rgba(28, 26, 23, 0.97) 56%, rgba(34, 28, 24, 0.98));
      box-shadow: 0 18px 46px rgba(54, 44, 32, 0.18);
      isolation: isolate;
    }

    .relationship-energy-card::before {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background-image:
        linear-gradient(rgba(232, 197, 116, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(232, 197, 116, 0.05) 1px, transparent 1px);
      background-size: 34px 34px;
      mask-image: linear-gradient(180deg, #000, transparent 72%);
      opacity: 0.52;
      z-index: -1;
    }

    .relationship-energy-card::after {
      content: "";
      position: absolute;
      inset: auto -22% -28% -22%;
      height: 48%;
      pointer-events: none;
      background:
        radial-gradient(ellipse at 50% 0%, rgba(232, 197, 116, 0.2), transparent 62%),
        radial-gradient(ellipse at 24% 34%, color-mix(in srgb, var(--left-color) 14%, transparent), transparent 46%),
        radial-gradient(ellipse at 76% 34%, color-mix(in srgb, var(--right-color) 14%, transparent), transparent 46%);
      opacity: 0.78;
      z-index: -1;
    }

    .relationship-energy-stage {
      position: relative;
      min-height: 388px;
      border: 1px solid rgba(232, 197, 116, 0.12);
      border-radius: 12px;
      background:
        radial-gradient(circle at 50% 55%, rgba(232, 197, 116, 0.12), transparent 34%),
        radial-gradient(circle at 30% 52%, color-mix(in srgb, var(--left-color) 20%, transparent), transparent 30%),
        radial-gradient(circle at 70% 52%, color-mix(in srgb, var(--right-color) 20%, transparent), transparent 30%),
        linear-gradient(180deg, hsl(240 20% 8% / 0.98), hsl(230 18% 7% / 0.98));
      box-shadow:
        inset 0 0 0 1px rgba(255, 250, 241, 0.03),
        inset 0 -46px 64px rgba(12, 10, 9, 0.22);
    }

    .relationship-energy-canvas {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      border-radius: inherit;
      pointer-events: none;
      touch-action: auto;
      z-index: 3;
    }

    .relationship-energy-figure {
      position: absolute;
      bottom: 42px;
      height: 68%;
      max-width: 40%;
      object-fit: contain;
      object-position: center bottom;
      opacity: 0.78;
      filter:
        drop-shadow(0 0 10px rgba(232, 197, 116, 0.1))
        drop-shadow(0 10px 16px rgba(0, 0, 0, 0.24));
      pointer-events: none;
      z-index: 2;
    }

    .relationship-energy-figure.is-left {
      left: 18px;
    }

    .relationship-energy-figure.is-right {
      right: 18px;
    }

    .relationship-energy-figure[data-figure="female"] {
      height: 66%;
      max-width: 43%;
    }

    .relationship-energy-figure[data-figure="child"] {
      bottom: 52px;
      height: 50%;
      max-width: 31%;
      opacity: 0.82;
    }

    .relationship-energy-figure[data-figure="pet"] {
      right: 34px;
      bottom: 58px;
      height: 34%;
      max-width: 29%;
      opacity: 0.86;
    }

    .relationship-energy-name {
      position: absolute;
      top: 22px;
      display: grid;
      justify-items: center;
      gap: 6px;
      width: 72px;
      color: rgba(255, 250, 241, 0.82);
      text-align: center;
      pointer-events: none;
    }

    .relationship-energy-name.is-left {
      left: 22px;
    }

    .relationship-energy-name.is-right {
      right: 22px;
    }

    .relationship-energy-name span {
      display: grid;
      place-items: center;
      width: 48px;
      height: 48px;
      border: 1px solid rgba(232, 197, 116, 0.34);
      border-radius: 50%;
      background: rgba(255, 250, 241, 0.08);
      font-family: var(--serif);
      font-size: 25px;
      font-weight: 900;
      box-shadow: inset 0 0 18px color-mix(in srgb, var(--left-color) 22%, transparent);
    }

    .relationship-energy-name.is-left span {
      border-color: color-mix(in srgb, var(--left-color) 58%, rgba(232, 197, 116, 0.28));
      background:
        radial-gradient(circle at 45% 38%, rgba(255, 250, 241, 0.9), color-mix(in srgb, var(--left-color) 22%, rgba(18, 16, 14, 0.1)) 72%),
        rgba(255, 250, 241, 0.08);
      color: var(--left-color);
      text-shadow: 0 1px 0 rgba(255, 250, 241, 0.26);
    }

    .relationship-energy-name.is-right span {
      border-color: color-mix(in srgb, var(--right-color) 58%, rgba(232, 197, 116, 0.28));
      background:
        radial-gradient(circle at 45% 38%, rgba(255, 250, 241, 0.9), color-mix(in srgb, var(--right-color) 22%, rgba(18, 16, 14, 0.1)) 72%),
        rgba(255, 250, 241, 0.08);
      color: var(--right-color);
      text-shadow: 0 1px 0 rgba(255, 250, 241, 0.26);
      box-shadow: inset 0 0 18px color-mix(in srgb, var(--right-color) 22%, transparent);
    }

    .relationship-energy-name small {
      overflow: hidden;
      max-width: 100%;
      font-size: 11px;
      letter-spacing: 0.08em;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .relationship-fusion-seal {
      position: absolute;
      left: 50%;
      top: 50%;
      display: grid;
      place-items: center;
      width: 48px;
      height: 48px;
      border: 1px solid rgba(232, 197, 116, 0.42);
      border-radius: 16px;
      background:
        radial-gradient(circle, rgba(255, 250, 241, 0.86), rgba(232, 197, 116, 0.1)),
        rgba(255, 252, 247, 0.76);
      color: var(--seal);
      font-family: var(--serif);
      font-size: 27px;
      font-style: normal;
      font-weight: 900;
      transform: translate(-50%, -50%);
      box-shadow:
        0 0 0 10px rgba(232, 197, 116, 0.045),
        0 10px 26px rgba(0, 0, 0, 0.16);
      animation: none;
    }

    .relationship-energy-element-map {
      position: absolute;
      left: 50%;
      bottom: 14px;
      display: grid;
      grid-template-columns: auto repeat(5, auto);
      align-items: center;
      gap: 8px;
      max-width: calc(100% - 28px);
      padding: 8px 10px;
      border: 1px solid rgba(232, 197, 116, 0.16);
      border-radius: 999px;
      background: rgba(18, 16, 14, 0.34);
      box-shadow:
        inset 0 1px 0 rgba(255, 250, 241, 0.05),
        0 10px 22px rgba(0, 0, 0, 0.12);
      transform: translateX(-50%);
      backdrop-filter: blur(10px);
      pointer-events: none;
    }

    .relationship-energy-element-map small {
      color: rgba(255, 250, 241, 0.58);
      font-family: var(--serif);
      font-size: 10px;
      font-weight: 800;
      letter-spacing: 0.12em;
      white-space: nowrap;
    }

    .relationship-energy-element-map span {
      display: inline-grid;
      grid-template-columns: auto auto;
      align-items: center;
      gap: 3px;
      color: rgba(255, 250, 241, 0.72);
      font-size: 10px;
      white-space: nowrap;
    }

    .relationship-energy-element-map i {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--element-color);
      box-shadow: 0 0 10px color-mix(in srgb, var(--element-color) 72%, transparent);
    }

    .relationship-energy-element-map b {
      color: rgba(255, 250, 241, 0.86);
      font-family: var(--serif);
      font-weight: 900;
    }

    .relationship-energy-element-map em {
      grid-column: 1 / -1;
      color: rgba(255, 250, 241, 0.42);
      font-size: 9px;
      font-style: normal;
      line-height: 1;
      text-align: center;
    }

    .relationship-energy-copy {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 58px;
      gap: 12px;
      align-items: stretch;
      padding: 14px;
      border: 1px solid rgba(232, 197, 116, 0.12);
      border-radius: 12px;
      background:
        radial-gradient(circle at 15% 10%, rgba(232, 197, 116, 0.1), transparent 38%),
        rgba(255, 250, 241, 0.045);
      box-shadow: inset 0 1px 0 rgba(255, 250, 241, 0.05);
    }

    .relationship-energy-copy small,
    .relationship-hologram-panel header small,
    .relationship-ziwei-lock-card small {
      color: var(--gold);
      font-family: var(--serif);
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.12em;
    }

    .relationship-energy-copy h2 {
      margin: 4px 0 8px;
      color: #f4dfad;
      font-family: var(--serif);
      font-size: 32px;
      letter-spacing: 0.06em;
      line-height: 1.18;
      text-shadow: 0 1px 0 rgba(255, 250, 241, 0.18);
    }

    .relationship-energy-copy p:not(.relationship-energy-verdict),
    .relationship-energy-card blockquote {
      margin: 0;
      color: rgba(255, 250, 241, 0.74);
      font-size: 13px;
      line-height: 1.72;
    }

    .relationship-energy-verdict {
      display: grid;
      place-items: center;
      align-self: center;
      min-height: 100%;
      max-height: 14em;
      margin: 0;
      padding: 10px 0;
      border-left: 1px solid rgba(232, 197, 116, 0.24);
      color: #edd08c;
      font-family: var(--serif);
      font-size: 15px;
      font-weight: 800;
      letter-spacing: 0.18em;
      line-height: 1.45;
      overflow: hidden;
      writing-mode: vertical-rl;
    }

    .relationship-energy-card blockquote {
      padding: 13px 14px;
      border: 1px solid rgba(232, 197, 116, 0.14);
      border-radius: 10px;
      background:
        linear-gradient(90deg, rgba(232, 197, 116, 0.12), rgba(255, 250, 241, 0.045)),
        rgba(255, 250, 241, 0.035);
      font-family: var(--serif);
      color: rgba(255, 250, 241, 0.86);
      letter-spacing: 0.04em;
    }

    .relationship-energy-metrics {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
    }

    .relationship-energy-metrics span {
      display: grid;
      justify-items: center;
      gap: 3px;
      min-height: 64px;
      padding: 10px 6px;
      border: 1px solid rgba(232, 197, 116, 0.14);
      border-radius: 10px;
      background:
        radial-gradient(circle at 50% 0%, rgba(232, 197, 116, 0.12), transparent 55%),
        rgba(255, 250, 241, 0.055);
    }

    .relationship-energy-metrics b {
      color: #f2d89a;
      font-family: Georgia, var(--serif);
      font-size: 24px;
      line-height: 1;
    }

    .relationship-energy-metrics small {
      color: rgba(255, 250, 241, 0.6);
      font-size: 11px;
    }

    .relationship-overview-actions {
      display: grid;
      grid-template-columns: 1.55fr repeat(2, minmax(0, 1fr));
      gap: 8px;
    }

    .relationship-overview-actions button {
      min-width: 0;
      min-height: 46px;
      border: 1px solid rgba(232, 197, 116, 0.18);
      border-radius: 10px;
      background: rgba(255, 250, 241, 0.075);
      color: rgba(255, 250, 241, 0.78);
      font-family: var(--serif);
      font-size: 13px;
      font-weight: 900;
      letter-spacing: 0.08em;
      cursor: pointer;
    }

    .relationship-overview-actions button.primary {
      border-color: rgba(123, 34, 27, 0.52);
      background:
        radial-gradient(circle at 24% 18%, rgba(232, 197, 116, 0.18), transparent 32%),
        linear-gradient(180deg, #b83a2d, #8f241b);
      color: #fffaf1;
      box-shadow: 0 12px 28px rgba(123, 34, 27, 0.18);
    }

    .relationship-overview-evidence {
      border-top-color: rgba(173, 138, 77, 0.18);
    }

    .relationship-hologram-shell {
      display: grid;
      gap: 12px;
    }

    .relationship-holo-tabs {
      display: flex;
      gap: 12px;
      overflow-x: auto;
      padding: 2px 2px 8px;
      scrollbar-width: none;
    }

    .relationship-holo-tabs::-webkit-scrollbar {
      display: none;
    }

    .relationship-holo-tabs button {
      position: relative;
      flex: 0 0 auto;
      display: grid;
      place-items: center;
      gap: 3px;
      min-width: 58px;
      min-height: 64px;
      border: 0;
      background: transparent;
      color: rgba(24, 23, 21, 0.48);
      cursor: pointer;
    }

    .relationship-holo-tabs b {
      font-family: var(--serif);
      font-size: 22px;
      letter-spacing: 0.05em;
      line-height: 1;
      transition: transform 280ms var(--ease), color 280ms var(--ease);
    }

    .relationship-holo-tabs small {
      display: grid;
      place-items: center;
      width: 24px;
      height: 24px;
      border: 1px solid rgba(173, 138, 77, 0.25);
      border-radius: 50%;
      color: rgba(24, 23, 21, 0.48);
      font-family: var(--serif);
      font-size: 12px;
    }

    .relationship-holo-tabs button.active b {
      color: var(--seal);
      transform: scale(1.2);
    }

    .relationship-holo-tabs button.active small {
      border-color: rgba(184, 54, 43, 0.38);
      color: var(--seal);
      background: rgba(184, 54, 43, 0.06);
    }

    .relationship-holo-tabs button.active::after {
      content: "";
      position: absolute;
      left: 50%;
      bottom: 1px;
      width: 9px;
      height: 18px;
      border-radius: 999px 999px 12px 12px;
      background: linear-gradient(180deg, rgba(232, 197, 116, 0.92), rgba(173, 138, 77, 0));
      transform: translateX(-50%);
      animation: relationshipGoldInkDrop 1.7s ease-in-out infinite;
    }

    .relationship-hologram-panel {
      display: grid;
      gap: 14px;
      overflow: hidden;
      padding: 14px;
      border: 1px solid rgba(113, 93, 62, 0.18);
      border-radius: 14px;
      background:
        radial-gradient(circle at 88% 12%, rgba(232, 197, 116, 0.14), transparent 28%),
        linear-gradient(180deg, rgba(255, 252, 247, 0.82), rgba(255, 252, 247, 0.54));
    }

    .relationship-hologram-panel header {
      display: grid;
      grid-template-columns: 42px minmax(0, 1fr) auto;
      align-items: center;
      gap: 12px;
    }

    .relationship-hologram-panel header h2 {
      margin: 3px 0 0;
      font-family: var(--serif);
      font-size: 22px;
      letter-spacing: 0.06em;
      line-height: 1.2;
    }

    .relationship-hologram-panel header > b {
      color: var(--seal);
      font-family: var(--serif);
      font-size: 16px;
      letter-spacing: 0.08em;
      white-space: nowrap;
    }

    .relationship-fate-visual,
    .relationship-resonance-visual,
    .relationship-flow-visual {
      display: grid;
      gap: 13px;
    }

    .relationship-fate-meter {
      position: relative;
      display: grid;
      place-items: center;
      min-height: 72px;
      overflow: hidden;
      border: 1px solid rgba(173, 138, 77, 0.2);
      border-radius: 999px;
      background:
        radial-gradient(circle at 50% 50%, rgba(255, 252, 247, 0.92), transparent 26%),
        linear-gradient(90deg, rgba(24, 23, 21, 0.06), rgba(173, 138, 77, 0.16));
    }

    .relationship-fate-meter span {
      position: absolute;
      left: 10px;
      top: 50%;
      width: calc(var(--value) - 20px);
      height: 16px;
      border-radius: 999px;
      background: linear-gradient(90deg, rgba(184, 54, 43, 0.22), rgba(232, 197, 116, 0.72));
      transform: translateY(-50%);
    }

    .relationship-fate-meter span::after {
      content: "";
      position: absolute;
      right: -4px;
      top: 50%;
      width: 28px;
      height: 28px;
      border: 1px solid rgba(173, 138, 77, 0.36);
      border-radius: 50%;
      background:
        radial-gradient(circle at 35% 35%, rgba(24, 23, 21, 0.72) 0 34%, transparent 35%),
        rgba(255, 252, 247, 0.9);
      transform: translateY(-50%);
    }

    .relationship-fate-meter b {
      position: relative;
      color: var(--seal);
      font-family: var(--serif);
      font-size: 24px;
      letter-spacing: 0.12em;
      z-index: 1;
    }

    .relationship-fate-meter small {
      position: relative;
      color: rgba(24, 23, 21, 0.52);
      font-size: 11px;
      z-index: 1;
    }

    .relationship-keyword-cloud {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .relationship-keyword-cloud button,
    .relationship-flow-notes button {
      min-height: 30px;
      border: 1px solid rgba(173, 138, 77, 0.24);
      border-radius: 999px;
      background: rgba(255, 252, 247, 0.72);
      color: rgba(24, 23, 21, 0.66);
      font-family: var(--serif);
      font-size: 12px;
      font-weight: 800;
      cursor: pointer;
    }

    .relationship-radar-wrap {
      position: relative;
      width: min(300px, 100%);
      aspect-ratio: 1;
      justify-self: center;
      margin: 4px auto;
    }

    .relationship-radar-wrap svg {
      width: 100%;
      height: 100%;
      overflow: visible;
    }

    .relationship-radar-wrap .grid {
      fill: rgba(255, 252, 247, 0.32);
      stroke: rgba(173, 138, 77, 0.22);
      stroke-width: 0.8;
    }

    .relationship-radar-wrap line {
      stroke: rgba(173, 138, 77, 0.15);
      stroke-width: 0.8;
    }

    .relationship-radar-wrap .shape {
      fill: rgba(184, 54, 43, 0.14);
      stroke: rgba(184, 54, 43, 0.58);
      stroke-width: 1.6;
      filter: drop-shadow(0 8px 14px rgba(184, 54, 43, 0.08));
      transition: all 320ms var(--ease);
    }

    .relationship-radar-wrap > button {
      position: absolute;
      left: var(--x);
      top: var(--y);
      display: grid;
      place-items: center;
      width: 34px;
      height: 34px;
      border: 1px solid rgba(173, 138, 77, 0.3);
      border-radius: 50%;
      background: rgba(255, 252, 247, 0.88);
      color: var(--seal);
      font-family: var(--serif);
      font-weight: 900;
      transform: translate(-50%, -50%);
      cursor: pointer;
    }

    .relationship-radar-center {
      position: absolute;
      left: 50%;
      top: 50%;
      display: grid;
      place-items: center;
      width: 88px;
      height: 88px;
      border: 1px solid rgba(173, 138, 77, 0.18);
      border-radius: 50%;
      background: rgba(255, 252, 247, 0.88);
      transform: translate(-50%, -50%);
    }

    .relationship-radar-center b {
      font-family: var(--serif);
      font-size: 14px;
    }

    .relationship-radar-center small {
      color: var(--gold);
      font-size: 11px;
    }

    .relationship-perspective-switch {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
      padding: 4px;
      border: 1px solid rgba(173, 138, 77, 0.18);
      border-radius: 999px;
      background: rgba(255, 252, 247, 0.52);
    }

    .relationship-perspective-switch button {
      min-height: 34px;
      border: 0;
      border-radius: 999px;
      background: transparent;
      color: rgba(24, 23, 21, 0.56);
      font-family: var(--serif);
      font-weight: 900;
      cursor: pointer;
    }

    .relationship-perspective-switch button.active {
      background: rgba(184, 54, 43, 0.1);
      color: var(--seal);
    }

    .relationship-flow-visual svg {
      width: 100%;
      min-height: 188px;
      border: 1px solid rgba(173, 138, 77, 0.16);
      border-radius: 14px;
      background:
        radial-gradient(circle at 20% 50%, color-mix(in srgb, var(--left-color) 15%, transparent), transparent 24%),
        radial-gradient(circle at 80% 50%, color-mix(in srgb, var(--right-color) 15%, transparent), transparent 24%),
        rgba(255, 252, 247, 0.62);
    }

    .relationship-flow-visual .avatar {
      fill: rgba(255, 252, 247, 0.9);
      stroke-width: 2;
    }

    .relationship-flow-visual .avatar.left {
      stroke: var(--left-color);
    }

    .relationship-flow-visual .avatar.right {
      stroke: var(--right-color);
    }

    .relationship-flow-visual text {
      fill: rgba(24, 23, 21, 0.76);
      font-family: var(--serif);
      font-size: 28px;
      font-weight: 900;
      text-anchor: middle;
    }

    .relationship-flow-visual .band {
      fill: none;
      stroke-width: 12;
      stroke-linecap: round;
      stroke-dasharray: 18 12;
      animation: relationshipFlowDash 3.8s linear infinite;
    }

    .relationship-flow-visual .band.secondary {
      stroke-width: 9;
      animation-duration: 4.8s;
      animation-direction: reverse;
    }

    .relationship-flow-visual .band.muted {
      stroke: rgba(24, 23, 21, 0.14);
      stroke-width: 4;
      stroke-dasharray: 6 10;
    }

    .relationship-flow-notes {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .relationship-gauge-row {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
    }

    .relationship-gauge {
      display: grid;
      place-items: center;
      min-height: 108px;
      padding: 9px 5px;
      border: 1px solid rgba(173, 138, 77, 0.18);
      border-radius: 12px;
      background:
        conic-gradient(from -120deg, rgba(184, 54, 43, 0.74) var(--value), rgba(24, 23, 21, 0.08) 0),
        rgba(255, 252, 247, 0.72);
    }

    .relationship-gauge i {
      display: grid;
      place-items: center;
      width: 34px;
      height: 34px;
      border-radius: 50%;
      background: rgba(255, 252, 247, 0.88);
      color: var(--seal);
      font-family: var(--serif);
      font-style: normal;
      font-weight: 900;
    }

    .relationship-gauge b {
      color: var(--seal);
      font-family: Georgia, var(--serif);
      font-size: 23px;
      line-height: 1;
    }

    .relationship-gauge small {
      color: rgba(24, 23, 21, 0.58);
      font-size: 11px;
    }

    .relationship-risk-visual {
      display: grid;
      grid-template-columns: 1fr;
      gap: 14px;
      align-items: center;
      justify-items: center;
    }

    .relationship-risk-wheel {
      position: relative;
      width: min(220px, 100%);
      aspect-ratio: 1;
      justify-self: center;
      border: 1px solid rgba(184, 54, 43, 0.2);
      border-radius: 50%;
      background:
        conic-gradient(from -45deg,
          rgba(184, 54, 43, 0.22) 0 25%,
          rgba(184, 54, 43, 0.48) 25% 50%,
          rgba(184, 54, 43, 0.14) 50% 75%,
          rgba(184, 54, 43, 0.32) 75% 100%),
        rgba(255, 252, 247, 0.62);
      box-shadow: inset 0 0 0 18px rgba(255, 252, 247, 0.4);
    }

    .relationship-risk-wheel b {
      position: absolute;
      left: 50%;
      top: 50%;
      display: grid;
      place-items: center;
      width: 58px;
      height: 58px;
      border: 1px solid rgba(184, 54, 43, 0.4);
      border-radius: 50%;
      background: rgba(255, 252, 247, 0.92);
      color: var(--seal);
      font-family: var(--serif);
      font-size: 27px;
      transform: translate(-50%, -50%);
    }

    .relationship-risk-wheel button {
      position: absolute;
      left: var(--x);
      top: var(--y);
      display: grid;
      place-items: center;
      width: 42px;
      height: 42px;
      border: 1px solid rgba(255, 252, 247, 0.62);
      border-radius: 50%;
      background: rgba(255, 252, 247, 0.78);
      color: rgba(123, 34, 27, 0.76);
      font-family: var(--serif);
      font-weight: 900;
      transform: translate(-50%, -50%);
      cursor: pointer;
    }

    .relationship-risk-wheel button.active {
      background: var(--seal);
      color: #fffaf1;
      box-shadow: 0 0 0 7px rgba(184, 54, 43, 0.12);
    }

    .relationship-risk-card {
      display: grid;
      gap: 6px;
      min-width: 0;
      padding: 12px;
      border: 1px solid rgba(184, 54, 43, 0.16);
      border-radius: 12px;
      background: rgba(255, 252, 247, 0.7);
    }

    .relationship-risk-card small {
      color: var(--seal);
      font-family: var(--serif);
      font-weight: 900;
      letter-spacing: 0.12em;
    }

    .relationship-risk-card h3 {
      margin: 4px 0 0;
      font-family: var(--serif);
      font-size: 14px;
    }

    .relationship-risk-card p {
      margin: 0;
      color: rgba(24, 23, 21, 0.6);
      font-size: 12px;
      line-height: 1.65;
    }

    .relationship-risk-card button {
      justify-self: start;
      min-height: 32px;
      margin-top: 4px;
      padding: 0 12px;
      border: 1px solid rgba(184, 54, 43, 0.22);
      border-radius: 999px;
      background: rgba(184, 54, 43, 0.06);
      color: var(--seal);
      font-family: var(--serif);
      font-weight: 900;
      cursor: pointer;
    }

    .relationship-river-scroll {
      overflow-x: auto;
      padding-bottom: 8px;
      scrollbar-width: thin;
    }

    .relationship-river-canvas {
      position: relative;
      width: 780px;
      height: 186px;
      overflow: hidden;
      border: 1px solid rgba(173, 138, 77, 0.16);
      border-radius: 14px;
      background:
        linear-gradient(180deg, rgba(255, 252, 247, 0.78), rgba(232, 197, 116, 0.08)),
        rgba(255, 252, 247, 0.58);
    }

    .relationship-river-canvas svg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
    }

    .relationship-river-canvas .mountain {
      fill: none;
      stroke: rgba(24, 23, 21, 0.11);
      stroke-width: 12;
    }

    .relationship-river-canvas .river {
      fill: none;
      stroke: rgba(45, 122, 143, 0.5);
      stroke-width: 18;
      stroke-linecap: round;
      stroke-dasharray: 28 18;
      animation: relationshipRiverFlow 7s linear infinite;
    }

    .relationship-river-canvas > button:not(.relationship-star-cloud) {
      position: absolute;
      left: var(--left);
      top: var(--top);
      display: grid;
      justify-items: center;
      gap: 3px;
      width: 54px;
      border: 0;
      background: transparent;
      color: rgba(24, 23, 21, 0.62);
      font-family: var(--serif);
      transform: translateX(-50%);
      cursor: pointer;
    }

    .relationship-river-canvas > button i {
      display: grid;
      place-items: center;
      width: 34px;
      height: 34px;
      border: 1px solid rgba(173, 138, 77, 0.28);
      border-radius: 50%;
      background: rgba(255, 252, 247, 0.86);
      color: var(--gold);
      font-style: normal;
      font-weight: 900;
      box-shadow: 0 8px 18px rgba(54, 44, 32, 0.08);
    }

    .relationship-river-canvas > button.risk i {
      color: var(--seal);
      border-color: rgba(184, 54, 43, 0.26);
    }

    .relationship-river-canvas > button.active i {
      background: var(--seal);
      color: #fffaf1;
      box-shadow: 0 0 0 7px rgba(184, 54, 43, 0.1);
    }

    .relationship-now-line {
      position: absolute;
      left: 46px;
      top: 20px;
      bottom: 18px;
      width: 1px;
      background: rgba(184, 54, 43, 0.64);
      color: var(--seal);
      font-family: var(--serif);
      font-size: 13px;
      font-weight: 900;
    }

    .relationship-star-cloud {
      position: absolute;
      right: 18px;
      bottom: 18px;
      min-height: 34px;
      padding: 0 14px;
      border: 1px solid rgba(232, 197, 116, 0.28);
      border-radius: 999px;
      background: rgba(42, 35, 30, 0.68);
      color: #f4dfad;
      font-family: var(--serif);
      font-weight: 900;
      cursor: pointer;
      box-shadow: 0 0 22px rgba(232, 197, 116, 0.16);
    }

    .relationship-year-detail.compact {
      margin-top: 10px;
      padding: 12px;
      border-radius: 12px;
    }

    .relationship-ziwei-line {
      margin: 0;
      padding-top: 10px;
      border-top: 1px dashed rgba(173, 138, 77, 0.26);
      color: rgba(113, 93, 62, 0.58);
      font-size: 12px;
      line-height: 1.7;
    }

    .relationship-ziwei-lock-card {
      display: grid;
      grid-template-columns: 78px minmax(0, 1fr) auto;
      gap: 13px;
      align-items: center;
      padding: 13px;
      border: 1px solid rgba(232, 197, 116, 0.2);
      border-radius: 14px;
      background:
        radial-gradient(circle at 12% 28%, rgba(232, 197, 116, 0.2), transparent 26%),
        linear-gradient(135deg, rgba(42, 35, 30, 0.93), rgba(24, 23, 21, 0.86));
      color: #fffaf1;
    }

    .relationship-palace-map {
      position: relative;
      display: grid;
      place-items: center;
      width: 64px;
      height: 64px;
      border: 1px solid rgba(232, 197, 116, 0.28);
      border-radius: 50%;
    }

    .relationship-palace-map span {
      position: absolute;
      left: 50%;
      top: 50%;
      width: 58px;
      height: 1px;
      background: rgba(232, 197, 116, 0.2);
      transform-origin: center;
    }

    .relationship-palace-map span:nth-child(2) {
      transform: translate(-50%, -50%) rotate(45deg);
    }

    .relationship-palace-map span:nth-child(3) {
      transform: translate(-50%, -50%) rotate(90deg);
    }

    .relationship-palace-map span:nth-child(4) {
      transform: translate(-50%, -50%) rotate(135deg);
    }

    .relationship-palace-map span:first-child {
      transform: translate(-50%, -50%);
    }

    .relationship-palace-map b {
      display: grid;
      place-items: center;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background: rgba(255, 250, 241, 0.1);
      color: #f4dfad;
      font-family: var(--serif);
      z-index: 1;
    }

    .relationship-ziwei-lock-card h3 {
      margin: 3px 0 4px;
      color: #f4dfad;
      font-family: var(--serif);
      font-size: 18px;
      letter-spacing: 0.06em;
    }

    .relationship-ziwei-lock-card p {
      margin: 0;
      color: rgba(255, 250, 241, 0.68);
      font-size: 12px;
      line-height: 1.6;
    }

    .relationship-ziwei-lock-card button {
      min-width: 72px;
      min-height: 36px;
      border: 1px solid rgba(232, 197, 116, 0.32);
      border-radius: 999px;
      background: rgba(255, 250, 241, 0.08);
      color: #f4dfad;
      font-family: var(--serif);
      font-weight: 900;
      cursor: pointer;
    }

    .relationship-holo-tools {
      display: grid;
      justify-items: end;
      gap: 8px;
    }

    .relationship-holo-tools > b {
      color: var(--seal);
      font-family: var(--serif);
      font-size: 16px;
      letter-spacing: 0.08em;
      white-space: nowrap;
    }

    .relationship-holo-tools button {
      display: grid;
      place-items: center;
      width: 38px;
      height: 38px;
      border: 1px solid rgba(173, 138, 77, 0.34);
      border-radius: 12px;
      background:
        linear-gradient(90deg, rgba(173, 138, 77, 0.18), rgba(255, 252, 247, 0.82), rgba(173, 138, 77, 0.16));
      color: var(--seal);
      font-family: var(--serif);
      font-size: 20px;
      font-weight: 900;
      box-shadow: 0 10px 20px rgba(54, 44, 32, 0.08);
      cursor: pointer;
      transition: transform 240ms var(--ease), box-shadow 240ms var(--ease);
    }

    .relationship-holo-tools button:hover {
      transform: translateY(-1px);
      box-shadow: 0 14px 24px rgba(54, 44, 32, 0.12);
    }

    .relationship-dossier-shell {
      display: grid;
      gap: 14px;
      padding: 14px;
      border: 1px solid rgba(113, 93, 62, 0.22);
      border-radius: 14px;
      background:
        radial-gradient(circle at 14% 8%, rgba(173, 138, 77, 0.14), transparent 24%),
        radial-gradient(circle at 86% 16%, rgba(184, 54, 43, 0.08), transparent 24%),
        linear-gradient(180deg, rgba(248, 239, 217, 0.92), rgba(238, 224, 194, 0.78));
      box-shadow: inset 0 0 0 1px rgba(255, 252, 247, 0.42), 0 18px 44px rgba(54, 44, 32, 0.1);
    }

    .relationship-dossier-shell::before {
      content: "";
      position: absolute;
      pointer-events: none;
    }

    .relationship-dossier-cover {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) 46px;
      align-items: center;
      gap: 12px;
      padding-bottom: 12px;
      border-bottom: 1px solid rgba(113, 93, 62, 0.14);
    }

    .relationship-dossier-cover > button {
      min-height: 34px;
      padding: 0 12px;
      border: 1px solid rgba(173, 138, 77, 0.24);
      border-radius: 999px;
      background: rgba(255, 252, 247, 0.52);
      color: rgba(24, 23, 21, 0.66);
      font-family: var(--serif);
      font-weight: 900;
      cursor: pointer;
    }

    .relationship-dossier-cover small,
    .relationship-dossier-page section > small {
      color: var(--gold);
      font-family: var(--serif);
      font-size: 11px;
      font-weight: 900;
      letter-spacing: 0.14em;
    }

    .relationship-dossier-cover h2 {
      margin: 2px 0 3px;
      font-family: var(--serif);
      font-size: 28px;
      letter-spacing: 0.14em;
      line-height: 1.1;
    }

    .relationship-dossier-cover p {
      margin: 0;
      color: rgba(24, 23, 21, 0.58);
      font-size: 12px;
      line-height: 1.45;
    }

    .relationship-dossier-toolbar {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 10px;
      align-items: center;
    }

    .relationship-dossier-toolbar div {
      display: inline-grid;
      grid-template-columns: repeat(2, minmax(0, 78px));
      gap: 4px;
      width: max-content;
      padding: 4px;
      border: 1px solid rgba(173, 138, 77, 0.18);
      border-radius: 999px;
      background: rgba(255, 252, 247, 0.4);
    }

    .relationship-dossier-toolbar button {
      min-height: 34px;
      border: 0;
      border-radius: 999px;
      background: transparent;
      color: rgba(24, 23, 21, 0.58);
      font-family: var(--serif);
      font-weight: 900;
      cursor: pointer;
    }

    .relationship-dossier-toolbar button.active,
    .relationship-dossier-toolbar button.primary {
      background: rgba(184, 54, 43, 0.1);
      color: var(--seal);
    }

    .relationship-dossier-toolbar button.primary {
      min-width: 104px;
      border: 1px solid rgba(123, 34, 27, 0.46);
      background: linear-gradient(180deg, #b83a2d, #8f241b);
      color: #fffaf1;
      box-shadow: 0 10px 22px rgba(123, 34, 27, 0.14);
    }

    .relationship-dossier-toc {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
    }

    .relationship-dossier-toc span {
      display: flex;
      align-items: center;
      gap: 7px;
      min-height: 36px;
      padding: 0 10px;
      border: 1px solid rgba(173, 138, 77, 0.16);
      border-radius: 9px;
      background: rgba(255, 252, 247, 0.42);
      color: rgba(24, 23, 21, 0.62);
      font-family: var(--serif);
      font-size: 12px;
      font-weight: 900;
    }

    .relationship-dossier-toc b {
      display: grid;
      place-items: center;
      width: 20px;
      height: 20px;
      border: 1px solid rgba(173, 138, 77, 0.28);
      border-radius: 50%;
      color: var(--gold);
      font-size: 11px;
      font-weight: 900;
    }

    .relationship-dossier-page {
      display: grid;
      gap: 16px;
      padding: 18px;
      border: 1px solid rgba(113, 93, 62, 0.18);
      border-radius: 12px;
      background:
        linear-gradient(90deg, rgba(113, 93, 62, 0.035) 1px, transparent 1px),
        linear-gradient(180deg, rgba(113, 93, 62, 0.035) 1px, transparent 1px),
        rgba(255, 250, 238, 0.74);
      background-size: 18px 18px;
    }

    .relationship-dossier-page section {
      display: grid;
      gap: 10px;
      padding-bottom: 15px;
      border-bottom: 1px solid rgba(113, 93, 62, 0.13);
    }

    .relationship-dossier-page h3 {
      margin: 0;
      font-family: var(--serif);
      font-size: 20px;
      letter-spacing: 0.06em;
    }

    .relationship-dossier-page blockquote {
      margin: 0;
      padding: 14px;
      border-left: 3px solid rgba(184, 54, 43, 0.46);
      background: rgba(255, 252, 247, 0.54);
      color: rgba(24, 23, 21, 0.76);
      font-family: var(--serif);
      font-size: 15px;
      line-height: 1.9;
    }

    .relationship-dossier-chart-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }

    .relationship-dossier-chart-card {
      min-width: 0;
      padding: 12px;
      border: 1px solid rgba(173, 138, 77, 0.18);
      border-radius: 12px;
      background: rgba(255, 252, 247, 0.5);
    }

    .relationship-dossier-chart-card header {
      display: grid;
      grid-template-columns: 38px minmax(0, 1fr);
      gap: 9px;
      align-items: center;
      margin-bottom: 10px;
    }

    .relationship-dossier-chart-card header span {
      display: grid;
      place-items: center;
      width: 34px;
      height: 34px;
      border: 1px solid rgba(184, 54, 43, 0.22);
      border-radius: 50%;
      color: var(--seal);
      font-family: var(--serif);
      font-size: 20px;
      font-weight: 900;
    }

    .relationship-dossier-chart-card h3 {
      overflow: hidden;
      font-size: 16px;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .relationship-dossier-bazi-table {
      display: grid;
      grid-template-columns: 44px 58px 58px minmax(88px, 1fr) 66px;
      border-top: 1px solid rgba(113, 93, 62, 0.13);
      border-left: 1px solid rgba(113, 93, 62, 0.13);
      font-size: 11px;
      line-height: 1.45;
    }

    .relationship-dossier-bazi-table > * {
      min-width: 0;
      padding: 7px 5px;
      border-right: 1px solid rgba(113, 93, 62, 0.13);
      border-bottom: 1px solid rgba(113, 93, 62, 0.13);
      overflow-wrap: anywhere;
    }

    .relationship-dossier-bazi-table b,
    .relationship-dossier-bazi-table strong {
      color: rgba(24, 23, 21, 0.82);
      font-family: var(--serif);
      font-weight: 900;
    }

    .relationship-dossier-luckline {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 8px;
    }

    .relationship-dossier-luck-caption {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 8px 10px;
      border: 1px dashed rgba(173, 138, 77, 0.22);
      border-radius: 10px;
      background: rgba(255, 252, 247, 0.38);
    }

    .relationship-dossier-luck-caption b {
      color: var(--seal);
      font-family: var(--serif);
      font-size: 14px;
      white-space: nowrap;
    }

    .relationship-dossier-luck-caption span {
      color: rgba(24, 23, 21, 0.54);
      font-size: 11px;
      line-height: 1.5;
      text-align: right;
    }

    .relationship-dossier-luckline span {
      display: grid;
      gap: 3px;
      min-height: 48px;
      padding: 8px;
      border: 1px solid rgba(173, 138, 77, 0.18);
      border-radius: 9px;
      background: rgba(255, 252, 247, 0.42);
    }

    .relationship-dossier-luckline b {
      color: var(--seal);
      font-family: Georgia, var(--serif);
    }

    .relationship-dossier-luckline em {
      color: rgba(24, 23, 21, 0.58);
      font-size: 11px;
      font-style: normal;
    }

    .relationship-dossier-rule-list {
      display: grid;
      gap: 8px;
      margin: 0;
      padding: 0;
      list-style: none;
      counter-reset: relationship-rule;
    }

    .relationship-dossier-rule-list li {
      position: relative;
      display: grid;
      gap: 4px;
      padding: 10px 10px 10px 42px;
      border: 1px solid rgba(173, 138, 77, 0.16);
      border-radius: 10px;
      background: rgba(255, 252, 247, 0.46);
      counter-increment: relationship-rule;
    }

    .relationship-dossier-rule-list li::before {
      content: counter(relationship-rule);
      position: absolute;
      left: 11px;
      top: 12px;
      display: grid;
      place-items: center;
      width: 22px;
      height: 22px;
      border-radius: 50%;
      background: rgba(184, 54, 43, 0.08);
      color: var(--seal);
      font-family: var(--serif);
      font-size: 12px;
      font-weight: 900;
    }

    .relationship-dossier-rule-list b,
    .relationship-dossier-key-grid strong {
      color: rgba(24, 23, 21, 0.82);
      font-family: var(--serif);
      font-size: 14px;
    }

    .relationship-dossier-rule-list p,
    .relationship-dossier-dual-note p,
    .relationship-dossier-key-grid p,
    .relationship-dossier-ziwei-disabled p {
      margin: 0;
      color: rgba(24, 23, 21, 0.62);
      font-size: 12px;
      line-height: 1.75;
    }

    .relationship-dossier-dual-grid,
    .relationship-dossier-key-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 9px;
    }

    .relationship-dossier-dual-note {
      display: grid;
      grid-template-columns: 36px minmax(0, 1fr);
      gap: 9px;
      padding: 10px;
      border: 1px solid rgba(173, 138, 77, 0.16);
      border-radius: 10px;
      background: rgba(255, 252, 247, 0.46);
    }

    .relationship-dossier-dual-note h3 {
      margin: 2px 0 4px;
      font-size: 16px;
    }

    .relationship-dossier-dual-note p b {
      display: inline-grid;
      place-items: center;
      min-width: 34px;
      margin-right: 6px;
      color: var(--seal);
      font-family: var(--serif);
      font-size: 12px;
    }

    .relationship-dossier-key-grid article {
      padding: 12px;
      border: 1px solid rgba(173, 138, 77, 0.16);
      border-radius: 10px;
      background: rgba(255, 252, 247, 0.48);
    }

    .relationship-dossier-ziwei-disabled {
      opacity: 0.58;
      filter: grayscale(0.22);
    }

    .relationship-dossier-footer {
      display: grid;
      grid-template-columns: 54px minmax(0, 1fr);
      gap: 10px;
      align-items: center;
      padding-top: 4px;
      color: rgba(24, 23, 21, 0.5);
      font-size: 11px;
    }

    .relationship-dossier-shell.is-vertical .relationship-dossier-page {
      max-height: 720px;
      overflow-x: auto;
      overflow-y: hidden;
      writing-mode: vertical-rl;
    }

    .relationship-dossier-shell.is-vertical .relationship-dossier-page section {
      min-width: 180px;
      padding: 0 0 0 14px;
      border-bottom: 0;
      border-left: 1px solid rgba(113, 93, 62, 0.13);
    }

    .relationship-dossier-shell.is-vertical .relationship-dossier-chart-grid,
    .relationship-dossier-shell.is-vertical .relationship-dossier-dual-grid,
    .relationship-dossier-shell.is-vertical .relationship-dossier-key-grid,
    .relationship-dossier-shell.is-vertical .relationship-dossier-luckline,
    .relationship-dossier-shell.is-vertical .relationship-dossier-luck-caption {
      writing-mode: horizontal-tb;
      min-width: 520px;
    }

    .relationship-qr-mark {
      position: relative;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 4px;
      width: 48px;
      height: 48px;
      padding: 5px;
      border: 1px solid rgba(24, 23, 21, 0.22);
      border-radius: 7px;
      background:
        linear-gradient(90deg, rgba(24, 23, 21, 0.18) 1px, transparent 1px),
        linear-gradient(180deg, rgba(24, 23, 21, 0.18) 1px, transparent 1px),
        rgba(255, 252, 247, 0.9);
      background-size: 7px 7px;
    }

    .relationship-qr-mark i {
      border: 2px solid rgba(24, 23, 21, 0.72);
      border-radius: 2px;
      background: rgba(255, 252, 247, 0.86);
    }

    .relationship-share-modal {
      position: fixed;
      inset: 0;
      z-index: 45;
      display: grid;
      place-items: center;
      padding: 20px;
    }

    .relationship-share-scrim {
      position: absolute;
      inset: 0;
      border: 0;
      background: rgba(20, 18, 16, 0.58);
      backdrop-filter: blur(6px);
      cursor: pointer;
    }

    .relationship-share-panel {
      position: relative;
      display: grid;
      gap: 14px;
      width: min(420px, 100%);
      padding: 18px;
      border: 1px solid rgba(173, 138, 77, 0.24);
      border-radius: 16px;
      background:
        radial-gradient(circle at 20% 12%, rgba(232, 197, 116, 0.18), transparent 28%),
        rgba(255, 252, 247, 0.96);
      box-shadow: 0 24px 70px rgba(0, 0, 0, 0.28);
      animation: relationshipShareIn 260ms var(--ease);
    }

    .relationship-share-panel.is-card-panel {
      width: min(420px, 94vw);
      justify-items: center;
      background: rgba(38, 32, 28, 0.94);
    }

    .relationship-share-seal {
      display: grid;
      place-items: center;
      width: 48px;
      height: 48px;
      border: 1px solid rgba(184, 54, 43, 0.32);
      border-radius: 15px;
      color: var(--seal);
      font-family: var(--serif);
      font-size: 25px;
      font-weight: 900;
    }

    .relationship-share-panel h2 {
      margin: 0;
      font-family: var(--serif);
      font-size: 24px;
      letter-spacing: 0.06em;
    }

    .relationship-share-panel p {
      margin: 0;
      color: rgba(24, 23, 21, 0.62);
      font-size: 13px;
      line-height: 1.75;
    }

    .relationship-share-safe-list {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
    }

    .relationship-share-safe-list span {
      display: grid;
      place-items: center;
      min-height: 34px;
      border: 1px solid rgba(173, 138, 77, 0.18);
      border-radius: 999px;
      color: rgba(24, 23, 21, 0.56);
      font-size: 11px;
      font-weight: 700;
    }

    .relationship-share-actions {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
      width: 100%;
    }

    .relationship-share-actions button {
      min-height: 42px;
      border: 1px solid rgba(173, 138, 77, 0.22);
      border-radius: 10px;
      background: rgba(255, 252, 247, 0.72);
      color: rgba(24, 23, 21, 0.72);
      font-family: var(--serif);
      font-weight: 900;
      cursor: pointer;
    }

    .relationship-share-actions button.primary {
      border-color: rgba(123, 34, 27, 0.48);
      background: linear-gradient(180deg, #b83a2d, #8f241b);
      color: #fffaf1;
    }

    .relationship-share-card {
      position: relative;
      display: grid;
      grid-template-rows: auto minmax(0, 1fr) auto auto;
      gap: 16px;
      width: min(340px, 86vw);
      aspect-ratio: 9 / 16;
      overflow: hidden;
      padding: 20px;
      border: 1px solid rgba(232, 197, 116, 0.24);
      border-radius: 20px;
      background:
        radial-gradient(circle at 30% 18%, color-mix(in srgb, var(--left-color) 24%, transparent), transparent 28%),
        radial-gradient(circle at 70% 22%, color-mix(in srgb, var(--right-color) 24%, transparent), transparent 30%),
        radial-gradient(circle at 50% 46%, rgba(232, 197, 116, 0.22), transparent 26%),
        linear-gradient(180deg, #2a231e, #171412 68%, #2b231d);
      box-shadow: inset 0 0 0 1px rgba(255, 250, 241, 0.08);
      color: #fffaf1;
    }

    .relationship-share-card::before {
      content: "";
      position: absolute;
      inset: 0;
      background-image: radial-gradient(circle, rgba(255, 250, 241, 0.22) 0 1px, transparent 1px);
      background-size: 18px 18px;
      mask-image: radial-gradient(circle at center, #000, transparent 70%);
      opacity: 0.36;
    }

    .relationship-share-card > * {
      position: relative;
      z-index: 1;
    }

    .relationship-share-card header,
    .relationship-share-card footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
    }

    .relationship-share-card header strong {
      font-family: var(--serif);
      font-size: 20px;
      letter-spacing: 0.12em;
    }

    .relationship-share-card header span {
      display: grid;
      place-items: center;
      width: 42px;
      height: 30px;
      border: 1px solid rgba(184, 54, 43, 0.52);
      border-radius: 8px;
      color: #f4dfad;
      font-family: var(--serif);
      font-size: 13px;
      font-weight: 900;
    }

    .relationship-share-figures {
      position: relative;
      min-height: 230px;
      border: 1px solid rgba(232, 197, 116, 0.12);
      border-radius: 18px;
      background: radial-gradient(circle at center, rgba(255, 250, 241, 0.08), transparent 58%);
    }

    .relationship-share-figures span {
      position: absolute;
      top: 48px;
      width: 72px;
      height: 130px;
      border-radius: 999px 999px 42px 42px;
      background:
        radial-gradient(circle at 50% 18%, rgba(255, 250, 241, 0.92) 0 18px, transparent 19px),
        radial-gradient(ellipse at 50% 74%, rgba(255, 250, 241, 0.2), transparent 58%);
      opacity: 0.9;
    }

    .relationship-share-figures span.is-left {
      left: 45px;
      box-shadow: 0 0 32px color-mix(in srgb, var(--left-color) 64%, transparent);
    }

    .relationship-share-figures span.is-right {
      right: 45px;
      box-shadow: 0 0 32px color-mix(in srgb, var(--right-color) 64%, transparent);
    }

    .relationship-share-figures i {
      position: absolute;
      left: 50%;
      top: calc(28% + var(--i, 0) * 10px);
      width: 150px;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(232, 197, 116, 0.72), transparent);
      transform: translateX(-50%) rotate(var(--r, 0deg));
    }

    .relationship-share-figures i:nth-of-type(1) { --i: 1; --r: -10deg; }
    .relationship-share-figures i:nth-of-type(2) { --i: 3; --r: 7deg; }
    .relationship-share-figures i:nth-of-type(3) { --i: 5; --r: -2deg; }
    .relationship-share-figures i:nth-of-type(4) { --i: 7; --r: 12deg; }
    .relationship-share-figures i:nth-of-type(5) { --i: 9; --r: -7deg; }

    .relationship-share-card section {
      display: grid;
      gap: 7px;
      align-content: center;
      text-align: center;
    }

    .relationship-share-card section small {
      color: rgba(244, 223, 173, 0.72);
      font-size: 11px;
      letter-spacing: 0.16em;
    }

    .relationship-share-card section h2 {
      color: #f4dfad;
      font-size: 32px;
      line-height: 1.1;
      text-wrap: balance;
    }

    .relationship-share-card section p {
      color: rgba(255, 250, 241, 0.78);
      font-family: var(--serif);
      font-size: 14px;
      line-height: 1.75;
    }

    .relationship-share-card footer {
      justify-content: start;
      padding-top: 8px;
      border-top: 1px solid rgba(232, 197, 116, 0.16);
    }

    .relationship-share-card footer .relationship-qr-mark {
      flex: 0 0 auto;
      width: 48px;
      height: 48px;
    }

    .relationship-share-card footer div {
      display: grid;
      gap: 3px;
    }

    .relationship-share-card footer b {
      color: rgba(255, 250, 241, 0.82);
      font-size: 12px;
    }

    .relationship-share-card footer small {
      color: rgba(255, 250, 241, 0.45);
      font-size: 10px;
    }

    @keyframes relationshipShareIn {
      from {
        opacity: 0;
        transform: translateY(12px) scale(0.98);
      }
      to {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }

    @keyframes relationshipSealBreath {
      0%, 100% {
        transform: translate(-50%, -50%) scale(1);
      }
      50% {
        transform: translate(-50%, -50%) scale(1.045);
      }
    }

    @keyframes relationshipGoldInkDrop {
      0%, 100% {
        height: 10px;
        opacity: 0.38;
        transform: translate(-50%, -2px);
      }
      50% {
        height: 22px;
        opacity: 0.82;
        transform: translate(-50%, 3px);
      }
    }

    @keyframes relationshipFlowDash {
      to {
        stroke-dashoffset: -120;
      }
    }

    @keyframes relationshipRiverFlow {
      to {
        stroke-dashoffset: -184;
      }
    }

    @media (max-width: 520px) {
      .relationship-energy-card {
        padding: 12px;
        border-radius: 12px;
      }

      .relationship-energy-stage {
        min-height: 315px;
      }

      .relationship-energy-name {
        top: 16px;
      }

      .relationship-energy-name.is-left {
        left: 14px;
      }

      .relationship-energy-name.is-right {
        right: 14px;
      }

      .relationship-energy-element-map {
        grid-template-columns: repeat(5, auto);
        gap: 7px;
        padding: 7px 9px;
      }

      .relationship-energy-element-map small,
      .relationship-energy-element-map em {
        display: none;
      }

      .relationship-energy-copy {
        grid-template-columns: 1fr;
        padding: 13px;
      }

      .relationship-energy-verdict {
        min-height: auto;
        padding: 9px 0 0;
        border-left: 0;
        border-top: 1px solid rgba(232, 197, 116, 0.18);
        writing-mode: horizontal-tb;
      }

      .relationship-overview-actions {
        grid-template-columns: 1fr;
      }

      .relationship-hologram-panel {
        padding: 12px;
      }

      .relationship-hologram-panel header {
        grid-template-columns: 40px minmax(0, 1fr);
      }

      .relationship-holo-tools {
        grid-column: 2;
        grid-template-columns: auto auto;
        justify-content: start;
        align-items: center;
      }

      .relationship-risk-visual {
        grid-template-columns: 1fr;
      }

      .relationship-ziwei-lock-card {
        grid-template-columns: 56px minmax(0, 1fr);
      }

      .relationship-palace-map {
        width: 50px;
        height: 50px;
      }

      .relationship-ziwei-lock-card button {
        grid-column: 1 / -1;
      }

      .relationship-dossier-cover {
        grid-template-columns: minmax(0, 1fr) 42px;
      }

      .relationship-dossier-cover > button {
        grid-column: 1 / -1;
        justify-self: start;
      }

      .relationship-dossier-toolbar,
      .relationship-dossier-chart-grid,
      .relationship-dossier-dual-grid,
      .relationship-dossier-key-grid {
        grid-template-columns: 1fr;
      }

      .relationship-dossier-toc {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .relationship-dossier-page {
        padding: 12px;
      }

      .relationship-dossier-bazi-table {
        grid-template-columns: 40px 52px 52px minmax(80px, 1fr) 58px;
        font-size: 10px;
      }

      .relationship-dossier-luckline {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .relationship-share-safe-list,
      .relationship-share-actions {
        grid-template-columns: 1fr;
      }

      .relationship-share-card {
        width: min(320px, 88vw);
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .relationship-fusion-seal,
      .relationship-holo-tabs button.active::after,
      .relationship-flow-visual .band,
      .relationship-river-canvas .river {
        animation: none;
      }
    }

    /* Relationship match polish from Imagen direction: static evidence-first booklet UI. */
    .relationship-energy-card {
      gap: 16px;
      padding: 18px;
      border-color: rgba(173, 138, 77, 0.24);
      border-radius: 16px;
      background:
        radial-gradient(circle at 88% 9%, rgba(173, 138, 77, 0.13), transparent 24%),
        radial-gradient(circle at 16% 4%, rgba(184, 54, 43, 0.07), transparent 22%),
        linear-gradient(180deg, rgba(255, 252, 247, 0.96), rgba(247, 238, 218, 0.82));
      box-shadow:
        inset 0 0 0 1px rgba(255, 252, 247, 0.58),
        0 18px 42px rgba(54, 44, 32, 0.1);
    }

    .relationship-energy-card > * {
      position: relative;
      z-index: 1;
    }

    .relationship-energy-card::before {
      inset: 8px;
      border: 1px solid rgba(173, 138, 77, 0.12);
      border-radius: 12px;
      background:
        linear-gradient(90deg, rgba(113, 93, 62, 0.045) 1px, transparent 1px),
        linear-gradient(rgba(113, 93, 62, 0.035) 1px, transparent 1px);
      background-size: 22px 22px;
      mask-image: none;
      opacity: 0.44;
      z-index: 0;
    }

    .relationship-energy-card::after {
      inset: 14px 18px auto auto;
      width: 144px;
      height: 152px;
      background:
        radial-gradient(ellipse at 70% 85%, rgba(113, 93, 62, 0.1), transparent 46%),
        linear-gradient(130deg, transparent 0 36%, rgba(113, 93, 62, 0.12) 37% 39%, transparent 40%),
        linear-gradient(155deg, transparent 0 42%, rgba(113, 93, 62, 0.08) 43% 45%, transparent 46%);
      opacity: 0.42;
      z-index: 0;
    }

    .relationship-energy-stage {
      min-height: 410px;
      overflow: hidden;
      border-color: rgba(232, 197, 116, 0.3);
      border-radius: 14px;
      background:
        radial-gradient(circle at 50% 55%, rgba(232, 197, 116, 0.12), transparent 28%),
        radial-gradient(circle at 26% 56%, color-mix(in srgb, var(--left-color) 18%, transparent), transparent 28%),
        radial-gradient(circle at 74% 56%, color-mix(in srgb, var(--right-color) 18%, transparent), transparent 28%),
        linear-gradient(180deg, #171713, #202017 55%, #171512);
      box-shadow:
        inset 0 0 0 1px rgba(255, 250, 241, 0.05),
        inset 0 0 44px rgba(0, 0, 0, 0.32),
        0 16px 30px rgba(54, 44, 32, 0.18);
      clip-path: polygon(
        1.2% 0.4%, 8% 0%, 16% 0.6%, 26% 0.2%, 35% 0.8%, 45% 0.1%,
        57% 0.7%, 68% 0.2%, 79% 0.8%, 91% 0.1%, 98.8% 0.7%,
        100% 7%, 99.4% 18%, 100% 29%, 99.3% 42%, 100% 55%, 99.2% 68%,
        100% 82%, 98.8% 99.1%, 89% 99.6%, 78% 99%, 66% 99.7%,
        54% 99.2%, 42% 99.8%, 31% 99%, 20% 99.5%, 9% 99%, 1.2% 99.4%,
        0% 88%, 0.7% 76%, 0.1% 63%, 0.8% 51%, 0.1% 38%, 0.7% 25%, 0% 12%
      );
    }

    .relationship-energy-stage::before {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      background:
        linear-gradient(rgba(232, 197, 116, 0.052) 1px, transparent 1px),
        linear-gradient(90deg, rgba(232, 197, 116, 0.045) 1px, transparent 1px);
      background-size: 32px 32px;
      pointer-events: none;
      opacity: 0.5;
      z-index: 0;
    }

    .relationship-energy-stage::after {
      content: "";
      position: absolute;
      inset: 3px;
      border: 1px solid rgba(255, 250, 241, 0.09);
      border-radius: inherit;
      box-shadow:
        inset 0 0 0 5px rgba(255, 250, 241, 0.018),
        inset 0 0 0 1px rgba(232, 197, 116, 0.12),
        inset 0 0 24px rgba(0, 0, 0, 0.18);
      pointer-events: none;
      z-index: 4;
    }

    .relationship-energy-stage-title {
      position: absolute;
      left: 50%;
      top: 20px;
      display: flex;
      align-items: center;
      gap: 10px;
      color: #efd89d;
      font-family: var(--serif);
      letter-spacing: 0.12em;
      text-align: center;
      transform: translateX(-50%);
      z-index: 5;
      pointer-events: none;
      white-space: nowrap;
    }

    .relationship-energy-stage-title::before,
    .relationship-energy-stage-title::after {
      content: "";
      width: 42px;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(232, 197, 116, 0.58));
    }

    .relationship-energy-stage-title::after {
      background: linear-gradient(90deg, rgba(232, 197, 116, 0.58), transparent);
    }

    .relationship-energy-stage-title span {
      font-size: 17px;
      font-weight: 900;
      text-shadow: 0 1px 0 rgba(0, 0, 0, 0.28);
    }

    .relationship-energy-stage-title em {
      color: rgba(255, 250, 241, 0.56);
      font-size: 10px;
      font-style: normal;
      letter-spacing: 0.1em;
    }

    .relationship-energy-canvas {
      z-index: 1;
    }

    .relationship-energy-name {
      top: 80px;
      color: rgba(255, 250, 241, 0.88);
      z-index: 6;
    }

    .relationship-energy-name.is-left {
      left: 26px;
    }

    .relationship-energy-name.is-right {
      right: 26px;
    }

    .relationship-energy-name span {
      width: 54px;
      height: 54px;
      border-color: rgba(232, 197, 116, 0.42);
      background: rgba(255, 250, 241, 0.1);
      color: rgba(255, 250, 241, 0.92);
      font-size: 28px;
      box-shadow:
        inset 0 0 20px color-mix(in srgb, var(--left-color) 20%, transparent),
        0 0 0 5px rgba(232, 197, 116, 0.045);
    }

    .relationship-energy-name.is-right span {
      box-shadow:
        inset 0 0 20px color-mix(in srgb, var(--right-color) 20%, transparent),
        0 0 0 5px rgba(232, 197, 116, 0.045);
    }

    .relationship-fusion-seal {
      top: 58%;
      width: 58px;
      height: 58px;
      border: 2px double rgba(184, 54, 43, 0.66);
      border-radius: 18px;
      background:
        radial-gradient(circle at 48% 45%, rgba(255, 252, 247, 0.96), rgba(238, 224, 194, 0.76)),
        rgba(255, 252, 247, 0.86);
      color: #a93226;
      font-size: 34px;
      box-shadow:
        0 0 0 10px rgba(232, 197, 116, 0.08),
        0 0 34px rgba(232, 197, 116, 0.26),
        0 14px 30px rgba(0, 0, 0, 0.22);
      z-index: 6;
    }

    .relationship-energy-element-map {
      bottom: 20px;
      gap: 10px;
      border-color: rgba(232, 197, 116, 0.26);
      background: rgba(18, 17, 14, 0.54);
      z-index: 6;
      backdrop-filter: blur(8px);
    }

    .relationship-energy-element-map small {
      color: rgba(255, 250, 241, 0.66);
    }

    .relationship-energy-element-map span {
      color: rgba(255, 250, 241, 0.8);
    }

    .relationship-energy-copy {
      grid-template-columns: minmax(0, 1fr) 72px;
      gap: 16px;
      padding: 6px 6px 2px;
      border: 0;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
    }

    .relationship-energy-copy small,
    .relationship-hologram-panel header small {
      color: #a93226;
      font-size: 12px;
      letter-spacing: 0.14em;
    }

    .relationship-energy-copy h2 {
      margin: 8px 0 10px;
      color: #171512;
      font-size: 36px;
      letter-spacing: 0.04em;
      text-shadow: none;
    }

    .relationship-energy-copy p:not(.relationship-energy-verdict),
    .relationship-energy-card blockquote {
      color: rgba(24, 23, 21, 0.72);
      font-size: 14px;
      line-height: 1.82;
    }

    .relationship-energy-verdict {
      padding: 4px 0;
      border-left-color: rgba(173, 138, 77, 0.28);
      color: #a97935;
      font-size: 16px;
      letter-spacing: 0.2em;
    }

    .relationship-energy-card blockquote {
      padding: 14px 16px;
      border-color: rgba(173, 138, 77, 0.2);
      border-radius: 12px;
      background:
        linear-gradient(90deg, rgba(173, 138, 77, 0.09), rgba(255, 252, 247, 0.58)),
        rgba(255, 252, 247, 0.46);
      color: rgba(24, 23, 21, 0.78);
      font-size: 15px;
    }

    .relationship-energy-metrics {
      gap: 0;
      border-top: 1px solid rgba(173, 138, 77, 0.2);
      border-bottom: 1px solid rgba(173, 138, 77, 0.14);
    }

    .relationship-energy-metrics span {
      min-height: 76px;
      border: 0;
      border-right: 1px solid rgba(173, 138, 77, 0.18);
      border-radius: 0;
      background: transparent;
    }

    .relationship-energy-metrics span:last-child {
      border-right: 0;
    }

    .relationship-energy-metrics b {
      color: #a93226;
      font-size: 30px;
    }

    .relationship-energy-metrics small {
      color: rgba(24, 23, 21, 0.62);
      font-family: var(--serif);
      font-size: 12px;
      font-weight: 800;
    }

    .relationship-overview-actions {
      grid-template-columns: 1.28fr 1fr 1fr;
      gap: 10px;
    }

    .relationship-overview-actions button {
      min-height: 50px;
      border-color: rgba(173, 138, 77, 0.26);
      border-radius: 12px;
      background:
        linear-gradient(180deg, rgba(255, 252, 247, 0.82), rgba(248, 239, 217, 0.56));
      color: rgba(24, 23, 21, 0.82);
    }

    .relationship-overview-actions button.primary {
      border-color: rgba(123, 34, 27, 0.5);
      background:
        linear-gradient(180deg, rgba(194, 61, 48, 0.98), rgba(142, 34, 26, 0.98));
      color: #fffaf1;
    }

    .relationship-overview-evidence .relationship-evidence-list {
      border-color: rgba(173, 138, 77, 0.18);
      background: rgba(255, 252, 247, 0.36);
    }

    .relationship-holo-tabs {
      justify-content: space-between;
      gap: 2px;
      padding: 4px 0 10px;
      border-bottom: 1px solid rgba(173, 138, 77, 0.16);
    }

    .relationship-holo-tabs button {
      min-width: 60px;
      min-height: 56px;
      color: rgba(24, 23, 21, 0.56);
    }

    .relationship-holo-tabs b {
      font-size: 23px;
    }

    .relationship-holo-tabs small {
      width: auto;
      height: auto;
      border: 0;
      color: rgba(113, 93, 62, 0.58);
      font-size: 11px;
    }

    .relationship-holo-tabs button.active b {
      color: #ad8a4d;
      transform: translateY(-2px) scale(1.08);
    }

    .relationship-holo-tabs button.active small {
      color: #a93226;
      background: transparent;
    }

    .relationship-holo-tabs button.active::after {
      bottom: 0;
      width: 42px;
      height: 3px;
      border-radius: 999px;
      background: linear-gradient(90deg, transparent, #ad8a4d, transparent);
      animation: none;
    }

    .relationship-hologram-panel {
      gap: 18px;
      padding: 18px;
      border-color: rgba(173, 138, 77, 0.22);
      border-radius: 16px;
      background:
        radial-gradient(circle at 50% 44%, rgba(173, 138, 77, 0.1), transparent 31%),
        linear-gradient(90deg, rgba(113, 93, 62, 0.045) 1px, transparent 1px),
        linear-gradient(rgba(113, 93, 62, 0.035) 1px, transparent 1px),
        linear-gradient(180deg, rgba(255, 252, 247, 0.96), rgba(248, 239, 217, 0.78));
      background-size: auto, 24px 24px, 24px 24px, auto;
      box-shadow:
        inset 0 0 0 1px rgba(255, 252, 247, 0.58),
        0 14px 32px rgba(54, 44, 32, 0.08);
    }

    .relationship-hologram-panel header {
      padding-bottom: 12px;
      border-bottom: 1px solid rgba(173, 138, 77, 0.16);
    }

    .relationship-hologram-panel header .seal {
      width: 42px;
      height: 42px;
      border-color: rgba(184, 54, 43, 0.3);
      background: rgba(184, 54, 43, 0.055);
      color: #a93226;
      font-size: 22px;
    }

    .relationship-hologram-panel header h2 {
      color: #171512;
      font-size: 25px;
      letter-spacing: 0.05em;
    }

    .relationship-radar-wrap {
      width: min(340px, 92%);
      margin: 10px auto 2px;
    }

    .relationship-radar-wrap::before {
      content: "";
      position: absolute;
      inset: 12%;
      border-radius: 50%;
      background:
        radial-gradient(circle, rgba(173, 138, 77, 0.13), transparent 58%),
        radial-gradient(circle at 45% 54%, rgba(24, 23, 21, 0.08), transparent 44%);
      pointer-events: none;
    }

    .relationship-radar-wrap .grid {
      fill: rgba(255, 252, 247, 0.2);
      stroke: rgba(173, 138, 77, 0.42);
      stroke-width: 0.9;
    }

    .relationship-radar-wrap line {
      stroke: rgba(173, 138, 77, 0.24);
      stroke-width: 0.8;
    }

    .relationship-radar-wrap .shape {
      fill: rgba(173, 138, 77, 0.2);
      stroke: rgba(169, 50, 38, 0.62);
      stroke-width: 1.7;
      filter: none;
    }

    .relationship-radar-wrap > button {
      width: 40px;
      height: 40px;
      border-color: rgba(173, 138, 77, 0.28);
      background:
        radial-gradient(circle, rgba(255, 252, 247, 0.92), rgba(238, 224, 194, 0.72));
      color: rgba(24, 23, 21, 0.72);
      box-shadow: 0 8px 18px rgba(54, 44, 32, 0.08);
    }

    .relationship-radar-wrap > button.active {
      border-color: rgba(184, 54, 43, 0.42);
      color: #a93226;
      box-shadow: 0 0 0 6px rgba(184, 54, 43, 0.07);
    }

    .relationship-radar-center {
      width: 98px;
      height: 98px;
      border-color: rgba(173, 138, 77, 0.24);
      background:
        radial-gradient(circle, rgba(255, 252, 247, 0.96), rgba(247, 238, 218, 0.82));
      box-shadow: 0 0 0 7px rgba(173, 138, 77, 0.06);
    }

    .relationship-radar-center b {
      color: #171512;
      font-size: 15px;
    }

    .relationship-radar-center small {
      color: #a93226;
      font-family: var(--serif);
      font-weight: 800;
    }

    .relationship-dimension-proof-strip {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      border-top: 1px solid rgba(173, 138, 77, 0.18);
      border-bottom: 1px solid rgba(173, 138, 77, 0.12);
      background: rgba(255, 252, 247, 0.42);
    }

    .relationship-dimension-proof-strip article {
      display: grid;
      gap: 5px;
      min-width: 0;
      padding: 12px;
      border-right: 1px solid rgba(173, 138, 77, 0.14);
    }

    .relationship-dimension-proof-strip article:last-child {
      border-right: 0;
    }

    .relationship-dimension-proof-strip strong {
      color: rgba(24, 23, 21, 0.82);
      font-family: var(--serif);
      font-size: 13px;
      letter-spacing: 0.04em;
    }

    .relationship-dimension-proof-strip p {
      margin: 0;
      color: rgba(24, 23, 21, 0.6);
      font-size: 11px;
      line-height: 1.56;
    }

    .relationship-flow-visual svg,
    .relationship-river-canvas,
    .relationship-risk-card,
    .relationship-gauge,
    .relationship-fate-meter {
      border-color: rgba(173, 138, 77, 0.2);
      background:
        linear-gradient(180deg, rgba(255, 252, 247, 0.78), rgba(248, 239, 217, 0.44));
      box-shadow: inset 0 0 0 1px rgba(255, 252, 247, 0.42);
    }

    .relationship-flow-visual .band,
    .relationship-river-canvas .river {
      animation: none;
    }

    .relationship-flow-visual .band:not(.muted),
    .relationship-river-canvas .river {
      stroke-dasharray: none;
    }

    .relationship-risk-wheel {
      background:
        conic-gradient(from -45deg,
          rgba(184, 54, 43, 0.18) 0 25%,
          rgba(184, 54, 43, 0.42) 25% 50%,
          rgba(173, 138, 77, 0.16) 50% 75%,
          rgba(184, 54, 43, 0.28) 75% 100%),
        rgba(255, 252, 247, 0.72);
    }

    .relationship-ziwei-lock-card {
      grid-template-columns: 92px minmax(0, 1fr) auto;
      padding: 18px;
      border-color: rgba(232, 197, 116, 0.28);
      border-radius: 18px;
      background:
        radial-gradient(circle at 78% 52%, rgba(232, 197, 116, 0.16), transparent 34%),
        linear-gradient(135deg, rgba(34, 38, 31, 0.96), rgba(21, 23, 20, 0.92));
      box-shadow: 0 16px 34px rgba(24, 23, 21, 0.12);
    }

    .relationship-palace-map {
      width: 78px;
      height: 78px;
      border-color: rgba(232, 197, 116, 0.34);
      background: rgba(255, 250, 241, 0.035);
    }

    .relationship-palace-map span {
      width: 70px;
      background: rgba(232, 197, 116, 0.22);
    }

    .relationship-ziwei-lock-card h3 {
      color: #efd89d;
      font-size: 21px;
    }

    .relationship-ziwei-lock-card button {
      border-color: rgba(232, 197, 116, 0.38);
      background: rgba(255, 250, 241, 0.06);
    }

    @media (max-width: 520px) {
      .relationship-energy-card {
        gap: 14px;
        padding: 12px;
      }

      .relationship-energy-stage {
        min-height: 350px;
      }

      .relationship-energy-stage-title {
        top: 16px;
        gap: 7px;
      }

      .relationship-energy-stage-title::before,
      .relationship-energy-stage-title::after {
        width: 22px;
      }

      .relationship-energy-stage-title span {
        font-size: 15px;
      }

      .relationship-energy-stage-title em {
        display: none;
      }

      .relationship-energy-name {
        top: 66px;
      }

      .relationship-energy-name span {
        width: 46px;
        height: 46px;
        font-size: 25px;
      }

      .relationship-energy-figure {
        bottom: 40px;
        height: 63%;
        max-width: 43%;
      }

      .relationship-energy-figure.is-left {
        left: 8px;
      }

      .relationship-energy-figure.is-right {
        right: 8px;
      }

      .relationship-energy-figure[data-figure="female"] {
        height: 62%;
        max-width: 46%;
      }

      .relationship-energy-figure[data-figure="child"] {
        bottom: 48px;
        height: 47%;
        max-width: 34%;
      }

      .relationship-energy-figure[data-figure="pet"] {
        right: 22px;
        bottom: 52px;
        height: 31%;
        max-width: 32%;
      }

      .relationship-fusion-seal {
        width: 52px;
        height: 52px;
        font-size: 31px;
      }

      .relationship-energy-copy {
        grid-template-columns: 1fr;
        padding: 2px 2px 0;
      }

      .relationship-energy-copy h2 {
        font-size: 32px;
      }

      .relationship-energy-verdict {
        justify-items: start;
        padding-top: 12px;
        border-top-color: rgba(173, 138, 77, 0.2);
        color: #a97935;
      }

      .relationship-overview-actions {
        grid-template-columns: 1fr;
      }

      .relationship-holo-tabs button {
        min-width: 56px;
      }

      .relationship-hologram-panel {
        padding: 14px;
      }

      .relationship-radar-wrap {
        width: min(315px, 94%);
      }

      .relationship-dimension-proof-strip {
        grid-template-columns: 1fr;
      }

      .relationship-dimension-proof-strip article {
        border-right: 0;
        border-bottom: 1px solid rgba(173, 138, 77, 0.12);
      }

      .relationship-dimension-proof-strip article:last-child {
        border-bottom: 0;
      }

      .relationship-ziwei-lock-card {
        grid-template-columns: 64px minmax(0, 1fr);
        padding: 14px;
      }

      .relationship-palace-map {
        width: 56px;
        height: 56px;
      }
    }

    /* Relationship report page: paper-first refinement, fewer framed containers. */
    .relationship-match-screen.is-report-step .relationship-report-shell {
      position: relative;
      gap: 18px;
      margin-top: 8px;
      padding: 0 0 22px;
      isolation: isolate;
    }

    .relationship-match-screen.is-report-step .relationship-report-shell > * {
      position: relative;
      z-index: 1;
    }

    .relationship-match-screen.is-report-step .relationship-report-shell::before {
      content: none;
      display: none;
    }

    .relationship-match-screen.is-report-step .relationship-report-shell::after {
      content: none;
      display: none;
    }

    .relationship-match-screen.is-report-step .relationship-report-head {
      padding: 8px 0 0;
      border-top: 0;
    }

    .relationship-match-screen.is-report-step .relationship-report-head .section-kicker {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      color: #3f8b61;
      font-family: var(--serif);
      font-size: 17px;
      font-weight: 900;
      letter-spacing: 0.12em;
    }

    .relationship-match-screen.is-report-step .relationship-report-head .section-kicker::after {
      content: "鉴";
      display: inline-grid;
      place-items: center;
      width: 18px;
      height: 18px;
      border: 1px solid rgba(184, 54, 43, 0.52);
      border-radius: 4px;
      color: var(--seal);
      font-size: 10px;
      letter-spacing: 0;
      transform: rotate(2deg);
    }

    .relationship-match-screen.is-report-step .relationship-report-head h2 {
      margin: 10px 0 7px;
      font-size: 31px;
      letter-spacing: 0.09em;
      line-height: 1.1;
    }

    .relationship-name-join {
      display: inline-flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 12px;
      max-width: 100%;
      vertical-align: middle;
    }

    .relationship-name-join i {
      display: inline-grid;
      place-items: center;
      width: 34px;
      height: 34px;
      flex: 0 0 auto;
      border: 1px solid rgba(184, 54, 43, 0.56);
      border-radius: 9px;
      background:
        radial-gradient(circle, rgba(255, 252, 247, 0.94) 0 54%, rgba(184, 54, 43, 0.07) 55% 100%);
      color: var(--seal);
      font-family: var(--kai);
      font-size: 20px;
      font-style: normal;
      font-weight: 900;
      letter-spacing: 0;
      line-height: 1;
      box-shadow:
        inset 0 0 0 4px rgba(184, 54, 43, 0.035),
        0 5px 12px rgba(121, 67, 42, 0.08);
      transform: rotate(-2deg);
    }

    .relationship-brief h2 .relationship-name-join {
      justify-content: center;
      gap: 10px;
    }

    .relationship-match-screen.is-report-step .relationship-report-head h2 .relationship-name-join {
      justify-content: flex-start;
    }

    .relationship-match-screen.is-report-step .relationship-report-head p {
      max-width: 24em;
      color: rgba(24, 23, 21, 0.58);
      font-size: 14px;
      line-height: 1.8;
    }

    .relationship-match-screen.is-report-step .relationship-report-head > .seal {
      margin-top: 18px;
      border-color: rgba(184, 54, 43, 0.5);
      background: rgba(255, 252, 247, 0.42);
    }

    .relationship-match-screen.is-report-step .relationship-report-actions {
      grid-template-columns: repeat(2, minmax(0, 132px));
      justify-content: start;
      margin-top: -4px;
    }

    .relationship-match-screen.is-report-step .relationship-report-actions button {
      min-height: 38px;
      border-radius: 999px;
      background: rgba(255, 252, 247, 0.52);
    }

    .relationship-match-screen.is-report-step .relationship-report-actions button.primary {
      background: linear-gradient(180deg, #b83a2d, #8f241b);
    }

    .relationship-match-screen.is-report-step .relationship-report-tabs {
      gap: 0;
      padding: 0;
      border: 0;
      border-top: 1px solid rgba(173, 138, 77, 0.16);
      border-bottom: 1px solid rgba(173, 138, 77, 0.16);
      border-radius: 0;
      background: transparent;
    }

    .relationship-match-screen.is-report-step .relationship-report-tabs button {
      position: relative;
      min-height: 36px;
      border-radius: 0;
      color: rgba(24, 23, 21, 0.58);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.08em;
      transition:
        color 300ms cubic-bezier(0.32, 0.72, 0, 1),
        transform 300ms cubic-bezier(0.32, 0.72, 0, 1);
    }

    .relationship-match-screen.is-report-step .relationship-report-tabs button::after {
      content: "";
      position: absolute;
      left: 50%;
      bottom: -1px;
      width: 0;
      height: 2px;
      background: var(--seal);
      transform: translateX(-50%);
      transition: width 300ms cubic-bezier(0.32, 0.72, 0, 1);
    }

    .relationship-match-screen.is-report-step .relationship-report-tabs button.active {
      background: transparent;
      color: rgba(24, 23, 21, 0.9);
      transform: none;
    }

    .relationship-match-screen.is-report-step .relationship-report-tabs button.active::after {
      width: 34px;
    }

    .relationship-match-screen.is-report-step .relationship-energy-card {
      gap: 20px;
      overflow: visible;
      padding: 0;
      border: 0;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
    }

    .relationship-match-screen.is-report-step .relationship-energy-card::before,
    .relationship-match-screen.is-report-step .relationship-energy-card::after {
      content: none;
    }

    .relationship-match-screen.is-report-step .relationship-energy-stage {
      min-height: 415px;
      overflow: hidden;
      border: 0;
      border-radius: 8px;
      background:
        radial-gradient(circle at 50% 55%, rgba(232, 197, 116, 0.2), transparent 27%),
        radial-gradient(circle at 26% 57%, color-mix(in srgb, var(--left-color) 24%, transparent), transparent 30%),
        radial-gradient(circle at 74% 57%, color-mix(in srgb, var(--right-color) 24%, transparent), transparent 30%),
        radial-gradient(circle at 50% 58%, rgba(255, 244, 199, 0.1), transparent 18%),
        linear-gradient(180deg, #151512, #191914 52%, #11100d);
      box-shadow:
        0 14px 26px rgba(54, 44, 32, 0.16),
        0 0 0 1px rgba(255, 252, 247, 0.5),
        0 0 0 6px rgba(24, 23, 21, 0.045),
        inset 0 0 34px rgba(0, 0, 0, 0.38);
      clip-path: none;
    }

    .relationship-match-screen.is-report-step .relationship-energy-stage::before {
      background:
        radial-gradient(circle at 12px 12px, rgba(255, 250, 241, 0.1) 0 1px, transparent 1.3px),
        linear-gradient(rgba(232, 197, 116, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(232, 197, 116, 0.038) 1px, transparent 1px);
      background-size: 43px 47px, 34px 34px, 34px 34px;
      opacity: 0.64;
    }

    .relationship-match-screen.is-report-step .relationship-energy-stage::after {
      inset: 0;
      border: 0;
      border-radius: inherit;
      background:
        radial-gradient(ellipse at 0% 18%, rgba(0, 0, 0, 0.46), transparent 36%),
        radial-gradient(ellipse at 100% 24%, rgba(0, 0, 0, 0.42), transparent 36%),
        radial-gradient(ellipse at 50% 0%, rgba(0, 0, 0, 0.45), transparent 23%),
        radial-gradient(ellipse at 50% 100%, rgba(0, 0, 0, 0.5), transparent 25%);
      opacity: 0.9;
      box-shadow:
        inset 0 0 0 1px rgba(255, 250, 241, 0.08),
        inset 0 0 18px rgba(0, 0, 0, 0.52),
        inset 0 0 0 7px rgba(0, 0, 0, 0.16);
    }

    .relationship-match-screen.is-report-step .relationship-energy-stage-title {
      top: 22px;
      color: #edd08c;
      letter-spacing: 0.13em;
    }

    .relationship-match-screen.is-report-step .relationship-energy-stage-title span {
      font-size: 18px;
    }

    .relationship-match-screen.is-report-step .relationship-energy-stage-title em {
      display: inline-grid;
      place-items: center;
      width: 18px;
      height: 18px;
      border: 1px solid rgba(184, 54, 43, 0.56);
      color: #b83a2d;
      font-size: 9px;
      letter-spacing: 0;
    }

    .relationship-match-screen.is-report-step .relationship-energy-figure {
      bottom: 39px;
      height: 66%;
      max-width: 39%;
      opacity: 0.66;
      filter:
        sepia(0.12)
        drop-shadow(0 0 8px rgba(232, 197, 116, 0.2))
        drop-shadow(0 10px 14px rgba(0, 0, 0, 0.28));
      z-index: 2;
    }

    .relationship-match-screen.is-report-step .relationship-energy-figure.is-left {
      left: 34px;
    }

    .relationship-match-screen.is-report-step .relationship-energy-figure.is-right {
      right: 34px;
    }

    .relationship-match-screen.is-report-step .relationship-energy-figure[data-figure="female"] {
      height: 65%;
      max-width: 42%;
    }

    .relationship-match-screen.is-report-step .relationship-energy-name {
      top: 72px;
      z-index: 6;
    }

    .relationship-match-screen.is-report-step .relationship-energy-name.is-left {
      left: 25px;
    }

    .relationship-match-screen.is-report-step .relationship-energy-name.is-right {
      right: 25px;
    }

    .relationship-match-screen.is-report-step .relationship-energy-name span {
      width: 56px;
      height: 56px;
      background: rgba(255, 250, 241, 0.08);
      box-shadow:
        inset 0 0 20px color-mix(in srgb, var(--left-color) 22%, transparent),
        0 0 0 5px rgba(232, 197, 116, 0.05);
    }

    .relationship-match-screen.is-report-step .relationship-energy-name.is-left span {
      border-color: color-mix(in srgb, var(--left-color) 60%, rgba(232, 197, 116, 0.36));
      background:
        radial-gradient(circle at 46% 35%, rgba(255, 250, 241, 0.88), color-mix(in srgb, var(--left-color) 24%, rgba(18, 16, 14, 0.12)) 72%),
        rgba(255, 250, 241, 0.08);
      color: var(--left-color);
      text-shadow: 0 1px 0 rgba(255, 250, 241, 0.28);
      box-shadow:
        inset 0 0 22px color-mix(in srgb, var(--left-color) 26%, transparent),
        0 0 0 5px rgba(232, 197, 116, 0.05);
    }

    .relationship-match-screen.is-report-step .relationship-energy-name.is-right span {
      border-color: color-mix(in srgb, var(--right-color) 60%, rgba(232, 197, 116, 0.36));
      background:
        radial-gradient(circle at 46% 35%, rgba(255, 250, 241, 0.88), color-mix(in srgb, var(--right-color) 24%, rgba(18, 16, 14, 0.12)) 72%),
        rgba(255, 250, 241, 0.08);
      color: var(--right-color);
      text-shadow: 0 1px 0 rgba(255, 250, 241, 0.28);
      box-shadow:
        inset 0 0 22px color-mix(in srgb, var(--right-color) 26%, transparent),
        0 0 0 5px rgba(232, 197, 116, 0.05);
    }

    .relationship-match-screen.is-report-step .relationship-fusion-seal {
      top: 57%;
      width: 64px;
      height: 64px;
      border-radius: 50%;
      background:
        radial-gradient(circle at 50% 50%, rgba(255, 252, 247, 0.98), rgba(238, 224, 194, 0.8) 70%),
        rgba(255, 252, 247, 0.9);
      box-shadow:
        0 0 0 7px rgba(184, 54, 43, 0.18),
        0 0 0 15px rgba(232, 197, 116, 0.08),
        0 0 34px rgba(232, 197, 116, 0.34),
        0 14px 32px rgba(0, 0, 0, 0.24);
    }

    .relationship-match-screen.is-report-step .relationship-energy-element-map {
      bottom: 22px;
      padding: 9px 12px;
      border: 0;
      background: rgba(18, 17, 14, 0.26);
      box-shadow: none;
      backdrop-filter: none;
    }

    .relationship-match-screen.is-report-step .relationship-energy-element-map small,
    .relationship-match-screen.is-report-step .relationship-energy-element-map em {
      display: none;
    }

    .relationship-match-screen.is-report-step .relationship-energy-element-map span {
      grid-template-columns: auto auto;
      gap: 5px;
      font-size: 12px;
    }

    .relationship-match-screen.is-report-step .relationship-energy-element-map i {
      width: 12px;
      height: 12px;
    }

    .relationship-match-screen.is-report-step .relationship-energy-copy {
      grid-template-columns: minmax(0, 1fr) 80px;
      gap: 18px;
      padding: 0 2px 4px;
      border: 0;
      background: transparent;
      box-shadow: none;
    }

    .relationship-match-screen.is-report-step .relationship-energy-copy h2 {
      margin: 9px 0 12px;
      font-size: 41px;
      letter-spacing: 0.04em;
    }

    .relationship-match-screen.is-report-step .relationship-energy-copy p:not(.relationship-energy-verdict) {
      max-width: 24em;
      color: rgba(24, 23, 21, 0.74);
      font-size: 15px;
      line-height: 1.86;
    }

    .relationship-match-screen.is-report-step .relationship-energy-verdict {
      place-items: center;
      border-left: 1px solid rgba(173, 138, 77, 0.3);
      color: #a97935;
      font-size: 17px;
      letter-spacing: 0.24em;
    }

    .relationship-match-screen.is-report-step .relationship-energy-card blockquote {
      padding: 0;
      border: 0;
      border-radius: 0;
      background: transparent;
      color: rgba(24, 23, 21, 0.78);
      font-size: 17px;
      line-height: 2;
    }

    .relationship-match-screen.is-report-step .relationship-energy-metrics {
      border-top: 1px solid rgba(173, 138, 77, 0.2);
      border-bottom: 1px solid rgba(173, 138, 77, 0.14);
    }

    .relationship-match-screen.is-report-step .relationship-energy-copy .relationship-energy-metrics {
      margin: 9px 0 10px;
      border-top-color: rgba(173, 138, 77, 0.16);
      border-bottom-color: rgba(173, 138, 77, 0.12);
    }

    .relationship-match-screen.is-report-step .relationship-energy-metrics span {
      min-height: 78px;
      padding: 13px 6px 10px;
      border: 0;
      border-right: 1px solid rgba(173, 138, 77, 0.18);
      border-radius: 0;
      background: transparent;
    }

    .relationship-match-screen.is-report-step .relationship-energy-copy .relationship-energy-metrics span {
      min-height: 54px;
      padding: 8px 4px 7px;
    }

    .relationship-match-screen.is-report-step .relationship-energy-metrics span:last-child {
      border-right: 0;
    }

    .relationship-match-screen.is-report-step .relationship-energy-metrics b {
      color: #a93226;
      font-size: 31px;
    }

    .relationship-match-screen.is-report-step .relationship-energy-copy .relationship-energy-metrics b {
      font-size: 25px;
    }

    .relationship-match-screen.is-report-step .relationship-energy-copy .relationship-energy-metrics small {
      color: rgba(24, 23, 21, 0.58);
      font-size: 11px;
    }

    .relationship-match-screen.is-report-step .relationship-overview-actions {
      grid-template-columns: 1.22fr 1fr 1fr;
      gap: 12px;
    }

    .relationship-match-screen.is-report-step .relationship-overview-actions button {
      position: relative;
      min-height: 58px;
      border: 1px solid rgba(173, 138, 77, 0.26);
      border-radius: 0;
      background:
        linear-gradient(180deg, rgba(255, 252, 247, 0.92), rgba(248, 239, 217, 0.68));
      color: rgba(24, 23, 21, 0.86);
      box-shadow: inset 0 0 0 3px rgba(255, 252, 247, 0.38);
      clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px);
      transition:
        transform 300ms cubic-bezier(0.32, 0.72, 0, 1),
        box-shadow 300ms cubic-bezier(0.32, 0.72, 0, 1);
    }

    .relationship-match-screen.is-report-step .relationship-overview-actions button:active {
      transform: translateY(1px) scale(0.99);
    }

    .relationship-match-screen.is-report-step .relationship-overview-actions button.primary {
      border-color: rgba(123, 34, 27, 0.56);
      background:
        radial-gradient(circle at 20% 16%, rgba(232, 197, 116, 0.22), transparent 32%),
        linear-gradient(180deg, #c24132, #8f241b);
      color: #fffaf1;
      box-shadow:
        inset 0 0 0 3px rgba(255, 232, 190, 0.13),
        0 12px 24px rgba(123, 34, 27, 0.18);
    }

    .relationship-match-screen.is-report-step .relationship-overview-evidence {
      gap: 12px;
      padding: 18px 0 4px;
      border-top-color: rgba(173, 138, 77, 0.18);
    }

    .relationship-match-screen.is-report-step .relationship-overview-evidence h2 {
      display: flex;
      align-items: center;
      gap: 7px;
      font-size: 24px;
    }

    .relationship-match-screen.is-report-step .relationship-overview-evidence h2::after {
      content: "验";
      display: inline-grid;
      place-items: center;
      width: 18px;
      height: 18px;
      border: 1px solid rgba(184, 54, 43, 0.52);
      border-radius: 3px;
      color: var(--seal);
      font-size: 10px;
    }

    .relationship-match-screen.is-report-step .relationship-overview-evidence .relationship-evidence-list {
      overflow: hidden;
      border: 1px solid rgba(173, 138, 77, 0.18);
      border-radius: 8px;
      background: rgba(255, 252, 247, 0.32);
    }

    .relationship-match-screen.is-report-step .relationship-overview-evidence .relationship-evidence-list div {
      grid-template-columns: 48px minmax(0, 1fr);
      min-height: 54px;
      padding: 9px 12px;
      border-bottom: 1px solid rgba(173, 138, 77, 0.12);
      background: transparent;
    }

    .relationship-match-screen.is-report-step .relationship-overview-evidence .relationship-evidence-list div:last-child {
      border-bottom: 0;
    }

    .relationship-match-screen.is-report-step .relationship-overview-evidence .relationship-evidence-list strong {
      color: #a97935;
      font-size: 14px;
    }

    .relationship-match-screen.is-report-step .relationship-overview-evidence .relationship-evidence-list p {
      color: rgba(24, 23, 21, 0.66);
      line-height: 1.68;
    }

    .relationship-match-screen.is-report-step .card-actions {
      display: none;
    }

    @media (max-width: 520px) {
      .relationship-match-screen.is-report-step .relationship-report-shell::before {
        right: -22px;
        width: 122px;
        height: 196px;
      }

      .relationship-match-screen.is-report-step .relationship-report-head h2 {
        font-size: 29px;
      }

      .relationship-match-screen.is-report-step .relationship-energy-stage {
        min-height: 365px;
      }

      .relationship-match-screen.is-report-step .relationship-energy-figure {
        bottom: 43px;
        height: 56%;
        max-width: 38%;
      }

      .relationship-match-screen.is-report-step .relationship-energy-figure.is-left {
        left: 26px;
      }

      .relationship-match-screen.is-report-step .relationship-energy-figure.is-right {
        right: 26px;
      }

      .relationship-match-screen.is-report-step .relationship-energy-figure[data-figure="female"] {
        height: 57%;
        max-width: 42%;
      }

      .relationship-match-screen.is-report-step .relationship-energy-name {
        top: 68px;
      }

      .relationship-match-screen.is-report-step .relationship-energy-name span {
        width: 48px;
        height: 48px;
      }

      .relationship-match-screen.is-report-step .relationship-fusion-seal {
        width: 56px;
        height: 56px;
      }

      .relationship-match-screen.is-report-step .relationship-energy-copy {
        grid-template-columns: minmax(0, 1fr) 58px;
      }

      .relationship-match-screen.is-report-step .relationship-energy-copy h2 {
        font-size: 35px;
      }

      .relationship-match-screen.is-report-step .relationship-energy-verdict {
        font-size: 15px;
        letter-spacing: 0.18em;
      }

      .relationship-match-screen.is-report-step .relationship-overview-actions {
        grid-template-columns: 1.14fr 1fr 1fr;
        gap: 7px;
      }

      .relationship-match-screen.is-report-step .relationship-overview-actions button {
        min-height: 52px;
        padding: 0 6px;
        font-size: 12px;
        letter-spacing: 0.05em;
      }
    }

    /* Relationship five-dimension pages: paper chapter refinement. */
    .relationship-match-screen.is-report-step .relationship-hologram-shell {
      position: relative;
      gap: 16px;
      isolation: isolate;
    }

    .relationship-match-screen.is-report-step .relationship-hologram-shell::before {
      content: none;
      display: none;
    }

    .relationship-match-screen.is-report-step .relationship-holo-tabs {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 0;
      overflow: visible;
      padding: 0 0 12px;
      border-bottom: 1px solid rgba(173, 138, 77, 0.18);
    }

    .relationship-match-screen.is-report-step .relationship-holo-tabs button {
      min-width: 0;
      min-height: 74px;
      color: rgba(24, 23, 21, 0.52);
      transition:
        color 300ms cubic-bezier(0.32, 0.72, 0, 1),
        transform 300ms cubic-bezier(0.32, 0.72, 0, 1);
    }

    .relationship-match-screen.is-report-step .relationship-holo-tabs b {
      font-size: clamp(22px, 5.7vw, 28px);
      letter-spacing: 0.07em;
    }

    .relationship-match-screen.is-report-step .relationship-holo-tabs small {
      width: 26px;
      height: 26px;
      border-color: rgba(173, 138, 77, 0.25);
      border-radius: 50%;
      background: rgba(255, 252, 247, 0.32);
      color: rgba(24, 23, 21, 0.46);
    }

    .relationship-match-screen.is-report-step .relationship-holo-tabs button.active {
      color: #171512;
      transform: translateY(-2px);
    }

    .relationship-match-screen.is-report-step .relationship-holo-tabs button.active b {
      color: #171512;
      transform: none;
    }

    .relationship-match-screen.is-report-step .relationship-holo-tabs button.active small {
      border-color: rgba(184, 54, 43, 0.52);
      background: rgba(184, 54, 43, 0.06);
      color: var(--seal);
    }

    .relationship-match-screen.is-report-step .relationship-holo-tabs button.active::after {
      bottom: -13px;
      width: 36px;
      height: 2px;
      border-radius: 0;
      background: var(--seal);
    }

    .relationship-match-screen.is-report-step .relationship-hologram-panel {
      position: relative;
      z-index: 1;
      gap: 18px;
      overflow: visible;
      padding: 4px 0 2px;
      border: 0;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
    }

    .relationship-match-screen.is-report-step .relationship-hologram-panel::before {
      content: "";
      position: absolute;
      inset: 74px -6px auto -6px;
      z-index: -1;
      height: 218px;
      pointer-events: none;
      background:
        radial-gradient(circle at 50% 18%, rgba(173, 138, 77, 0.1), transparent 44%),
        linear-gradient(90deg, rgba(113, 93, 62, 0.035) 1px, transparent 1px),
        linear-gradient(rgba(113, 93, 62, 0.028) 1px, transparent 1px);
      background-size: auto, 24px 24px, 24px 24px;
      opacity: 0.72;
    }

    .relationship-match-screen.is-report-step .relationship-hologram-panel header {
      grid-template-columns: 44px minmax(0, 1fr) auto;
      gap: 12px;
      padding: 2px 0 15px;
      border-bottom: 1px solid rgba(173, 138, 77, 0.16);
    }

    .relationship-match-screen.is-report-step .relationship-hologram-panel header .seal {
      width: 42px;
      height: 42px;
      border-radius: 8px;
      background: rgba(255, 252, 247, 0.42);
      box-shadow: inset 0 0 0 5px rgba(184, 54, 43, 0.04);
      transform: rotate(-2deg);
    }

    .relationship-match-screen.is-report-step .relationship-hologram-panel header small {
      color: #a97935;
      font-size: 12px;
      letter-spacing: 0.12em;
    }

    .relationship-match-screen.is-report-step .relationship-hologram-panel header h2 {
      margin-top: 5px;
      font-size: 27px;
      letter-spacing: 0.04em;
    }

    .relationship-match-screen.is-report-step .relationship-holo-tools {
      gap: 7px;
      align-self: start;
      grid-column: auto;
      justify-content: end;
    }

    .relationship-match-screen.is-report-step .relationship-holo-tools > b {
      color: #a93226;
      font-family: var(--serif);
      font-size: 13px;
      letter-spacing: 0.08em;
    }

    .relationship-match-screen.is-report-step .relationship-holo-tools button {
      width: 34px;
      height: 34px;
      border-radius: 8px;
      background: rgba(255, 252, 247, 0.5);
    }

    .relationship-match-screen.is-report-step .relationship-fate-visual,
    .relationship-match-screen.is-report-step .relationship-resonance-visual,
    .relationship-match-screen.is-report-step .relationship-flow-visual {
      gap: 16px;
    }

    .relationship-match-screen.is-report-step .relationship-fate-meter {
      min-height: 92px;
      border: 0;
      border-radius: 0;
      background:
        radial-gradient(circle at 50% 50%, rgba(255, 252, 247, 0.92), transparent 23%),
        linear-gradient(90deg, rgba(24, 23, 21, 0.06), rgba(173, 138, 77, 0.16), rgba(24, 23, 21, 0.04));
      box-shadow:
        inset 0 1px 0 rgba(173, 138, 77, 0.16),
        inset 0 -1px 0 rgba(173, 138, 77, 0.12);
    }

    .relationship-match-screen.is-report-step .relationship-fate-meter span {
      left: 20px;
      width: calc(var(--value) - 40px);
      height: 12px;
      background: linear-gradient(90deg, rgba(184, 54, 43, 0.24), rgba(232, 197, 116, 0.76));
    }

    .relationship-match-screen.is-report-step .relationship-fate-meter b {
      font-size: 27px;
    }

    .relationship-match-screen.is-report-step .relationship-fate-visual > p {
      margin: 0;
      color: rgba(24, 23, 21, 0.72);
      font-size: 15px;
      line-height: 1.86;
    }

    .relationship-match-screen.is-report-step .relationship-keyword-cloud {
      gap: 9px;
      padding-top: 2px;
    }

    .relationship-match-screen.is-report-step .relationship-keyword-cloud button,
    .relationship-match-screen.is-report-step .relationship-flow-notes button {
      min-height: 34px;
      padding: 0 13px;
      border-color: rgba(173, 138, 77, 0.22);
      border-radius: 6px 14px 6px 14px;
      background: rgba(255, 252, 247, 0.42);
      color: rgba(24, 23, 21, 0.72);
      transition:
        border-color 260ms cubic-bezier(0.32, 0.72, 0, 1),
        transform 260ms cubic-bezier(0.32, 0.72, 0, 1);
    }

    .relationship-match-screen.is-report-step .relationship-keyword-cloud button:active,
    .relationship-match-screen.is-report-step .relationship-flow-notes button:active {
      transform: translateY(1px) scale(0.99);
    }

    .relationship-match-screen.is-report-step .relationship-radar-wrap {
      width: min(340px, 95%);
      margin: 8px auto 0;
    }

    .relationship-match-screen.is-report-step .relationship-radar-wrap::before {
      inset: 10%;
      background:
        radial-gradient(circle, rgba(173, 138, 77, 0.13), transparent 58%),
        radial-gradient(circle at 48% 52%, rgba(24, 23, 21, 0.07), transparent 48%);
    }

    .relationship-match-screen.is-report-step .relationship-radar-wrap .grid {
      fill: rgba(255, 252, 247, 0.12);
      stroke: rgba(173, 138, 77, 0.42);
    }

    .relationship-match-screen.is-report-step .relationship-radar-wrap .shape {
      fill: rgba(173, 138, 77, 0.18);
      stroke: rgba(169, 50, 38, 0.66);
    }

    .relationship-match-screen.is-report-step .relationship-radar-wrap > button {
      width: 40px;
      height: 40px;
      background:
        radial-gradient(circle, rgba(255, 252, 247, 0.94), rgba(238, 224, 194, 0.76));
      box-shadow: 0 8px 18px rgba(54, 44, 32, 0.08);
    }

    .relationship-match-screen.is-report-step .relationship-radar-wrap > button.active {
      border-color: rgba(184, 54, 43, 0.48);
      color: var(--seal);
      box-shadow: 0 0 0 6px rgba(184, 54, 43, 0.07);
    }

    .relationship-match-screen.is-report-step .relationship-radar-center {
      width: 96px;
      height: 96px;
      border-color: rgba(173, 138, 77, 0.24);
      background:
        radial-gradient(circle, rgba(255, 252, 247, 0.96), rgba(247, 238, 218, 0.82));
    }

    .relationship-match-screen.is-report-step .relationship-perspective-switch {
      justify-self: center;
      width: min(300px, 100%);
      padding: 0;
      border: 0;
      border-top: 1px solid rgba(173, 138, 77, 0.16);
      border-bottom: 1px solid rgba(173, 138, 77, 0.16);
      border-radius: 0;
      background: transparent;
    }

    .relationship-match-screen.is-report-step .relationship-perspective-switch button {
      border-radius: 0;
    }

    .relationship-match-screen.is-report-step .relationship-perspective-switch button.active {
      background: transparent;
      color: var(--seal);
      box-shadow: inset 0 -2px 0 var(--seal);
    }

    .relationship-match-screen.is-report-step .relationship-flow-visual svg {
      min-height: 206px;
      border: 0;
      border-radius: 8px;
      background:
        radial-gradient(circle at 20% 50%, color-mix(in srgb, var(--left-color) 18%, transparent), transparent 25%),
        radial-gradient(circle at 80% 50%, color-mix(in srgb, var(--right-color) 18%, transparent), transparent 25%),
        linear-gradient(180deg, rgba(255, 252, 247, 0.78), rgba(248, 239, 217, 0.36));
      box-shadow:
        inset 0 0 0 1px rgba(173, 138, 77, 0.16),
        inset 0 0 34px rgba(173, 138, 77, 0.08);
    }

    .relationship-match-screen.is-report-step .relationship-flow-visual .band {
      stroke-dasharray: none;
      animation: none;
    }

    .relationship-match-screen.is-report-step .relationship-flow-visual > p {
      margin: 0;
      color: rgba(24, 23, 21, 0.68);
      font-size: 14px;
      line-height: 1.8;
    }

    .relationship-match-screen.is-report-step .relationship-gauge-row {
      gap: 0;
      border-top: 1px solid rgba(173, 138, 77, 0.18);
      border-bottom: 1px solid rgba(173, 138, 77, 0.12);
    }

    .relationship-match-screen.is-report-step .relationship-gauge {
      min-height: 94px;
      border: 0;
      border-right: 1px solid rgba(173, 138, 77, 0.14);
      border-radius: 0;
      background:
        conic-gradient(from -120deg, rgba(184, 54, 43, 0.6) var(--value), rgba(24, 23, 21, 0.08) 0),
        rgba(255, 252, 247, 0.28);
      box-shadow: none;
    }

    .relationship-match-screen.is-report-step .relationship-gauge:last-child {
      border-right: 0;
    }

    .relationship-match-screen.is-report-step .relationship-risk-visual {
      grid-template-columns: 1fr;
      gap: 18px;
      align-items: center;
      justify-items: center;
    }

    .relationship-match-screen.is-report-step .relationship-risk-wheel {
      width: min(210px, 100%);
      border-color: rgba(184, 54, 43, 0.18);
      background:
        conic-gradient(from -45deg,
          rgba(184, 54, 43, 0.17) 0 25%,
          rgba(184, 54, 43, 0.42) 25% 50%,
          rgba(173, 138, 77, 0.15) 50% 75%,
          rgba(184, 54, 43, 0.28) 75% 100%),
        rgba(255, 252, 247, 0.55);
      box-shadow:
        inset 0 0 0 18px rgba(255, 252, 247, 0.28),
        0 12px 24px rgba(54, 44, 32, 0.08);
    }

    .relationship-match-screen.is-report-step .relationship-risk-card {
      padding: 0 0 0 18px;
      border: 0;
      border-left: 1px solid rgba(184, 54, 43, 0.18);
      border-radius: 0;
      background: transparent;
      box-shadow: none;
    }

    .relationship-match-screen.is-report-step .relationship-risk-card small {
      color: #a93226;
      letter-spacing: 0.14em;
    }

    .relationship-match-screen.is-report-step .relationship-risk-card h3 {
      margin-top: 8px;
      font-size: 15px;
    }

    .relationship-match-screen.is-report-step .relationship-risk-card p {
      color: rgba(24, 23, 21, 0.66);
      font-size: 13px;
      line-height: 1.7;
    }

    .relationship-match-screen.is-report-step .relationship-risk-card button,
    .relationship-match-screen.is-report-step .relationship-flow-detail-button {
      min-height: 36px;
      border-radius: 6px 14px 6px 14px;
      background: rgba(184, 54, 43, 0.06);
    }

    .relationship-match-screen.is-report-step .relationship-river-scroll {
      margin-inline: -2px;
      padding-bottom: 10px;
    }

    .relationship-match-screen.is-report-step .relationship-river-canvas {
      height: 198px;
      border: 0;
      border-radius: 8px;
      background:
        linear-gradient(180deg, rgba(255, 252, 247, 0.82), rgba(232, 197, 116, 0.09)),
        linear-gradient(90deg, rgba(113, 93, 62, 0.035) 1px, transparent 1px),
        rgba(255, 252, 247, 0.45);
      background-size: auto, 28px 28px, auto;
      box-shadow:
        inset 0 0 0 1px rgba(173, 138, 77, 0.16),
        inset 0 0 32px rgba(173, 138, 77, 0.08);
    }

    .relationship-match-screen.is-report-step .relationship-river-canvas .river {
      stroke-dasharray: none;
      animation: none;
    }

    .relationship-match-screen.is-report-step .relationship-year-detail.compact {
      margin-top: 12px;
      padding: 0 0 0 16px;
      border-left: 1px solid rgba(173, 138, 77, 0.22);
      border-radius: 0;
      background: transparent;
    }

    .relationship-match-screen.is-report-step .relationship-dimension-proof-strip {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      border-top-color: rgba(173, 138, 77, 0.18);
      border-bottom-color: rgba(173, 138, 77, 0.12);
      background: transparent;
    }

    .relationship-match-screen.is-report-step .relationship-dimension-proof-strip article {
      padding: 12px 10px;
      background: rgba(255, 252, 247, 0.18);
    }

    .relationship-match-screen.is-report-step .relationship-ziwei-line {
      padding-top: 12px;
      color: rgba(113, 93, 62, 0.62);
    }

    .relationship-match-screen.is-report-step .relationship-ziwei-lock-card {
      grid-template-columns: 70px minmax(0, 1fr) auto;
      gap: 12px;
      padding: 14px 16px;
      border-radius: 12px;
      box-shadow: 0 12px 26px rgba(24, 23, 21, 0.1);
    }

    .relationship-match-screen.is-report-step .relationship-palace-map {
      width: 60px;
      height: 60px;
    }

    .relationship-match-screen.is-report-step .relationship-palace-map span {
      width: 54px;
    }

    .relationship-match-screen.is-report-step .relationship-volume:not(.relationship-overview-evidence) {
      gap: 12px;
      padding: 17px 0 4px;
      border-top-color: rgba(173, 138, 77, 0.18);
    }

    .relationship-match-screen.is-report-step .relationship-volume:not(.relationship-overview-evidence) h2 {
      font-size: 24px;
    }

    .relationship-match-screen.is-report-step .relationship-action-list {
      border-top: 1px solid rgba(173, 138, 77, 0.14);
      border-bottom: 1px solid rgba(173, 138, 77, 0.12);
      background: transparent;
    }

    .relationship-match-screen.is-report-step .relationship-action-list div {
      min-height: 48px;
      padding: 9px 0;
      border-bottom: 1px solid rgba(173, 138, 77, 0.1);
      background: transparent;
    }

    .relationship-match-screen.is-report-step .relationship-action-list div:last-child {
      border-bottom: 0;
    }

    .relationship-match-screen.is-report-step .relationship-action-list b {
      background: rgba(184, 54, 43, 0.06);
    }

    .relationship-match-screen.is-report-step [data-relationship-report] {
      padding-bottom: max(34px, env(safe-area-inset-bottom));
    }

    @media (max-width: 520px) {
      .relationship-match-screen.is-report-step .relationship-holo-tabs {
        gap: 0;
      }

      .relationship-match-screen.is-report-step .relationship-holo-tabs button {
        min-height: 66px;
      }

      .relationship-match-screen.is-report-step .relationship-holo-tabs b {
        font-size: clamp(20px, 5.4vw, 23px);
      }

      .relationship-match-screen.is-report-step .relationship-holo-tabs small {
        width: 22px;
        height: 22px;
        font-size: 11px;
      }

      .relationship-match-screen.is-report-step .relationship-hologram-panel header {
        grid-template-columns: 40px minmax(0, 1fr) auto;
      }

      .relationship-match-screen.is-report-step .relationship-hologram-panel header h2 {
        font-size: 24px;
      }

      .relationship-match-screen.is-report-step .relationship-holo-tools > b {
        display: none;
      }

      .relationship-match-screen.is-report-step .relationship-holo-tools {
        grid-column: auto;
        justify-content: end;
      }

      .relationship-match-screen.is-report-step .relationship-holo-tools button {
        width: 31px;
        height: 31px;
        border-radius: 7px;
        font-size: 17px;
      }

      .relationship-match-screen.is-report-step .relationship-risk-visual {
        grid-template-columns: 1fr;
      }

      .relationship-match-screen.is-report-step .relationship-risk-card {
        padding: 12px 0 0;
        border-left: 0;
        border-top: 1px solid rgba(184, 54, 43, 0.16);
      }

      .relationship-match-screen.is-report-step .relationship-dimension-proof-strip {
        grid-template-columns: 1fr;
      }

      .relationship-match-screen.is-report-step .relationship-dimension-proof-strip article {
        border-right: 0;
        border-bottom: 1px solid rgba(173, 138, 77, 0.12);
      }

      .relationship-match-screen.is-report-step .relationship-dimension-proof-strip article:last-child {
        border-bottom: 0;
      }

      .relationship-match-screen.is-report-step .relationship-ziwei-lock-card {
        grid-template-columns: 58px minmax(0, 1fr);
        padding: 13px;
      }

      .relationship-match-screen.is-report-step .relationship-ziwei-lock-card button {
        grid-column: 2;
        justify-self: start;
      }
    }

    /* Relationship five-dimension pages: landing from hierarchy design drafts. */
    .relationship-match-screen.is-report-step .relationship-hologram-shell {
      position: relative;
      overflow: visible;
      gap: 18px;
    }

    .relationship-match-screen.is-report-step .relationship-hologram-shell::before {
      content: none;
      display: none;
      background: none;
    }

    .relationship-match-screen.is-report-step .relationship-hologram-shell::after {
      content: "";
      position: absolute;
      left: 50%;
      top: 230px;
      z-index: 0;
      width: min(720px, 118%);
      height: 342px;
      pointer-events: none;
      background: url("/prototype/assets/relationship-match/backgrounds/relationship-scroll-wash-v1.webp") center / contain no-repeat;
      opacity: 0.22;
      transform: translateX(-50%);
      mix-blend-mode: multiply;
    }

    .relationship-match-screen.is-report-step .relationship-holo-tabs {
      z-index: 2;
      gap: 0;
      padding: 8px 0 20px;
      border-bottom: 1px solid rgba(173, 138, 77, 0.14);
    }

    .relationship-match-screen.is-report-step .relationship-holo-tabs button {
      min-height: 62px;
      padding: 0 2px;
    }

    .relationship-match-screen.is-report-step .relationship-holo-tabs b {
      color: rgba(24, 23, 21, 0.52);
      font-size: clamp(24px, 6.3vw, 32px);
      letter-spacing: 0.06em;
      transition: color 280ms cubic-bezier(0.32, 0.72, 0, 1), transform 280ms cubic-bezier(0.32, 0.72, 0, 1);
    }

    .relationship-match-screen.is-report-step .relationship-holo-tabs small {
      display: none;
    }

    .relationship-match-screen.is-report-step .relationship-holo-tabs button.active {
      transform: none;
    }

    .relationship-match-screen.is-report-step .relationship-holo-tabs button.active b {
      color: #171512;
      transform: translateY(-3px) scale(1.1);
    }

    .relationship-match-screen.is-report-step .relationship-holo-tabs button.active::after {
      bottom: 4px;
      width: 58px;
      height: 6px;
      border-radius: 999px;
      background:
        radial-gradient(circle at 96% 42%, rgba(173, 138, 77, 0.72) 0 6%, transparent 7%),
        linear-gradient(90deg, transparent, rgba(173, 138, 77, 0.88) 16% 86%, transparent);
      box-shadow: none;
    }

    .relationship-match-screen.is-report-step .relationship-hologram-panel {
      z-index: 1;
      gap: 24px;
      padding: 0;
      border: 0;
      background: transparent;
    }

    .relationship-match-screen.is-report-step .relationship-hologram-panel::before {
      display: none;
    }

    .relationship-match-screen.is-report-step .relationship-dimension-chapter-head {
      position: relative;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: start;
      gap: 12px;
      padding: 0 0 4px;
      border: 0;
      text-align: center;
    }

    .relationship-match-screen.is-report-step .relationship-dimension-chapter-head > div:first-child {
      justify-self: center;
      max-width: 520px;
      grid-column: 1 / -1;
    }

    .relationship-match-screen.is-report-step .relationship-dimension-chapter-head h2 {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      margin: 0;
      color: #171512;
      font-size: clamp(30px, 7vw, 42px);
      letter-spacing: 0.07em;
      line-height: 1.08;
      text-wrap: balance;
    }

    .relationship-match-screen.is-report-step .relationship-dimension-chapter-head h2 .seal {
      width: 30px;
      height: 30px;
      border-radius: 7px;
      background: rgba(255, 252, 247, 0.34);
      color: var(--seal);
      font-size: 17px;
      box-shadow: none;
      transform: none;
    }

    .relationship-match-screen.is-report-step .relationship-dimension-chapter-head p {
      margin: 11px 0 0;
      color: rgba(24, 23, 21, 0.5);
      font-family: var(--serif);
      font-size: 15px;
      font-weight: 800;
      letter-spacing: 0.08em;
      line-height: 1.45;
    }

    .relationship-match-screen.is-report-step .relationship-dimension-chapter-head i {
      display: block;
      width: 150px;
      height: 14px;
      margin: 9px auto 0;
      background:
        radial-gradient(circle at 50% 50%, rgba(173, 138, 77, 0.82) 0 7%, transparent 8%),
        linear-gradient(90deg, transparent, rgba(173, 138, 77, 0.64), transparent);
    }

    .relationship-match-screen.is-report-step .relationship-dimension-chapter-head .relationship-holo-tools {
      position: absolute;
      right: 0;
      top: 2px;
      grid-auto-flow: column;
      align-items: center;
    }

    .relationship-match-screen.is-report-step .relationship-dimension-chapter-head .relationship-holo-tools > b {
      color: rgba(169, 50, 38, 0.78);
      font-size: 12px;
    }

    .relationship-match-screen.is-report-step .relationship-dimension-chapter-head .relationship-holo-tools button {
      width: 31px;
      height: 31px;
      border-radius: 7px;
      background: rgba(255, 252, 247, 0.42);
      box-shadow: none;
    }

    .relationship-match-screen.is-report-step .relationship-fate-visual,
    .relationship-match-screen.is-report-step .relationship-resonance-visual,
    .relationship-match-screen.is-report-step .relationship-flow-visual {
      gap: 18px;
    }

    .relationship-match-screen.is-report-step .relationship-fate-origin-map {
      position: relative;
      min-height: 286px;
      overflow: visible;
      isolation: isolate;
    }

    .relationship-match-screen.is-report-step .relationship-fate-origin-map::before {
      content: "";
      position: absolute;
      left: 50%;
      top: 50%;
      z-index: -1;
      width: min(460px, 96%);
      aspect-ratio: 1.9;
      border-radius: 50%;
      border: 1px solid rgba(173, 138, 77, 0.13);
      background:
        radial-gradient(circle, rgba(173, 138, 77, 0.1), transparent 42%),
        repeating-radial-gradient(circle, rgba(173, 138, 77, 0.12) 0 1px, transparent 1px 28px);
      opacity: 0.78;
      transform: translate(-50%, -50%);
    }

    .relationship-match-screen.is-report-step .relationship-fate-origin-map svg {
      position: absolute;
      left: 50%;
      top: 50%;
      z-index: 1;
      width: min(520px, 100%);
      height: 210px;
      transform: translate(-50%, -50%);
    }

    .relationship-match-screen.is-report-step .relationship-fate-origin-map .thread {
      fill: none;
      stroke-linecap: round;
      stroke-width: 2.4;
    }

    .relationship-match-screen.is-report-step .relationship-fate-origin-map .thread.is-red {
      stroke: rgba(184, 54, 43, 0.68);
    }

    .relationship-match-screen.is-report-step .relationship-fate-origin-map .thread.is-gold {
      stroke: rgba(173, 138, 77, 0.7);
    }

    .relationship-match-screen.is-report-step .relationship-fate-origin-map .thread.is-green {
      stroke: color-mix(in srgb, var(--left-color) 70%, var(--right-color) 30%);
    }

    .relationship-match-screen.is-report-step .relationship-fate-origin-map .axis {
      fill: none;
      stroke: rgba(173, 138, 77, 0.28);
      stroke-dasharray: 4 9;
      stroke-width: 1.2;
    }

    .relationship-match-screen.is-report-step .relationship-origin-moon,
    .relationship-match-screen.is-report-step .relationship-origin-center {
      position: absolute;
      z-index: 2;
      display: grid;
      place-items: center;
      border-radius: 50%;
      font-family: var(--serif);
    }

    .relationship-match-screen.is-report-step .relationship-origin-moon {
      top: 50%;
      width: 112px;
      height: 112px;
      border: 1px solid rgba(173, 138, 77, 0.22);
      background:
        radial-gradient(circle at 36% 32%, rgba(255, 252, 247, 0.96), rgba(231, 238, 224, 0.52) 62%, rgba(173, 138, 77, 0.08)),
        rgba(255, 252, 247, 0.38);
      box-shadow: inset 0 0 24px rgba(113, 93, 62, 0.08);
      transform: translateY(-50%);
    }

    .relationship-match-screen.is-report-step .relationship-origin-moon.is-left {
      left: min(8%, 42px);
    }

    .relationship-match-screen.is-report-step .relationship-origin-moon.is-right {
      right: min(8%, 42px);
    }

    .relationship-match-screen.is-report-step .relationship-origin-moon b {
      color: #4c8b66;
      font-size: 37px;
      line-height: 1;
    }

    .relationship-match-screen.is-report-step .relationship-origin-moon small {
      margin-top: -20px;
      color: rgba(24, 23, 21, 0.45);
      font-size: 13px;
      font-weight: 900;
    }

    .relationship-match-screen.is-report-step .relationship-origin-center {
      left: 50%;
      top: 50%;
      width: 82px;
      height: 82px;
      border: 1px solid rgba(184, 54, 43, 0.34);
      background:
        radial-gradient(circle, rgba(255, 252, 247, 0.96), rgba(248, 239, 217, 0.82));
      box-shadow: 0 0 0 8px rgba(184, 54, 43, 0.05), 0 0 28px rgba(232, 197, 116, 0.34);
      transform: translate(-50%, -50%);
    }

    .relationship-match-screen.is-report-step .relationship-origin-center b {
      color: var(--seal);
      font-size: 36px;
      line-height: 1;
    }

    .relationship-match-screen.is-report-step .relationship-origin-center small {
      color: rgba(173, 138, 77, 0.86);
      font-size: 10px;
      font-weight: 900;
      letter-spacing: 0.06em;
    }

    .relationship-match-screen.is-report-step .relationship-fate-origin-map .tag {
      position: absolute;
      z-index: 3;
      min-width: 46px;
      padding: 4px 9px;
      border: 1px solid rgba(173, 138, 77, 0.24);
      border-radius: 999px;
      background: rgba(255, 252, 247, 0.62);
      color: rgba(123, 34, 27, 0.82);
      font-family: var(--serif);
      font-size: 13px;
      font-style: normal;
      font-weight: 900;
      text-align: center;
    }

    .relationship-match-screen.is-report-step .relationship-fate-origin-map .tag.is-top {
      left: 50%;
      top: 13px;
      transform: translateX(-50%);
    }

    .relationship-match-screen.is-report-step .relationship-fate-origin-map .tag.is-left {
      left: 22%;
      bottom: 36px;
    }

    .relationship-match-screen.is-report-step .relationship-fate-origin-map .tag.is-right {
      right: 22%;
      bottom: 40px;
    }

    .relationship-match-screen.is-report-step .relationship-fate-origin-map .tag.is-bottom {
      left: 50%;
      bottom: 8px;
      color: #4c8b66;
      transform: translateX(-50%);
    }

    .relationship-match-screen.is-report-step .relationship-fate-visual > p,
    .relationship-match-screen.is-report-step .relationship-resonance-visual > p,
    .relationship-match-screen.is-report-step .relationship-flow-visual > p {
      max-width: 680px;
      margin: 0 auto;
      color: rgba(24, 23, 21, 0.72);
      font-size: 16px;
      line-height: 1.86;
      text-align: left;
      text-wrap: pretty;
    }

    .relationship-match-screen.is-report-step .relationship-keyword-cloud {
      justify-content: center;
      gap: 10px;
    }

    .relationship-match-screen.is-report-step .relationship-keyword-cloud button,
    .relationship-match-screen.is-report-step .relationship-flow-notes button {
      min-height: 34px;
      border-radius: 999px;
      background: rgba(255, 252, 247, 0.36);
    }

    .relationship-match-screen.is-report-step .relationship-radar-wrap {
      width: min(410px, 98%);
      margin-top: 2px;
    }

    .relationship-match-screen.is-report-step .relationship-radar-wrap > button {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      font-size: 17px;
    }

    .relationship-match-screen.is-report-step .relationship-radar-center {
      width: 102px;
      height: 102px;
    }

    .relationship-match-screen.is-report-step .relationship-flow-visual svg {
      min-height: 260px;
      border: 0;
      border-radius: 0;
      background:
        radial-gradient(circle at 18% 52%, color-mix(in srgb, var(--left-color) 13%, transparent), transparent 24%),
        radial-gradient(circle at 82% 52%, color-mix(in srgb, var(--right-color) 13%, transparent), transparent 24%);
      box-shadow: none;
    }

    .relationship-match-screen.is-report-step .relationship-flow-visual svg text {
      fill: rgba(24, 23, 21, 0.88);
      font-family: var(--serif);
      font-size: 30px;
      font-weight: 900;
    }

    .relationship-match-screen.is-report-step .relationship-flow-visual .band.primary {
      stroke-width: 7;
    }

    .relationship-match-screen.is-report-step .relationship-flow-visual .band.secondary {
      stroke-width: 6;
    }

    .relationship-match-screen.is-report-step .relationship-flow-notes {
      justify-content: center;
      margin-top: -8px;
    }

    .relationship-match-screen.is-report-step .relationship-gauge-row {
      max-width: 520px;
      margin: 0 auto;
      border-top: 1px solid rgba(173, 138, 77, 0.16);
      border-bottom: 1px solid rgba(173, 138, 77, 0.12);
    }

    .relationship-match-screen.is-report-step .relationship-gauge {
      min-height: 86px;
      background: transparent;
    }

    .relationship-match-screen.is-report-step .relationship-gauge i {
      display: none;
    }

    .relationship-match-screen.is-report-step .relationship-risk-visual {
      grid-template-columns: 1fr;
      gap: 16px;
      justify-items: center;
    }

    .relationship-match-screen.is-report-step .relationship-risk-wheel {
      width: min(330px, 92vw);
      border-color: rgba(184, 54, 43, 0.18);
      background:
        radial-gradient(circle, rgba(255, 252, 247, 0.78) 0 22%, transparent 23%),
        conic-gradient(from -45deg,
          rgba(184, 54, 43, 0.18) 0 25%,
          rgba(184, 54, 43, 0.32) 25% 50%,
          rgba(173, 138, 77, 0.13) 50% 75%,
          rgba(184, 54, 43, 0.24) 75% 100%),
        rgba(255, 252, 247, 0.32);
      box-shadow: inset 0 0 0 22px rgba(255, 252, 247, 0.24);
    }

    .relationship-match-screen.is-report-step .relationship-risk-wheel::before,
    .relationship-match-screen.is-report-step .relationship-risk-wheel::after {
      content: "";
      position: absolute;
      left: 50%;
      top: 0;
      bottom: 0;
      width: 1px;
      background: rgba(173, 138, 77, 0.3);
      transform: translateX(-50%);
    }

    .relationship-match-screen.is-report-step .relationship-risk-wheel::after {
      left: 0;
      right: 0;
      top: 50%;
      bottom: auto;
      width: auto;
      height: 1px;
      transform: translateY(-50%);
    }

    .relationship-match-screen.is-report-step .relationship-risk-wheel b {
      z-index: 3;
      width: 58px;
      height: 58px;
      border-radius: 50%;
      font-size: 27px;
    }

    .relationship-match-screen.is-report-step .relationship-risk-wheel button {
      z-index: 2;
      display: grid;
      gap: 2px;
      width: 88px;
      height: 58px;
      border: 0;
      border-radius: 0;
      background: transparent;
      color: rgba(123, 34, 27, 0.78);
      line-height: 1.1;
    }

    .relationship-match-screen.is-report-step .relationship-risk-wheel button em {
      display: none;
    }

    .relationship-match-screen.is-report-step .relationship-risk-wheel button span {
      max-width: 4em;
      font-size: 18px;
      letter-spacing: 0.08em;
    }

    .relationship-match-screen.is-report-step .relationship-risk-wheel button.active {
      background: transparent;
      color: var(--seal);
      box-shadow: none;
    }

    .relationship-match-screen.is-report-step .relationship-risk-wheel button.active span {
      text-decoration: underline;
      text-decoration-color: rgba(173, 138, 77, 0.72);
      text-decoration-thickness: 2px;
      text-underline-offset: 5px;
    }

    .relationship-match-screen.is-report-step .relationship-risk-card {
      width: min(620px, 100%);
      padding: 13px 0 0;
      border-left: 0;
      border-top: 1px solid rgba(184, 54, 43, 0.16);
      text-align: left;
    }

    .relationship-match-screen.is-report-step .relationship-river-scroll {
      overflow-x: auto;
      margin-inline: -10px;
      padding: 2px 10px 10px;
    }

    .relationship-match-screen.is-report-step .relationship-river-canvas {
      width: min(780px, 180vw);
      min-width: 650px;
      height: 244px;
      border: 0;
      border-radius: 0;
      background:
        linear-gradient(180deg, rgba(255, 252, 247, 0.1), rgba(248, 239, 217, 0.18)),
        url("/prototype/assets/relationship-match/backgrounds/relationship-scroll-wash-v1.webp") center 62% / 96% auto no-repeat;
      box-shadow: none;
    }

    .relationship-match-screen.is-report-step .relationship-river-canvas .mountain {
      stroke: rgba(24, 23, 21, 0.08);
      stroke-width: 8;
    }

    .relationship-match-screen.is-report-step .relationship-river-canvas .river {
      stroke: rgba(45, 122, 143, 0.5);
      stroke-width: 15;
    }

    .relationship-match-screen.is-report-step .relationship-river-canvas > button:not(.relationship-star-cloud) {
      width: 62px;
      color: rgba(24, 23, 21, 0.72);
    }

    .relationship-match-screen.is-report-step .relationship-now-line {
      top: 30px;
      bottom: 44px;
    }

    .relationship-match-screen.is-report-step .relationship-year-detail.compact {
      width: min(620px, 100%);
      margin: 6px auto 0;
      padding: 0 0 0 16px;
      background: transparent;
    }

    .relationship-match-screen.is-report-step .relationship-proof-chapter {
      display: grid;
      gap: 11px;
      margin-top: 2px;
    }

    .relationship-match-screen.is-report-step .relationship-proof-chapter h3 {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
      align-items: center;
      gap: 14px;
      margin: 0;
      color: #ad8a4d;
      font-family: var(--serif);
      font-size: 21px;
      letter-spacing: 0.22em;
      text-align: center;
    }

    .relationship-match-screen.is-report-step .relationship-proof-chapter h3 span {
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(173, 138, 77, 0.45), transparent);
    }

    .relationship-match-screen.is-report-step .relationship-dimension-proof-strip {
      max-width: 680px;
      margin: 0 auto;
      border-top: 0;
      border-bottom: 0;
      background: transparent;
    }

    .relationship-match-screen.is-report-step .relationship-dimension-proof-strip article {
      grid-template-columns: auto minmax(0, 1fr);
      align-items: start;
      gap: 8px 12px;
      padding: 10px 8px;
      border-right: 0;
      border-bottom: 1px solid rgba(173, 138, 77, 0.12);
      background: transparent;
    }

    .relationship-match-screen.is-report-step .relationship-dimension-proof-strip article:last-child {
      border-bottom: 0;
    }

    .relationship-match-screen.is-report-step .relationship-dimension-proof-strip strong {
      color: rgba(24, 23, 21, 0.86);
      font-size: 15px;
      white-space: nowrap;
    }

    .relationship-match-screen.is-report-step .relationship-dimension-proof-strip strong::before {
      content: "";
      display: inline-block;
      width: 24px;
      height: 24px;
      margin-right: 9px;
      border: 1px solid rgba(76, 139, 102, 0.26);
      border-radius: 50%;
      background:
        radial-gradient(circle at 55% 42%, rgba(76, 139, 102, 0.38), transparent 28%),
        rgba(255, 252, 247, 0.5);
      vertical-align: middle;
    }

    .relationship-match-screen.is-report-step .relationship-dimension-proof-strip p {
      font-size: 13px;
      line-height: 1.64;
    }

    .relationship-match-screen.is-report-step .relationship-ziwei-line {
      max-width: 680px;
      margin-inline: auto;
      border-top-style: solid;
      color: rgba(113, 93, 62, 0.5);
    }

    .relationship-match-screen.is-report-step .relationship-ziwei-lock-card {
      grid-template-columns: 74px minmax(0, 1fr) auto;
      margin-top: 2px;
      border-radius: 13px;
      background:
        radial-gradient(circle at 86% 48%, rgba(232, 197, 116, 0.18), transparent 34%),
        linear-gradient(135deg, rgba(42, 35, 30, 0.95), rgba(24, 23, 21, 0.91));
    }

    .relationship-match-screen.is-report-step .relationship-volume:not(.relationship-overview-evidence) {
      padding-top: 4px;
    }

    @media (max-width: 520px) {
      .relationship-match-screen.is-report-step .relationship-hologram-shell::after {
        top: 268px;
        width: 134%;
        opacity: 0.16;
      }

      .relationship-match-screen.is-report-step .relationship-holo-tabs {
        padding-bottom: 18px;
      }

      .relationship-match-screen.is-report-step .relationship-holo-tabs button {
        min-height: 60px;
      }

      .relationship-match-screen.is-report-step .relationship-holo-tabs b {
        font-size: clamp(21px, 5.8vw, 25px);
      }

      .relationship-match-screen.is-report-step .relationship-dimension-chapter-head {
        grid-template-columns: 1fr;
      }

      .relationship-match-screen.is-report-step .relationship-dimension-chapter-head .relationship-holo-tools {
        right: 0;
        top: 0;
      }

      .relationship-match-screen.is-report-step .relationship-dimension-chapter-head .relationship-holo-tools > b {
        display: none;
      }

      .relationship-match-screen.is-report-step .relationship-fate-origin-map {
        min-height: 250px;
      }

      .relationship-match-screen.is-report-step .relationship-origin-moon {
        width: 88px;
        height: 88px;
      }

      .relationship-match-screen.is-report-step .relationship-origin-moon b {
        font-size: 30px;
      }

      .relationship-match-screen.is-report-step .relationship-origin-center {
        width: 68px;
        height: 68px;
      }

      .relationship-match-screen.is-report-step .relationship-origin-center b {
        font-size: 30px;
      }

      .relationship-match-screen.is-report-step .relationship-fate-origin-map .tag.is-left {
        left: 13%;
      }

      .relationship-match-screen.is-report-step .relationship-fate-origin-map .tag.is-right {
        right: 13%;
      }

      .relationship-match-screen.is-report-step .relationship-risk-wheel {
        width: min(300px, 88vw);
      }

      .relationship-match-screen.is-report-step .relationship-risk-wheel button {
        width: 76px;
        height: 50px;
      }

      .relationship-match-screen.is-report-step .relationship-risk-wheel button span {
        font-size: 16px;
      }

      .relationship-match-screen.is-report-step .relationship-dimension-proof-strip {
        grid-template-columns: 1fr;
      }

      .relationship-match-screen.is-report-step .relationship-dimension-proof-strip article {
        grid-template-columns: 1fr;
        gap: 5px;
      }

      .relationship-match-screen.is-report-step .relationship-ziwei-lock-card {
        grid-template-columns: 58px minmax(0, 1fr);
      }
    }

    .relationship-match-screen.is-dimensions-report .relationship-report-shell {
      gap: 12px;
      margin-top: 0;
      padding-bottom: 12px;
    }

    .relationship-match-screen.is-dimensions-report {
      position: relative;
      overflow: hidden;
    }

    .relationship-match-screen.is-dimensions-report::before {
      content: "";
      position: absolute;
      z-index: 0;
      top: -26px;
      right: -112px;
      width: 280px;
      height: 570px;
      background: url("/prototype/assets/relationship-match/backgrounds/relationship-bamboo-shadow-v1.png") right top / contain no-repeat;
      opacity: 0.1;
      mix-blend-mode: multiply;
      pointer-events: none;
    }

    .relationship-match-screen.is-dimensions-report > * {
      position: relative;
      z-index: 1;
    }

    .relationship-match-screen.is-dimensions-report .relationship-report-head.is-dimensions-tab {
      display: none;
      min-height: 0;
      margin: 0;
      padding: 0;
      border: 0;
      background: transparent;
    }

    .relationship-match-screen.is-dimensions-report .relationship-report-head.is-dimensions-tab > * {
      display: none;
    }

    .relationship-match-screen.is-dimensions-report .card-actions.is-hidden-for-dimensions {
      display: none;
    }

    .relationship-match-screen.is-report-step .relationship-report-shell::before,
    .relationship-match-screen.is-report-step .relationship-report-shell::after,
    .relationship-match-screen.is-report-step .relationship-hologram-shell::before {
      content: none;
      display: none;
      background: none;
      border: 0;
      opacity: 0;
    }

    .relationship-match-screen.is-dimensions-report .relationship-report-tabs {
      margin-top: 2px;
      margin-bottom: 16px;
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-shell {
      gap: 16px;
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel {
      gap: 20px;
      padding: 0;
      border: 0;
      background: transparent;
      box-shadow: none;
    }

    .relationship-match-screen.is-dimensions-report .relationship-holo-tabs {
      gap: 0;
      padding: 0 0 18px;
      border-bottom: 1px solid rgba(173, 138, 77, 0.18);
    }

    .relationship-match-screen.is-dimensions-report .relationship-holo-tabs button {
      min-height: 68px;
      padding: 0;
    }

    .relationship-match-screen.is-dimensions-report .relationship-holo-tabs b {
      font-size: clamp(26px, 8vw, 34px);
      line-height: 1;
      letter-spacing: 0.1em;
    }

    .relationship-match-screen.is-dimensions-report .relationship-holo-tabs button.active b {
      color: #171512;
      transform: translateY(-2px) scale(1.12);
    }

    .relationship-match-screen.is-dimensions-report .relationship-holo-tabs button.active::after {
      bottom: 10px;
      width: 58px;
      height: 8px;
      border-radius: 50%;
      background:
        radial-gradient(ellipse at 50% 50%, rgba(173, 138, 77, 0.72), rgba(173, 138, 77, 0.08) 72%, transparent 74%);
    }

    .relationship-match-screen.is-dimensions-report .relationship-dimension-chapter-head {
      display: block;
      padding-top: 2px;
      text-align: center;
    }

    .relationship-match-screen.is-dimensions-report .relationship-dimension-chapter-head h2 {
      justify-content: center;
      font-size: clamp(31px, 8.8vw, 42px);
      letter-spacing: 0.08em;
    }

    .relationship-match-screen.is-dimensions-report .relationship-dimension-chapter-head p {
      max-width: none;
      margin-top: 8px;
      color: rgba(24, 23, 21, 0.56);
      font-size: 15px;
      letter-spacing: 0.08em;
      text-align: center;
    }

    .relationship-match-screen.is-dimensions-report .relationship-dimension-chapter-head i {
      display: block;
      width: 92px;
      height: 10px;
      margin: 15px auto 0;
      background:
        radial-gradient(circle at 50% 50%, rgba(173, 138, 77, 0.92) 0 3px, transparent 4px),
        linear-gradient(90deg, transparent, rgba(173, 138, 77, 0.46), transparent);
    }

    .relationship-match-screen.is-dimensions-report .relationship-holo-tools {
      display: none;
    }

    .relationship-match-screen.is-dimensions-report .relationship-fate-origin-map {
      min-height: 324px;
      margin-top: -2px;
    }

    .relationship-match-screen.is-dimensions-report .relationship-origin-moon {
      width: 126px;
      height: 126px;
    }

    .relationship-match-screen.is-dimensions-report .relationship-origin-moon.is-left {
      left: -2px;
    }

    .relationship-match-screen.is-dimensions-report .relationship-origin-moon.is-right {
      right: -2px;
    }

    .relationship-match-screen.is-dimensions-report .relationship-origin-center {
      width: 92px;
      height: 92px;
    }

    .relationship-match-screen.is-dimensions-report .relationship-origin-center b {
      font-size: 42px;
    }

    .relationship-match-screen.is-dimensions-report .relationship-dimension-summary {
      display: grid;
      gap: 10px;
      width: min(680px, 100%);
      margin: 4px auto 6px;
      padding: 0 12px;
      text-align: left;
    }

    .relationship-match-screen.is-dimensions-report .relationship-dimension-summary h3 {
      margin: 0;
      color: #171512;
      font-family: var(--serif);
      font-size: clamp(25px, 6.9vw, 34px);
      line-height: 1.28;
      letter-spacing: 0.04em;
    }

    .relationship-match-screen.is-dimensions-report .relationship-dimension-summary p {
      margin: 0;
      color: rgba(24, 23, 21, 0.68);
      font-size: 16px;
      line-height: 1.78;
      letter-spacing: 0.03em;
      text-align: left;
    }

    .relationship-ai-action-row {
      display: flex;
      flex-wrap: wrap;
      gap: 7px;
      margin-top: 2px;
    }

    .relationship-ai-action-row span {
      padding: 6px 9px;
      border: 1px solid rgba(173, 138, 77, 0.24);
      border-radius: 999px;
      background: rgba(255, 250, 241, 0.66);
      color: rgba(97, 69, 35, 0.82);
      font-size: 12px;
      line-height: 1.25;
    }

    .relationship-match-screen.is-report-step .relationship-proof-chapter h3 {
      letter-spacing: 0.12em;
    }

    .relationship-match-screen.is-dimensions-report .relationship-proof-chapter {
      width: min(680px, 100%);
      margin: 10px auto 0;
    }

    .relationship-match-screen.is-dimensions-report .relationship-proof-chapter h3 {
      color: #ad8a4d;
      font-size: 24px;
      letter-spacing: 0.16em;
    }

    .relationship-match-screen.is-report-step .relationship-dimension-proof-strip {
      grid-template-columns: 1fr;
      width: min(680px, 100%);
      max-width: none;
    }

    .relationship-match-screen.is-report-step .relationship-dimension-proof-strip article {
      grid-template-columns: minmax(112px, 0.28fr) minmax(0, 1fr);
      gap: 8px 16px;
      padding: 12px 4px;
    }

    .relationship-match-screen.is-report-step .relationship-dimension-proof-strip strong {
      display: inline-flex;
      align-items: center;
      letter-spacing: 0.04em;
      white-space: nowrap;
    }

    .relationship-match-screen.is-report-step .relationship-dimension-proof-strip p {
      max-width: 45em;
      color: rgba(24, 23, 21, 0.64);
      text-align: left;
    }

    .relationship-match-screen.is-dimensions-report .relationship-dimension-proof-strip article {
      grid-template-columns: minmax(86px, 92px) minmax(0, 1fr);
      padding: 11px 0;
      writing-mode: horizontal-tb;
    }

    .relationship-match-screen.is-dimensions-report .relationship-dimension-proof-strip strong {
      font-size: 15px;
      writing-mode: horizontal-tb;
      text-orientation: mixed;
    }

    .relationship-match-screen.is-dimensions-report .relationship-dimension-proof-strip strong::before {
      width: 28px;
      height: 28px;
      margin-right: 8px;
    }

    .relationship-match-screen.is-dimensions-report .relationship-dimension-proof-strip p {
      font-size: 14px;
      line-height: 1.7;
      writing-mode: horizontal-tb;
      text-orientation: mixed;
      word-break: normal;
      overflow-wrap: anywhere;
    }

    .relationship-match-screen.is-dimensions-report .relationship-ziwei-line {
      max-width: 680px;
      margin-top: 8px;
      padding-inline: 12px;
      font-size: 12px;
    }

    .relationship-match-screen.is-dimensions-report .relationship-ziwei-lock-card {
      margin: 18px 2px 28px;
      border-radius: 14px;
    }

    .relationship-match-screen.is-report-step .relationship-keyword-cloud.is-explained {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
      justify-content: stretch;
    }

    .relationship-match-screen.is-report-step .relationship-keyword-cloud.is-explained article {
      display: grid;
      gap: 4px;
      align-items: center;
      min-height: 54px;
      padding: 9px 8px;
      border: 1px solid rgba(173, 138, 77, 0.14);
      border-radius: 999px;
      background: rgba(255, 252, 247, 0.38);
      text-align: center;
    }

    .relationship-match-screen.is-report-step .relationship-keyword-cloud.is-explained article:first-child {
      border-top: 1px solid rgba(173, 138, 77, 0.14);
    }

    .relationship-match-screen.is-report-step .relationship-keyword-cloud.is-explained strong {
      color: #a93226;
      font-family: var(--serif);
      font-size: 16px;
      line-height: 1;
      letter-spacing: 0.06em;
      white-space: nowrap;
    }

    .relationship-match-screen.is-report-step .relationship-keyword-cloud.is-explained p {
      margin: 0;
      color: rgba(24, 23, 21, 0.66);
      font-size: 11px;
      line-height: 1.25;
      text-align: center;
    }

    @media (max-width: 380px) {
      .relationship-match-screen.is-report-step .relationship-dimension-proof-strip article {
        grid-template-columns: 1fr;
        gap: 5px;
      }

      .relationship-match-screen.is-report-step .relationship-keyword-cloud.is-explained article {
        grid-template-columns: 1fr;
        gap: 5px;
      }
    }

    /* Relationship five-dimension restoration: match the hierarchy drafts more closely. */
    .relationship-match-screen.is-dimensions-report .relationship-report-shell {
      gap: 10px;
      padding-inline: 20px;
    }

    .relationship-match-screen.is-dimensions-report .relationship-report-tabs {
      margin: 0 0 18px;
      border-bottom-color: rgba(173, 138, 77, 0.2);
    }

    .relationship-match-screen.is-dimensions-report .relationship-report-tabs button {
      min-height: 40px;
      color: rgba(24, 23, 21, 0.72);
      font-size: 14px;
    }

    .relationship-match-screen.is-dimensions-report .relationship-report-tabs button.active {
      color: #171512;
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-shell {
      gap: 22px;
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-shell::after {
      top: 318px;
      opacity: 0.12;
    }

    .relationship-match-screen.is-dimensions-report .relationship-holo-tabs {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      padding: 12px 0 26px;
      border-bottom: 1px solid rgba(173, 138, 77, 0.17);
    }

    .relationship-match-screen.is-dimensions-report .relationship-holo-tabs button {
      min-width: 0;
      min-height: 72px;
    }

    .relationship-match-screen.is-dimensions-report .relationship-holo-tabs b {
      color: rgba(24, 23, 21, 0.54);
      font-size: clamp(28px, 8vw, 40px);
      font-weight: 900;
      letter-spacing: 0.04em;
    }

    .relationship-match-screen.is-dimensions-report .relationship-holo-tabs button.active b {
      color: #171512;
      transform: translateY(-3px) scale(1.13);
    }

    .relationship-match-screen.is-dimensions-report .relationship-holo-tabs button.active::after {
      bottom: 8px;
      width: 86px;
      height: 13px;
      background:
        radial-gradient(circle at 94% 58%, rgba(173, 138, 77, 0.75) 0 3px, transparent 4px),
        linear-gradient(90deg, transparent, rgba(173, 138, 77, 0.88) 18% 82%, transparent);
      filter: blur(0.2px);
    }

    .relationship-match-screen.is-dimensions-report .relationship-dimension-chapter-head {
      padding-top: 0;
      margin-top: -2px;
    }

    .relationship-match-screen.is-dimensions-report .relationship-dimension-chapter-head h2 {
      font-size: clamp(34px, 8.8vw, 48px);
      letter-spacing: 0.05em;
    }

    .relationship-match-screen.is-dimensions-report .relationship-dimension-chapter-head h2 .seal {
      width: 34px;
      height: 34px;
      border-radius: 8px;
      font-size: 18px;
    }

    .relationship-match-screen.is-dimensions-report .relationship-dimension-chapter-head p {
      max-width: 22em;
      margin-inline: auto;
      font-size: 16px;
      line-height: 1.55;
    }

    .relationship-match-screen.is-dimensions-report .relationship-holo-tools {
      display: none;
    }

    .relationship-match-screen.is-dimensions-report .relationship-fate-visual,
    .relationship-match-screen.is-dimensions-report .relationship-resonance-visual,
    .relationship-match-screen.is-dimensions-report .relationship-flow-visual {
      gap: 12px;
    }

    .relationship-match-screen.is-dimensions-report .relationship-fate-origin-map {
      min-height: 330px;
      margin-top: -6px;
    }

    .relationship-match-screen.is-dimensions-report .relationship-fate-origin-map svg {
      width: min(620px, 108%);
      height: 236px;
    }

    .relationship-match-screen.is-dimensions-report .relationship-origin-moon {
      width: 132px;
      height: 132px;
    }

    .relationship-match-screen.is-dimensions-report .relationship-origin-moon b {
      font-size: 42px;
    }

    .relationship-match-screen.is-dimensions-report .relationship-origin-center {
      width: 94px;
      height: 94px;
    }

    .relationship-match-screen.is-dimensions-report .relationship-origin-center b {
      font-size: 44px;
    }

    .relationship-match-screen.is-dimensions-report .relationship-keyword-cloud.is-explained {
      display: none;
    }

    .relationship-match-screen.is-dimensions-report .relationship-radar-wrap {
      width: min(430px, 100%);
      margin: -4px auto 0;
    }

    .relationship-match-screen.is-dimensions-report .relationship-radar-wrap .grid {
      stroke: rgba(173, 138, 77, 0.32);
    }

    .relationship-match-screen.is-dimensions-report .relationship-radar-wrap .shape {
      fill: rgba(76, 139, 102, 0.08);
      stroke: rgba(76, 139, 102, 0.72);
      stroke-width: 1.35;
    }

    .relationship-match-screen.is-dimensions-report .relationship-radar-wrap > button {
      background: transparent;
      box-shadow: none;
      color: #171512;
      font-size: 18px;
    }

    .relationship-match-screen.is-dimensions-report .relationship-perspective-switch {
      width: min(330px, 100%);
      margin-top: -4px;
    }

    .relationship-match-screen.is-dimensions-report .relationship-flow-map {
      position: relative;
      width: min(680px, 112%);
      min-height: 350px;
      margin: -8px auto -10px;
      overflow: visible;
    }

    .relationship-match-screen.is-dimensions-report .relationship-flow-map svg {
      position: absolute;
      inset: 38px 8% auto;
      width: 84%;
      height: 220px;
      overflow: visible;
    }

    .relationship-match-screen.is-dimensions-report .relationship-flow-map .flow-band,
    .relationship-match-screen.is-dimensions-report .relationship-flow-map .flow-mist {
      fill: none;
      stroke-linecap: round;
      stroke-width: 4.6;
      opacity: 0.82;
    }

    .relationship-match-screen.is-dimensions-report .relationship-flow-map .is-green {
      stroke: rgba(76, 139, 102, 0.72);
    }

    .relationship-match-screen.is-dimensions-report .relationship-flow-map .is-red {
      stroke: rgba(184, 82, 62, 0.68);
    }

    .relationship-match-screen.is-dimensions-report .relationship-flow-map .is-gold {
      stroke: rgba(190, 151, 73, 0.68);
    }

    .relationship-match-screen.is-dimensions-report .relationship-flow-map .is-blue {
      stroke: rgba(45, 122, 143, 0.62);
    }

    .relationship-match-screen.is-dimensions-report .relationship-flow-map .flow-mist {
      stroke: rgba(113, 93, 62, 0.22);
      stroke-width: 3;
    }

    .relationship-match-screen.is-dimensions-report .relationship-flow-person {
      position: absolute;
      top: 78px;
      z-index: 2;
      display: grid;
      place-items: center;
      width: 132px;
      height: 132px;
      border: 1px solid rgba(173, 138, 77, 0.24);
      border-radius: 50%;
      background:
        radial-gradient(circle at 38% 28%, rgba(255, 252, 247, 0.96), rgba(238, 231, 212, 0.64) 64%, rgba(173, 138, 77, 0.08));
      box-shadow: inset 0 0 24px rgba(113, 93, 62, 0.08);
      font-family: var(--serif);
    }

    .relationship-match-screen.is-dimensions-report .relationship-flow-person.is-left {
      left: 0;
    }

    .relationship-match-screen.is-dimensions-report .relationship-flow-person.is-right {
      right: 0;
    }

    .relationship-match-screen.is-dimensions-report .relationship-flow-person b {
      color: #171512;
      font-size: 44px;
      line-height: 1;
    }

    .relationship-match-screen.is-dimensions-report .relationship-flow-person small {
      margin-top: -16px;
      color: rgba(184, 54, 43, 0.82);
      font-size: 13px;
      font-weight: 900;
      letter-spacing: 0.08em;
    }

    .relationship-match-screen.is-dimensions-report .relationship-flow-person em {
      position: absolute;
      top: -42px;
      display: grid;
      place-items: center;
      width: 34px;
      height: 34px;
      border-radius: 50%;
      background: rgba(76, 139, 102, 0.9);
      color: #fffaf1;
      font-style: normal;
      font-weight: 900;
    }

    .relationship-match-screen.is-dimensions-report .relationship-flow-person.is-left em::after,
    .relationship-match-screen.is-dimensions-report .relationship-flow-person.is-right em::after {
      content: "";
      position: absolute;
      top: 34px;
      width: 1px;
      height: 164px;
      border-left: 1px dashed rgba(173, 138, 77, 0.34);
    }

    .relationship-match-screen.is-dimensions-report .relationship-flow-person.is-right em {
      background: rgba(113, 93, 62, 0.7);
    }

    .relationship-match-screen.is-dimensions-report .relationship-flow-label {
      position: absolute;
      left: 50%;
      z-index: 3;
      padding: 2px 10px;
      background: rgba(255, 252, 247, 0.72);
      font-family: var(--serif);
      font-size: 15px;
      font-weight: 900;
      letter-spacing: 0.08em;
      transform: translateX(-50%);
      white-space: nowrap;
    }

    .relationship-match-screen.is-dimensions-report .relationship-flow-label.is-green {
      top: 58px;
      color: #4c8b66;
    }

    .relationship-match-screen.is-dimensions-report .relationship-flow-label.is-red {
      top: 104px;
      color: #a93226;
    }

    .relationship-match-screen.is-dimensions-report .relationship-flow-label.is-gold {
      top: 152px;
      color: #ad8a4d;
    }

    .relationship-match-screen.is-dimensions-report .relationship-flow-label.is-blue {
      top: 204px;
      color: #2d7a8f;
    }

    .relationship-match-screen.is-dimensions-report .relationship-gauge-row {
      max-width: 560px;
      margin: -6px auto 0;
      border-color: rgba(173, 138, 77, 0.16);
    }

    .relationship-match-screen.is-dimensions-report .relationship-gauge {
      min-height: 98px;
      background:
        radial-gradient(circle, rgba(255, 252, 247, 0.75), transparent 55%),
        conic-gradient(from -128deg, rgba(184, 54, 43, 0.58) var(--value), rgba(24, 23, 21, 0.07) 0);
      background-blend-mode: normal;
    }

    .relationship-match-screen.is-dimensions-report .relationship-gauge b {
      color: #a93226;
      font-size: 28px;
    }

    .relationship-match-screen.is-dimensions-report .relationship-risk-wheel {
      width: min(378px, 92vw);
      margin: -8px auto 0;
      box-shadow: none;
    }

    .relationship-match-screen.is-dimensions-report .relationship-risk-card {
      display: block;
      width: min(520px, 100%);
      margin: -2px auto 0;
      padding: 0;
      border: 0;
      text-align: center;
    }

    .relationship-match-screen.is-dimensions-report .relationship-risk-card small {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      color: #a93226;
      font-family: var(--serif);
      font-size: 15px;
      letter-spacing: 0.08em;
    }

    .relationship-match-screen.is-dimensions-report .relationship-risk-card small::before {
      content: "⚠";
      font-family: system-ui, sans-serif;
      font-size: 16px;
    }

    .relationship-match-screen.is-dimensions-report .relationship-risk-card h3,
    .relationship-match-screen.is-dimensions-report .relationship-risk-card p:not(:first-of-type),
    .relationship-match-screen.is-dimensions-report .relationship-risk-card button {
      display: none;
    }

    .relationship-match-screen.is-dimensions-report .relationship-risk-card p:first-of-type {
      margin: 7px auto 0;
      max-width: 34em;
      color: rgba(24, 23, 21, 0.66);
      font-size: 14px;
      line-height: 1.7;
    }

    .relationship-match-screen.is-dimensions-report .relationship-river-canvas {
      min-width: 720px;
      height: 282px;
      background:
        linear-gradient(180deg, rgba(255, 252, 247, 0), rgba(248, 239, 217, 0.1)),
        url("/prototype/assets/relationship-match/backgrounds/relationship-scroll-wash-v1.webp") center 52% / 105% auto no-repeat;
    }

    .relationship-match-screen.is-dimensions-report .relationship-river-canvas .mountain {
      stroke: rgba(24, 23, 21, 0.1);
      stroke-width: 11;
    }

    .relationship-match-screen.is-dimensions-report .relationship-river-canvas .river {
      stroke: rgba(45, 122, 143, 0.58);
      stroke-width: 18;
    }

    .relationship-match-screen.is-dimensions-report .relationship-year-detail.compact {
      border: 0 !important;
      box-shadow: none !important;
      background: transparent !important;
      padding: 0 !important;
    }

    .relationship-match-screen.is-dimensions-report .relationship-dimension-summary {
      margin-top: 0;
      padding: 0 8px;
    }

    .relationship-match-screen.is-dimensions-report .relationship-dimension-summary h3 {
      font-size: clamp(28px, 7.4vw, 39px);
      letter-spacing: 0.03em;
    }

    .relationship-match-screen.is-dimensions-report .relationship-dimension-summary p {
      max-width: 36em;
      font-size: 17px;
      line-height: 1.85;
    }

    .relationship-match-screen.is-dimensions-report .relationship-proof-chapter {
      margin-top: 12px;
    }

    .relationship-match-screen.is-dimensions-report .relationship-proof-chapter h3 {
      font-size: 25px;
      letter-spacing: 0.18em;
    }

    .relationship-match-screen.is-dimensions-report .relationship-dimension-proof-strip {
      grid-template-columns: 1fr;
      width: min(640px, 100%);
    }

    .relationship-match-screen.is-dimensions-report .relationship-dimension-proof-strip article {
      grid-template-columns: auto minmax(0, 1fr);
      padding: 12px 0;
    }

    .relationship-match-screen.is-dimensions-report .relationship-dimension-proof-strip strong {
      font-size: 17px;
    }

    .relationship-match-screen.is-dimensions-report .relationship-dimension-proof-strip p {
      font-size: 15px;
      line-height: 1.7;
    }

    .relationship-match-screen.is-dimensions-report .relationship-ziwei-lock-card {
      margin: 22px 0 34px;
      padding: 18px 20px;
      border-radius: 13px;
      background:
        radial-gradient(circle at 84% 52%, rgba(232, 197, 116, 0.2), transparent 33%),
        linear-gradient(135deg, rgba(42, 35, 30, 0.97), rgba(24, 23, 21, 0.94));
    }

    @media (max-width: 520px) {
      .relationship-match-screen.is-dimensions-report .relationship-report-shell {
        padding-inline: 18px;
      }

      .relationship-match-screen.is-dimensions-report .relationship-holo-tabs b {
        font-size: clamp(28px, 8.2vw, 36px);
      }

      .relationship-match-screen.is-dimensions-report .relationship-holo-tabs button {
        min-height: 66px;
      }

      .relationship-match-screen.is-dimensions-report .relationship-origin-moon,
      .relationship-match-screen.is-dimensions-report .relationship-flow-person {
        width: 104px;
        height: 104px;
      }

      .relationship-match-screen.is-dimensions-report .relationship-origin-moon b,
      .relationship-match-screen.is-dimensions-report .relationship-flow-person b {
        font-size: 35px;
      }

      .relationship-match-screen.is-dimensions-report .relationship-fate-origin-map {
        min-height: 300px;
      }

      .relationship-match-screen.is-dimensions-report .relationship-flow-map {
        width: 112%;
        min-height: 310px;
        margin-left: -6%;
      }

      .relationship-match-screen.is-dimensions-report .relationship-flow-map svg {
        inset-inline: 11%;
        width: 78%;
      }

      .relationship-match-screen.is-dimensions-report .relationship-flow-label {
        font-size: 13px;
      }

      .relationship-match-screen.is-dimensions-report .relationship-risk-wheel {
        width: min(334px, 88vw);
      }
    }

    /* Relationship five-dimension reference restoration v2. */
    .relationship-match-screen.is-dimensions-report .relationship-report-shell {
      box-sizing: border-box;
      width: 100%;
      gap: 0;
      padding-inline: 0;
    }

    .relationship-match-screen.is-dimensions-report .relationship-report-head {
      margin-bottom: 8px;
    }

    .relationship-match-screen.is-dimensions-report .relationship-report-tabs {
      margin: 2px 0 30px;
      padding: 0;
      border-bottom: 1px solid rgba(173, 138, 77, 0.22);
      background: transparent;
    }

    .relationship-match-screen.is-dimensions-report .relationship-report-tabs button {
      min-height: 48px;
      color: rgba(24, 23, 21, 0.68);
      font-family: var(--serif);
      font-size: 18px;
      font-weight: 800;
      letter-spacing: 0.1em;
    }

    .relationship-match-screen.is-dimensions-report .relationship-report-tabs button.active {
      color: #171512;
      transform: none;
    }

    .relationship-match-screen.is-dimensions-report .relationship-report-tabs button.active::after {
      width: 48px;
      height: 5px;
      border-radius: 999px;
      background: #b9362b;
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-shell {
      position: relative;
      gap: 0;
      overflow: visible;
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-shell::after {
      content: none !important;
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel {
      gap: 0;
      padding: 0;
      border: 0;
      background: transparent;
      box-shadow: none;
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel::before {
      content: "";
      position: absolute;
      left: -44px;
      top: 338px;
      z-index: -1;
      width: 190px;
      height: 132px;
      pointer-events: none;
      background:
        radial-gradient(ellipse at 45% 52%, rgba(173, 138, 77, 0.08), transparent 52%),
        url("/prototype/assets/relationship-match/backgrounds/relationship-scroll-wash-v1.webp") 0 55% / 260px auto no-repeat;
      opacity: 0.18;
      mix-blend-mode: multiply;
      transform: scaleX(-1);
    }

    .relationship-match-screen.is-dimensions-report .relationship-holo-tabs {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 0;
      margin: 0 0 42px;
      padding: 0;
      border: 0;
      background: transparent;
    }

    .relationship-match-screen.is-dimensions-report .relationship-holo-tabs button {
      position: relative;
      min-height: 76px;
      padding: 0;
      border: 0;
      background: transparent;
      box-shadow: none;
    }

    .relationship-match-screen.is-dimensions-report .relationship-holo-tabs b {
      color: rgba(24, 23, 21, 0.56);
      font-family: var(--serif);
      font-size: clamp(26px, 4.4vw, 34px);
      font-weight: 900;
      letter-spacing: 0.03em;
      line-height: 1;
      white-space: nowrap;
    }

    .relationship-match-screen.is-dimensions-report .relationship-holo-tabs button.active b {
      color: #171512;
      transform: translateY(-4px) scale(1.05);
    }

    .relationship-match-screen.is-dimensions-report .relationship-holo-tabs button.active::after {
      left: 50%;
      bottom: 8px;
      width: 74px;
      height: 15px;
      border-radius: 999px;
      background:
        radial-gradient(circle at 86% 48%, rgba(173, 138, 77, 0.82) 0 3px, transparent 4px),
        radial-gradient(circle at 96% 56%, rgba(173, 138, 77, 0.62) 0 2px, transparent 3px),
        linear-gradient(90deg, transparent, rgba(173, 138, 77, 0.9) 16% 82%, transparent);
      filter: blur(0.15px);
      transform: translateX(-50%);
    }

    .relationship-match-screen.is-dimensions-report .relationship-dimension-chapter-head {
      display: grid;
      justify-items: center;
      gap: 0;
      margin-bottom: 20px;
      padding: 0;
      text-align: center;
    }

    .relationship-match-screen.is-dimensions-report .relationship-dimension-chapter-head > div:first-child {
      max-width: none;
    }

    .relationship-match-screen.is-dimensions-report .relationship-dimension-chapter-head h2 {
      gap: 8px;
      color: #171512;
      font-family: var(--serif);
      font-size: clamp(35px, 7.4vw, 48px);
      font-weight: 900;
      letter-spacing: 0.08em;
      line-height: 1.05;
    }

    .relationship-match-screen.is-dimensions-report .relationship-dimension-chapter-head h2 .seal {
      width: 32px;
      height: 32px;
      border: 1px solid #c64537;
      border-radius: 7px;
      background: rgba(255, 252, 247, 0.2);
      color: #b9362b;
      font-size: 17px;
      line-height: 1;
    }

    .relationship-match-screen.is-dimensions-report .relationship-dimension-chapter-head p {
      margin: 13px 0 0;
      color: rgba(24, 23, 21, 0.52);
      font-family: var(--serif);
      font-size: clamp(15px, 3.4vw, 18px);
      font-weight: 800;
      letter-spacing: 0.08em;
    }

    .relationship-match-screen.is-dimensions-report .relationship-dimension-chapter-head i {
      width: 154px;
      height: 14px;
      margin-top: 13px;
      background:
        radial-gradient(circle at 50% 50%, rgba(173, 138, 77, 0.8) 0 8%, transparent 9%),
        radial-gradient(circle at 43% 50%, rgba(173, 138, 77, 0.62) 0 5%, transparent 6%),
        radial-gradient(circle at 57% 50%, rgba(173, 138, 77, 0.62) 0 5%, transparent 6%),
        linear-gradient(90deg, transparent, rgba(173, 138, 77, 0.48) 34% 66%, transparent);
    }

    .relationship-match-screen.is-dimensions-report .relationship-fate-visual,
    .relationship-match-screen.is-dimensions-report .relationship-resonance-visual,
    .relationship-match-screen.is-dimensions-report .relationship-flow-visual {
      margin-top: 0;
      gap: 0;
    }

    .relationship-match-screen.is-dimensions-report .relationship-fate-origin-map {
      min-height: 388px;
      margin: 0 auto 34px;
    }

    .relationship-match-screen.is-dimensions-report .relationship-fate-origin-map::before {
      width: min(600px, 92vw);
      aspect-ratio: 2.06;
      border-color: rgba(173, 138, 77, 0.16);
      background:
        radial-gradient(circle at 50% 50%, rgba(173, 138, 77, 0.12), transparent 30%),
        repeating-radial-gradient(circle, rgba(173, 138, 77, 0.13) 0 1px, transparent 1px 31px);
      opacity: 0.95;
    }

    .relationship-match-screen.is-dimensions-report .relationship-fate-origin-map svg {
      width: min(690px, 112%);
      height: 260px;
    }

    .relationship-match-screen.is-dimensions-report .relationship-fate-origin-map .thread {
      stroke-width: 2.25;
      filter: drop-shadow(0 1px 0 rgba(255, 252, 247, 0.6));
    }

    .relationship-match-screen.is-dimensions-report .relationship-fate-origin-map .axis {
      stroke: rgba(173, 138, 77, 0.36);
      stroke-dasharray: 3 10;
    }

    .relationship-match-screen.is-dimensions-report .relationship-origin-moon {
      width: clamp(118px, 18vw, 150px);
      height: clamp(118px, 18vw, 150px);
      border-color: rgba(76, 139, 102, 0.24);
      background:
        radial-gradient(circle at 42% 36%, rgba(255, 252, 247, 0.98), rgba(229, 238, 225, 0.62) 55%, rgba(76, 139, 102, 0.12)),
        radial-gradient(circle at 72% 72%, rgba(24, 23, 21, 0.12), transparent 42%);
      box-shadow: inset 0 0 28px rgba(76, 139, 102, 0.08);
    }

    .relationship-match-screen.is-dimensions-report .relationship-origin-moon.is-left {
      left: clamp(0px, 1.2vw, 16px);
    }

    .relationship-match-screen.is-dimensions-report .relationship-origin-moon.is-right {
      right: clamp(0px, 1.2vw, 16px);
    }

    .relationship-match-screen.is-dimensions-report .relationship-origin-moon b {
      color: #4c8b66;
      font-size: clamp(42px, 8vw, 56px);
    }

    .relationship-match-screen.is-dimensions-report .relationship-origin-moon small {
      margin-top: -26px;
      color: rgba(24, 23, 21, 0.38);
      font-size: 14px;
    }

    .relationship-match-screen.is-dimensions-report .relationship-origin-center {
      width: 100px;
      height: 100px;
      box-shadow: 0 0 0 10px rgba(184, 54, 43, 0.05), 0 0 38px rgba(232, 197, 116, 0.38);
    }

    .relationship-match-screen.is-dimensions-report .relationship-origin-center b {
      font-size: 47px;
    }

    .relationship-match-screen.is-dimensions-report .relationship-origin-center small {
      display: none;
    }

    .relationship-match-screen.is-dimensions-report .relationship-fate-origin-map .tag {
      min-width: 58px;
      padding: 5px 12px;
      border-color: rgba(173, 138, 77, 0.3);
      background: rgba(255, 252, 247, 0.6);
      color: #a93226;
      font-size: 16px;
      letter-spacing: 0.08em;
    }

    .relationship-match-screen.is-dimensions-report .relationship-fate-origin-map .tag.is-top {
      top: 20px;
    }

    .relationship-match-screen.is-dimensions-report .relationship-fate-origin-map .tag.is-left {
      left: 28%;
      bottom: 46px;
    }

    .relationship-match-screen.is-dimensions-report .relationship-fate-origin-map .tag.is-right {
      right: 24%;
      bottom: 42px;
      color: #2d6f87;
    }

    .relationship-match-screen.is-dimensions-report .relationship-fate-origin-map .tag.is-bottom {
      bottom: 3px;
      color: #4c8b66;
    }

    .relationship-match-screen.is-dimensions-report .relationship-resonance-visual {
      min-height: 472px;
      margin-bottom: 30px;
    }

    .relationship-match-screen.is-dimensions-report .relationship-radar-wrap {
      width: min(570px, 100%);
      height: 430px;
      margin: 0 auto;
    }

    .relationship-match-screen.is-dimensions-report .relationship-radar-wrap::before {
      content: "";
      position: absolute;
      left: 50%;
      top: 51%;
      width: 54%;
      aspect-ratio: 1;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(173, 138, 77, 0.08), transparent 58%);
      transform: translate(-50%, -50%);
    }

    .relationship-match-screen.is-dimensions-report .relationship-radar-wrap svg {
      position: absolute;
      left: 50%;
      top: 51%;
      width: min(330px, 62vw);
      height: min(330px, 62vw);
      transform: translate(-50%, -50%);
    }

    .relationship-match-screen.is-dimensions-report .relationship-radar-wrap .grid {
      fill: rgba(255, 252, 247, 0.2);
      stroke: rgba(190, 151, 73, 0.34);
      stroke-width: 0.55;
    }

    .relationship-match-screen.is-dimensions-report .relationship-radar-wrap line {
      stroke: rgba(190, 151, 73, 0.32);
      stroke-width: 0.45;
    }

    .relationship-match-screen.is-dimensions-report .relationship-radar-wrap .shape {
      fill: rgba(76, 139, 102, 0.08);
      stroke: rgba(76, 139, 102, 0.82);
      stroke-width: 1.2;
    }

    .relationship-match-screen.is-dimensions-report .relationship-radar-wrap > button {
      display: grid;
      grid-template-columns: auto;
      grid-template-rows: auto auto;
      gap: 5px;
      place-items: center;
      width: 96px;
      height: auto;
      padding: 0;
      border: 0;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
      color: #171512;
      transform: translate(-50%, -50%);
    }

    .relationship-match-screen.is-dimensions-report .relationship-radar-wrap > button span {
      font-family: var(--serif);
      font-size: 20px;
      font-weight: 900;
      letter-spacing: 0.06em;
      line-height: 1;
      white-space: nowrap;
    }

    .relationship-match-screen.is-dimensions-report .relationship-radar-wrap > button em {
      display: grid;
      place-items: center;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background: #4c8b66;
      color: #fffaf1;
      font-family: var(--serif);
      font-size: 15px;
      font-style: normal;
      font-weight: 900;
      line-height: 1;
    }

    .relationship-match-screen.is-dimensions-report .relationship-radar-wrap > button:nth-of-type(2) em {
      background: #b8523e;
    }

    .relationship-match-screen.is-dimensions-report .relationship-radar-wrap > button:nth-of-type(3) em {
      background: #ad8a4d;
    }

    .relationship-match-screen.is-dimensions-report .relationship-radar-wrap > button:nth-of-type(4) em {
      background: #8b8980;
    }

    .relationship-match-screen.is-dimensions-report .relationship-radar-wrap > button:nth-of-type(5) em {
      background: #2d7a8f;
    }

    .relationship-match-screen.is-dimensions-report .relationship-radar-center {
      display: none;
    }

    .relationship-match-screen.is-dimensions-report .relationship-perspective-switch {
      position: relative;
      z-index: 2;
      width: min(292px, 100%);
      margin: -14px auto 0;
      padding: 4px;
      border: 1px solid rgba(173, 138, 77, 0.18);
      border-radius: 999px;
      background: rgba(255, 252, 247, 0.32);
      box-shadow: none;
    }

    .relationship-match-screen.is-dimensions-report .relationship-perspective-switch button {
      min-height: 34px;
      border-radius: 999px;
      font-size: 13px;
    }

    .relationship-match-screen.is-dimensions-report .relationship-flow-map {
      width: min(740px, 110%);
      min-height: 348px;
      margin: -6px auto 18px;
    }

    .relationship-match-screen.is-dimensions-report .relationship-flow-map::before,
    .relationship-match-screen.is-dimensions-report .relationship-flow-map::after {
      content: "";
      position: absolute;
      top: 54px;
      width: 154px;
      height: 250px;
      border: 1px dashed rgba(173, 138, 77, 0.42);
      border-radius: 50%;
      opacity: 0.74;
    }

    .relationship-match-screen.is-dimensions-report .relationship-flow-map::before {
      left: 2px;
    }

    .relationship-match-screen.is-dimensions-report .relationship-flow-map::after {
      right: 2px;
    }

    .relationship-match-screen.is-dimensions-report .relationship-flow-map svg {
      inset: 72px 8% auto;
      width: 84%;
      height: 218px;
    }

    .relationship-match-screen.is-dimensions-report .relationship-flow-map .flow-band {
      stroke-width: 5.2;
      opacity: 0.88;
    }

    .relationship-match-screen.is-dimensions-report .relationship-flow-map .flow-mist {
      stroke: rgba(24, 23, 21, 0.2);
      stroke-width: 3.8;
    }

    .relationship-match-screen.is-dimensions-report .relationship-flow-person {
      top: 94px;
      width: 140px;
      height: 140px;
      border-color: rgba(173, 138, 77, 0.28);
      background:
        radial-gradient(circle at 35% 30%, rgba(255, 252, 247, 0.98), rgba(238, 231, 212, 0.72) 60%, rgba(24, 23, 21, 0.06)),
        radial-gradient(circle at 32% 33%, color-mix(in srgb, var(--left-color) 15%, transparent), transparent 48%);
      box-shadow: inset 0 0 32px rgba(113, 93, 62, 0.08);
    }

    .relationship-match-screen.is-dimensions-report .relationship-flow-person.is-left {
      left: 8px;
    }

    .relationship-match-screen.is-dimensions-report .relationship-flow-person.is-right {
      right: 8px;
      background:
        radial-gradient(circle at 35% 30%, rgba(255, 252, 247, 0.98), rgba(238, 231, 212, 0.72) 60%, rgba(24, 23, 21, 0.06)),
        radial-gradient(circle at 32% 33%, color-mix(in srgb, var(--right-color) 15%, transparent), transparent 48%);
    }

    .relationship-match-screen.is-dimensions-report .relationship-flow-person b {
      font-size: 50px;
    }

    .relationship-match-screen.is-dimensions-report .relationship-flow-person small {
      margin-top: -19px;
      color: #b9362b;
      font-size: 14px;
      letter-spacing: 0.08em;
    }

    .relationship-match-screen.is-dimensions-report .relationship-flow-person em {
      top: -54px;
      width: 36px;
      height: 36px;
      border: 2px solid rgba(255, 252, 247, 0.65);
      box-shadow: 0 0 0 1px rgba(173, 138, 77, 0.22);
    }

    .relationship-match-screen.is-dimensions-report .relationship-flow-person em::after {
      height: 218px;
      border-left-color: rgba(173, 138, 77, 0.28);
    }

    .relationship-match-screen.is-dimensions-report .relationship-flow-label {
      padding: 2px 12px;
      background: rgba(255, 252, 247, 0.78);
      font-size: 17px;
      letter-spacing: 0.1em;
    }

    .relationship-match-screen.is-dimensions-report .relationship-flow-label.is-green {
      top: 64px;
    }

    .relationship-match-screen.is-dimensions-report .relationship-flow-label.is-red {
      top: 111px;
    }

    .relationship-match-screen.is-dimensions-report .relationship-flow-label.is-gold {
      top: 158px;
    }

    .relationship-match-screen.is-dimensions-report .relationship-flow-label.is-blue {
      top: 207px;
    }

    .relationship-match-screen.is-dimensions-report .relationship-gauge-row {
      width: min(590px, 100%);
      max-width: none;
      margin: 0 auto 42px;
      padding: 0;
      border: 0;
      background: transparent;
    }

    .relationship-match-screen.is-dimensions-report .relationship-gauge-row::before,
    .relationship-match-screen.is-dimensions-report .relationship-gauge-row::after {
      background: rgba(173, 138, 77, 0.34);
    }

    .relationship-match-screen.is-dimensions-report .relationship-gauge {
      position: relative;
      min-height: 128px;
      padding-top: 16px;
      background: transparent;
    }

    .relationship-match-screen.is-dimensions-report .relationship-gauge::before {
      content: "";
      position: absolute;
      left: 50%;
      top: 4px;
      width: 88px;
      height: 88px;
      border-radius: 50%;
      background:
        radial-gradient(circle at 50% 50%, rgba(255, 252, 247, 0.92) 0 52%, transparent 53%),
        conic-gradient(from -120deg, rgba(76, 139, 102, 0.65) var(--value), rgba(24, 23, 21, 0.08) 0);
      transform: translateX(-50%);
    }

    .relationship-match-screen.is-dimensions-report .relationship-gauge:nth-child(2)::before {
      background:
        radial-gradient(circle at 50% 50%, rgba(255, 252, 247, 0.92) 0 52%, transparent 53%),
        conic-gradient(from -120deg, rgba(184, 82, 62, 0.68) var(--value), rgba(24, 23, 21, 0.08) 0);
    }

    .relationship-match-screen.is-dimensions-report .relationship-gauge:nth-child(3)::before {
      background:
        radial-gradient(circle at 50% 50%, rgba(255, 252, 247, 0.92) 0 52%, transparent 53%),
        conic-gradient(from -120deg, rgba(190, 151, 73, 0.72) var(--value), rgba(24, 23, 21, 0.08) 0);
    }

    .relationship-match-screen.is-dimensions-report .relationship-gauge b {
      position: relative;
      z-index: 1;
      margin-top: 16px;
      color: #a93226;
      font-size: 33px;
      line-height: 1;
    }

    .relationship-match-screen.is-dimensions-report .relationship-gauge small {
      position: relative;
      z-index: 1;
      margin-top: 30px;
      color: rgba(24, 23, 21, 0.72);
      font-family: var(--serif);
      font-size: 17px;
      font-weight: 900;
      letter-spacing: 0.08em;
    }

    .relationship-match-screen.is-dimensions-report .relationship-risk-visual {
      gap: 18px;
      margin-bottom: 30px;
    }

    .relationship-match-screen.is-dimensions-report .relationship-risk-wheel {
      width: min(430px, 90vw);
      border: 1px solid rgba(190, 151, 73, 0.3);
      background:
        radial-gradient(circle, rgba(255, 252, 247, 0.92) 0 18%, transparent 19%),
        conic-gradient(from -45deg,
          rgba(184, 54, 43, 0.22) 0 25%,
          rgba(184, 54, 43, 0.13) 25% 50%,
          rgba(184, 54, 43, 0.2) 50% 75%,
          rgba(184, 54, 43, 0.11) 75% 100%),
        repeating-radial-gradient(circle, transparent 0 43px, rgba(190, 151, 73, 0.24) 44px 45px, transparent 46px 78px);
      box-shadow: none;
    }

    .relationship-match-screen.is-dimensions-report .relationship-risk-wheel::before,
    .relationship-match-screen.is-dimensions-report .relationship-risk-wheel::after {
      background: rgba(123, 34, 27, 0.5);
    }

    .relationship-match-screen.is-dimensions-report .relationship-risk-wheel b {
      width: 64px;
      height: 64px;
      border: 1px solid rgba(190, 151, 73, 0.45);
      background: rgba(255, 252, 247, 0.88);
      color: #a93226;
      font-size: 31px;
      box-shadow: 0 0 0 8px rgba(190, 151, 73, 0.08);
    }

    .relationship-match-screen.is-dimensions-report .relationship-risk-wheel button {
      width: 118px;
      height: 86px;
    }

    .relationship-match-screen.is-dimensions-report .relationship-risk-wheel button span {
      color: #a93226;
      font-size: 23px;
      font-weight: 900;
      line-height: 1.28;
      white-space: normal;
    }

    .relationship-match-screen.is-dimensions-report .relationship-risk-wheel button.active span {
      text-decoration: none;
    }

    .relationship-match-screen.is-dimensions-report .relationship-risk-card {
      width: min(520px, 100%);
      margin: 0 auto;
      padding: 0;
      border: 0;
      background: transparent;
      text-align: center;
    }

    .relationship-match-screen.is-dimensions-report .relationship-risk-card small {
      display: inline-flex;
      align-items: center;
      color: #a93226;
      font-family: var(--serif);
      font-size: 17px;
      font-weight: 900;
      letter-spacing: 0.08em;
    }

    .relationship-match-screen.is-dimensions-report .relationship-risk-card small::before {
      content: "!";
      display: grid;
      place-items: center;
      width: 24px;
      height: 24px;
      margin-right: 8px;
      border: 1px solid rgba(184, 54, 43, 0.58);
      border-radius: 50%;
      font-family: system-ui, sans-serif;
      font-size: 14px;
      font-weight: 800;
    }

    .relationship-match-screen.is-dimensions-report .relationship-risk-card h3,
    .relationship-match-screen.is-dimensions-report .relationship-risk-card p:not(:first-of-type),
    .relationship-match-screen.is-dimensions-report .relationship-risk-card button {
      display: none;
    }

    .relationship-match-screen.is-dimensions-report .relationship-risk-card p:first-of-type {
      max-width: 35em;
      margin: 10px auto 0;
      color: rgba(24, 23, 21, 0.64);
      font-size: 15px;
      line-height: 1.78;
    }

    .relationship-match-screen.is-dimensions-report .relationship-river-scroll {
      margin: 0 -30px 32px;
      padding: 0 0 10px;
      overflow-x: auto;
    }

    .relationship-match-screen.is-dimensions-report .relationship-river-canvas {
      width: min(900px, 178vw);
      min-width: 760px;
      height: 330px;
      border: 0;
      border-radius: 0;
      background:
        linear-gradient(180deg, rgba(255, 252, 247, 0), rgba(255, 252, 247, 0.08)),
        url("/prototype/assets/relationship-match/backgrounds/relationship-scroll-wash-v1.webp") center 54% / 104% auto no-repeat;
      box-shadow: none;
    }

    .relationship-match-screen.is-dimensions-report .relationship-river-canvas svg {
      left: 2%;
      top: 46px;
      width: 96%;
      height: 206px;
    }

    .relationship-match-screen.is-dimensions-report .relationship-river-canvas .mountain {
      stroke: rgba(24, 23, 21, 0.08);
      stroke-width: 14;
    }

    .relationship-match-screen.is-dimensions-report .relationship-river-canvas .river {
      stroke: rgba(45, 122, 143, 0.55);
      stroke-width: 19;
      stroke-linecap: round;
    }

    .relationship-match-screen.is-dimensions-report .relationship-river-canvas > button:not(.relationship-star-cloud) {
      display: grid;
      gap: 4px;
      place-items: center;
      width: 80px;
      min-height: 112px;
      padding: 0;
      border: 0;
      background: transparent;
      box-shadow: none;
      color: #171512;
      transform: translateX(-50%);
    }

    .relationship-match-screen.is-dimensions-report .relationship-river-canvas > button:not(.relationship-star-cloud)::before {
      content: "";
      position: absolute;
      left: 50%;
      top: 30px;
      bottom: -20px;
      width: 1px;
      background: rgba(173, 138, 77, 0.58);
      transform: translateX(-50%);
    }

    .relationship-match-screen.is-dimensions-report .relationship-river-canvas > button i {
      z-index: 1;
      width: 38px;
      height: 38px;
      border: 0;
      background: transparent;
      color: #ad8a4d;
      font-size: 0;
      box-shadow: none;
    }

    .relationship-match-screen.is-dimensions-report .relationship-river-canvas > button i::before {
      content: "莲";
      font-family: var(--serif);
      font-size: 30px;
      font-weight: 900;
    }

    .relationship-match-screen.is-dimensions-report .relationship-river-canvas > button.risk i::before {
      content: "◎";
      color: #171512;
      font-size: 29px;
    }

    .relationship-match-screen.is-dimensions-report .relationship-river-canvas > button small {
      z-index: 1;
      font-family: var(--serif);
      font-size: 21px;
      font-weight: 800;
      line-height: 1;
    }

    .relationship-match-screen.is-dimensions-report .relationship-river-canvas > button span {
      z-index: 1;
      color: rgba(24, 23, 21, 0.78);
      font-family: var(--serif);
      font-size: 17px;
      font-weight: 900;
      letter-spacing: 0.12em;
      line-height: 1;
      white-space: nowrap;
    }

    .relationship-match-screen.is-dimensions-report .relationship-now-line {
      left: 62px;
      top: 42px;
      bottom: 82px;
      border-left-color: #b9362b;
      color: #fffaf1;
    }

    .relationship-match-screen.is-dimensions-report .relationship-now-line::before {
      background: #b9362b;
    }

    .relationship-match-screen.is-dimensions-report .relationship-year-detail.compact {
      display: none;
    }

    .relationship-match-screen.is-dimensions-report .relationship-dimension-summary {
      max-width: 700px;
      margin: 0 auto 34px;
      padding: 0;
      text-align: left;
    }

    .relationship-match-screen.is-dimensions-report .relationship-dimension-summary h3 {
      margin: 0;
      color: #171512;
      font-family: var(--serif);
      font-size: clamp(29px, 6.8vw, 43px);
      font-weight: 900;
      letter-spacing: 0.06em;
      line-height: 1.25;
    }

    .relationship-match-screen.is-dimensions-report .relationship-dimension-summary p {
      max-width: none;
      margin: 14px 0 0;
      color: rgba(24, 23, 21, 0.68);
      font-size: clamp(16px, 3.2vw, 19px);
      line-height: 1.95;
      text-align: left;
    }

    .relationship-match-screen.is-dimensions-report .relationship-proof-chapter {
      width: min(700px, 100%);
      margin: 0 auto 28px;
      gap: 14px;
    }

    .relationship-match-screen.is-dimensions-report .relationship-proof-chapter h3 {
      color: #ad8a4d;
      font-family: var(--serif);
      font-size: clamp(23px, 4.8vw, 31px);
      font-weight: 900;
      letter-spacing: 0.18em;
    }

    .relationship-match-screen.is-dimensions-report .relationship-dimension-proof-strip {
      width: 100%;
      max-width: none;
    }

    .relationship-match-screen.is-dimensions-report .relationship-dimension-proof-strip article {
      display: grid;
      grid-template-columns: minmax(132px, auto) minmax(0, 1fr);
      gap: 12px 18px;
      align-items: center;
      min-height: 54px;
      padding: 10px 0;
      border-bottom: 1px solid rgba(173, 138, 77, 0.14);
      background: transparent;
    }

    .relationship-match-screen.is-dimensions-report .relationship-dimension-proof-strip strong {
      display: inline-flex;
      align-items: center;
      color: rgba(24, 23, 21, 0.86);
      font-family: var(--serif);
      font-size: 19px;
      font-weight: 900;
      letter-spacing: 0.04em;
      white-space: nowrap;
    }

    .relationship-match-screen.is-dimensions-report .relationship-dimension-proof-strip strong::before {
      width: 38px;
      height: 38px;
      margin-right: 14px;
      border: 1px solid rgba(76, 139, 102, 0.34);
      background:
        radial-gradient(circle at 54% 44%, rgba(76, 139, 102, 0.38), transparent 26%),
        rgba(255, 252, 247, 0.56);
    }

    .relationship-match-screen.is-dimensions-report .relationship-dimension-proof-strip article:nth-child(2) strong::before {
      border-color: rgba(184, 82, 62, 0.32);
      background:
        radial-gradient(circle at 54% 44%, rgba(184, 82, 62, 0.38), transparent 26%),
        rgba(255, 252, 247, 0.56);
    }

    .relationship-match-screen.is-dimensions-report .relationship-dimension-proof-strip article:nth-child(3) strong::before {
      border-color: rgba(173, 138, 77, 0.38);
      background:
        radial-gradient(circle at 54% 44%, rgba(173, 138, 77, 0.42), transparent 26%),
        rgba(255, 252, 247, 0.56);
    }

    .relationship-match-screen.is-dimensions-report .relationship-dimension-proof-strip p {
      color: rgba(24, 23, 21, 0.58);
      font-size: 16px;
      line-height: 1.7;
      text-align: left;
    }

    .relationship-match-screen.is-dimensions-report .relationship-ziwei-line {
      display: none;
    }

    .relationship-match-screen.is-dimensions-report .relationship-ziwei-lock-card {
      grid-template-columns: 84px minmax(0, 1fr) auto;
      gap: 18px;
      margin: 10px 0 38px;
      padding: 24px 28px;
      border: 1px solid rgba(232, 197, 116, 0.2);
      border-radius: 17px;
      background:
        radial-gradient(circle at 86% 52%, rgba(232, 197, 116, 0.22), transparent 31%),
        linear-gradient(135deg, rgba(42, 35, 30, 0.98), rgba(24, 23, 21, 0.94));
      box-shadow: 0 18px 35px rgba(24, 23, 21, 0.12);
    }

    .relationship-match-screen.is-dimensions-report .relationship-ziwei-lock-card h3 {
      color: #e8c574;
      font-family: var(--serif);
      font-size: clamp(21px, 4.4vw, 29px);
      letter-spacing: 0.08em;
    }

    .relationship-match-screen.is-dimensions-report .relationship-ziwei-lock-card p {
      color: rgba(255, 250, 241, 0.72);
      font-size: 15px;
      line-height: 1.7;
    }

    .relationship-match-screen.is-dimensions-report .relationship-ziwei-lock-card button {
      border-color: rgba(232, 197, 116, 0.45);
      background: rgba(232, 197, 116, 0.1);
      color: #e8c574;
    }

    @media (max-width: 560px) {
      .relationship-match-screen.is-dimensions-report .relationship-report-shell {
        padding-inline: 22px;
      }

      .relationship-match-screen.is-dimensions-report .relationship-report-tabs {
        margin-bottom: 26px;
      }

      .relationship-match-screen.is-dimensions-report .relationship-report-tabs button {
        font-size: 16px;
      }

      .relationship-match-screen.is-dimensions-report .relationship-holo-tabs {
        margin-bottom: 36px;
      }

      .relationship-match-screen.is-dimensions-report .relationship-holo-tabs button {
        min-height: 68px;
      }

      .relationship-match-screen.is-dimensions-report .relationship-holo-tabs b {
        font-size: clamp(25px, 7vw, 34px);
      }

      .relationship-match-screen.is-dimensions-report .relationship-holo-tabs button.active::after {
        width: 82px;
      }

      .relationship-match-screen.is-dimensions-report .relationship-fate-origin-map {
        min-height: 342px;
      }

      .relationship-match-screen.is-dimensions-report .relationship-fate-origin-map svg {
        width: 124%;
      }

      .relationship-match-screen.is-dimensions-report .relationship-origin-moon {
        width: 108px;
        height: 108px;
      }

      .relationship-match-screen.is-dimensions-report .relationship-origin-moon.is-left {
        left: -8px;
      }

      .relationship-match-screen.is-dimensions-report .relationship-origin-moon.is-right {
        right: -8px;
      }

      .relationship-match-screen.is-dimensions-report .relationship-origin-moon b {
        font-size: 39px;
      }

      .relationship-match-screen.is-dimensions-report .relationship-origin-center {
        width: 84px;
        height: 84px;
      }

      .relationship-match-screen.is-dimensions-report .relationship-origin-center b {
        font-size: 39px;
      }

      .relationship-match-screen.is-dimensions-report .relationship-fate-origin-map .tag.is-left {
        left: 20%;
      }

      .relationship-match-screen.is-dimensions-report .relationship-fate-origin-map .tag.is-right {
        right: 18%;
      }

      .relationship-match-screen.is-dimensions-report .relationship-radar-wrap {
        height: 372px;
      }

      .relationship-match-screen.is-dimensions-report .relationship-radar-wrap svg {
        width: 248px;
        height: 248px;
      }

      .relationship-match-screen.is-dimensions-report .relationship-radar-wrap > button {
        width: 72px;
      }

      .relationship-match-screen.is-dimensions-report .relationship-radar-wrap > button span {
        font-size: 17px;
      }

      .relationship-match-screen.is-dimensions-report .relationship-radar-wrap > button em {
        width: 26px;
        height: 26px;
        font-size: 13px;
      }

      .relationship-match-screen.is-dimensions-report .relationship-flow-map {
        width: 116%;
        min-height: 306px;
        margin-left: -8%;
      }

      .relationship-match-screen.is-dimensions-report .relationship-flow-map::before,
      .relationship-match-screen.is-dimensions-report .relationship-flow-map::after {
        top: 52px;
        width: 118px;
        height: 210px;
      }

      .relationship-match-screen.is-dimensions-report .relationship-flow-person {
        top: 96px;
        width: 106px;
        height: 106px;
      }

      .relationship-match-screen.is-dimensions-report .relationship-flow-person b {
        font-size: 37px;
      }

      .relationship-match-screen.is-dimensions-report .relationship-flow-person small {
        margin-top: -14px;
        font-size: 12px;
      }

      .relationship-match-screen.is-dimensions-report .relationship-flow-map svg {
        inset: 70px 10% auto;
        width: 80%;
      }

      .relationship-match-screen.is-dimensions-report .relationship-flow-label {
        font-size: 13px;
        letter-spacing: 0.04em;
      }

      .relationship-match-screen.is-dimensions-report .relationship-gauge-row {
        margin-bottom: 34px;
      }

      .relationship-match-screen.is-dimensions-report .relationship-gauge::before {
        width: 72px;
        height: 72px;
      }

      .relationship-match-screen.is-dimensions-report .relationship-gauge b {
        font-size: 28px;
      }

      .relationship-match-screen.is-dimensions-report .relationship-gauge small {
        margin-top: 24px;
        font-size: 15px;
      }

      .relationship-match-screen.is-dimensions-report .relationship-risk-wheel {
        width: min(340px, 90vw);
      }

      .relationship-match-screen.is-dimensions-report .relationship-risk-wheel button {
        width: 94px;
        height: 70px;
      }

      .relationship-match-screen.is-dimensions-report .relationship-risk-wheel button span {
        font-size: 19px;
      }

      .relationship-match-screen.is-dimensions-report .relationship-river-scroll {
        margin-inline: -22px;
      }

      .relationship-match-screen.is-dimensions-report .relationship-river-canvas {
        min-width: 720px;
        height: 300px;
      }

      .relationship-match-screen.is-dimensions-report .relationship-dimension-summary,
      .relationship-match-screen.is-dimensions-report .relationship-proof-chapter {
        width: 100%;
      }

      .relationship-match-screen.is-dimensions-report .relationship-dimension-proof-strip article {
        grid-template-columns: 1fr;
        gap: 8px;
      }

      .relationship-match-screen.is-dimensions-report .relationship-dimension-proof-strip p {
        padding-left: 52px;
      }

      .relationship-match-screen.is-dimensions-report .relationship-ziwei-lock-card {
        grid-template-columns: 1fr;
        padding: 22px;
      }
    }

/* Report style design-source correction · 2026-07-18 */
.workspace[data-current-route="profile-preferences"] .nav {
  display: none;
}

.profile-preferences-screen {
  min-height: 100dvh;
  padding: max(16px, env(safe-area-inset-top)) 22px max(24px, env(safe-area-inset-bottom));
  font-family: var(--serif);
  background:
    radial-gradient(circle at 50% -6%, rgba(255, 255, 255, 0.86), transparent 34%),
    #faf7f0;
}

.profile-preferences-screen > .profile-detail-topbar {
  width: 100%;
  min-height: 50px;
  margin: 0 0 20px;
  grid-template-columns: 42px minmax(0, 1fr) 42px;
}

.profile-preferences-screen > .profile-detail-topbar .icon-button {
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid rgba(83, 74, 59, 0.18);
  border-radius: 11px;
  background: rgba(255, 253, 248, 0.68);
  box-shadow: 0 4px 12px rgba(58, 48, 35, 0.035);
}

.profile-preferences-screen > .profile-detail-topbar .icon-button svg {
  width: 18px;
  height: 18px;
}

.profile-preferences-screen > .profile-detail-topbar .fortune-title h1 {
  justify-content: center;
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.13em;
}

.profile-preferences-screen > .profile-detail-topbar .fortune-title .sub,
.profile-preferences-screen .profile-preference-sync-mark {
  visibility: hidden;
}

.profile-preferences-screen .report-preference-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

.profile-preferences-screen .report-preference-section {
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.profile-preferences-screen .report-preference-heading {
  display: grid;
  grid-template-columns: 9px auto minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  padding: 0 0 11px;
}

.profile-preferences-screen .report-preference-heading::after {
  content: "";
  height: 1px;
  margin-left: 4px;
  background: rgba(98, 87, 68, 0.16);
}

.profile-preferences-screen .report-preference-heading > svg {
  width: 8px;
  height: 8px;
  color: #9a8b56;
  transform: rotate(-20deg);
}

.profile-preferences-screen .report-preference-heading h2 {
  margin: 0;
  color: #4f8668;
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.profile-preferences-screen .report-preference-heading p {
  grid-column: 1 / -1;
  margin: 7px 0 0 16px;
  color: rgba(56, 51, 43, 0.52);
  font-family: var(--serif);
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: 0.03em;
}

.profile-preferences-screen .report-preference-value-row {
  grid-template-columns: minmax(0, 1fr) auto auto;
  min-height: 57px;
  padding: 0 14px;
  border: 1px solid rgba(92, 80, 61, 0.16);
  border-radius: 11px;
  background: rgba(255, 253, 249, 0.42);
}

.profile-preferences-screen .report-preference-value-row strong {
  font-size: 14px;
  font-weight: 600;
}

.profile-preferences-screen .report-preference-value-row small {
  display: none;
}

.profile-preferences-screen .report-preference-value-row em,
.profile-preferences-screen .report-preference-product-list > button em {
  color: #4c8b69;
  font-size: 12px;
  font-style: normal;
}

.profile-preferences-screen .report-preference-value-row > i,
.profile-preferences-screen .report-preference-product-list > button > i {
  color: rgba(54, 50, 44, 0.58);
  font-family: var(--sans);
  font-size: 20px;
}

.profile-preferences-screen .report-preference-style-list {
  display: grid;
  gap: 0;
  overflow: hidden;
  padding: 0;
  border: 1px solid rgba(92, 80, 61, 0.16);
  border-radius: 11px;
  background: rgba(255, 253, 249, 0.35);
}

.profile-preferences-screen .report-preference-style-list > button {
  grid-template-columns: minmax(0, 1fr) 22px;
  min-height: 57px;
  padding: 8px 14px;
  border: 0;
  border-bottom: 1px solid rgba(92, 80, 61, 0.12);
  border-radius: 0;
  background: transparent;
}

.profile-preferences-screen .report-preference-style-list > button:last-child {
  border-bottom: 0;
}

.profile-preferences-screen .report-preference-style-list > button.is-selected {
  border-color: rgba(92, 80, 61, 0.12);
  background: transparent;
}

.profile-preferences-screen .report-preference-style-list > button strong {
  font-size: 14px;
  font-weight: 600;
}

.profile-preferences-screen .report-preference-style-list > button small {
  color: rgba(59, 53, 45, 0.52);
  font-size: 11px;
}

.profile-preferences-screen .report-preference-style-list > button.is-selected strong {
  color: #b44332;
}

.profile-preferences-screen .report-preference-style-list > button > i,
.report-style-choice-list > button > i {
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  border: 1px solid rgba(78, 69, 57, 0.35);
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
}

.profile-preferences-screen .report-preference-style-list > button > i svg,
.report-style-choice-list > button > i svg {
  display: none;
  width: 12px;
  height: 12px;
  fill: none;
  stroke: #fffaf4;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.profile-preferences-screen .report-preference-style-list > button.is-selected > i,
.report-style-choice-list > button.is-selected > i {
  border-color: #b44332;
  background: #b44332;
  box-shadow: none;
}

.profile-preferences-screen .report-preference-style-list > button.is-selected > i svg,
.report-style-choice-list > button.is-selected > i svg {
  display: block;
}

.profile-preferences-screen .report-preference-product-list {
  display: block;
  overflow: hidden;
  border: 1px solid rgba(92, 80, 61, 0.16);
  border-radius: 11px;
  background: rgba(255, 253, 249, 0.35);
}

.profile-preferences-screen .report-preference-product-list > button {
  grid-template-columns: 28px minmax(0, 1fr) auto auto;
  gap: 10px;
  min-height: 49px;
  padding: 8px 14px;
  border: 0;
  border-bottom: 1px solid rgba(92, 80, 61, 0.12);
  background: transparent;
}

.profile-preferences-screen .report-preference-product-list > button:last-child {
  border-bottom: 0;
}

.profile-preferences-screen .report-preference-product-list > button:nth-child(odd) {
  border-right: 0;
}

.profile-preferences-screen .report-preference-product-list > button > svg {
  width: 23px;
  height: 23px;
  padding: 0;
  color: #a78e5c;
  border-radius: 0;
  background: transparent;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
}

.profile-preferences-screen .report-preference-product-list > button strong {
  font-size: 14px;
  font-weight: 600;
}

.profile-preferences-screen .report-preference-product-list > button small {
  display: none;
}

.profile-preferences-screen .report-preference-section[aria-labelledby="preferenceProductTitle"] .report-preference-heading p {
  display: none;
}

.profile-preferences-screen .report-preference-product-list > button.has-override em::before {
  content: none;
}

.profile-preferences-screen .report-preference-sync-note {
  grid-column: 1;
  display: block;
  margin: 7px 0 0;
  color: rgba(67, 61, 52, 0.44);
  font-size: 11px;
  line-height: 1.5;
  text-align: center;
}

.profile-preferences-screen .report-preference-sync-note svg {
  display: none;
}

.report-style-toolbar {
  display: flex;
  width: max-content;
  min-height: 0;
  margin: 9px auto 13px;
  padding: 2px 5px;
  gap: 5px;
  align-items: center;
  justify-content: center;
  color: #4f8367;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-family: var(--serif);
  text-align: center;
}

.report-style-toolbar strong,
.report-style-toolbar em,
.report-style-toolbar > b {
  color: inherit;
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: 1.3;
}

.report-style-toolbar > b {
  opacity: 0.68;
}

.report-style-toolbar > svg {
  width: 13px;
  height: 13px;
  margin-left: -2px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  transform: rotate(180deg);
}

.report-style-toolbar.is-loading {
  opacity: 0.55;
}

.report-style-toolbar.is-loading > svg {
  animation: reportStylePulse 1.3s ease-in-out infinite;
}

.advanced-book-cover > .report-style-toolbar {
  margin-top: 8px;
  margin-bottom: 8px;
}

.report-style-scrim {
  background: rgba(27, 27, 24, 0.42);
  backdrop-filter: none;
}

.report-style-report-sheet {
  right: 0;
  bottom: 0;
  left: 0;
  width: min(100%, 480px);
  max-height: min(88vh, 720px);
  margin: 0 auto;
  padding: 8px 16px calc(8px + env(safe-area-inset-bottom));
  border: 1px solid rgba(89, 76, 58, 0.13);
  border-bottom: 0;
  border-radius: 26px 26px 0 0;
  background: #fbf8f1;
  box-shadow: 0 -16px 44px rgba(38, 32, 24, 0.2);
}

.report-style-report-sheet::before {
  width: 39px;
  height: 4px;
  margin: 0 auto 8px;
  background: rgba(81, 72, 59, 0.2);
}

.report-style-report-sheet > header {
  display: block;
  padding: 0;
  text-align: center;
}

.report-style-report-sheet > header h2 {
  margin: 0;
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.report-style-report-sheet .report-style-sheet-copy {
  margin: 3px 0 7px;
  color: rgba(61, 55, 47, 0.5);
  font-family: var(--serif);
  font-size: 11px;
  line-height: 1.45;
  text-align: center;
}

.report-style-report-sheet .report-style-choice-list {
  display: grid;
  gap: 0;
  overflow: hidden;
  border: 1px solid rgba(92, 80, 61, 0.16);
  border-radius: 17px;
  background: rgba(255, 253, 249, 0.4);
}

.report-style-report-sheet .report-style-choice-list > button {
  grid-template-columns: minmax(0, 1fr) 22px;
  gap: 10px;
  min-height: 47px;
  padding: 7px 13px;
  border: 0;
  border-bottom: 1px solid rgba(92, 80, 61, 0.12);
  border-radius: 0;
  background: transparent;
}

.report-style-report-sheet .report-style-choice-list > button.has-style-icon {
  grid-template-columns: 38px minmax(0, 1fr) 22px;
}

.report-style-report-sheet .report-style-choice-list > button:last-child {
  border-bottom: 0;
}

.report-style-report-sheet .report-style-choice-list > button.is-selected {
  border-color: rgba(92, 80, 61, 0.12);
  background: transparent;
}

.report-style-choice-icon {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 50%;
  color: #4e8465;
  background: #e4ede3;
}

.report-style-choice-icon svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.report-style-choice.is-balanced .report-style-choice-icon svg {
  width: 21px;
  height: 21px;
}

.report-style-choice.is-gentle .report-style-choice-icon {
  color: #b44332;
  background: #f1e3da;
}

.report-style-choice.is-gentle .report-style-choice-icon svg {
  fill: currentColor;
  stroke-width: 1.25;
}

.report-style-report-sheet .report-style-choice-list > button span {
  gap: 2px;
}

.report-style-report-sheet .report-style-choice-list > button strong {
  font-family: var(--serif);
  font-size: 14px;
  font-weight: 600;
}

.report-style-report-sheet .report-style-choice-list > button small {
  color: rgba(59, 53, 45, 0.51);
  font-family: var(--serif);
  font-size: 10.5px;
}

.report-style-report-sheet .report-style-sheet-actions {
  gap: 8px;
  margin-top: 10px;
}

.report-style-report-sheet .report-style-sheet-actions button {
  min-height: 42px;
  color: #b44332;
  border: 1px solid rgba(131, 87, 67, 0.55);
  border-radius: 23px;
  background: transparent;
  font-family: var(--serif);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.report-style-report-sheet .report-style-sheet-actions button.primary {
  color: #fffaf3;
  border-color: #b43d2c;
  background: #b43d2c;
  box-shadow: 0 8px 18px rgba(150, 53, 39, 0.18);
}

.report-style-cache-note {
  margin: 7px 0 0;
  color: rgba(61, 55, 47, 0.42);
  font-family: var(--serif);
  font-size: 10px;
  line-height: 1.4;
  text-align: center;
}

@media (min-width: 760px) and (hover: hover) and (pointer: fine) {
  .profile-preferences-screen {
    min-height: calc(100dvh - 48px);
  }

  .profile-preferences-screen .report-preference-shell {
    grid-template-columns: minmax(0, 1fr);
    max-width: none;
    padding-top: 0;
  }

  .report-style-report-sheet {
    right: 0;
    bottom: 0;
    left: 0;
    width: min(100%, 480px);
    border-bottom: 0;
    border-radius: 26px 26px 0 0;
    padding-bottom: 18px;
  }

  .report-style-report-sheet::before {
    display: block;
  }
}

    /* Relationship five-dimension fate page restoration v3. */
    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="fate"]::before {
      content: none;
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="fate"] .relationship-fate-visual {
      gap: 0;
      margin-top: 0;
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="fate"] .relationship-fate-origin-map {
      width: min(720px, 100%);
      min-height: 400px;
      margin: 2px auto 34px;
      overflow: visible;
      isolation: isolate;
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="fate"] .relationship-fate-origin-map::before {
      left: 50%;
      top: 53%;
      width: min(640px, 100%);
      aspect-ratio: 2.18;
      border: 0;
      background:
        radial-gradient(circle at 50% 50%, rgba(184, 54, 43, 0.12), transparent 10%),
        repeating-radial-gradient(circle at 50% 50%, transparent 0 33px, rgba(173, 138, 77, 0.17) 34px 35px, transparent 36px 66px),
        linear-gradient(90deg, transparent 0 7%, rgba(173, 138, 77, 0.12) 49% 51%, transparent 93% 100%);
      opacity: 0.95;
      transform: translate(-50%, -50%);
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="fate"] .relationship-fate-origin-map::after {
      content: "";
      position: absolute;
      left: 50%;
      top: 53%;
      z-index: 0;
      width: min(150px, 25vw);
      aspect-ratio: 1;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(232, 197, 116, 0.24), transparent 64%);
      filter: blur(8px);
      transform: translate(-50%, -50%);
      pointer-events: none;
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="fate"] .relationship-fate-origin-map svg {
      left: 50%;
      top: 53%;
      z-index: 2;
      width: min(620px, 104%);
      height: 255px;
      transform: translate(-50%, -50%);
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="fate"] .relationship-fate-origin-map .thread {
      fill: none;
      stroke-linecap: round;
      stroke-width: 2.4;
      opacity: 0.9;
      filter: drop-shadow(0 1px 0 rgba(255, 252, 247, 0.68));
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="fate"] .relationship-fate-origin-map .thread.is-red {
      stroke: #b9362b;
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="fate"] .relationship-fate-origin-map .thread.is-gold {
      stroke: #ad8a4d;
      stroke-width: 2.9;
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="fate"] .relationship-fate-origin-map .thread.is-green {
      stroke: #4c8b66;
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="fate"] .relationship-fate-origin-map .axis {
      stroke: rgba(173, 138, 77, 0.34);
      stroke-dasharray: 4 11;
      stroke-width: 1.2;
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="fate"] .relationship-origin-moon {
      z-index: 3;
      width: clamp(112px, 31%, 148px);
      height: auto;
      aspect-ratio: 1;
      border: 0;
      background:
        radial-gradient(circle at 34% 30%, rgba(255, 252, 247, 0.96) 0 12%, transparent 13%),
        radial-gradient(circle at 66% 40%, rgba(24, 23, 21, 0.12) 0 10%, transparent 11%),
        radial-gradient(circle at 42% 68%, rgba(113, 93, 62, 0.13) 0 8%, transparent 9%),
        radial-gradient(circle at 52% 50%, rgba(255, 252, 247, 0.95), rgba(231, 225, 211, 0.68) 55%, rgba(24, 23, 21, 0.12) 78%, transparent 80%),
        radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--left-color) 18%, transparent), transparent 66%);
      box-shadow:
        inset 16px 0 22px rgba(255, 252, 247, 0.44),
        inset -18px 0 28px rgba(24, 23, 21, 0.12),
        0 18px 28px rgba(24, 23, 21, 0.08);
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="fate"] .relationship-origin-moon::before {
      content: "";
      position: absolute;
      inset: 8px;
      border-radius: 50%;
      border: 1px solid rgba(24, 23, 21, 0.08);
      background:
        radial-gradient(circle at 28% 62%, rgba(24, 23, 21, 0.12) 0 5%, transparent 6%),
        radial-gradient(circle at 62% 24%, rgba(24, 23, 21, 0.1) 0 4%, transparent 5%),
        radial-gradient(circle at 72% 72%, rgba(24, 23, 21, 0.1) 0 7%, transparent 8%);
      mix-blend-mode: multiply;
      pointer-events: none;
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="fate"] .relationship-origin-moon::after {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: 50%;
      background: radial-gradient(circle at 50% 50%, transparent 56%, rgba(24, 23, 21, 0.22) 72%, transparent 76%);
      mask-image: radial-gradient(circle, transparent 0 55%, #000 58% 78%, transparent 80%);
      pointer-events: none;
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="fate"] .relationship-origin-moon.is-left {
      left: clamp(-2px, 2%, 14px);
      top: 50%;
      transform: translateY(-50%);
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="fate"] .relationship-origin-moon.is-right {
      right: clamp(-2px, 2%, 14px);
      top: 50%;
      background:
        radial-gradient(circle at 38% 28%, rgba(255, 252, 247, 0.96) 0 12%, transparent 13%),
        radial-gradient(circle at 70% 38%, rgba(24, 23, 21, 0.16) 0 11%, transparent 12%),
        radial-gradient(circle at 45% 72%, rgba(113, 93, 62, 0.13) 0 8%, transparent 9%),
        radial-gradient(circle at 52% 50%, rgba(255, 252, 247, 0.92), rgba(231, 225, 211, 0.62) 48%, rgba(24, 23, 21, 0.24) 72%, transparent 78%),
        radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--right-color) 18%, transparent), transparent 66%);
      transform: translateY(-50%);
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="fate"] .relationship-origin-moon b {
      position: relative;
      z-index: 1;
      color: #171512;
      font-family: var(--serif);
      font-size: clamp(40px, 7vw, 58px);
      font-weight: 900;
      letter-spacing: 0.04em;
      text-shadow: 0 1px 0 rgba(255, 252, 247, 0.72);
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="fate"] .relationship-origin-moon small {
      position: relative;
      z-index: 1;
      max-width: 78%;
      margin-top: 2px;
      color: rgba(24, 23, 21, 0.58);
      font-family: var(--serif);
      font-size: 13px;
      font-weight: 800;
      letter-spacing: 0.06em;
      line-height: 1.2;
      text-align: center;
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="fate"] .relationship-origin-center {
      z-index: 4;
      width: clamp(82px, 22%, 96px);
      height: auto;
      aspect-ratio: 1;
      border: 2px solid rgba(184, 54, 43, 0.5);
      background:
        radial-gradient(circle, rgba(255, 252, 247, 0.98) 0 62%, rgba(232, 197, 116, 0.2) 63% 74%, transparent 75%);
      box-shadow:
        0 0 0 7px rgba(255, 252, 247, 0.72),
        0 0 0 11px rgba(184, 54, 43, 0.08),
        0 0 44px rgba(232, 197, 116, 0.48);
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="fate"] .relationship-origin-center b {
      color: #b9362b;
      font-size: clamp(38px, 7vw, 52px);
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="fate"] .relationship-origin-center small {
      display: none;
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="fate"] .relationship-fate-origin-map .tag {
      z-index: 5;
      min-width: 62px;
      padding: 5px 13px;
      border: 1px solid rgba(173, 138, 77, 0.28);
      border-radius: 999px;
      background: rgba(255, 252, 247, 0.76);
      color: #a93226;
      font-family: var(--serif);
      font-size: 16px;
      font-style: normal;
      font-weight: 900;
      letter-spacing: 0.08em;
      box-shadow: 0 6px 14px rgba(113, 93, 62, 0.06);
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="fate"] .relationship-fate-origin-map .tag.is-top {
      top: 38px;
      left: 50%;
      color: #a93226;
      transform: translateX(-50%);
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="fate"] .relationship-fate-origin-map .tag.is-left {
      left: 22%;
      bottom: 36px;
      color: #ad8a4d;
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="fate"] .relationship-fate-origin-map .tag.is-right {
      right: 20%;
      bottom: 36px;
      color: #2d6f87;
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="fate"] .relationship-fate-origin-map .tag.is-bottom {
      left: 50%;
      bottom: 0;
      color: #4c8b66;
      transform: translateX(-50%);
    }

    .relationship-match-screen.is-dimensions-report .relationship-origin-answers {
      display: grid;
      grid-template-columns: 1fr;
      gap: 0;
      width: min(720px, 100%);
      margin: -2px auto 40px;
      border-top: 1px solid rgba(173, 138, 77, 0.22);
      border-bottom: 1px solid rgba(173, 138, 77, 0.16);
    }

    .relationship-match-screen.is-dimensions-report .relationship-origin-answers article {
      position: relative;
      display: grid;
      grid-template-columns: 44px minmax(0, 1fr);
      gap: 4px 14px;
      align-items: start;
      min-height: 0;
      padding: 15px 0;
      background: transparent;
    }

    .relationship-match-screen.is-dimensions-report .relationship-origin-answers article + article {
      border-top: 1px solid rgba(173, 138, 77, 0.14);
    }

    .relationship-match-screen.is-dimensions-report .relationship-origin-answers article::before {
      content: "";
      display: block;
      grid-row: 1 / span 2;
      width: 32px;
      height: 32px;
      margin-top: 3px;
      border: 1px solid rgba(76, 139, 102, 0.35);
      border-radius: 50%;
      background:
        radial-gradient(circle at 52% 46%, rgba(76, 139, 102, 0.42), transparent 26%),
        rgba(255, 252, 247, 0.5);
    }

    .relationship-match-screen.is-dimensions-report .relationship-origin-answers article:nth-child(2)::before {
      border-color: rgba(184, 54, 43, 0.32);
      background:
        radial-gradient(circle at 52% 46%, rgba(184, 54, 43, 0.4), transparent 26%),
        rgba(255, 252, 247, 0.5);
    }

    .relationship-match-screen.is-dimensions-report .relationship-origin-answers article:nth-child(3)::before {
      border-color: rgba(173, 138, 77, 0.4);
      background:
        radial-gradient(circle at 52% 46%, rgba(173, 138, 77, 0.46), transparent 26%),
        rgba(255, 252, 247, 0.5);
    }

    .relationship-match-screen.is-dimensions-report .relationship-origin-answers strong {
      display: block;
      color: #171512;
      font-family: var(--serif);
      font-size: 20px;
      font-weight: 900;
      letter-spacing: 0.06em;
      line-height: 1.2;
      writing-mode: horizontal-tb;
    }

    .relationship-match-screen.is-dimensions-report .relationship-origin-answers p {
      margin: 0;
      color: rgba(24, 23, 21, 0.62);
      font-size: 15px;
      line-height: 1.75;
      text-align: left;
      writing-mode: horizontal-tb;
      word-break: normal;
      overflow-wrap: break-word;
    }

    .relationship-match-screen.is-dimensions-report .relationship-dimension-proof-strip strong,
    .relationship-match-screen.is-dimensions-report .relationship-dimension-proof-strip p {
      writing-mode: horizontal-tb;
      word-break: normal;
      overflow-wrap: break-word;
      white-space: normal;
    }

    @media (max-width: 560px) {
      .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="fate"] .relationship-fate-origin-map {
        width: 100%;
        min-height: 338px;
        margin-bottom: 26px;
      }

      .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="fate"] .relationship-fate-origin-map::before {
        width: 104%;
      }

      .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="fate"] .relationship-fate-origin-map svg {
        width: 118%;
        height: 222px;
      }

      .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="fate"] .relationship-origin-moon {
        width: 104px;
        height: 104px;
      }

      .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="fate"] .relationship-origin-moon.is-left {
        left: -8px;
      }

      .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="fate"] .relationship-origin-moon.is-right {
        right: -8px;
      }

      .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="fate"] .relationship-origin-moon b {
        font-size: 38px;
      }

      .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="fate"] .relationship-origin-moon small {
        font-size: 11px;
      }

      .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="fate"] .relationship-origin-center {
        width: 78px;
        height: 78px;
      }

      .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="fate"] .relationship-fate-origin-map .tag {
        min-width: 48px;
        padding: 4px 9px;
        font-size: 13px;
      }

      .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="fate"] .relationship-fate-origin-map .tag.is-top {
        top: 18px;
      }

      .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="fate"] .relationship-fate-origin-map .tag.is-left {
        left: 18%;
        bottom: 34px;
      }

      .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="fate"] .relationship-fate-origin-map .tag.is-right {
        right: 15%;
        bottom: 34px;
      }

      .relationship-match-screen.is-dimensions-report .relationship-origin-answers {
        grid-template-columns: 1fr;
        margin-bottom: 30px;
      }

      .relationship-match-screen.is-dimensions-report .relationship-origin-answers article {
        display: grid;
        grid-template-columns: 42px minmax(0, 1fr);
        gap: 4px 12px;
        min-height: 0;
        padding: 15px 0;
      }

      .relationship-match-screen.is-dimensions-report .relationship-origin-answers article + article {
        border-left: 0;
        border-top: 1px solid rgba(173, 138, 77, 0.14);
      }

      .relationship-match-screen.is-dimensions-report .relationship-origin-answers article::before {
        grid-row: 1 / span 2;
        margin: 3px 0 0;
      }

      .relationship-match-screen.is-dimensions-report .relationship-origin-answers strong {
        font-size: 18px;
      }

      .relationship-match-screen.is-dimensions-report .relationship-origin-answers p {
        margin-top: 0;
        font-size: 14px;
      }
    }

    /* Relationship five-dimension fate page visual polish v5: asset-led, open scroll layout. */
    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="fate"] .relationship-fate-visual {
      position: relative;
      width: 100%;
      margin-top: 4px;
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="fate"] .relationship-fate-visual::before,
    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="fate"] .relationship-fate-visual::after {
      content: "";
      position: absolute;
      z-index: 0;
      pointer-events: none;
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="fate"] .relationship-fate-visual::before {
      left: -56px;
      top: 110px;
      width: 188px;
      height: 102px;
      opacity: 0.2;
      background:
        radial-gradient(ellipse at 25% 62%, transparent 0 38%, rgba(173, 138, 77, 0.5) 39% 41%, transparent 43%),
        radial-gradient(ellipse at 58% 46%, transparent 0 42%, rgba(173, 138, 77, 0.45) 43% 45%, transparent 47%);
      transform: rotate(-4deg);
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="fate"] .relationship-fate-visual::after {
      right: -42px;
      bottom: 48px;
      width: 160px;
      height: 84px;
      opacity: 0.18;
      background:
        radial-gradient(ellipse at 34% 54%, transparent 0 36%, rgba(173, 138, 77, 0.48) 37% 39%, transparent 41%),
        radial-gradient(ellipse at 72% 40%, transparent 0 38%, rgba(173, 138, 77, 0.42) 39% 41%, transparent 43%);
      transform: rotate(8deg);
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="fate"] .relationship-fate-origin-map {
      width: min(760px, 100%);
      min-height: clamp(292px, 42vw, 384px);
      margin: -6px auto 26px;
      overflow: visible;
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="fate"] .relationship-fate-origin-map::before {
      top: 47%;
      width: min(520px, 74%);
      border: 0;
      background:
        radial-gradient(circle at 50% 50%, rgba(184, 54, 43, 0.14), transparent 9%),
        repeating-radial-gradient(circle at 50% 50%, transparent 0 50px, rgba(173, 138, 77, 0.15) 51px 52px, transparent 53px 96px),
        linear-gradient(90deg, transparent 0 46%, rgba(173, 138, 77, 0.26) 49% 51%, transparent 54% 100%),
        linear-gradient(0deg, transparent 0 46%, rgba(173, 138, 77, 0.18) 49% 51%, transparent 54% 100%);
      opacity: 0.78;
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="fate"] .relationship-fate-origin-map::after {
      top: 47%;
      width: min(168px, 24vw);
      background:
        radial-gradient(circle, rgba(232, 197, 116, 0.3) 0 28%, rgba(232, 197, 116, 0.08) 42%, transparent 68%);
      filter: blur(12px);
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="fate"] .relationship-fate-origin-map svg {
      top: 47%;
      z-index: 2;
      width: min(650px, 92%);
      height: 250px;
      overflow: visible;
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="fate"] .relationship-fate-origin-map .thread {
      stroke-width: 3.2;
      opacity: 0.86;
      filter:
        drop-shadow(0 1px 0 rgba(255, 252, 247, 0.76))
        drop-shadow(0 4px 7px rgba(113, 93, 62, 0.08));
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="fate"] .relationship-fate-origin-map .thread.is-red {
      stroke: rgba(184, 54, 43, 0.86);
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="fate"] .relationship-fate-origin-map .thread.is-gold {
      stroke: rgba(173, 138, 77, 0.9);
      stroke-width: 3.5;
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="fate"] .relationship-fate-origin-map .thread.is-green {
      stroke: rgba(76, 139, 102, 0.82);
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="fate"] .relationship-fate-origin-map .axis {
      stroke: rgba(173, 138, 77, 0.28);
      stroke-dasharray: 2 14;
      stroke-width: 1.1;
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="fate"] .relationship-origin-moon {
      --relationship-fate-moon-size: clamp(148px, 27%, 206px);
      display: grid;
      place-items: center;
      top: 47%;
      z-index: 3;
      width: var(--relationship-fate-moon-size);
      height: var(--relationship-fate-moon-size);
      border: 0;
      background: transparent center / contain no-repeat;
      box-shadow: none;
      filter:
        drop-shadow(0 22px 24px rgba(113, 93, 62, 0.12))
        drop-shadow(0 0 18px color-mix(in srgb, var(--left-color) 14%, transparent));
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="fate"] .relationship-origin-moon::before {
      inset: 8%;
      z-index: -1;
      border: 0;
      background:
        radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--left-color) 16%, transparent), transparent 58%),
        radial-gradient(circle at 50% 54%, rgba(173, 138, 77, 0.12), transparent 70%);
      filter: blur(12px);
      mix-blend-mode: normal;
      opacity: 0.9;
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="fate"] .relationship-origin-moon::after {
      content: "";
      position: absolute;
      inset: 5%;
      z-index: 1;
      border: 1px solid rgba(113, 93, 62, 0.16);
      border-radius: 50%;
      background: transparent;
      mask-image: none;
      box-shadow:
        inset 0 0 18px rgba(113, 93, 62, 0.08),
        0 0 0 1px rgba(255, 252, 247, 0.36);
      pointer-events: none;
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="fate"] .relationship-origin-moon.is-left {
      left: 0;
      background-image: url("../assets/relationship-match/fate/relationship-fate-moon-paper-v5-left.png");
      background-position: center;
      background-repeat: no-repeat;
      background-size: contain;
      transform: translateY(-50%);
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="fate"] .relationship-origin-moon.is-right {
      right: 0;
      background-image: url("../assets/relationship-match/fate/relationship-fate-moon-paper-v6-left.png");
      background-position: center;
      background-repeat: no-repeat;
      background-size: contain;
      filter:
        drop-shadow(0 22px 24px rgba(113, 93, 62, 0.12))
        drop-shadow(0 0 18px color-mix(in srgb, var(--right-color) 14%, transparent));
      transform: translateY(-50%);
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="fate"] .relationship-origin-moon.is-right::before {
      background:
        radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--right-color) 16%, transparent), transparent 58%),
        radial-gradient(circle at 50% 54%, rgba(173, 138, 77, 0.12), transparent 70%);
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="fate"] .relationship-origin-moon b {
      display: block;
      color: #171512;
      font-family: var(--serif);
      font-size: clamp(42px, 6.2vw, 58px);
      font-weight: 900;
      letter-spacing: 0.03em;
      line-height: 1;
      text-shadow:
        0 1px 0 rgba(255, 252, 247, 0.82),
        0 7px 16px rgba(24, 23, 21, 0.12);
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="fate"] .relationship-origin-moon small {
      position: absolute;
      left: 50%;
      top: calc(100% + 12px);
      width: max-content;
      max-width: 152px;
      margin: 0;
      padding: 9px 22px 0;
      color: rgba(113, 93, 62, 0.92);
      font-size: 16px;
      font-weight: 900;
      letter-spacing: 0.12em;
      text-align: center;
      border-top: 1px solid rgba(173, 138, 77, 0.28);
      transform: translateX(-50%);
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="fate"] .relationship-origin-moon small::before,
    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="fate"] .relationship-origin-moon small::after {
      content: "";
      position: absolute;
      top: -4px;
      width: 7px;
      height: 7px;
      border: 1px solid rgba(173, 138, 77, 0.4);
      border-radius: 50%;
      background: rgba(255, 252, 247, 0.92);
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="fate"] .relationship-origin-moon small::before {
      left: -2px;
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="fate"] .relationship-origin-moon small::after {
      right: -2px;
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="fate"] .relationship-origin-center {
      top: 47%;
      z-index: 4;
      width: clamp(76px, 14%, 98px);
      border: 1px solid rgba(184, 54, 43, 0.48);
      background:
        radial-gradient(circle, rgba(255, 252, 247, 0.98) 0 58%, rgba(248, 239, 217, 0.86) 59% 70%, rgba(184, 54, 43, 0.08) 71% 76%, transparent 77%);
      box-shadow:
        0 0 0 7px rgba(255, 252, 247, 0.68),
        0 0 0 11px rgba(184, 54, 43, 0.09),
        0 0 42px rgba(232, 197, 116, 0.56);
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="fate"] .relationship-origin-center b {
      color: #b9362b;
      font-size: clamp(36px, 6.4vw, 50px);
      text-shadow: 0 1px 0 rgba(255, 252, 247, 0.76);
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="fate"] .relationship-fate-origin-map .tag {
      display: none;
    }

    .relationship-match-screen.is-dimensions-report .relationship-origin-answers {
      position: relative;
      z-index: 1;
      width: min(720px, calc(100% - 18px));
      margin: 0 auto 46px;
      border-top: 1px solid rgba(173, 138, 77, 0.24);
      border-bottom: 1px solid rgba(173, 138, 77, 0.2);
      background:
        linear-gradient(90deg, transparent, rgba(255, 252, 247, 0.44) 18%, rgba(255, 252, 247, 0.52) 82%, transparent);
    }

    .relationship-match-screen.is-dimensions-report .relationship-origin-answers article {
      grid-template-columns: 86px minmax(0, 1fr);
      gap: 2px 18px;
      padding: 20px 0 20px 4px;
    }

    .relationship-match-screen.is-dimensions-report .relationship-origin-answers article + article {
      border-top: 1px solid rgba(173, 138, 77, 0.16);
    }

    .relationship-match-screen.is-dimensions-report .relationship-origin-answers article::before {
      grid-row: 1 / span 2;
      width: 60px;
      height: 60px;
      margin: 2px 0 0 5px;
      border: 1px solid rgba(173, 138, 77, 0.28);
      background:
        radial-gradient(circle at 50% 52%, rgba(255, 252, 247, 0.86), rgba(238, 231, 213, 0.54) 64%, rgba(173, 138, 77, 0.12)),
        rgba(255, 252, 247, 0.56);
      box-shadow:
        inset 0 0 0 7px rgba(255, 252, 247, 0.44),
        0 9px 18px rgba(113, 93, 62, 0.07);
    }

    .relationship-match-screen.is-dimensions-report .relationship-origin-answers article::after {
      position: absolute;
      left: 26px;
      top: 31px;
      color: rgba(76, 139, 102, 0.82);
      font-family: var(--serif);
      font-size: 27px;
      font-weight: 900;
      line-height: 1;
    }

    .relationship-match-screen.is-dimensions-report .relationship-origin-answers article:nth-child(1)::after {
      content: "因";
    }

    .relationship-match-screen.is-dimensions-report .relationship-origin-answers article:nth-child(2)::after {
      content: "感";
      color: rgba(184, 54, 43, 0.78);
    }

    .relationship-match-screen.is-dimensions-report .relationship-origin-answers article:nth-child(3)::after {
      content: "近";
      color: rgba(45, 111, 135, 0.78);
    }

    .relationship-match-screen.is-dimensions-report .relationship-origin-answers strong {
      color: #171512;
      font-size: clamp(21px, 4.4vw, 26px);
      letter-spacing: 0.06em;
      line-height: 1.16;
    }

    .relationship-match-screen.is-dimensions-report .relationship-origin-answers p {
      max-width: 31em;
      color: rgba(24, 23, 21, 0.68);
      font-size: clamp(15px, 2.65vw, 17px);
      line-height: 1.86;
      letter-spacing: 0.03em;
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="fate"] .relationship-dimension-summary {
      width: min(690px, calc(100% - 30px));
      margin: 6px auto 22px;
      padding: 34px 0 20px;
      text-align: center;
      border-top: 1px solid rgba(173, 138, 77, 0.2);
      background:
        radial-gradient(ellipse at 0 30%, rgba(173, 138, 77, 0.08), transparent 42%),
        radial-gradient(ellipse at 100% 72%, rgba(76, 139, 102, 0.06), transparent 40%);
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="fate"] .relationship-dimension-summary h3 {
      text-align: center;
      font-size: clamp(30px, 7.4vw, 42px);
      letter-spacing: 0.12em;
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="fate"] .relationship-dimension-summary p {
      max-width: 34em;
      margin: 12px auto 0;
      color: rgba(24, 23, 21, 0.66);
      font-size: 16px;
      line-height: 1.9;
      text-align: center;
    }

    @media (max-width: 560px) {
      .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="fate"] .relationship-fate-origin-map {
        min-height: 282px;
        margin: -8px auto 24px;
      }

      .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="fate"] .relationship-fate-origin-map::before {
        width: 68%;
      }

      .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="fate"] .relationship-fate-origin-map svg {
        width: 90%;
        height: 184px;
      }

      .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="fate"] .relationship-origin-moon {
        --relationship-fate-moon-size: 132px;
        width: var(--relationship-fate-moon-size);
        height: var(--relationship-fate-moon-size);
      }

      .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="fate"] .relationship-origin-moon.is-left {
        left: -8px;
      }

      .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="fate"] .relationship-origin-moon.is-right {
        right: -8px;
      }

      .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="fate"] .relationship-origin-moon b {
        font-size: 42px;
      }

      .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="fate"] .relationship-origin-moon small {
        top: calc(100% + 8px);
        max-width: 120px;
        padding-top: 7px;
        font-size: 12px;
      }

      .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="fate"] .relationship-origin-center {
        width: 78px;
      }

      .relationship-match-screen.is-dimensions-report .relationship-origin-answers {
        width: calc(100% - 6px);
        margin-bottom: 36px;
      }

      .relationship-match-screen.is-dimensions-report .relationship-origin-answers article {
        grid-template-columns: 72px minmax(0, 1fr);
        gap: 2px 12px;
        padding: 18px 0;
      }

      .relationship-match-screen.is-dimensions-report .relationship-origin-answers article::before {
        width: 52px;
        height: 52px;
        margin-left: 3px;
      }

      .relationship-match-screen.is-dimensions-report .relationship-origin-answers article::after {
        left: 21px;
        top: 30px;
        font-size: 23px;
      }

      .relationship-match-screen.is-dimensions-report .relationship-origin-answers strong {
        font-size: 20px;
      }

      .relationship-match-screen.is-dimensions-report .relationship-origin-answers p {
        font-size: 14px;
        line-height: 1.76;
      }
    }

    /* Relationship five-dimension shared polish v6: open scroll layout for the other four chapters. */
    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel:not([data-dimension="fate"]) {
      gap: 18px;
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel:not([data-dimension="fate"]) .relationship-dimension-summary {
      width: min(660px, calc(100% - 28px));
      margin: 4px auto 20px;
      padding: 26px 0 16px;
      border-top: 1px solid rgba(173, 138, 77, 0.18);
      text-align: center;
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel:not([data-dimension="fate"]) .relationship-dimension-summary h3,
    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel:not([data-dimension="fate"]) .relationship-dimension-summary p {
      text-align: center;
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel:not([data-dimension="fate"]) .relationship-dimension-summary h3 {
      font-size: clamp(27px, 6.8vw, 38px);
      letter-spacing: 0.08em;
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel:not([data-dimension="fate"]) .relationship-dimension-summary p {
      max-width: 34em;
      margin: 10px auto 0;
      color: rgba(24, 23, 21, 0.66);
      font-size: 15px;
      line-height: 1.84;
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="resonance"] .relationship-resonance-visual {
      width: min(640px, 100%);
      margin: -4px auto 6px;
      overflow: visible;
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="resonance"] .relationship-radar-wrap {
      width: min(330px, 82vw);
      margin: 0 auto 8px;
      overflow: visible;
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="resonance"] .relationship-radar-wrap > button {
      width: 58px;
      height: 58px;
      border: 0;
      background: transparent;
      box-shadow: none;
      transform: translate(-50%, -50%);
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="resonance"] .relationship-radar-wrap > button span {
      display: block;
      color: #171512;
      font-family: var(--serif);
      font-size: 16px;
      font-weight: 900;
      letter-spacing: 0.04em;
      line-height: 1.05;
      text-shadow: 0 1px 0 rgba(255, 252, 247, 0.68);
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="resonance"] .relationship-radar-wrap > button em {
      display: grid;
      place-items: center;
      width: 28px;
      height: 28px;
      margin: 5px auto 0;
      border-radius: 50%;
      background: rgba(76, 139, 102, 0.92);
      color: #fffaf1;
      font-size: 15px;
      font-style: normal;
      font-weight: 900;
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="resonance"] .relationship-radar-wrap > button:nth-of-type(2) em {
      background: rgba(184, 82, 62, 0.92);
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="resonance"] .relationship-radar-wrap > button:nth-of-type(3) em,
    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="resonance"] .relationship-radar-wrap > button:nth-of-type(6) em {
      background: rgba(173, 138, 77, 0.9);
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="resonance"] .relationship-radar-wrap > button:nth-of-type(4) em {
      background: rgba(126, 133, 130, 0.88);
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="resonance"] .relationship-radar-wrap > button:nth-of-type(5) em {
      background: rgba(45, 122, 143, 0.9);
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="resonance"] .relationship-radar-center {
      width: 84px;
      height: 84px;
      box-shadow:
        0 0 0 8px rgba(173, 138, 77, 0.05),
        0 12px 26px rgba(113, 93, 62, 0.08);
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="interaction"] .relationship-flow-map {
      width: min(640px, 100%);
      min-height: 304px;
      margin: -8px auto 6px;
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="interaction"] .relationship-flow-orbit-image {
      position: absolute;
      left: 50%;
      top: 51%;
      z-index: 0;
      width: min(690px, 114%);
      height: auto;
      opacity: 0.74;
      transform: translate(-50%, -50%);
      pointer-events: none;
      user-select: none;
      filter:
        saturate(0.9)
        drop-shadow(0 8px 18px rgba(113, 93, 62, 0.05))
        drop-shadow(0 1px 0 rgba(255, 252, 247, 0.68));
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="interaction"] .relationship-flow-map svg {
      z-index: 1;
      inset: 38px 7% auto;
      width: 86%;
      height: 178px;
      opacity: 0.18;
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="interaction"] .relationship-flow-person {
      top: 86px;
      width: 112px;
      height: 112px;
      background: rgba(255, 252, 247, 0.5);
      border-color: rgba(173, 138, 77, 0.12);
      box-shadow: none;
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="interaction"] .relationship-flow-person b {
      font-size: 38px;
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="interaction"] .relationship-flow-person small {
      margin-top: -12px;
      font-size: 12px;
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="interaction"] .relationship-flow-label {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 2px 9px;
      font-size: 13px;
      border: 1px solid rgba(173, 138, 77, 0.18);
      border-radius: 999px;
      appearance: none;
      color: inherit;
      font: inherit;
      line-height: 1.15;
      background: rgba(255, 252, 247, 0.78);
      box-shadow: 0 4px 10px rgba(113, 93, 62, 0.04);
      cursor: pointer;
      transition: transform 180ms ease, border-color 180ms ease, color 180ms ease, background 180ms ease;
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="interaction"] .relationship-flow-label span {
      display: inline-block;
      max-width: 11em;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="interaction"] .relationship-flow-label small {
      color: #a93226;
      font-family: var(--kai);
      font-size: 12px;
      font-weight: 900;
      letter-spacing: 0.02em;
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="interaction"] .relationship-flow-label.active {
      transform: translateX(-50%) translateY(-1px);
      border-color: rgba(184, 54, 43, 0.36);
      background: rgba(255, 252, 247, 0.88);
      box-shadow: 0 8px 16px rgba(113, 93, 62, 0.08);
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="interaction"] .relationship-flow-label.is-green {
      top: 52px;
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="interaction"] .relationship-flow-label.is-red {
      top: 92px;
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="interaction"] .relationship-flow-label.is-gold {
      top: 132px;
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="interaction"] .relationship-flow-label.is-blue {
      top: 174px;
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="interaction"] .relationship-gauge-row {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      width: min(560px, calc(100% - 18px));
      margin: -4px auto 8px;
      border-top: 1px solid rgba(173, 138, 77, 0.2);
      border-bottom: 1px solid rgba(173, 138, 77, 0.14);
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="interaction"] .relationship-gauge {
      min-height: 76px;
      border: 0;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="interaction"] .relationship-gauge + .relationship-gauge {
      border-left: 1px solid rgba(173, 138, 77, 0.16);
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="interaction"] .relationship-gauge i {
      display: none;
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="interaction"] .relationship-gauge b {
      color: #a93226;
      font-size: 25px;
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="interaction"] .relationship-gauge small {
      color: rgba(24, 23, 21, 0.58);
      font-family: var(--serif);
      font-size: 12px;
      font-weight: 900;
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="interaction"] .relationship-interaction-reading h3 {
      font-family: var(--kai);
      font-size: clamp(22px, 4.6vw, 28px);
      letter-spacing: 0.05em;
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="interaction"] .relationship-interaction-reading p {
      max-width: 35em;
      margin-inline: auto;
      font-family: var(--kai);
      line-height: 1.92;
      letter-spacing: 0.03em;
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="risk"] .relationship-risk-wheel {
      width: min(292px, 78vw);
      margin: -8px auto 10px;
      background: conic-gradient(
        from -45deg,
        rgba(184, 54, 43, 0.2) 0 25%,
        rgba(184, 54, 43, 0.12) 25% 50%,
        rgba(173, 138, 77, 0.12) 50% 75%,
        rgba(184, 82, 62, 0.16) 75% 100%
      );
      box-shadow:
        inset 0 0 0 1px rgba(173, 138, 77, 0.22),
        0 14px 26px rgba(113, 93, 62, 0.08);
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="risk"] .relationship-risk-wheel button {
      width: 86px;
      height: 56px;
      color: #a93226;
      font-size: 16px;
      line-height: 1.15;
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="risk"] .relationship-risk-wheel button em {
      width: 26px;
      height: 26px;
      font-size: 17px;
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="risk"] .relationship-risk-wheel b {
      width: 76px;
      height: 76px;
      font-size: 34px;
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="risk"] .relationship-risk-card {
      width: min(560px, calc(100% - 28px));
      margin: 0 auto 10px;
      padding-top: 10px;
      border-top: 1px solid rgba(173, 138, 77, 0.18);
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="timing"] .relationship-river-scroll {
      width: 100%;
      margin: -4px auto 10px;
      overflow-x: auto;
      overflow-y: hidden;
      -webkit-overflow-scrolling: touch;
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="timing"] .relationship-river-canvas {
      min-width: 560px;
      height: 238px;
      margin-inline: auto;
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="timing"] .relationship-river-canvas .river {
      stroke-width: 15;
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="timing"] .relationship-river-canvas button {
      transform: translate(-50%, 0) scale(0.92);
      transform-origin: center top;
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="timing"] .relationship-year-detail.compact {
      width: min(560px, calc(100% - 28px));
      margin: 2px auto 10px;
      padding-top: 10px !important;
      border-top: 1px solid rgba(173, 138, 77, 0.18) !important;
      text-align: center;
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="timing"] .relationship-year-detail.compact h2,
    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="timing"] .relationship-year-detail.compact p {
      text-align: center;
    }

    @media (max-width: 560px) {
      .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="resonance"] .relationship-radar-wrap {
        width: min(300px, 82vw);
      }

      .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="interaction"] .relationship-flow-map {
        width: 106%;
        min-height: 270px;
        margin-left: -3%;
      }

      .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="interaction"] .relationship-flow-person {
        width: 104px;
        height: 104px;
      }

      .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="interaction"] .relationship-flow-person.is-left {
        left: 2px;
      }

      .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="interaction"] .relationship-flow-person.is-right {
        right: 2px;
      }

      .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="risk"] .relationship-risk-wheel {
        width: min(282px, 76vw);
      }

      .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="timing"] .relationship-river-canvas {
        min-width: 520px;
      }
    }

    /* Relationship five-dimension hierarchy polish v7: keep navigation quiet, let chapters lead. */
    .relationship-match-screen.is-dimensions-report {
      padding-bottom: calc(128px + env(safe-area-inset-bottom));
    }

    .relationship-match-screen.is-dimensions-report .relationship-report-shell {
      padding-bottom: calc(118px + env(safe-area-inset-bottom));
    }

    .relationship-match-screen.is-dimensions-report .relationship-report-tabs {
      width: min(640px, calc(100% - 10px));
      margin: -2px auto 12px;
      padding: 0;
      border-top: 1px solid rgba(173, 138, 77, 0.12);
      border-bottom: 1px solid rgba(173, 138, 77, 0.14);
      background: linear-gradient(90deg, transparent, rgba(255, 252, 247, 0.34), transparent);
    }

    .relationship-match-screen.is-dimensions-report .relationship-report-tabs button {
      min-height: 34px;
      padding: 0 4px;
      color: rgba(24, 23, 21, 0.52);
      font-family: var(--serif);
      font-size: 13px;
      font-weight: 800;
      letter-spacing: 0.1em;
    }

    .relationship-match-screen.is-dimensions-report .relationship-report-tabs button.active {
      color: #171512;
    }

    .relationship-match-screen.is-dimensions-report .relationship-report-tabs button::after {
      height: 3px;
      border-radius: 999px;
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-shell {
      gap: 14px;
    }

    .relationship-match-screen.is-dimensions-report .relationship-holo-tabs {
      width: min(660px, calc(100% - 4px));
      margin: 0 auto 4px;
      padding: 4px 0 12px;
      border-bottom: 1px solid rgba(173, 138, 77, 0.14);
    }

    .relationship-match-screen.is-dimensions-report .relationship-holo-tabs button {
      min-height: 44px;
    }

    .relationship-match-screen.is-dimensions-report .relationship-holo-tabs b {
      color: rgba(24, 23, 21, 0.46);
      font-size: clamp(18px, 4.8vw, 24px);
      letter-spacing: 0.12em;
      line-height: 1;
    }

    .relationship-match-screen.is-dimensions-report .relationship-holo-tabs button.active b {
      color: #171512;
      transform: translateY(-1px) scale(1.05);
    }

    .relationship-match-screen.is-dimensions-report .relationship-holo-tabs button.active::after {
      bottom: 0;
      width: 34px;
      height: 4px;
      background:
        radial-gradient(circle at 100% 50%, rgba(173, 138, 77, 0.76) 0 2px, transparent 3px),
        linear-gradient(90deg, transparent, rgba(184, 54, 43, 0.9), rgba(173, 138, 77, 0.82), transparent);
      filter: none;
    }

    .relationship-match-screen.is-dimensions-report .relationship-dimension-chapter-head {
      padding-top: 8px;
      margin-top: 0;
    }

    .relationship-match-screen.is-dimensions-report .relationship-dimension-chapter-head h2 {
      font-size: clamp(30px, 7.6vw, 40px);
      letter-spacing: 0.08em;
    }

    .relationship-match-screen.is-dimensions-report .relationship-dimension-chapter-head p {
      max-width: 24em;
      margin-top: 7px;
      font-size: 14px;
      line-height: 1.6;
      letter-spacing: 0.04em;
    }

    .relationship-match-screen.is-dimensions-report .relationship-dimension-chapter-head i {
      width: 72px;
      height: 8px;
      margin-top: 12px;
      opacity: 0.82;
    }

    .relationship-match-screen.is-dimensions-report .relationship-perspective-switch {
      width: min(520px, calc(100% - 28px));
      margin: 8px auto 18px;
      border-radius: 999px;
    }

    .relationship-match-screen.is-dimensions-report .relationship-perspective-switch button {
      min-height: 42px;
      font-size: 14px;
      letter-spacing: 0.08em;
    }

    .relationship-match-screen.is-dimensions-report .relationship-risk-wheel {
      width: min(268px, 70vw);
      background:
        radial-gradient(circle at 50% 50%, rgba(255, 252, 247, 0.9) 0 22%, transparent 23%),
        conic-gradient(
          from -45deg,
          rgba(184, 54, 43, 0.18) 0 25%,
          rgba(184, 82, 62, 0.09) 25% 50%,
          rgba(173, 138, 77, 0.12) 50% 75%,
          rgba(184, 54, 43, 0.13) 75% 100%
        );
    }

    .relationship-match-screen.is-dimensions-report .relationship-risk-wheel button {
      width: 76px;
      height: 50px;
      font-size: 14px;
    }

    .relationship-match-screen.is-dimensions-report .relationship-risk-wheel b {
      width: 64px;
      height: 64px;
      font-size: 30px;
    }

    .relationship-match-screen.is-dimensions-report .relationship-ziwei-lock-card {
      margin-bottom: calc(24px + env(safe-area-inset-bottom));
    }

    @media (max-width: 560px) {
      .relationship-match-screen.is-dimensions-report .relationship-report-tabs {
        width: calc(100% - 2px);
      }

      .relationship-match-screen.is-dimensions-report .relationship-holo-tabs b {
        font-size: clamp(17px, 4.7vw, 22px);
      }

      .relationship-match-screen.is-dimensions-report .relationship-dimension-chapter-head h2 {
        font-size: clamp(29px, 7.4vw, 36px);
      }
    }

    /* Relationship risk chapter polish v8: thunder talisman plate instead of a heavy pie. */
    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="risk"] .relationship-risk-visual {
      gap: 16px;
      margin-top: -2px;
      margin-bottom: 34px;
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="risk"] .relationship-risk-wheel {
      width: min(304px, 74vw);
      border: 0;
      background:
        radial-gradient(circle at 50% 50%, rgba(255, 252, 247, 0.98) 0 20%, rgba(255, 252, 247, 0.72) 21% 27%, transparent 28%),
        radial-gradient(circle at 50% 50%, transparent 0 47%, rgba(173, 138, 77, 0.16) 48% 49%, transparent 50%),
        conic-gradient(
          from -45deg,
          rgba(184, 54, 43, 0.12) 0 25%,
          rgba(173, 138, 77, 0.08) 25% 50%,
          rgba(184, 82, 62, 0.1) 50% 75%,
          rgba(173, 138, 77, 0.06) 75% 100%
        );
      box-shadow:
        inset 0 0 0 1px rgba(173, 138, 77, 0.22),
        inset 0 0 42px rgba(184, 54, 43, 0.05),
        0 20px 34px rgba(113, 93, 62, 0.08);
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="risk"] .relationship-risk-wheel::before,
    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="risk"] .relationship-risk-wheel::after {
      content: "";
      position: absolute;
      left: 50%;
      top: 8%;
      width: 1px;
      height: 84%;
      background: linear-gradient(180deg, transparent, rgba(184, 54, 43, 0.32), transparent);
      transform: translateX(-50%);
      opacity: 0.72;
      pointer-events: none;
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="risk"] .relationship-risk-wheel::after {
      left: 8%;
      top: 50%;
      width: 84%;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(184, 54, 43, 0.3), transparent);
      transform: translateY(-50%);
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="risk"] .relationship-risk-wheel b {
      width: 62px;
      height: 62px;
      border: 1px solid rgba(173, 138, 77, 0.46);
      border-radius: 50%;
      background:
        radial-gradient(circle, rgba(255, 252, 247, 0.98), rgba(248, 239, 217, 0.86));
      color: #a93226;
      font-size: 30px;
      box-shadow:
        0 0 0 8px rgba(255, 252, 247, 0.5),
        0 0 0 11px rgba(173, 138, 77, 0.08);
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="risk"] .relationship-risk-wheel button {
      width: 78px;
      height: 64px;
      padding: 0;
      background: transparent;
      border: 0;
      box-shadow: none;
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="risk"] .relationship-risk-wheel button em {
      display: grid;
      place-items: center;
      width: 28px;
      height: 28px;
      margin: 0 auto 6px;
      border: 1px solid rgba(184, 54, 43, 0.36);
      border-radius: 50%;
      background: rgba(255, 252, 247, 0.72);
      color: #a93226;
      font-family: var(--serif);
      font-size: 16px;
      font-style: normal;
      font-weight: 900;
      line-height: 1;
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="risk"] .relationship-risk-wheel button span {
      display: block;
      color: rgba(169, 50, 38, 0.84);
      font-family: var(--serif);
      font-size: 14px;
      font-weight: 900;
      letter-spacing: 0.04em;
      line-height: 1.18;
      text-shadow: 0 1px 0 rgba(255, 252, 247, 0.72);
      white-space: normal;
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="risk"] .relationship-risk-wheel button.active em {
      background: rgba(184, 54, 43, 0.92);
      color: #fffaf1;
      box-shadow: 0 0 0 5px rgba(184, 54, 43, 0.08);
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="risk"] .relationship-risk-wheel button.active span {
      color: #a93226;
    }

    /* Relationship fate cleanup v9: no duplicate heading, no grid backdrop, lighter type, real icons. */
    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="fate"] {
      gap: 16px;
    }

    .relationship-match-screen.is-dimensions-report .relationship-holo-tabs {
      padding-bottom: 10px;
    }

    .relationship-match-screen.is-dimensions-report .relationship-holo-tabs button {
      min-height: 38px;
    }

    .relationship-match-screen.is-dimensions-report .relationship-holo-tabs b {
      font-size: clamp(16px, 4vw, 21px);
      letter-spacing: 0.1em;
    }

    .relationship-match-screen.is-dimensions-report .relationship-holo-tabs button.active b {
      transform: translateY(-1px) scale(1.04);
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="fate"] .relationship-fate-visual {
      margin-top: 8px;
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="fate"] .relationship-fate-visual::before,
    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="fate"] .relationship-fate-visual::after {
      display: none;
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="fate"] .relationship-fate-origin-map {
      min-height: clamp(250px, 37vw, 330px);
      margin: 0 auto 20px;
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="fate"] .relationship-fate-origin-map::before,
    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="fate"] .relationship-fate-origin-map::after {
      content: "";
      position: absolute;
      z-index: 1;
      border: 0;
      pointer-events: none;
      filter: none;
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="fate"] .relationship-fate-origin-map::before {
      left: -4%;
      top: 10%;
      width: min(230px, 38vw);
      height: min(132px, 23vw);
      opacity: 0.24;
      background: url("../assets/relationship-match/fate/generated/relationship-fate-cloud-imagen-v1.png") center / contain no-repeat;
      transform: rotate(-5deg);
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="fate"] .relationship-fate-origin-map::after {
      right: -5%;
      bottom: 9%;
      width: min(230px, 38vw);
      height: min(132px, 23vw);
      opacity: 0.18;
      background: url("../assets/relationship-match/fate/generated/relationship-fate-cloud-imagen-v1.png") center / contain no-repeat;
      transform: rotate(176deg) scaleX(-1);
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="fate"] .relationship-fate-origin-map svg {
      display: none;
      z-index: 2;
      height: 210px;
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="fate"] .relationship-origin-connector-image {
      position: absolute;
      left: 50%;
      top: 47%;
      z-index: 2;
      width: min(590px, 92%);
      height: auto;
      transform: translate(-50%, -50%);
      pointer-events: none;
      user-select: none;
      filter:
        drop-shadow(0 4px 7px rgba(113, 93, 62, 0.08))
        drop-shadow(0 1px 0 rgba(255, 252, 247, 0.6));
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="fate"] .relationship-fate-origin-map .axis {
      display: none;
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="fate"] .relationship-origin-moon {
      --relationship-fate-moon-size: clamp(128px, 24%, 178px);
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="fate"] .relationship-origin-moon b {
      font-size: clamp(34px, 5.2vw, 46px);
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="fate"] .relationship-origin-moon small {
      top: calc(100% + 9px);
      padding-top: 7px;
      font-size: 13px;
      letter-spacing: 0.1em;
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="fate"] .relationship-origin-center {
      display: none;
      width: clamp(66px, 12%, 84px);
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="fate"] .relationship-origin-center b {
      font-size: clamp(31px, 5.4vw, 42px);
    }

    .relationship-match-screen.is-dimensions-report .relationship-origin-answers {
      width: min(690px, calc(100% - 28px));
      margin-bottom: 34px;
    }

    .relationship-match-screen.is-dimensions-report .relationship-origin-answers article {
      grid-template-columns: 68px minmax(0, 1fr);
      gap: 3px 16px;
      padding: 18px 0;
    }

    .relationship-match-screen.is-dimensions-report .relationship-origin-answers article::before,
    .relationship-match-screen.is-dimensions-report .relationship-origin-answers article::after {
      content: none !important;
      display: none !important;
    }

    .relationship-match-screen.is-dimensions-report .relationship-origin-icon {
      grid-row: 1 / span 2;
      display: grid;
      place-items: center;
      width: 54px;
      height: 54px;
      margin: 2px 0 0 4px;
      border: 1px solid rgba(173, 138, 77, 0.24);
      border-radius: 50%;
      background:
        radial-gradient(circle at 50% 52%, rgba(255, 252, 247, 0.9), rgba(238, 231, 213, 0.48) 64%, rgba(173, 138, 77, 0.1)),
        rgba(255, 252, 247, 0.58);
      box-shadow:
        inset 0 0 0 7px rgba(255, 252, 247, 0.42),
        0 9px 18px rgba(113, 93, 62, 0.06);
    }

    .relationship-match-screen.is-dimensions-report .relationship-origin-icon img {
      display: block;
      width: 38px;
      height: 38px;
      object-fit: contain;
      filter: drop-shadow(0 2px 3px rgba(113, 93, 62, 0.08));
    }

    .relationship-match-screen.is-dimensions-report .relationship-origin-answers strong {
      font-size: clamp(19px, 4vw, 23px);
      letter-spacing: 0.04em;
    }

    .relationship-match-screen.is-dimensions-report .relationship-origin-answers p {
      max-width: 32em;
      font-size: clamp(14px, 2.45vw, 15.5px);
      line-height: 1.78;
      letter-spacing: 0.02em;
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="fate"] .relationship-dimension-summary {
      margin-top: 0;
      padding-top: 26px;
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="fate"] .relationship-dimension-summary h3 {
      font-size: clamp(25px, 6vw, 34px);
      letter-spacing: 0.08em;
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="fate"] .relationship-dimension-summary p {
      font-size: 14.5px;
      line-height: 1.82;
    }

    @media (max-width: 560px) {
      .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="fate"] .relationship-fate-origin-map {
        min-height: 254px;
        margin-bottom: 18px;
      }

      .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="fate"] .relationship-fate-origin-map::before {
        left: -9%;
        top: 9%;
        width: 158px;
        height: 92px;
        opacity: 0.22;
      }

      .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="fate"] .relationship-fate-origin-map::after {
        right: -11%;
        bottom: 12%;
        width: 160px;
        height: 94px;
        opacity: 0.16;
      }

      .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="fate"] .relationship-fate-origin-map svg {
        height: 164px;
      }

      .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="fate"] .relationship-origin-connector-image {
        width: 104%;
        max-width: 430px;
      }

      .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="fate"] .relationship-origin-moon {
        --relationship-fate-moon-size: 118px;
      }

      .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="fate"] .relationship-origin-moon b {
        font-size: 34px;
      }

      .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="fate"] .relationship-origin-center {
        width: 66px;
      }

      .relationship-match-screen.is-dimensions-report .relationship-origin-answers {
        width: calc(100% - 20px);
        margin-bottom: 30px;
      }

      .relationship-match-screen.is-dimensions-report .relationship-origin-answers article {
        grid-template-columns: 58px minmax(0, 1fr);
        gap: 2px 12px;
        padding: 16px 0;
      }

      .relationship-match-screen.is-dimensions-report .relationship-origin-icon {
        width: 48px;
        height: 48px;
        margin-left: 2px;
      }

      .relationship-match-screen.is-dimensions-report .relationship-origin-icon svg {
        width: 27px;
        height: 27px;
      }

      .relationship-match-screen.is-dimensions-report .relationship-origin-answers strong {
        font-size: 18px;
      }

      .relationship-match-screen.is-dimensions-report .relationship-origin-answers p {
        font-size: 13.5px;
        line-height: 1.7;
      }
    }

    /* Relationship fate typography and ink underline v10: use bitmap ink, remove framed summary tint. */
    .relationship-match-screen.is-dimensions-report .relationship-holo-tabs b,
    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="fate"] .relationship-origin-answers strong,
    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="fate"] .relationship-dimension-summary h3 {
      font-family: var(--kai);
    }

    .relationship-match-screen.is-dimensions-report .relationship-holo-tabs button.active::after {
      bottom: -1px;
      width: 58px;
      height: 10px;
      border-radius: 0;
      background: url("../assets/relationship-match/fate/generated/relationship-fate-tab-underline-imagen-v1.png") center / contain no-repeat;
      box-shadow: none;
      filter: none;
      opacity: 0.96;
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="fate"] .relationship-dimension-summary {
      max-width: 650px;
      margin: 2px auto 0;
      padding: 24px 8px 4px;
      border: 0;
      border-radius: 0;
      background: transparent !important;
      box-shadow: none;
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="fate"] .relationship-dimension-summary h3 {
      font-size: clamp(23px, 5vw, 30px);
      letter-spacing: 0.08em;
      line-height: 1.28;
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="fate"] .relationship-dimension-summary p {
      max-width: 32em;
      margin: 12px auto 0;
      font-family: var(--kai);
      font-size: clamp(13.5px, 2.5vw, 15px);
      line-height: 1.92;
      letter-spacing: 0.03em;
    }

    /* Relationship resonance polish v11: image-led heart-lake visual, lighter reading surface. */
    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="resonance"] {
      gap: 14px;
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="resonance"] .relationship-resonance-visual {
      width: min(690px, 100%);
      min-height: 0;
      margin: 10px auto 18px;
      overflow: visible;
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="resonance"] .relationship-radar-wrap {
      width: min(600px, 100%);
      height: clamp(268px, 42vw, 326px);
      margin: 0 auto 10px;
      overflow: visible;
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="resonance"] .relationship-radar-wrap::before {
      display: none;
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="resonance"] .relationship-resonance-orbit-image {
      position: absolute;
      left: 50%;
      top: 51%;
      z-index: 0;
      width: min(620px, 108%);
      height: auto;
      transform: translate(-50%, -50%);
      pointer-events: none;
      user-select: none;
      filter:
        drop-shadow(0 9px 18px rgba(113, 93, 62, 0.06))
        drop-shadow(0 1px 0 rgba(255, 252, 247, 0.68));
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="resonance"] .relationship-radar-wrap svg {
      z-index: 1;
      top: 51%;
      width: min(194px, 38vw);
      height: min(194px, 38vw);
      opacity: 0.32;
      mix-blend-mode: multiply;
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="resonance"] .relationship-radar-wrap .grid {
      fill: rgba(255, 252, 247, 0.08);
      stroke: rgba(173, 138, 77, 0.18);
      stroke-width: 0.34;
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="resonance"] .relationship-radar-wrap line {
      stroke: rgba(173, 138, 77, 0.1);
      stroke-width: 0.26;
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="resonance"] .relationship-radar-wrap .shape {
      fill: rgba(76, 139, 102, 0.06);
      stroke: rgba(76, 139, 102, 0.48);
      stroke-width: 0.72;
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="resonance"] .relationship-radar-wrap > button {
      z-index: 3;
      width: 72px;
      min-height: 74px;
      padding: 0;
      border: 0;
      background: transparent;
      box-shadow: none;
      transform: translate(-50%, -50%);
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="resonance"] .relationship-radar-wrap > button span {
      display: block;
      color: rgba(24, 23, 21, 0.84);
      font-family: var(--kai);
      font-size: clamp(14px, 2.6vw, 16px);
      font-weight: 800;
      letter-spacing: 0.03em;
      line-height: 1.08;
      text-shadow: 0 1px 0 rgba(255, 252, 247, 0.82);
      white-space: nowrap;
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="resonance"] .relationship-radar-wrap > button em {
      display: grid;
      place-items: center;
      width: 44px;
      height: 44px;
      margin: 4px auto 0;
      border: 0;
      border-radius: 50%;
      background: transparent;
      box-shadow: none;
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="resonance"] .relationship-radar-wrap > button em img {
      display: block;
      width: 44px;
      height: 44px;
      object-fit: contain;
      filter: drop-shadow(0 3px 5px rgba(113, 93, 62, 0.08));
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="resonance"] .relationship-radar-wrap > button:nth-of-type(1) {
      left: 50%;
      top: 15%;
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="resonance"] .relationship-radar-wrap > button:nth-of-type(2) {
      left: 76%;
      top: 31%;
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="resonance"] .relationship-radar-wrap > button:nth-of-type(3) {
      left: 76%;
      top: 69%;
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="resonance"] .relationship-radar-wrap > button:nth-of-type(4) {
      left: 50%;
      top: 83%;
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="resonance"] .relationship-radar-wrap > button:nth-of-type(5) {
      left: 24%;
      top: 69%;
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="resonance"] .relationship-radar-wrap > button:nth-of-type(6) {
      left: 24%;
      top: 31%;
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="resonance"] .relationship-radar-center {
      display: grid;
      z-index: 4;
      width: clamp(72px, 13vw, 90px);
      height: clamp(72px, 13vw, 90px);
      border: 0;
      border-radius: 50%;
      background:
        radial-gradient(circle at 50% 44%, rgba(255, 252, 247, 0.92), rgba(243, 234, 213, 0.7) 64%, rgba(173, 138, 77, 0.12));
      box-shadow:
        inset 0 0 0 1px rgba(173, 138, 77, 0.28),
        0 0 0 8px rgba(255, 252, 247, 0.48),
        0 10px 24px rgba(113, 93, 62, 0.08);
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="resonance"] .relationship-radar-center b,
    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="resonance"] .relationship-radar-center small {
      font-family: var(--kai);
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="resonance"] .relationship-radar-center b {
      color: #a93226;
      font-size: clamp(13px, 2.4vw, 15px);
      letter-spacing: 0.04em;
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="resonance"] .relationship-radar-center small {
      margin-top: 2px;
      color: rgba(126, 95, 42, 0.82);
      font-size: 11px;
      letter-spacing: 0.04em;
    }

    /* Relationship resonance polish v12: keep the icon moon scene, but make the six-way strength legible. */
    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="resonance"] .relationship-radar-wrap svg {
      z-index: 2;
      top: 52%;
      width: min(252px, 48vw);
      height: min(252px, 48vw);
      opacity: 1;
      overflow: visible;
      mix-blend-mode: multiply;
      filter:
        drop-shadow(0 8px 15px rgba(91, 140, 90, 0.08))
        drop-shadow(0 1px 0 rgba(255, 252, 247, 0.75));
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="resonance"] .relationship-radar-wrap .grid {
      fill: rgba(255, 252, 247, 0.02);
      stroke: rgba(177, 139, 73, 0.34);
      stroke-width: 0.42;
      vector-effect: non-scaling-stroke;
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="resonance"] .relationship-radar-wrap .grid.outer {
      fill: rgba(255, 252, 247, 0.1);
      stroke: rgba(177, 139, 73, 0.52);
      stroke-width: 0.62;
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="resonance"] .relationship-radar-wrap .grid.mid {
      stroke: rgba(177, 139, 73, 0.36);
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="resonance"] .relationship-radar-wrap .grid.inner,
    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="resonance"] .relationship-radar-wrap .grid.core {
      stroke: rgba(177, 139, 73, 0.24);
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="resonance"] .relationship-radar-wrap line {
      stroke: rgba(159, 121, 63, 0.22);
      stroke-width: 0.34;
      vector-effect: non-scaling-stroke;
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="resonance"] .relationship-radar-wrap .shape {
      fill: rgba(91, 140, 90, 0.22);
      stroke: rgba(63, 125, 87, 0.86);
      stroke-width: 1.05;
      vector-effect: non-scaling-stroke;
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="resonance"] .relationship-radar-wrap .radar-node {
      fill: #fffaf1;
      stroke: rgba(60, 120, 84, 0.9);
      stroke-width: 0.75;
      vector-effect: non-scaling-stroke;
      filter: drop-shadow(0 1px 2px rgba(60, 120, 84, 0.22));
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="resonance"] .relationship-radar-wrap > button {
      z-index: 5;
      min-height: 88px;
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="resonance"] .relationship-radar-wrap > button span {
      font-size: clamp(13px, 2.35vw, 15px);
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="resonance"] .relationship-radar-value {
      display: inline-grid;
      place-items: center;
      min-width: 28px;
      height: 18px;
      margin: 2px auto 0;
      padding: 0 6px;
      border-radius: 999px;
      background:
        linear-gradient(90deg, rgba(255, 252, 247, 0), rgba(255, 252, 247, 0.86) 22%, rgba(255, 252, 247, 0.86) 78%, rgba(255, 252, 247, 0)),
        linear-gradient(180deg, rgba(177, 139, 73, 0.16), rgba(177, 139, 73, 0.03));
      color: #a93226;
      font-family: var(--kai);
      font-size: 12px;
      font-style: normal;
      font-weight: 800;
      line-height: 1;
      letter-spacing: 0.02em;
      box-shadow: inset 0 -1px 0 rgba(177, 139, 73, 0.16);
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="resonance"] .relationship-radar-wrap > button.active span {
      color: #a93226;
      text-shadow: 0 1px 0 rgba(255, 252, 247, 0.92);
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="resonance"] .relationship-radar-wrap > button.active em {
      transform: translateY(-1px) scale(1.08);
      filter:
        drop-shadow(0 5px 9px rgba(169, 50, 38, 0.14))
        drop-shadow(0 1px 0 rgba(255, 252, 247, 0.82));
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="resonance"] .relationship-radar-wrap > button.active .relationship-radar-value {
      background:
        linear-gradient(90deg, rgba(255, 252, 247, 0), rgba(255, 252, 247, 0.92) 18%, rgba(255, 252, 247, 0.92) 82%, rgba(255, 252, 247, 0)),
        linear-gradient(180deg, rgba(184, 54, 43, 0.18), rgba(177, 139, 73, 0.08));
      box-shadow:
        inset 0 -1px 0 rgba(184, 54, 43, 0.18),
        0 4px 10px rgba(113, 93, 62, 0.08);
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="resonance"] .relationship-radar-center {
      z-index: 6;
      width: clamp(68px, 12vw, 84px);
      height: clamp(68px, 12vw, 84px);
      box-shadow:
        inset 0 0 0 1px rgba(173, 138, 77, 0.32),
        0 0 0 6px rgba(255, 252, 247, 0.58),
        0 8px 20px rgba(113, 93, 62, 0.1);
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="resonance"] .relationship-resonance-reading h3 {
      color: #171512;
      font-size: clamp(22px, 4.6vw, 28px);
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="resonance"] .relationship-resonance-reading p {
      max-width: 35em;
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="resonance"] .relationship-resonance-orbit-image {
      display: none !important;
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="resonance"] .relationship-perspective-switch {
      width: min(270px, 82%);
      margin: -8px auto 8px;
      border: 0;
      border-radius: 999px;
      background: transparent;
      box-shadow: none;
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="resonance"] .relationship-perspective-switch button {
      min-height: 32px;
      border: 1px solid rgba(173, 138, 77, 0.22);
      border-radius: 999px;
      background: rgba(255, 252, 247, 0.3);
      color: rgba(24, 23, 21, 0.58);
      font-family: var(--kai);
      font-size: 13px;
      letter-spacing: 0.04em;
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="resonance"] .relationship-perspective-switch button.active {
      border-color: rgba(184, 54, 43, 0.32);
      background: rgba(255, 252, 247, 0.68);
      color: #a93226;
      box-shadow: 0 8px 18px rgba(113, 93, 62, 0.06);
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="resonance"] .relationship-dimension-summary {
      max-width: 640px;
      margin: 4px auto 0;
      padding: 20px 8px 2px;
      border: 0;
      border-radius: 0;
      background: transparent !important;
      box-shadow: none;
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="resonance"] .relationship-dimension-summary h3 {
      font-family: var(--kai);
      font-size: clamp(21px, 4.3vw, 26px);
      letter-spacing: 0.05em;
      line-height: 1.3;
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="resonance"] .relationship-dimension-summary p {
      max-width: 33em;
      margin: 12px auto 0;
      font-family: var(--kai);
      font-size: clamp(13.5px, 2.5vw, 15px);
      line-height: 1.92;
      letter-spacing: 0.03em;
    }

    @media (max-width: 560px) {
      .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="resonance"] .relationship-resonance-visual {
        margin-top: 6px;
      }

      .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="resonance"] .relationship-radar-wrap {
        width: 100%;
        height: 266px;
      }

      .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="resonance"] .relationship-resonance-orbit-image {
        display: none !important;
      }

      .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="resonance"] .relationship-radar-wrap svg {
        width: 178px;
        height: 178px;
      }

      .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="resonance"] .relationship-radar-wrap > button {
        width: 62px;
        min-height: 78px;
      }

      .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="resonance"] .relationship-radar-wrap > button span {
        font-size: 13px;
      }

      .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="resonance"] .relationship-radar-wrap > button em,
      .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="resonance"] .relationship-radar-wrap > button em img {
        width: 38px;
        height: 38px;
      }

      .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="resonance"] .relationship-radar-value {
        min-width: 25px;
        height: 16px;
        font-size: 11px;
      }
    }

    .relationship-export-report {
      display: none;
    }

    @media print {
      body.relationship-printing-report:not(.relationship-printing-export) * {
        visibility: hidden;
      }

      body.relationship-printing-report:not(.relationship-printing-export) .relationship-report-shell,
      body.relationship-printing-report:not(.relationship-printing-export) .relationship-report-shell * {
        visibility: visible;
      }

      body.relationship-printing-report:not(.relationship-printing-export) .relationship-report-shell {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        border: 0;
        box-shadow: none;
      }

      body.relationship-printing-report:not(.relationship-printing-export) .relationship-report-actions,
      body.relationship-printing-report:not(.relationship-printing-export) .relationship-report-tabs,
      body.relationship-printing-report:not(.relationship-printing-export) .relationship-dossier-toolbar,
      body.relationship-printing-report:not(.relationship-printing-export) .card-actions,
      body.relationship-printing-report:not(.relationship-printing-export) .bottom-nav {
        display: none !important;
      }

      body.relationship-printing-report:not(.relationship-printing-export) .relationship-dossier-page {
        background: var(--paper);
      }

      body.relationship-printing-report:not(.relationship-printing-export) .relationship-dossier-shell.is-vertical .relationship-dossier-page {
        writing-mode: horizontal-tb;
        max-height: none;
        overflow: visible;
      }

      body.relationship-printing-report.relationship-printing-export * {
        visibility: hidden;
      }

      body.relationship-printing-report.relationship-printing-export > :not(.relationship-export-report) {
        display: none !important;
      }

      body.relationship-printing-report.relationship-printing-export .relationship-export-report,
      body.relationship-printing-report.relationship-printing-export .relationship-export-report * {
        visibility: visible;
      }

      body.relationship-printing-report.relationship-printing-export .relationship-export-report {
        display: block;
        position: static;
        width: 100%;
        padding: 30px 36px 40px;
        background:
          radial-gradient(circle at 50% -8%, rgba(255, 255, 255, 0.86), transparent 42%),
          linear-gradient(135deg, rgba(116, 92, 53, 0.05), transparent 32%),
          var(--paper);
        color: #181715;
        font-family: var(--sans);
      }

      body.relationship-printing-report.relationship-printing-export .relationship-export-report * {
        box-sizing: border-box;
      }

      body.relationship-printing-report.relationship-printing-export .relationship-export-report img {
        max-width: 100%;
        height: auto;
        object-fit: contain;
      }

      body.relationship-printing-report.relationship-printing-export .relationship-export-cover,
      body.relationship-printing-report.relationship-printing-export .relationship-export-footer {
        break-inside: avoid;
        page-break-inside: avoid;
      }

      body.relationship-printing-report.relationship-printing-export .relationship-export-cover {
        display: grid;
        gap: 12px;
        padding: 24px 0 18px;
        border-bottom: 2px solid rgba(123, 34, 27, 0.22);
      }

      body.relationship-printing-report.relationship-printing-export .relationship-export-cover small,
      body.relationship-printing-report.relationship-printing-export .relationship-export-section small,
      body.relationship-printing-report.relationship-printing-export .relationship-export-cover time {
        color: rgba(123, 34, 27, 0.78);
        font-size: 11px;
        font-weight: 800;
        letter-spacing: 0.12em;
      }

      body.relationship-printing-report.relationship-printing-export .relationship-export-cover h1 {
        margin: 0;
        font-family: var(--serif);
        font-size: 34px;
        line-height: 1.15;
        letter-spacing: 0.08em;
      }

      body.relationship-printing-report.relationship-printing-export .relationship-export-cover p,
      body.relationship-printing-report.relationship-printing-export .relationship-export-section p,
      body.relationship-printing-report.relationship-printing-export .relationship-export-section li {
        margin: 0;
        color: rgba(24, 23, 21, 0.72);
        font-size: 12px;
        line-height: 1.72;
      }

      body.relationship-printing-report.relationship-printing-export .relationship-export-score-grid {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        overflow: hidden;
        border: 1px solid rgba(113, 93, 62, 0.18);
      }

      body.relationship-printing-report.relationship-printing-export .relationship-export-score-grid span {
        display: grid;
        gap: 2px;
        padding: 10px 8px;
        border-right: 1px solid rgba(113, 93, 62, 0.14);
        text-align: center;
      }

      body.relationship-printing-report.relationship-printing-export .relationship-export-score-grid span:last-child {
        border-right: 0;
      }

      body.relationship-printing-report.relationship-printing-export .relationship-export-score-grid b {
        color: #a72f27;
        font-family: Georgia, var(--serif);
        font-size: 24px;
        line-height: 1;
      }

      body.relationship-printing-report.relationship-printing-export .relationship-export-score-grid small {
        color: rgba(24, 23, 21, 0.58);
        font-size: 11px;
        letter-spacing: 0.08em;
      }

      body.relationship-printing-report.relationship-printing-export .relationship-export-score-grid em {
        color: rgba(167, 47, 39, 0.72);
        font-family: var(--kai);
        font-size: 10px;
        font-style: normal;
        line-height: 1.2;
      }

      body.relationship-printing-report.relationship-printing-export .relationship-export-section {
        display: grid;
        gap: 12px;
        padding: 20px 0;
        border-bottom: 1px solid rgba(113, 93, 62, 0.16);
      }

      body.relationship-printing-report.relationship-printing-export .relationship-export-section > header {
        display: grid;
        gap: 4px;
      }

      body.relationship-printing-report.relationship-printing-export .relationship-export-section h2 {
        margin: 0;
        font-family: var(--serif);
        font-size: 22px;
        line-height: 1.2;
        letter-spacing: 0.06em;
      }

      body.relationship-printing-report.relationship-printing-export .relationship-export-section h3,
      body.relationship-printing-report.relationship-printing-export .relationship-export-section h4 {
        margin: 0;
        font-family: var(--serif);
        line-height: 1.25;
      }

      body.relationship-printing-report.relationship-printing-export .relationship-export-overview blockquote {
        margin: 0;
        padding: 10px 14px;
        border-left: 3px solid rgba(167, 47, 39, 0.45);
        background: rgba(255, 255, 255, 0.55);
        color: #181715;
        font-family: var(--kai);
        font-size: 17px;
        line-height: 1.75;
        white-space: pre-line;
      }

      body.relationship-printing-report.relationship-printing-export .relationship-export-verdict {
        padding: 10px 12px;
        border: 1px solid rgba(173, 138, 77, 0.22);
        background: rgba(173, 138, 77, 0.08);
      }

      body.relationship-printing-report.relationship-printing-export .relationship-export-profile-grid,
      body.relationship-printing-report.relationship-printing-export .relationship-export-proof-grid,
      body.relationship-printing-report.relationship-printing-export .relationship-export-dimension-detail.is-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
      }

      body.relationship-printing-report.relationship-printing-export .relationship-export-profile,
      body.relationship-printing-report.relationship-printing-export .relationship-export-proof-grid article,
      body.relationship-printing-report.relationship-printing-export .relationship-export-rule-list article,
      body.relationship-printing-report.relationship-printing-export .relationship-export-dimension-detail article,
      body.relationship-printing-report.relationship-printing-export .relationship-export-dimension-evidence article,
      body.relationship-printing-report.relationship-printing-export .relationship-export-timeline-list article {
        break-inside: avoid;
        page-break-inside: avoid;
        border: 1px solid rgba(113, 93, 62, 0.16);
        background: rgba(255, 255, 255, 0.52);
      }

      body.relationship-printing-report.relationship-printing-export .relationship-export-profile {
        display: grid;
        gap: 10px;
        padding: 12px;
      }

      body.relationship-printing-report.relationship-printing-export .relationship-export-profile header {
        display: flex;
        align-items: center;
        gap: 10px;
      }

      body.relationship-printing-report.relationship-printing-export .relationship-export-profile header > span {
        display: grid;
        place-items: center;
        width: 36px;
        height: 36px;
        border: 1px solid color-mix(in srgb, var(--profile-color), transparent 50%);
        border-radius: 50%;
        color: var(--profile-color);
        font-family: var(--serif);
        font-weight: 900;
      }

      body.relationship-printing-report.relationship-printing-export .relationship-export-profile h3,
      body.relationship-printing-report.relationship-printing-export .relationship-export-dimension-card h3 {
        margin: 0;
        font-family: var(--serif);
        font-size: 18px;
        letter-spacing: 0.05em;
      }

      body.relationship-printing-report.relationship-printing-export .relationship-export-pillar-grid {
        display: grid;
        grid-template-columns: 0.7fr 0.9fr 1fr 1.2fr;
        border-top: 1px solid rgba(113, 93, 62, 0.16);
        border-left: 1px solid rgba(113, 93, 62, 0.16);
      }

      body.relationship-printing-report.relationship-printing-export .relationship-export-pillar-grid > * {
        min-width: 0;
        padding: 6px;
        border-right: 1px solid rgba(113, 93, 62, 0.16);
        border-bottom: 1px solid rgba(113, 93, 62, 0.16);
        font-size: 10px;
        line-height: 1.35;
      }

      body.relationship-printing-report.relationship-printing-export .relationship-export-pillar-grid b {
        background: rgba(173, 138, 77, 0.1);
        color: rgba(24, 23, 21, 0.66);
      }

      body.relationship-printing-report.relationship-printing-export .relationship-export-pillar-grid strong {
        color: #a72f27;
        font-family: var(--serif);
      }

      body.relationship-printing-report.relationship-printing-export .relationship-export-subsection {
        display: grid;
        gap: 8px;
      }

      body.relationship-printing-report.relationship-printing-export .relationship-export-proof-grid article,
      body.relationship-printing-report.relationship-printing-export .relationship-export-rule-list article,
      body.relationship-printing-report.relationship-printing-export .relationship-export-dimension-detail article,
      body.relationship-printing-report.relationship-printing-export .relationship-export-dimension-evidence article,
      body.relationship-printing-report.relationship-printing-export .relationship-export-timeline-list article {
        display: grid;
        gap: 4px;
        padding: 10px;
      }

      body.relationship-printing-report.relationship-printing-export .relationship-export-use-summary {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
      }

      body.relationship-printing-report.relationship-printing-export .relationship-export-use-summary article {
        display: grid;
        gap: 4px;
        padding: 10px;
        border: 1px solid rgba(113, 93, 62, 0.16);
        background: rgba(255, 255, 255, 0.52);
      }

      body.relationship-printing-report.relationship-printing-export .relationship-export-use-summary > small {
        grid-column: 1 / -1;
        color: rgba(24, 23, 21, 0.52);
        font-size: 10px;
        line-height: 1.45;
      }

      body.relationship-printing-report.relationship-printing-export .relationship-export-proof-grid strong,
      body.relationship-printing-report.relationship-printing-export .relationship-export-rule-list strong,
      body.relationship-printing-report.relationship-printing-export .relationship-export-dimension-detail strong,
      body.relationship-printing-report.relationship-printing-export .relationship-export-dimension-evidence strong,
      body.relationship-printing-report.relationship-printing-export .relationship-export-timeline-list strong {
        color: #181715;
        font-family: var(--serif);
        font-size: 13px;
      }

      body.relationship-printing-report.relationship-printing-export .relationship-export-axis-title {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 8px;
      }

      body.relationship-printing-report.relationship-printing-export .relationship-export-element-list {
        display: grid;
        gap: 6px;
      }

      body.relationship-printing-report.relationship-printing-export .relationship-export-element-list article {
        display: grid;
        grid-template-columns: 34px minmax(0, 1fr) 1.7fr;
        align-items: center;
        gap: 8px;
      }

      body.relationship-printing-report.relationship-printing-export .relationship-export-element-list b {
        color: var(--element-color);
        font-family: var(--serif);
      }

      body.relationship-printing-report.relationship-printing-export .relationship-export-element-list span {
        display: grid;
        gap: 3px;
      }

      body.relationship-printing-report.relationship-printing-export .relationship-export-element-list i {
        display: block;
        height: 5px;
        border-radius: 99px;
        background: var(--element-color);
      }

      body.relationship-printing-report.relationship-printing-export .relationship-export-element-list > small {
        display: block;
        color: rgba(24, 23, 21, 0.56);
        font-size: 10.5px;
        line-height: 1.55;
      }

      body.relationship-printing-report.relationship-printing-export .relationship-export-caveat-list {
        margin: 0;
        padding-left: 18px;
      }

      body.relationship-printing-report.relationship-printing-export .relationship-export-dimension-list {
        display: block;
      }

      body.relationship-printing-report.relationship-printing-export .relationship-export-dimension-card {
        display: block;
        break-inside: auto;
        page-break-inside: auto;
        margin-bottom: 12px;
        padding: 14px;
        border: 1px solid rgba(123, 34, 27, 0.16);
        background: rgba(255, 255, 255, 0.44);
      }

      body.relationship-printing-report.relationship-printing-export .relationship-export-dimension-card + .relationship-export-dimension-card {
        margin-top: 14px;
        border-top: 2px solid rgba(167, 47, 39, 0.16);
      }

      body.relationship-printing-report.relationship-printing-export .relationship-export-dimension-card > * + * {
        margin-top: 10px;
      }

      body.relationship-printing-report.relationship-printing-export .relationship-export-dimension-card > header {
        display: flex;
        align-items: center;
        gap: 10px;
      }

      body.relationship-printing-report.relationship-printing-export .relationship-export-dimension-card > header > span {
        display: grid;
        place-items: center;
        width: 34px;
        height: 34px;
        border: 1px solid rgba(167, 47, 39, 0.35);
        border-radius: 50%;
        color: #a72f27;
        font-family: var(--serif);
        font-weight: 900;
      }

      body.relationship-printing-report.relationship-printing-export .relationship-export-dimension-card h3 b,
      body.relationship-printing-report.relationship-printing-export .relationship-export-dimension-detail strong b {
        color: #a72f27;
        font-family: Georgia, var(--serif);
      }

      body.relationship-printing-report.relationship-printing-export .relationship-export-dimension-commentary {
        display: grid;
        gap: 6px;
        padding: 10px;
        border-left: 3px solid rgba(173, 138, 77, 0.35);
        background: rgba(173, 138, 77, 0.07);
      }

      body.relationship-printing-report.relationship-printing-export .relationship-export-dimension-commentary div {
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
      }

      body.relationship-printing-report.relationship-printing-export .relationship-export-dimension-commentary .relationship-export-action-list {
        display: grid;
        gap: 5px;
        padding-top: 2px;
      }

      body.relationship-printing-report.relationship-printing-export .relationship-export-dimension-commentary .relationship-export-action-list strong {
        color: rgba(167, 47, 39, 0.78);
        font-size: 11px;
        letter-spacing: 0.08em;
      }

      body.relationship-printing-report.relationship-printing-export .relationship-export-dimension-commentary span,
      body.relationship-printing-report.relationship-printing-export .relationship-export-timeline-list span {
        display: inline-flex;
        gap: 4px;
        color: rgba(24, 23, 21, 0.68);
        font-size: 11px;
        line-height: 1.45;
      }

      body.relationship-printing-report.relationship-printing-export .relationship-export-dimension-detail,
      body.relationship-printing-report.relationship-printing-export .relationship-export-dimension-evidence,
      body.relationship-printing-report.relationship-printing-export .relationship-export-timeline-list {
        display: grid;
        gap: 8px;
      }

      body.relationship-printing-report.relationship-printing-export .relationship-export-timeline-list article.is-risk {
        border-color: rgba(167, 47, 39, 0.22);
      }

      body.relationship-printing-report.relationship-printing-export .relationship-export-technical-appendix {
        gap: 10px;
        color: rgba(24, 23, 21, 0.58);
      }

      body.relationship-printing-report.relationship-printing-export .relationship-export-technical-appendix summary {
        cursor: pointer;
        color: rgba(167, 47, 39, 0.76);
        font-family: var(--serif);
        font-size: 13px;
        font-weight: 800;
      }

      body.relationship-printing-report.relationship-printing-export .relationship-export-technical-appendix details {
        display: grid;
        gap: 8px;
      }

      body.relationship-printing-report.relationship-printing-export .relationship-export-technical-appendix details > .relationship-export-rule-list {
        display: grid !important;
        gap: 8px;
      }

      body.relationship-printing-report.relationship-printing-export .relationship-export-disclaimer {
        display: grid;
        gap: 6px;
        padding: 10px;
        border: 1px solid rgba(113, 93, 62, 0.14);
        background: rgba(255, 255, 255, 0.34);
      }

      body.relationship-printing-report.relationship-printing-export .relationship-export-disclaimer strong {
        color: rgba(24, 23, 21, 0.68);
        font-family: var(--serif);
        font-size: 12px;
      }

      body.relationship-printing-report.relationship-printing-export .relationship-export-disclaimer ul {
        margin: 0;
        padding-left: 18px;
      }

      body.relationship-printing-report.relationship-printing-export .relationship-export-footer {
        padding: 14px 0 0;
        color: rgba(24, 23, 21, 0.56);
        font-size: 11px;
        text-align: center;
      }
      }

    .relationship-match-screen .relationship-radar-frame-image {
      position: absolute;
      z-index: 1;
      inset: 50% auto auto 50%;
      width: min(380px, 86vw);
      height: min(380px, 86vw);
      transform: translate(-50%, -50%);
      object-fit: contain;
      pointer-events: none;
      opacity: 0.92;
      filter:
        drop-shadow(0 12px 22px rgba(113, 93, 62, 0.08))
        drop-shadow(0 1px 0 rgba(255, 252, 247, 0.84));
    }

    .relationship-match-screen .relationship-radar-wrap svg {
      z-index: 3;
      background: transparent !important;
      border: 0 !important;
      box-shadow: none !important;
    }

    .relationship-match-screen .relationship-radar-center,
    .relationship-match-screen .relationship-radar-wrap > button {
      position: absolute;
      z-index: 6;
    }

    .relationship-match-screen .relationship-flow-map {
      min-height: clamp(285px, 45vw, 360px) !important;
      border: 0 !important;
      border-radius: 0 !important;
      background: transparent !important;
      box-shadow: none !important;
      overflow: visible !important;
    }

    .relationship-match-screen .relationship-flow-orbit-image {
      position: absolute;
      z-index: 1;
      inset: 50% auto auto 50%;
      width: min(720px, 118%);
      max-width: none;
      height: auto;
      transform: translate(-50%, -50%);
      object-fit: contain;
      opacity: 0.98;
      pointer-events: none;
      filter:
        drop-shadow(0 14px 20px rgba(113, 93, 62, 0.08))
        drop-shadow(0 1px 0 rgba(255, 252, 247, 0.84));
    }

    .relationship-match-screen .relationship-flow-map svg {
      display: none !important;
    }

    .relationship-match-screen .relationship-flow-person {
      position: absolute;
      z-index: 3;
      display: grid;
      place-items: center;
      width: 74px;
      min-height: 86px;
      color: #171512;
      font-family: var(--kai);
      text-align: center;
      pointer-events: none;
    }

    .relationship-match-screen .relationship-flow-person.is-left {
      left: 6.5%;
      top: 35%;
      transform: translateY(-50%);
    }

    .relationship-match-screen .relationship-flow-person.is-right {
      right: 6.5%;
      top: 35%;
      transform: translateY(-50%);
    }

    .relationship-match-screen .relationship-flow-person em {
      display: grid;
      place-items: center;
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background: rgba(255, 252, 247, 0.72);
      color: #a93226;
      font-style: normal;
      font-size: 20px;
      font-weight: 800;
      box-shadow:
        inset 0 0 0 1px rgba(184, 54, 43, 0.18),
        0 6px 16px rgba(113, 93, 62, 0.08);
    }

    .relationship-match-screen .relationship-flow-person b {
      margin-top: 6px;
      color: #171512;
      font-size: 15px;
      line-height: 1.1;
    }

    .relationship-match-screen .relationship-flow-person small {
      margin-top: 2px;
      color: rgba(24, 23, 21, 0.58);
      font-size: 12px;
    }

    .relationship-match-screen .relationship-flow-label {
      z-index: 4;
      left: 50%;
      width: min(240px, 42vw);
      min-height: 34px;
      transform: translateX(-50%);
      border: 0;
      border-radius: 0;
      background:
        linear-gradient(90deg, rgba(255, 252, 247, 0), rgba(255, 252, 247, 0.78) 22%, rgba(255, 252, 247, 0.78) 78%, rgba(255, 252, 247, 0));
      box-shadow: none;
      color: #715d3e;
      font-family: var(--kai);
    }

    .relationship-match-screen .relationship-flow-label:nth-of-type(1) { top: 26%; }
    .relationship-match-screen .relationship-flow-label:nth-of-type(2) { top: 40%; }
    .relationship-match-screen .relationship-flow-label:nth-of-type(3) { top: 54%; }
    .relationship-match-screen .relationship-flow-label:nth-of-type(4) { top: 68%; }

    .relationship-match-screen .relationship-flow-label span {
      font-size: 13px;
      font-weight: 800;
      letter-spacing: 0.03em;
    }

    .relationship-match-screen .relationship-flow-label small {
      display: inline-grid;
      place-items: center;
      min-width: 26px;
      height: 18px;
      border-radius: 999px;
      background: rgba(255, 252, 247, 0.72);
      color: #a93226;
      font-size: 12px;
      font-weight: 800;
    }

    .relationship-match-screen .relationship-flow-label.active {
      background:
        linear-gradient(90deg, rgba(255, 252, 247, 0), rgba(255, 252, 247, 0.94) 18%, rgba(255, 252, 247, 0.94) 82%, rgba(255, 252, 247, 0));
      color: #171512;
      filter: drop-shadow(0 8px 14px rgba(113, 93, 62, 0.1));
    }

    .relationship-match-screen .relationship-risk-wheel {
      width: min(380px, 84vw) !important;
      height: min(380px, 84vw) !important;
      border: 0 !important;
      border-radius: 0 !important;
      background: transparent !important;
      box-shadow: none !important;
      overflow: visible !important;
    }

    .relationship-match-screen .relationship-risk-map-image {
      position: absolute;
      z-index: 1;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: contain;
      pointer-events: none;
      filter:
        drop-shadow(0 14px 22px rgba(113, 93, 62, 0.1))
        drop-shadow(0 1px 0 rgba(255, 252, 247, 0.8));
    }

    .relationship-match-screen .relationship-risk-wheel > b {
      display: none !important;
    }

    .relationship-match-screen .relationship-risk-wheel button {
      z-index: 3;
      display: grid;
      justify-items: center;
      gap: 2px;
      width: 78px;
      min-height: 66px;
      padding: 0;
      border: 0;
      background: transparent;
      box-shadow: none;
      color: rgba(24, 23, 21, 0.62);
      font-family: var(--kai);
    }

    .relationship-match-screen .relationship-risk-wheel button em {
      display: grid;
      place-items: center;
      width: 44px;
      height: 44px;
      background: transparent;
      border: 0;
      border-radius: 0;
      box-shadow: none;
    }

    .relationship-match-screen .relationship-risk-wheel button em img {
      width: 44px;
      height: 44px;
      object-fit: contain;
      filter: drop-shadow(0 4px 8px rgba(113, 93, 62, 0.1));
    }

    .relationship-match-screen .relationship-risk-wheel button span {
      padding: 1px 8px 2px;
      border-radius: 999px;
      background: rgba(255, 252, 247, 0.7);
      font-size: 12px;
      font-weight: 700;
      line-height: 1.35;
      white-space: nowrap;
    }

    .relationship-match-screen .relationship-risk-wheel button.active span {
      background: rgba(255, 252, 247, 0.92);
      color: #a93226;
      box-shadow: inset 0 0 0 1px rgba(184, 54, 43, 0.18);
    }

    .relationship-match-screen .relationship-risk-wheel button.active em img {
      transform: translateY(-1px) scale(1.08);
      filter:
        drop-shadow(0 8px 13px rgba(169, 50, 38, 0.13))
        drop-shadow(0 1px 0 rgba(255, 252, 247, 0.8));
    }

    .relationship-match-screen .relationship-river-canvas {
      position: relative;
      width: min(1040px, 206vw) !important;
      min-width: 760px !important;
      height: 285px !important;
      border: 0 !important;
      border-radius: 0 !important;
      background: transparent !important;
      box-shadow: none !important;
      overflow: visible !important;
    }

    .relationship-match-screen .relationship-river-canvas svg {
      display: none !important;
    }

    .relationship-match-screen .relationship-river-image {
      position: absolute;
      z-index: 1;
      left: 0;
      top: 16px;
      width: 100%;
      height: 235px;
      object-fit: fill;
      pointer-events: none;
      filter:
        drop-shadow(0 12px 20px rgba(113, 93, 62, 0.1))
        drop-shadow(0 1px 0 rgba(255, 252, 247, 0.8));
    }

    .relationship-match-screen .relationship-now-line-image {
      position: absolute;
      z-index: 4;
      left: 7.2%;
      top: 14px;
      width: 42px;
      height: 150px;
      object-fit: contain;
      pointer-events: none;
      filter: drop-shadow(0 8px 12px rgba(169, 50, 38, 0.14));
    }

    .relationship-match-screen .relationship-river-canvas > button:not(.relationship-star-cloud) {
      z-index: 5;
      min-width: 78px;
      border: 0;
      background: transparent;
      box-shadow: none;
      font-family: var(--kai);
      color: #715d3e;
    }

    .relationship-match-screen .relationship-river-canvas > button:not(.relationship-star-cloud) i {
      display: grid;
      place-items: center;
      width: 42px;
      height: 42px;
      margin: 0 auto 2px;
      background: transparent;
      border: 0;
      box-shadow: none;
    }

    .relationship-match-screen .relationship-river-canvas > button:not(.relationship-star-cloud) i img {
      width: 42px;
      height: 42px;
      object-fit: contain;
      filter: drop-shadow(0 5px 9px rgba(113, 93, 62, 0.14));
    }

    .relationship-match-screen .relationship-timing-neutral-dot {
      display: block;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background:
        radial-gradient(circle, rgba(255, 252, 247, 0.96) 0 30%, rgba(177, 139, 73, 0.42) 31% 45%, rgba(255, 252, 247, 0) 46%);
      box-shadow: 0 0 0 1px rgba(177, 139, 73, 0.22);
    }

    .relationship-match-screen .relationship-river-canvas > button:not(.relationship-star-cloud) small {
      display: block;
      color: #171512;
      font-size: 13px;
      font-weight: 800;
      line-height: 1.15;
    }

    .relationship-match-screen .relationship-river-canvas > button:not(.relationship-star-cloud) span {
      display: block;
      margin-top: 1px;
      padding: 1px 8px;
      border-radius: 999px;
      background: rgba(255, 252, 247, 0.74);
      color: rgba(24, 23, 21, 0.62);
      font-size: 12px;
      white-space: nowrap;
    }

    .relationship-match-screen .relationship-river-canvas > button.active span {
      color: #a93226;
      background: rgba(255, 252, 247, 0.94);
      box-shadow: inset 0 0 0 1px rgba(184, 54, 43, 0.16);
    }

    .relationship-match-screen .relationship-star-cloud {
      z-index: 5;
      right: 4%;
      bottom: 32px;
      width: 36px;
      height: 36px;
      padding: 0;
      border: 0;
      border-radius: 50%;
      background:
        radial-gradient(circle at 48% 46%, rgba(177, 139, 73, 0.24) 0 8%, rgba(177, 139, 73, 0.09) 9% 28%, rgba(255, 252, 247, 0) 29% 100%);
      box-shadow: none;
      opacity: 0.72;
    }

    .relationship-match-screen .relationship-star-cloud::before,
    .relationship-match-screen .relationship-star-cloud::after {
      content: "";
      position: absolute;
      left: 50%;
      top: 50%;
      width: 22px;
      height: 1px;
      background: linear-gradient(90deg, rgba(177, 139, 73, 0), rgba(177, 139, 73, 0.36), rgba(177, 139, 73, 0));
      transform: translate(-50%, -50%);
    }

    .relationship-match-screen .relationship-star-cloud::after {
      transform: translate(-50%, -50%) rotate(90deg);
    }

    @media (max-width: 560px) {
      .relationship-match-screen .relationship-radar-frame-image {
        width: 292px;
        height: 292px;
      }

      .relationship-match-screen .relationship-flow-map {
        min-height: 300px !important;
      }

      .relationship-match-screen .relationship-flow-orbit-image {
        width: 690px;
      }

      .relationship-match-screen .relationship-flow-person {
        width: 64px;
      }

      .relationship-match-screen .relationship-flow-person.is-left {
        left: 1.5%;
      }

      .relationship-match-screen .relationship-flow-person.is-right {
        right: 1.5%;
      }

      .relationship-match-screen .relationship-flow-label {
        width: min(220px, 58vw);
      }

      .relationship-match-screen .relationship-risk-wheel {
        width: 318px !important;
        height: 318px !important;
      }

      .relationship-match-screen .relationship-risk-wheel button {
        width: 68px;
        min-height: 58px;
      }

      .relationship-match-screen .relationship-risk-wheel button em,
      .relationship-match-screen .relationship-risk-wheel button em img {
        width: 38px;
        height: 38px;
      }

      .relationship-match-screen .relationship-river-canvas {
        min-width: 720px !important;
        height: 266px !important;
      }

      .relationship-match-screen .relationship-river-image {
        top: 18px;
        height: 218px;
      }
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="resonance"] .relationship-radar-frame-image {
      width: min(392px, 88vw);
      height: min(392px, 88vw);
      opacity: 0.94;
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="interaction"] .relationship-flow-map {
      width: min(720px, 100%) !important;
      min-height: clamp(300px, 48vw, 370px) !important;
      margin: -6px auto 8px !important;
      border: 0 !important;
      border-radius: 0 !important;
      background: transparent !important;
      box-shadow: none !important;
      overflow: visible !important;
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="interaction"] .relationship-flow-orbit-image {
      z-index: 1 !important;
      top: 52% !important;
      width: min(760px, 120%) !important;
      opacity: 1 !important;
      filter:
        drop-shadow(0 14px 22px rgba(113, 93, 62, 0.08))
        drop-shadow(0 1px 0 rgba(255, 252, 247, 0.84)) !important;
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="interaction"] .relationship-flow-map svg {
      display: none !important;
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="interaction"] .relationship-flow-person {
      z-index: 3 !important;
      top: 35% !important;
      width: 74px !important;
      height: auto !important;
      min-height: 86px !important;
      border: 0 !important;
      border-radius: 0 !important;
      background: transparent !important;
      box-shadow: none !important;
      pointer-events: none;
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="interaction"] .relationship-flow-person.is-left {
      left: 6.5% !important;
      transform: translateY(-50%) !important;
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="interaction"] .relationship-flow-person.is-right {
      right: 6.5% !important;
      transform: translateY(-50%) !important;
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="interaction"] .relationship-flow-person em {
      width: 44px !important;
      height: 44px !important;
      margin: 0 auto !important;
      border: 0 !important;
      border-radius: 50% !important;
      background: rgba(255, 252, 247, 0.72) !important;
      color: #a93226 !important;
      font-size: 20px !important;
      box-shadow:
        inset 0 0 0 1px rgba(184, 54, 43, 0.18),
        0 6px 16px rgba(113, 93, 62, 0.08) !important;
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="interaction"] .relationship-flow-person em::after {
      content: none !important;
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="interaction"] .relationship-flow-person b {
      margin-top: 6px !important;
      color: #171512 !important;
      font-size: 15px !important;
      line-height: 1.1 !important;
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="interaction"] .relationship-flow-person small {
      margin-top: 2px !important;
      color: rgba(24, 23, 21, 0.58) !important;
      font-size: 12px !important;
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="interaction"] .relationship-flow-label {
      z-index: 4 !important;
      left: 50% !important;
      width: min(240px, 42vw) !important;
      min-height: 34px !important;
      padding: 2px 10px !important;
      transform: translateX(-50%) !important;
      border: 0 !important;
      border-radius: 0 !important;
      background:
        linear-gradient(90deg, rgba(255, 252, 247, 0), rgba(255, 252, 247, 0.78) 22%, rgba(255, 252, 247, 0.78) 78%, rgba(255, 252, 247, 0)) !important;
      box-shadow: none !important;
      color: #715d3e !important;
      font-family: var(--kai) !important;
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="interaction"] .relationship-flow-label.is-green { top: 26% !important; }
    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="interaction"] .relationship-flow-label.is-red { top: 40% !important; }
    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="interaction"] .relationship-flow-label.is-gold { top: 54% !important; }
    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="interaction"] .relationship-flow-label.is-blue { top: 68% !important; }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="interaction"] .relationship-flow-label.active {
      transform: translateX(-50%) translateY(-1px) !important;
      background:
        linear-gradient(90deg, rgba(255, 252, 247, 0), rgba(255, 252, 247, 0.94) 18%, rgba(255, 252, 247, 0.94) 82%, rgba(255, 252, 247, 0)) !important;
      color: #171512 !important;
      filter: drop-shadow(0 8px 14px rgba(113, 93, 62, 0.1));
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="risk"] .relationship-risk-wheel {
      width: min(380px, 84vw) !important;
      height: min(380px, 84vw) !important;
      border: 0 !important;
      border-radius: 0 !important;
      background: transparent !important;
      box-shadow: none !important;
      overflow: visible !important;
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="risk"] .relationship-risk-wheel::before,
    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="risk"] .relationship-risk-wheel::after,
    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="risk"] .relationship-risk-wheel b {
      display: none !important;
      content: none !important;
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="risk"] .relationship-risk-wheel button {
      width: 78px !important;
      height: auto !important;
      min-height: 66px !important;
      padding: 0 !important;
      border: 0 !important;
      background: transparent !important;
      box-shadow: none !important;
      color: rgba(24, 23, 21, 0.62) !important;
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="risk"] .relationship-risk-wheel button em {
      width: 44px !important;
      height: 44px !important;
      margin: 0 auto 2px !important;
      border: 0 !important;
      border-radius: 0 !important;
      background: transparent !important;
      box-shadow: none !important;
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="risk"] .relationship-risk-wheel button em img {
      width: 44px !important;
      height: 44px !important;
      object-fit: contain;
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="risk"] .relationship-risk-wheel button span {
      display: inline-block !important;
      padding: 1px 8px 2px !important;
      border-radius: 999px !important;
      background: rgba(255, 252, 247, 0.72) !important;
      color: rgba(24, 23, 21, 0.62) !important;
      font-family: var(--kai) !important;
      font-size: 12px !important;
      font-weight: 700 !important;
      line-height: 1.35 !important;
      white-space: nowrap !important;
      text-shadow: none !important;
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="risk"] .relationship-risk-wheel button.active span {
      background: rgba(255, 252, 247, 0.94) !important;
      color: #a93226 !important;
      box-shadow: inset 0 0 0 1px rgba(184, 54, 43, 0.18);
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="timing"] .relationship-river-canvas {
      width: var(--relationship-timeline-canvas-width, min(1040px, 206vw)) !important;
      min-width: 760px !important;
      height: 285px !important;
      margin-inline: auto !important;
      border: 0 !important;
      border-radius: 0 !important;
      background: transparent !important;
      box-shadow: none !important;
      overflow: visible !important;
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="timing"] .relationship-river-canvas svg,
    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="timing"] .relationship-river-canvas > button i::before {
      display: none !important;
      content: none !important;
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="timing"] .relationship-river-canvas button {
      transform: translate(-50%, 0) !important;
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="timing"] .relationship-river-canvas > button:not(.relationship-star-cloud) i {
      width: 42px !important;
      height: 42px !important;
      border: 0 !important;
      background: transparent !important;
      box-shadow: none !important;
    }

    @media (max-width: 560px) {
      .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="interaction"] .relationship-flow-map {
        width: 100% !important;
        min-height: 300px !important;
        margin-left: 0 !important;
      }

      .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="interaction"] .relationship-flow-orbit-image {
        width: 690px !important;
      }

      .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="interaction"] .relationship-flow-person.is-left {
        left: 1.5% !important;
      }

      .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="interaction"] .relationship-flow-person.is-right {
        right: 1.5% !important;
      }

      .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="risk"] .relationship-risk-wheel {
        width: 318px !important;
        height: 318px !important;
      }

      .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="timing"] .relationship-river-canvas {
        min-width: 720px !important;
        height: 266px !important;
      }
    }

    /* Relationship dimensions correction v13: fate/interaction use slips, resonance remains untouched, risk/timing use one visual layer. */
    .relationship-match-screen .relationship-radar-frame-image {
      display: none !important;
    }

    .relationship-match-screen.is-dimensions-report .relationship-dimension-slip-pair {
      position: relative;
      z-index: 2;
      display: grid;
      grid-template-columns: minmax(118px, 1fr) auto minmax(118px, 1fr);
      align-items: center;
      justify-items: center;
      width: min(560px, 100%);
      margin: 0 auto;
      padding: 0 8px;
      overflow: visible;
    }

    .relationship-match-screen.is-dimensions-report .relationship-dimension-slip-pair.is-fate {
      min-height: clamp(286px, 48vw, 382px);
    }

    .relationship-match-screen.is-dimensions-report .relationship-dimension-slip-pair.is-interaction {
      width: min(520px, 100%);
      min-height: clamp(228px, 39vw, 310px);
      margin: 2px auto 8px;
    }

    .relationship-match-screen.is-dimensions-report .relationship-dimension-slip {
      position: relative;
      display: grid;
      justify-items: center;
      width: clamp(118px, 25vw, 156px);
      aspect-ratio: 402 / 801;
      color: #171512;
      font-family: var(--kai);
      text-align: center;
      filter:
        drop-shadow(0 14px 20px rgba(113, 93, 62, 0.12))
        drop-shadow(0 1px 0 rgba(255, 252, 247, 0.8));
    }

    .relationship-match-screen.is-dimensions-report .relationship-dimension-slip-pair.is-interaction .relationship-dimension-slip {
      width: clamp(104px, 21vw, 138px);
    }

    .relationship-match-screen.is-dimensions-report .relationship-dimension-slip-bg {
      position: absolute;
      inset: 0;
      z-index: 0;
      width: 100%;
      height: 100%;
      object-fit: contain;
      pointer-events: none;
      user-select: none;
    }

    .relationship-match-screen.is-dimensions-report .relationship-dimension-slip-role,
    .relationship-match-screen.is-dimensions-report .relationship-dimension-slip-stem,
    .relationship-match-screen.is-dimensions-report .relationship-dimension-slip strong,
    .relationship-match-screen.is-dimensions-report .relationship-dimension-slip em {
      position: relative;
      z-index: 1;
      max-width: 78%;
      margin: 0;
      text-shadow: 0 1px 0 rgba(255, 252, 247, 0.84);
    }

    .relationship-match-screen.is-dimensions-report .relationship-dimension-slip-role {
      position: absolute;
      left: 50%;
      top: 7.1%;
      display: grid;
      place-items: center;
      width: 42%;
      height: 7.8%;
      max-width: none;
      margin: 0;
      padding: 0;
      border: 0;
      border-radius: 0;
      background: transparent;
      color: #9b6f2d;
      font-size: clamp(11px, 2vw, 12px);
      font-weight: 800;
      letter-spacing: 0.08em;
      line-height: 1;
      transform: translateX(-50%);
    }

    .relationship-match-screen.is-dimensions-report .relationship-dimension-slip-stem {
      display: grid;
      place-items: center;
      width: clamp(44px, 8vw, 56px);
      height: clamp(44px, 8vw, 56px);
      margin-top: 13%;
      border-radius: 50%;
      color: #a93226;
      font-family: var(--serif);
      font-size: clamp(25px, 5vw, 34px);
      font-weight: 900;
      line-height: 1;
    }

    .relationship-match-screen.is-dimensions-report .relationship-dimension-slip strong {
      margin-top: 9%;
      color: #171512;
      font-family: var(--serif);
      font-size: clamp(16px, 3.4vw, 22px);
      font-weight: 800;
      line-height: 1.1;
      letter-spacing: 0.03em;
      white-space: nowrap;
    }

    .relationship-match-screen.is-dimensions-report .relationship-dimension-slip em {
      margin-top: 5%;
      color: #a93226;
      font-size: clamp(12px, 2.3vw, 14px);
      font-style: normal;
      font-weight: 800;
      letter-spacing: 0.08em;
    }

    .relationship-match-screen.is-dimensions-report .relationship-dimension-slip-seal {
      position: relative;
      z-index: 3;
      display: grid;
      place-items: center;
      width: clamp(54px, 10vw, 72px);
      height: clamp(54px, 10vw, 72px);
      margin: 0 -4px;
      border: 1px solid rgba(184, 54, 43, 0.34);
      border-radius: 22px;
      background:
        radial-gradient(circle at 50% 45%, rgba(255, 252, 247, 0.96), rgba(248, 239, 217, 0.86) 68%, rgba(173, 138, 77, 0.14));
      color: #a93226;
      font-family: var(--serif);
      font-size: clamp(28px, 5.6vw, 38px);
      font-weight: 900;
      line-height: 1;
      box-shadow:
        0 0 0 8px rgba(255, 252, 247, 0.42),
        0 12px 24px rgba(113, 93, 62, 0.1);
    }

    .relationship-match-screen.is-dimensions-report .relationship-dimension-slip-seal::before,
    .relationship-match-screen.is-dimensions-report .relationship-dimension-slip-seal::after {
      content: "";
      position: absolute;
      top: 50%;
      width: clamp(42px, 8vw, 70px);
      height: 2px;
      background: linear-gradient(90deg, transparent, rgba(177, 139, 73, 0.58), transparent);
      transform: translateY(-50%);
      pointer-events: none;
    }

    .relationship-match-screen.is-dimensions-report .relationship-dimension-slip-seal::before {
      right: calc(100% + 5px);
    }

    .relationship-match-screen.is-dimensions-report .relationship-dimension-slip-seal::after {
      left: calc(100% + 5px);
    }

    .relationship-match-screen.is-dimensions-report .relationship-dimension-slip-seal small {
      margin-top: 3px;
      color: rgba(126, 95, 42, 0.72);
      font-family: var(--kai);
      font-size: 10px;
      font-weight: 800;
      letter-spacing: 0.08em;
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="fate"] .relationship-fate-origin-map.is-slip-layout {
      min-height: clamp(286px, 48vw, 382px) !important;
      margin: -2px auto 18px !important;
      border: 0 !important;
      background: transparent !important;
      box-shadow: none !important;
      overflow: visible !important;
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="fate"] .relationship-fate-origin-map.is-slip-layout::before,
    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="fate"] .relationship-fate-origin-map.is-slip-layout::after {
      display: none !important;
      content: none !important;
      background: none !important;
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="interaction"] .relationship-flow-visual {
      gap: 8px;
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="interaction"] .relationship-flow-map::before,
    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="interaction"] .relationship-flow-map::after {
      display: none !important;
      content: none !important;
      background: none !important;
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="risk"] .relationship-risk-wheel {
      background: none !important;
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="risk"] .relationship-risk-wheel::before,
    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="risk"] .relationship-risk-wheel::after,
    .relationship-match-screen.is-report-step .relationship-risk-wheel::before,
    .relationship-match-screen.is-report-step .relationship-risk-wheel::after {
      display: none !important;
      content: none !important;
      background: none !important;
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="timing"] .relationship-river-canvas,
    .relationship-match-screen.is-report-step .relationship-river-canvas {
      background: none !important;
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="timing"] .relationship-river-canvas svg,
    .relationship-match-screen.is-report-step .relationship-river-canvas svg {
      display: none !important;
    }

    @media (max-width: 560px) {
      .relationship-match-screen.is-dimensions-report .relationship-dimension-slip-pair {
        grid-template-columns: minmax(98px, 1fr) auto minmax(98px, 1fr);
        padding: 0 2px;
      }

      .relationship-match-screen.is-dimensions-report .relationship-dimension-slip {
        width: clamp(102px, 29vw, 122px);
      }

      .relationship-match-screen.is-dimensions-report .relationship-dimension-slip-pair.is-interaction .relationship-dimension-slip {
        width: clamp(94px, 27vw, 112px);
      }

      .relationship-match-screen.is-dimensions-report .relationship-dimension-slip-seal {
        width: 50px;
        height: 50px;
        border-radius: 17px;
        font-size: 26px;
      }

      .relationship-match-screen.is-dimensions-report .relationship-dimension-slip-seal::before,
      .relationship-match-screen.is-dimensions-report .relationship-dimension-slip-seal::after {
        width: 26px;
      }

    }

    /* Relationship dimension slip text alignment v14: role in title tag, stem in center ring. */
    .relationship-match-screen.is-dimensions-report .relationship-dimension-slip {
      display: block !important;
      position: relative !important;
    }

    .relationship-match-screen.is-dimensions-report .relationship-dimension-slip-role {
      position: absolute !important;
      left: 50% !important;
      top: 7.6% !important;
      z-index: 3 !important;
      display: grid !important;
      place-items: center !important;
      width: 42% !important;
      height: 7.8% !important;
      max-width: none !important;
      margin: 0 !important;
      padding: 0 !important;
      border: 0 !important;
      background: transparent !important;
      color: #9b6f2d !important;
      font-family: var(--kai) !important;
      font-size: clamp(11px, 2vw, 12px) !important;
      font-weight: 900 !important;
      letter-spacing: 0.06em !important;
      line-height: 1 !important;
      text-align: center !important;
      transform: translateX(-50%) !important;
    }

    .relationship-match-screen.is-dimensions-report .relationship-dimension-slip-stem {
      position: absolute !important;
      left: 50% !important;
      top: 33.3% !important;
      z-index: 3 !important;
      display: grid !important;
      place-items: center !important;
      width: 36% !important;
      height: 17% !important;
      max-width: none !important;
      margin: 0 !important;
      padding: 0 !important;
      border: 0 !important;
      border-radius: 0 !important;
      background: transparent !important;
      color: #a93226 !important;
      font-family: var(--serif) !important;
      font-size: clamp(34px, 7vw, 48px) !important;
      font-weight: 900 !important;
      line-height: 1 !important;
      text-align: center !important;
      text-shadow: 0 1px 0 rgba(255, 252, 247, 0.9) !important;
      transform: translate(-50%, -50%) !important;
    }

    .relationship-match-screen.is-dimensions-report .relationship-dimension-slip strong {
      position: absolute !important;
      left: 50% !important;
      top: 52% !important;
      z-index: 3 !important;
      max-width: 76% !important;
      margin: 0 !important;
      color: #171512 !important;
      font-family: var(--serif) !important;
      font-size: clamp(16px, 3.5vw, 22px) !important;
      font-weight: 900 !important;
      line-height: 1.08 !important;
      letter-spacing: 0.03em !important;
      text-align: center !important;
      white-space: nowrap !important;
      transform: translateX(-50%) !important;
    }

    .relationship-match-screen.is-dimensions-report .relationship-dimension-slip em {
      position: absolute !important;
      left: 50% !important;
      top: 69.8% !important;
      z-index: 3 !important;
      max-width: 74% !important;
      margin: 0 !important;
      color: #a93226 !important;
      font-family: var(--kai) !important;
      font-size: clamp(12px, 2.4vw, 14px) !important;
      font-style: normal !important;
      font-weight: 900 !important;
      line-height: 1.15 !important;
      letter-spacing: 0.08em !important;
      text-align: center !important;
      white-space: nowrap !important;
      transform: translateX(-50%) !important;
    }

    @media (max-width: 560px) {
      .relationship-match-screen.is-dimensions-report .relationship-dimension-slip-stem {
        font-size: clamp(30px, 8vw, 38px) !important;
      }

      .relationship-match-screen.is-dimensions-report .relationship-dimension-slip strong {
        font-size: clamp(15px, 4.2vw, 18px) !important;
      }

      .relationship-match-screen.is-dimensions-report .relationship-dimension-slip em {
        font-size: clamp(10.5px, 3vw, 12px) !important;
      }
    }

    /* Relationship interaction reading v15: equal slips and visible nourish/consume flow. */
    .relationship-match-screen.is-dimensions-report .relationship-dimension-slip-pair.is-interaction {
      width: min(560px, 100%) !important;
      min-height: clamp(286px, 48vw, 382px) !important;
      margin: 0 auto 8px !important;
    }

    .relationship-match-screen.is-dimensions-report .relationship-dimension-slip-pair.is-interaction .relationship-dimension-slip {
      width: clamp(118px, 25vw, 156px) !important;
    }

    .relationship-match-screen.is-dimensions-report .relationship-dimension-slip-role {
      top: 8.9% !important;
    }

    .relationship-match-screen.is-dimensions-report .relationship-interaction-flow-bridge {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 8px;
      width: min(600px, calc(100% - 28px));
      margin: -10px auto 12px;
      padding: 0;
      border: 0;
      background: transparent;
    }

    .relationship-match-screen.is-dimensions-report .relationship-interaction-flow-bridge button {
      position: relative;
      display: grid;
      grid-template-columns: 30px minmax(0, 1fr);
      grid-template-rows: auto auto;
      align-items: center;
      column-gap: 5px;
      min-height: 50px;
      padding: 6px 7px;
      border: 0;
      border-radius: 0;
      background:
        linear-gradient(90deg, rgba(255, 252, 247, 0), rgba(255, 252, 247, 0.78) 18%, rgba(255, 252, 247, 0.78) 82%, rgba(255, 252, 247, 0));
      color: #715d3e;
      font-family: var(--kai);
      text-align: left;
      box-shadow: none;
    }

    .relationship-match-screen.is-dimensions-report .relationship-interaction-flow-bridge button::after {
      content: "";
      position: absolute;
      left: 10px;
      right: 10px;
      bottom: 0;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(177, 139, 73, 0.28), transparent);
      pointer-events: none;
    }

    .relationship-match-screen.is-dimensions-report .relationship-interaction-flow-bridge i {
      grid-row: 1 / span 2;
      display: grid;
      place-items: center;
      width: 30px;
      height: 30px;
      margin: 0;
    }

    .relationship-match-screen.is-dimensions-report .relationship-interaction-flow-bridge i img {
      width: 30px;
      height: 30px;
      object-fit: contain;
      filter: drop-shadow(0 4px 7px rgba(113, 93, 62, 0.08));
    }

    .relationship-match-screen.is-dimensions-report .relationship-interaction-flow-bridge span {
      overflow: hidden;
      color: #171512;
      font-size: clamp(12px, 2.35vw, 14px);
      font-weight: 900;
      line-height: 1.15;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    .relationship-match-screen.is-dimensions-report .relationship-interaction-flow-bridge small {
      color: #a93226;
      font-family: var(--serif);
      font-size: 13px;
      font-weight: 900;
      line-height: 1;
    }

    .relationship-match-screen.is-dimensions-report .relationship-interaction-flow-bridge button.active {
      background:
        linear-gradient(90deg, rgba(255, 252, 247, 0), rgba(255, 252, 247, 0.94) 16%, rgba(255, 252, 247, 0.94) 84%, rgba(255, 252, 247, 0));
      filter: drop-shadow(0 8px 14px rgba(113, 93, 62, 0.08));
    }

    .relationship-match-screen.is-dimensions-report .relationship-interaction-flow-bridge button.active span {
      color: #a93226;
    }

    .relationship-match-screen.is-dimensions-report .relationship-interaction-flow-bridge .is-blue span {
      color: #2d6f82;
    }

    @media (max-width: 560px) {
      .relationship-match-screen.is-dimensions-report .relationship-dimension-slip-pair.is-interaction {
        min-height: clamp(254px, 67vw, 312px) !important;
      }

      .relationship-match-screen.is-dimensions-report .relationship-dimension-slip-pair.is-interaction .relationship-dimension-slip {
        width: clamp(102px, 29vw, 122px) !important;
      }

      .relationship-match-screen.is-dimensions-report .relationship-interaction-flow-bridge {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: min(360px, calc(100% - 24px));
        margin-top: -4px;
      }
    }

    /* Relationship interaction/risk/timing cleanup v16: no clipped bridge text, no old visual layers. */
    .relationship-match-screen.is-dimensions-report .relationship-interaction-flow-bridge {
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      width: min(500px, calc(100% - 28px)) !important;
      gap: 10px 12px !important;
      margin: -4px auto 14px !important;
    }

    .relationship-match-screen.is-dimensions-report .relationship-interaction-flow-bridge button {
      grid-template-columns: 34px minmax(0, 1fr) auto !important;
      grid-template-rows: auto !important;
      min-height: 42px !important;
      padding: 5px 10px !important;
    }

    .relationship-match-screen.is-dimensions-report .relationship-interaction-flow-bridge i {
      grid-row: auto !important;
      width: 32px !important;
      height: 32px !important;
    }

    .relationship-match-screen.is-dimensions-report .relationship-interaction-flow-bridge i img {
      width: 32px !important;
      height: 32px !important;
    }

    .relationship-match-screen.is-dimensions-report .relationship-interaction-flow-bridge span {
      overflow: visible !important;
      white-space: normal !important;
      text-overflow: clip !important;
      font-size: clamp(13px, 2.35vw, 15px) !important;
      line-height: 1.18 !important;
    }

    .relationship-match-screen.is-dimensions-report .relationship-interaction-flow-bridge small {
      justify-self: end;
    }

    .relationship-match-screen .relationship-flow-label,
    .relationship-match-screen .relationship-flow-person,
    .relationship-match-screen .relationship-flow-map svg {
      display: none !important;
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="interaction"] .relationship-flow-map {
      min-height: clamp(210px, 32vw, 280px) !important;
      margin-top: 0 !important;
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="interaction"] .relationship-flow-orbit-image {
      top: 50% !important;
      width: min(700px, 112%) !important;
    }

    .relationship-match-screen .relationship-risk-wheel,
    .relationship-match-screen.is-report-step .relationship-risk-wheel,
    .relationship-match-screen.is-dimensions-report .relationship-risk-wheel,
    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="risk"] .relationship-risk-wheel {
      background: transparent !important;
      box-shadow: none !important;
      border: 0 !important;
    }

    .relationship-match-screen .relationship-risk-wheel::before,
    .relationship-match-screen .relationship-risk-wheel::after,
    .relationship-match-screen.is-report-step .relationship-risk-wheel::before,
    .relationship-match-screen.is-report-step .relationship-risk-wheel::after,
    .relationship-match-screen.is-dimensions-report .relationship-risk-wheel::before,
    .relationship-match-screen.is-dimensions-report .relationship-risk-wheel::after {
      display: none !important;
      content: none !important;
      background: none !important;
      box-shadow: none !important;
    }

    .relationship-match-screen .relationship-river-canvas,
    .relationship-match-screen.is-report-step .relationship-river-canvas,
    .relationship-match-screen.is-dimensions-report .relationship-river-canvas,
    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="timing"] .relationship-river-canvas {
      background: transparent !important;
      box-shadow: none !important;
      border: 0 !important;
    }

    .relationship-match-screen .relationship-river-canvas::before,
    .relationship-match-screen .relationship-river-canvas::after,
    .relationship-match-screen .relationship-river-canvas svg,
    .relationship-match-screen .relationship-river-canvas .mountain,
    .relationship-match-screen .relationship-river-canvas .river {
      display: none !important;
      content: none !important;
      background: none !important;
      stroke: transparent !important;
    }

    /* Relationship entry design draft: align scenario/profile pages with the report style. */
    .relationship-match-screen.is-scenario-step,
    .relationship-match-screen.is-people-step {
      position: relative;
      background:
        url("/prototype/assets/relationship-match/backgrounds/relationship-bamboo-shadow-v1.png") right 106px / 132px auto no-repeat,
        radial-gradient(ellipse at 50% 8%, rgba(173, 138, 77, 0.08), transparent 38%);
    }

    .relationship-match-screen.is-scenario-step .relationship-brief,
    .relationship-match-screen.is-people-step .relationship-brief {
      position: relative;
      gap: 12px;
      margin: 10px 0 22px;
      padding: 22px 0 20px;
      border-top: 1px solid rgba(173, 138, 77, 0.18);
      border-bottom: 1px solid rgba(173, 138, 77, 0.16);
      background:
        url("/prototype/assets/relationship-match/backgrounds/relationship-scroll-wash-v1.webp") right 46% / 280px auto no-repeat;
    }

    .relationship-match-screen.is-scenario-step .relationship-brief::after,
    .relationship-match-screen.is-people-step .relationship-brief::after {
      content: "";
      position: absolute;
      left: 50%;
      bottom: -5px;
      width: 108px;
      height: 9px;
      transform: translateX(-50%);
      background:
        radial-gradient(circle, rgba(173, 138, 77, 0.55) 0 2px, transparent 2.4px) 42px 50% / 10px 10px no-repeat,
        radial-gradient(circle, rgba(173, 138, 77, 0.55) 0 2px, transparent 2.4px) 52px 50% / 10px 10px no-repeat,
        radial-gradient(circle, rgba(173, 138, 77, 0.55) 0 2px, transparent 2.4px) 62px 50% / 10px 10px no-repeat,
        linear-gradient(90deg, transparent, rgba(173, 138, 77, 0.28), transparent);
      opacity: 0.8;
      pointer-events: none;
    }

    .relationship-match-screen.is-scenario-step .section-kicker,
    .relationship-match-screen.is-people-step .section-kicker {
      color: #4f8a62;
      font-family: var(--serif);
      font-size: 16px;
      font-weight: 800;
      letter-spacing: 0.12em;
    }

    .relationship-match-screen.is-scenario-step .relationship-brief h2,
    .relationship-match-screen.is-people-step .relationship-brief h2 {
      max-width: 12em;
      font-size: clamp(30px, 6vw, 39px);
      line-height: 1.22;
      letter-spacing: 0.08em;
      text-wrap: balance;
    }

    .relationship-match-screen.is-scenario-step .relationship-brief p,
    .relationship-match-screen.is-people-step .relationship-brief p {
      max-width: 33em;
      color: rgba(24, 23, 21, 0.64);
      font-size: 14px;
      line-height: 1.8;
    }

    .relationship-match-screen.is-scenario-step .relationship-category-tabs {
      position: sticky;
      top: 0;
      z-index: 8;
      gap: 10px;
      margin: 0 0 18px;
      padding: 2px 0 12px;
      border-bottom: 1px solid rgba(173, 138, 77, 0.14);
      background: linear-gradient(180deg, rgba(255, 252, 247, 0.96), rgba(255, 252, 247, 0.72));
      backdrop-filter: blur(10px);
    }

    .relationship-match-screen.is-scenario-step .relationship-category-tabs button {
      min-height: 68px;
      padding: 8px 4px 10px;
      border: 0;
      border-radius: 0;
      background: transparent;
      color: rgba(24, 23, 21, 0.52);
      box-shadow: none;
    }

    .relationship-match-screen.is-scenario-step .relationship-category-tabs button::before {
      content: "";
      position: absolute;
      inset: 4px 0 6px;
      border: 1px solid rgba(173, 138, 77, 0.18);
      border-radius: 8px;
      background:
        linear-gradient(180deg, rgba(255, 252, 247, 0.68), rgba(248, 239, 217, 0.2));
      opacity: 0.82;
      transition:
        border-color 260ms var(--ease),
        background 260ms var(--ease),
        transform 260ms var(--ease);
    }

    .relationship-match-screen.is-scenario-step .relationship-category-tabs button.active::before {
      border-color: rgba(184, 54, 43, 0.34);
      background:
        radial-gradient(circle at 50% 12%, rgba(184, 54, 43, 0.08), transparent 44%),
        linear-gradient(180deg, rgba(255, 252, 247, 0.86), rgba(248, 239, 217, 0.35));
      transform: translateY(-1px);
    }

    .relationship-match-screen.is-scenario-step .relationship-category-tabs span,
    .relationship-match-screen.is-scenario-step .relationship-category-tabs strong {
      position: relative;
      z-index: 1;
    }

    .relationship-match-screen.is-scenario-step .relationship-category-tabs span {
      width: 32px;
      height: 32px;
      border-color: rgba(24, 23, 21, 0.38);
      background: rgba(255, 252, 247, 0.68);
      color: inherit;
    }

    .relationship-match-screen.is-scenario-step .relationship-category-tabs button.active span {
      border-color: rgba(184, 54, 43, 0.52);
      color: var(--seal);
      box-shadow: inset 0 0 0 5px rgba(184, 54, 43, 0.04);
    }

    .relationship-match-screen.is-scenario-step .relationship-category-tabs strong {
      font-size: 13px;
      letter-spacing: 0.05em;
    }

    .relationship-match-screen.is-scenario-step .relationship-category-tabs button::after {
      bottom: 4px;
      width: 0;
      height: 3px;
      border-radius: 999px;
      background:
        linear-gradient(90deg, rgba(184, 54, 43, 0.88), rgba(201, 156, 75, 0.82));
      transition: width 260ms var(--ease);
    }

    .relationship-match-screen.is-scenario-step .relationship-category-tabs button.active::after {
      width: 32px;
    }

    .relationship-match-screen.is-scenario-step .relationship-subtype-list {
      gap: 12px;
    }

    .relationship-match-screen.is-scenario-step .relationship-subtype-slip {
      min-height: 88px;
      grid-template-columns: 58px minmax(0, 1fr) 48px;
      gap: 12px;
      padding: 14px 14px 14px 12px;
      border: 0;
      border-radius: 0;
      background:
        linear-gradient(90deg, rgba(255, 252, 247, 0.9), rgba(248, 239, 217, 0.42));
      box-shadow: inset 0 -1px 0 rgba(173, 138, 77, 0.14);
      clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px);
    }

    .relationship-match-screen.is-scenario-step .relationship-subtype-bg {
      position: absolute;
      top: 8px;
      right: 10px;
      bottom: 8px;
      z-index: 0;
      width: min(36%, 168px);
      background-image: var(--relationship-scenario-bg);
      background-repeat: no-repeat;
      background-position: right center;
      background-size: contain;
      opacity: 0.28;
      filter: saturate(0.72) sepia(0.04);
      -webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, 0.35) 18%, #000 42%);
      mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, 0.35) 18%, #000 42%);
      pointer-events: none;
      mix-blend-mode: multiply;
    }

    .relationship-match-screen.is-scenario-step .relationship-subtype-slip.is-active .relationship-subtype-bg {
      opacity: 0.38;
    }

    .relationship-match-screen .relationship-selected-scene[data-relationship-type="intimate"],
    .relationship-match-screen.is-scenario-step .relationship-subtype-slip[data-relationship-type="intimate"] {
      --relationship-scenario-bg: url("/prototype/assets/relationship-match/scenario-imagen/relationship-scenario-imagen-intimate-v1.png?v=1");
    }

    .relationship-match-screen .relationship-selected-scene[data-relationship-type="karmic"],
    .relationship-match-screen.is-scenario-step .relationship-subtype-slip[data-relationship-type="karmic"] {
      --relationship-scenario-bg: url("/prototype/assets/relationship-match/scenario-imagen/relationship-scenario-imagen-karmic-v1.png?v=1");
    }

    .relationship-match-screen .relationship-selected-scene[data-relationship-type="crush"],
    .relationship-match-screen.is-scenario-step .relationship-subtype-slip[data-relationship-type="crush"] {
      --relationship-scenario-bg: url("/prototype/assets/relationship-match/scenario-imagen/relationship-scenario-imagen-crush-v1.png?v=1");
    }

    .relationship-match-screen .relationship-selected-scene[data-relationship-type="former"],
    .relationship-match-screen.is-scenario-step .relationship-subtype-slip[data-relationship-type="former"] {
      --relationship-scenario-bg: url("/prototype/assets/relationship-match/scenario-imagen/relationship-scenario-imagen-former-v1.png?v=1");
    }

    .relationship-match-screen .relationship-selected-scene[data-relationship-type="parent_child"],
    .relationship-match-screen.is-scenario-step .relationship-subtype-slip[data-relationship-type="parent_child"] {
      --relationship-scenario-bg: url("/prototype/assets/relationship-match/scenario-imagen/relationship-scenario-imagen-parent-child-v1.png?v=1");
    }

    .relationship-match-screen .relationship-selected-scene[data-relationship-type="in_law"],
    .relationship-match-screen.is-scenario-step .relationship-subtype-slip[data-relationship-type="in_law"] {
      --relationship-scenario-bg: url("/prototype/assets/relationship-match/scenario-imagen/relationship-scenario-imagen-in-law-v1.png?v=1");
    }

    .relationship-match-screen .relationship-selected-scene[data-relationship-type="siblings"],
    .relationship-match-screen.is-scenario-step .relationship-subtype-slip[data-relationship-type="siblings"] {
      --relationship-scenario-bg: url("/prototype/assets/relationship-match/scenario-imagen/relationship-scenario-imagen-siblings-v1.png?v=1");
    }

    .relationship-match-screen .relationship-selected-scene[data-relationship-type="pet"],
    .relationship-match-screen.is-scenario-step .relationship-subtype-slip[data-relationship-type="pet"] {
      --relationship-scenario-bg: url("/prototype/assets/relationship-match/scenario-imagen/relationship-scenario-imagen-pet-v1.png?v=1");
    }

    .relationship-match-screen .relationship-selected-scene[data-relationship-type="cooperation"],
    .relationship-match-screen.is-scenario-step .relationship-subtype-slip[data-relationship-type="cooperation"] {
      --relationship-scenario-bg: url("/prototype/assets/relationship-match/scenario-imagen/relationship-scenario-imagen-cooperation-v1.png?v=1");
    }

    .relationship-match-screen .relationship-selected-scene[data-relationship-type="friendship"],
    .relationship-match-screen.is-scenario-step .relationship-subtype-slip[data-relationship-type="friendship"] {
      --relationship-scenario-bg: url("/prototype/assets/relationship-match/scenario-imagen/relationship-scenario-imagen-friendship-v1.png?v=1");
    }

    .relationship-match-screen .relationship-selected-scene[data-relationship-type="competitor"],
    .relationship-match-screen.is-scenario-step .relationship-subtype-slip[data-relationship-type="competitor"] {
      --relationship-scenario-bg: url("/prototype/assets/relationship-match/scenario-imagen/relationship-scenario-imagen-competitor-v1.png?v=1");
    }

    .relationship-match-screen .relationship-selected-scene[data-relationship-type="mentor"],
    .relationship-match-screen.is-scenario-step .relationship-subtype-slip[data-relationship-type="mentor"] {
      --relationship-scenario-bg: url("/prototype/assets/relationship-match/scenario-imagen/relationship-scenario-imagen-mentor-v1.png?v=1");
    }

    .relationship-match-screen .relationship-selected-scene[data-relationship-type="first_impression"],
    .relationship-match-screen.is-scenario-step .relationship-subtype-slip[data-relationship-type="first_impression"] {
      --relationship-scenario-bg: url("/prototype/assets/relationship-match/scenario-imagen/relationship-scenario-imagen-first-impression-v1.png?v=1");
    }

    .relationship-match-screen .relationship-selected-scene[data-relationship-type="roommate_travel"],
    .relationship-match-screen.is-scenario-step .relationship-subtype-slip[data-relationship-type="roommate_travel"] {
      --relationship-scenario-bg: url("/prototype/assets/relationship-match/scenario-imagen/relationship-scenario-imagen-roommate-travel-v1.png?v=1");
    }

    .relationship-match-screen .relationship-selected-scene[data-relationship-type="celebrity"],
    .relationship-match-screen.is-scenario-step .relationship-subtype-slip[data-relationship-type="celebrity"] {
      --relationship-scenario-bg: url("/prototype/assets/relationship-match/scenario-imagen/relationship-scenario-imagen-celebrity-v1.png?v=1");
    }

    .relationship-match-screen.is-scenario-step .relationship-subtype-slip::before {
      inset: 8px;
      border-color: rgba(173, 138, 77, 0.1);
      border-radius: 0;
    }

    .relationship-match-screen.is-scenario-step .relationship-subtype-slip.is-active {
      background:
        radial-gradient(ellipse at 0% 50%, rgba(184, 54, 43, 0.08), transparent 42%),
        linear-gradient(90deg, rgba(255, 250, 241, 0.98), rgba(248, 239, 217, 0.5));
      box-shadow:
        inset 0 0 0 1px rgba(184, 54, 43, 0.2),
        0 10px 22px rgba(72, 51, 32, 0.08);
    }

    .relationship-match-screen.is-scenario-step .relationship-subtype-slip.is-active::after {
      content: none;
      display: none;
    }

    .relationship-match-screen.is-scenario-step .relationship-subtype-seal {
      position: relative;
      z-index: 1;
      width: 46px;
      height: 46px;
      border-radius: 50%;
      background:
        radial-gradient(circle at 42% 34%, rgba(255, 252, 247, 0.96), rgba(248, 239, 217, 0.52));
      font-size: 25px;
      box-shadow: inset 0 0 0 5px rgba(184, 54, 43, 0.04);
    }

    .relationship-match-screen.is-scenario-step .relationship-subtype-copy strong {
      font-size: clamp(20px, 4.4vw, 26px);
      letter-spacing: 0.05em;
    }

    .relationship-match-screen.is-scenario-step .relationship-subtype-copy,
    .relationship-match-screen.is-scenario-step .relationship-subtype-slip em {
      position: relative;
      z-index: 1;
    }

    .relationship-match-screen.is-scenario-step .relationship-subtype-copy small {
      color: rgba(24, 23, 21, 0.56);
      font-size: 13px;
      line-height: 1.55;
      white-space: normal;
    }

    .relationship-match-screen.is-scenario-step .relationship-subtype-slip em {
      justify-self: end;
      min-width: 36px;
      min-height: 28px;
      border-radius: 999px;
      background: rgba(255, 252, 247, 0.88);
      box-shadow: 0 0 0 4px rgba(255, 252, 247, 0.54);
      font-size: 12px;
    }

    .relationship-match-screen.is-scenario-step .relationship-scenario-action {
      left: 20px;
      right: 20px;
      bottom: calc(var(--nav-height) + 14px);
      padding: 8px;
      border: 1px solid rgba(173, 138, 77, 0.2);
      border-radius: 8px;
      background:
        linear-gradient(180deg, rgba(255, 252, 247, 0.96), rgba(248, 239, 217, 0.9));
      box-shadow:
        0 16px 36px rgba(72, 51, 32, 0.16),
        inset 0 0 0 1px rgba(255, 252, 247, 0.62);
    }

    .relationship-match-screen.is-scenario-step .relationship-scenario-action .relationship-generate-button,
    .relationship-match-screen.is-people-step .relationship-setup-card > .relationship-generate-button {
      min-height: 58px;
      border-radius: 0;
      clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0 calc(100% - 12px), 0 12px);
      background:
        radial-gradient(circle at 24% 12%, rgba(255, 232, 190, 0.16), transparent 36%),
        linear-gradient(180deg, #c23d30, #98251d);
      box-shadow:
        0 12px 24px rgba(123, 34, 27, 0.18),
        inset 0 0 0 3px rgba(255, 232, 190, 0.12);
      font-size: 20px;
      letter-spacing: 0.15em;
    }

    .relationship-match-screen.is-people-step .relationship-profile-panel {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      column-gap: 58px;
      row-gap: 12px;
      padding: 4px 0 18px;
      border-top: 1px solid rgba(173, 138, 77, 0.12);
      border-bottom: 1px solid rgba(173, 138, 77, 0.12);
      background:
        url("/prototype/assets/relationship-match/backgrounds/relationship-scroll-wash-v1.webp") center 48% / 360px auto no-repeat;
    }

    .relationship-match-screen.is-people-step .relationship-profile-panel .relationship-section-head {
      align-items: end;
      margin: 2px 0 6px;
      padding: 0 0 8px;
      border-bottom: 1px solid rgba(173, 138, 77, 0.12);
    }

    .relationship-match-screen.is-people-step .relationship-profile-panel .relationship-section-head h2 {
      font-size: clamp(22px, 5vw, 30px);
    }

    .relationship-match-screen.is-people-step .relationship-profile-panel .relationship-section-head p {
      max-width: 18em;
      text-align: right;
    }

    .relationship-match-screen.is-people-step .relationship-flow-bridge::before {
      left: -46px;
      right: -46px;
      height: 1px;
      background:
        linear-gradient(90deg, transparent, rgba(76, 139, 102, 0.36), rgba(184, 54, 43, 0.54), rgba(173, 138, 77, 0.42), transparent);
    }

    .relationship-match-screen.is-people-step .relationship-profile-current {
      grid-column: 1;
    }

    .relationship-match-screen.is-people-step .relationship-partner-list {
      grid-column: 2;
    }

    .relationship-match-screen.is-people-step .relationship-flow-bridge {
      position: absolute;
      grid-column: 1 / -1;
      left: 50%;
      top: 47%;
      width: 44px;
      min-height: 44px;
      animation: none;
      transform: translate(-50%, -50%);
    }

    .relationship-match-screen.is-people-step .relationship-flow-bridge i {
      width: 44px;
      height: 44px;
      border-radius: 12px;
      background:
        radial-gradient(circle at 50% 48%, rgba(255, 252, 247, 0.98), rgba(248, 239, 217, 0.76));
    }

    .relationship-match-screen.is-people-step .relationship-mandate-card {
      min-height: 226px;
      padding: 56px 13px 15px;
      border: 0;
      border-radius: 0;
      background:
        linear-gradient(180deg, rgba(255, 252, 247, 0.9), rgba(248, 239, 217, 0.5)),
        radial-gradient(circle at 18% 16%, rgba(173, 138, 77, 0.12), transparent 38%);
      box-shadow:
        inset 0 0 0 1px rgba(173, 138, 77, 0.2),
        0 16px 26px rgba(72, 51, 32, 0.08);
      clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px);
    }

    .relationship-match-screen.is-people-step .relationship-mandate-card::before {
      inset: 11px;
      border-color: rgba(173, 138, 77, 0.12);
      border-radius: 0;
    }

    .relationship-match-screen.is-people-step .relationship-mandate-card::after {
      right: 8px;
      bottom: -9px;
      color: rgba(173, 138, 77, 0.065);
      font-size: 84px;
    }

    .relationship-match-screen.is-people-step .relationship-mandate-card.is-awaiting {
      background:
        linear-gradient(180deg, rgba(255, 252, 247, 0.68), rgba(248, 239, 217, 0.34)),
        repeating-linear-gradient(-45deg, rgba(173, 138, 77, 0.035) 0 7px, transparent 7px 14px);
      box-shadow:
        inset 0 0 0 1px rgba(173, 138, 77, 0.16),
        0 12px 22px rgba(72, 51, 32, 0.05);
    }

    .relationship-match-screen.is-people-step .relationship-mandate-ribbon {
      top: 15px;
      right: 15px;
      min-width: 58px;
      padding: 4px 8px;
      background: rgba(255, 252, 247, 0.58);
      font-size: 11px;
    }

    .relationship-match-screen.is-people-step .relationship-mandate-card .relationship-profile-mark {
      width: 42px;
      height: 42px;
      font-size: 22px;
    }

    .relationship-match-screen.is-people-step .relationship-mandate-card .relationship-partner-selected strong {
      overflow: visible;
      font-size: clamp(16px, 3.2vw, 18px);
      line-height: 1.16;
      letter-spacing: 0;
      text-overflow: clip;
      white-space: normal;
    }

    .relationship-match-screen.is-people-step .relationship-mandate-traits,
    .relationship-match-screen.is-people-step .relationship-mandate-placeholder {
      margin-top: 14px;
      padding: 10px 2px;
      border-top-color: rgba(173, 138, 77, 0.16);
      border-bottom-color: rgba(173, 138, 77, 0.14);
      font-size: 11.5px;
      line-height: 1.35;
    }

    .relationship-match-screen.is-people-step .relationship-mandate-traits span,
    .relationship-match-screen.is-people-step .relationship-mandate-placeholder span {
      white-space: normal;
    }

    .relationship-match-screen.is-people-step .relationship-mandate-card p {
      min-height: 28px;
      color: rgba(24, 23, 21, 0.52);
      font-size: 12px;
      line-height: 1.55;
    }

    .relationship-match-screen.is-people-step .relationship-profile-drawer-card {
      grid-template-columns: minmax(0, 1fr) minmax(190px, 0.78fr);
      gap: 14px;
      padding: 14px 14px 14px 16px;
      border: 0;
      border-radius: 0;
      background:
        radial-gradient(ellipse at 14% 14%, rgba(184, 54, 43, 0.045), transparent 34%),
        linear-gradient(180deg, rgba(255, 252, 247, 0.88), rgba(248, 239, 217, 0.48));
      box-shadow:
        inset 0 0 0 1px rgba(173, 138, 77, 0.18),
        0 12px 22px rgba(72, 51, 32, 0.055);
      clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px);
    }

    .relationship-match-screen.is-people-step .relationship-profile-drawer-copy strong {
      font-size: 20px;
    }

    .relationship-match-screen.is-people-step .relationship-profile-drawer-copy em {
      white-space: normal;
    }

    .relationship-match-screen.is-people-step .relationship-select-field select {
      min-height: 48px;
      border-radius: 0;
      background:
        linear-gradient(180deg, rgba(255, 252, 247, 0.98), rgba(255, 252, 247, 0.72));
      font-size: 15px;
      clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px);
    }

    .relationship-match-screen.is-people-step .relationship-setup-card {
      gap: 16px;
      padding: 18px 0 0;
      border: 0;
      border-top: 1px solid rgba(173, 138, 77, 0.16);
      border-radius: 0;
      background: transparent;
      box-shadow: none;
    }

    .relationship-match-screen.is-people-step .relationship-selected-scene {
      padding: 14px 0 16px;
      background: transparent;
    }

    .relationship-match-screen.is-people-step .relationship-selected-scene strong {
      font-size: 24px;
    }

    .relationship-match-screen.is-people-step .relationship-preview-list {
      border: 0;
      border-top: 1px solid rgba(173, 138, 77, 0.14);
      border-radius: 0;
      background: transparent;
    }

    .relationship-match-screen.is-people-step .relationship-preview-list button {
      min-height: 66px;
      padding: 11px 0;
      border-bottom-color: rgba(173, 138, 77, 0.12);
    }

    @media (max-width: 430px) {
      .relationship-match-screen.is-scenario-step .relationship-brief h2,
      .relationship-match-screen.is-people-step .relationship-brief h2 {
        font-size: 30px;
      }

      .relationship-match-screen.is-scenario-step .relationship-category-tabs {
        gap: 7px;
      }

      .relationship-match-screen.is-scenario-step .relationship-subtype-slip {
        grid-template-columns: 52px minmax(0, 1fr) 44px;
        padding: 13px 12px;
      }

      .relationship-match-screen.is-scenario-step .relationship-subtype-copy strong {
        font-size: 22px;
      }

      .relationship-match-screen.is-people-step .relationship-profile-panel {
        background-size: 280px auto;
      }

      .relationship-match-screen.is-people-step .relationship-profile-panel .relationship-section-head p {
        text-align: left;
      }

      .relationship-match-screen.is-people-step .relationship-flow-bridge::before {
        left: 50%;
        right: auto;
        width: 1px;
      }

      .relationship-match-screen.is-people-step .relationship-flow-bridge {
        position: relative;
        left: auto;
        top: auto;
        width: auto;
        min-height: 58px;
        transform: none;
      }

      .relationship-match-screen.is-people-step .relationship-profile-drawer-card {
        grid-template-columns: 1fr;
      }
    }

    @media (min-width: 760px) and (hover: hover) and (pointer: fine) {
      .relationship-match-screen.is-scenario-step .relationship-scenario-action {
        left: calc(50% - 240px + 20px);
        right: auto;
        width: 440px;
        transform: none;
      }
    }

    /* Relationship overview: fold the proof back into the front page. */
    .relationship-match-screen.is-report-step .relationship-overview-proof {
      position: relative;
      display: grid;
      gap: 14px;
      margin: 2px 0 0;
      padding: 18px 0 16px;
      border-top: 1px solid rgba(173, 138, 77, 0.22);
      border-bottom: 1px solid rgba(173, 138, 77, 0.14);
      background:
        radial-gradient(ellipse at 7% 7%, rgba(173, 138, 77, 0.08), transparent 36%),
        radial-gradient(ellipse at 94% 82%, rgba(184, 54, 43, 0.045), transparent 33%);
    }

    .relationship-match-screen.is-report-step .relationship-overview-proof::before {
      content: "";
      position: absolute;
      left: 50%;
      top: -5px;
      width: 84px;
      height: 9px;
      transform: translateX(-50%);
      background:
        radial-gradient(circle, rgba(173, 138, 77, 0.55) 0 2px, transparent 2.4px) 32px 50% / 10px 10px no-repeat,
        radial-gradient(circle, rgba(173, 138, 77, 0.55) 0 2px, transparent 2.4px) 42px 50% / 10px 10px no-repeat,
        radial-gradient(circle, rgba(173, 138, 77, 0.55) 0 2px, transparent 2.4px) 52px 50% / 10px 10px no-repeat,
        linear-gradient(90deg, transparent, rgba(173, 138, 77, 0.26), transparent);
      opacity: 0.82;
      pointer-events: none;
    }

    .relationship-match-screen.is-report-step .relationship-overview-proof-head {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 12px;
      padding: 0 2px;
    }

    .relationship-match-screen.is-report-step .relationship-overview-proof-head span {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: #171512;
      font-family: var(--serif);
      font-size: clamp(23px, 5vw, 30px);
      font-weight: 800;
      letter-spacing: 0.08em;
    }

    .relationship-match-screen.is-report-step .relationship-overview-proof-head span::after {
      content: "验";
      display: inline-grid;
      place-items: center;
      width: 18px;
      height: 18px;
      border: 1px solid rgba(184, 54, 43, 0.58);
      border-radius: 4px;
      color: var(--seal);
      font-size: 10px;
      line-height: 1;
      letter-spacing: 0;
    }

    .relationship-match-screen.is-report-step .relationship-overview-proof-head small {
      color: rgba(117, 98, 68, 0.82);
      font-size: 13px;
      letter-spacing: 0.1em;
      white-space: nowrap;
    }

    .relationship-match-screen.is-report-step .relationship-overview-proof-list {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .relationship-match-screen.is-report-step .relationship-overview-proof-list article {
      display: grid;
      grid-template-columns: 31px minmax(0, 1fr);
      gap: 10px;
      min-width: 0;
      padding: 4px 16px 2px;
      border-right: 1px solid rgba(173, 138, 77, 0.16);
    }

    .relationship-match-screen.is-report-step .relationship-overview-proof-list article:first-child {
      padding-left: 2px;
    }

    .relationship-match-screen.is-report-step .relationship-overview-proof-list article:last-child {
      padding-right: 2px;
      border-right: 0;
    }

    .relationship-match-screen.is-report-step .relationship-overview-proof-list i {
      display: inline-grid;
      place-items: center;
      width: 28px;
      height: 28px;
      margin-top: 1px;
      border: 1px solid rgba(184, 54, 43, 0.38);
      border-radius: 50%;
      background:
        radial-gradient(circle at 35% 30%, rgba(255, 252, 247, 0.92), rgba(248, 238, 216, 0.62));
      color: var(--seal);
      font-family: var(--serif);
      font-size: 14px;
      font-style: normal;
      font-weight: 800;
      box-shadow: 0 8px 16px rgba(173, 138, 77, 0.1);
    }

    .relationship-match-screen.is-report-step .relationship-overview-proof-list strong {
      display: block;
      margin: 0 0 5px;
      overflow: hidden;
      color: #8d642f;
      font-size: 14px;
      font-weight: 800;
      line-height: 1.35;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .relationship-match-screen.is-report-step .relationship-overview-proof-list p {
      display: -webkit-box;
      margin: 0;
      overflow: hidden;
      color: rgba(24, 23, 21, 0.66);
      font-size: 12.5px;
      line-height: 1.68;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
    }

    .relationship-match-screen.is-report-step .relationship-overview-evidence {
      display: none !important;
    }

    @media (max-width: 520px) {
      .relationship-match-screen.is-report-step .relationship-overview-proof {
        gap: 12px;
        padding: 16px 0 12px;
      }

      .relationship-match-screen.is-report-step .relationship-overview-proof-head {
        align-items: flex-start;
        flex-direction: column;
        gap: 3px;
      }

      .relationship-match-screen.is-report-step .relationship-overview-proof-head small {
        font-size: 12px;
        letter-spacing: 0.06em;
      }

      .relationship-match-screen.is-report-step .relationship-overview-proof-list {
        grid-template-columns: 1fr;
        gap: 0;
      }

      .relationship-match-screen.is-report-step .relationship-overview-proof-list article,
      .relationship-match-screen.is-report-step .relationship-overview-proof-list article:first-child,
      .relationship-match-screen.is-report-step .relationship-overview-proof-list article:last-child {
        padding: 10px 0;
        border-right: 0;
        border-bottom: 1px solid rgba(173, 138, 77, 0.13);
      }

      .relationship-match-screen.is-report-step .relationship-overview-proof-list article:last-child {
        border-bottom: 0;
      }

      .relationship-match-screen.is-report-step .relationship-overview-proof-list p {
        -webkit-line-clamp: 2;
      }
    }

    .relationship-match-screen.is-report-step .relationship-overview-proof-section {
      display: grid;
      gap: 10px;
      padding: 18px 0 0;
      border-top: 1px solid rgba(173, 138, 77, 0.14);
    }

    .relationship-match-screen.is-report-step .relationship-overview-proof-head + .relationship-overview-proof-section {
      padding-top: 4px;
      border-top: 0;
    }

    .relationship-match-screen.is-report-step .relationship-overview-proof-section h3 {
      display: flex;
      align-items: center;
      gap: 9px;
      margin: 0;
      color: rgba(24, 23, 21, 0.9);
      font-family: var(--serif);
      font-size: clamp(18px, 4.1vw, 23px);
      font-weight: 800;
      letter-spacing: 0.08em;
    }

    .relationship-match-screen.is-report-step .relationship-overview-proof-section h3::before {
      content: "";
      width: 20px;
      height: 1px;
      background: linear-gradient(90deg, rgba(184, 54, 43, 0.72), rgba(173, 138, 77, 0.18));
    }

    .relationship-match-screen.is-report-step .relationship-overview-proof-section > p {
      max-width: 38em;
      margin: -2px 0 0;
      color: rgba(24, 23, 21, 0.62);
      font-size: 13px;
      line-height: 1.75;
    }

    .relationship-match-screen.is-report-step .relationship-overview-proof .relationship-bazi-matrix {
      border-color: rgba(173, 138, 77, 0.2);
      border-radius: 0;
      background:
        linear-gradient(180deg, rgba(255, 252, 247, 0.44), rgba(248, 239, 217, 0.18));
      box-shadow: inset 0 0 0 1px rgba(255, 252, 247, 0.32);
    }

    .relationship-match-screen.is-report-step .relationship-overview-proof .relationship-bazi-matrix-head,
    .relationship-match-screen.is-report-step .relationship-overview-proof .relationship-bazi-matrix-row {
      grid-template-columns: 38px repeat(4, minmax(0, 1fr));
    }

    .relationship-match-screen.is-report-step .relationship-overview-proof .relationship-bazi-matrix-head span,
    .relationship-match-screen.is-report-step .relationship-overview-proof .relationship-bazi-matrix-row > b,
    .relationship-match-screen.is-report-step .relationship-overview-proof .relationship-bazi-matrix-row > span {
      min-height: 42px;
      border-color: rgba(173, 138, 77, 0.13);
    }

    .relationship-match-screen.is-report-step .relationship-overview-layer-list {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      border-top: 1px solid rgba(173, 138, 77, 0.12);
    }

    .relationship-match-screen.is-report-step .relationship-overview-layer-list div {
      display: grid;
      gap: 4px;
      min-width: 0;
      padding: 11px 14px 11px 0;
      border-bottom: 1px solid rgba(173, 138, 77, 0.12);
    }

    .relationship-match-screen.is-report-step .relationship-overview-layer-list div:nth-child(2n) {
      padding-right: 0;
      padding-left: 14px;
      border-left: 1px solid rgba(173, 138, 77, 0.12);
    }

    .relationship-match-screen.is-report-step .relationship-overview-layer-list strong,
    .relationship-match-screen.is-report-step .relationship-overview-proof-list.is-full strong {
      overflow: visible;
      color: #8d642f;
      font-size: 14px;
      line-height: 1.42;
      text-overflow: clip;
      white-space: normal;
    }

    .relationship-match-screen.is-report-step .relationship-overview-layer-list p,
    .relationship-match-screen.is-report-step .relationship-overview-proof-list.is-full p {
      display: block;
      margin: 0;
      overflow: visible;
      color: rgba(24, 23, 21, 0.64);
      font-size: 12.5px;
      line-height: 1.72;
      -webkit-line-clamp: initial;
    }

    .relationship-match-screen.is-report-step .relationship-overview-proof .relationship-element-legend {
      justify-content: flex-start;
      color: rgba(117, 98, 68, 0.76);
      font-family: var(--serif);
      letter-spacing: 0.08em;
    }

    .relationship-match-screen.is-report-step .relationship-overview-proof .relationship-element-compare {
      gap: 11px;
      padding-top: 2px;
    }

    .relationship-match-screen.is-report-step .relationship-overview-proof .relationship-element-row {
      grid-template-columns: 30px minmax(0, 1fr) 68px;
      padding-bottom: 8px;
      border-bottom: 1px solid rgba(173, 138, 77, 0.1);
    }

    .relationship-match-screen.is-report-step .relationship-overview-proof .relationship-element-row:last-child {
      border-bottom: 0;
      padding-bottom: 0;
    }

    .relationship-match-screen.is-report-step .relationship-overview-proof-list.is-full {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 0;
      border-top: 1px solid rgba(173, 138, 77, 0.12);
    }

    .relationship-match-screen.is-report-step .relationship-overview-proof-list.is-full article,
    .relationship-match-screen.is-report-step .relationship-overview-proof-list.is-full article:first-child,
    .relationship-match-screen.is-report-step .relationship-overview-proof-list.is-full article:last-child {
      padding: 12px 14px 12px 0;
      border-right: 0;
      border-bottom: 1px solid rgba(173, 138, 77, 0.12);
    }

    .relationship-match-screen.is-report-step .relationship-overview-proof-list.is-full article:nth-child(2n) {
      padding-right: 0;
      padding-left: 14px;
      border-left: 1px solid rgba(173, 138, 77, 0.12);
    }

    .relationship-match-screen.is-report-step .relationship-overview-proof-list.is-full i {
      margin-top: 0;
    }

    .relationship-match-screen.is-report-step .relationship-overview-caveats {
      display: grid;
      gap: 8px;
      padding: 2px 0 0;
    }

    .relationship-match-screen.is-report-step .relationship-overview-caveats p {
      margin: 0;
      padding-left: 12px;
      border-left: 2px solid rgba(173, 138, 77, 0.24);
      color: rgba(24, 23, 21, 0.56);
      font-size: 12.5px;
      line-height: 1.7;
    }

    @media (max-width: 520px) {
      .relationship-match-screen.is-report-step .relationship-overview-proof-section {
        gap: 9px;
        padding-top: 15px;
      }

      .relationship-match-screen.is-report-step .relationship-overview-layer-list,
      .relationship-match-screen.is-report-step .relationship-overview-proof-list.is-full {
        grid-template-columns: 1fr;
      }

      .relationship-match-screen.is-report-step .relationship-overview-layer-list div,
      .relationship-match-screen.is-report-step .relationship-overview-layer-list div:nth-child(2n),
      .relationship-match-screen.is-report-step .relationship-overview-proof-list.is-full article,
      .relationship-match-screen.is-report-step .relationship-overview-proof-list.is-full article:first-child,
      .relationship-match-screen.is-report-step .relationship-overview-proof-list.is-full article:last-child,
      .relationship-match-screen.is-report-step .relationship-overview-proof-list.is-full article:nth-child(2n) {
        padding: 11px 0;
        border-left: 0;
        border-right: 0;
      }

      .relationship-match-screen.is-report-step .relationship-overview-proof .relationship-bazi-matrix {
        margin-right: -2px;
        margin-left: -2px;
      }

      .relationship-match-screen.is-report-step .relationship-overview-proof .relationship-bazi-matrix-row i {
        font-size: 15px;
      }
    }

    /* Relationship overview: poem + brief proof layout from the final design draft. */
    .relationship-match-screen.is-report-step .relationship-energy-card > blockquote {
      position: relative;
      display: grid;
      place-items: center;
      width: 100%;
      min-height: 146px;
      margin: -2px 0 0;
      padding: 18px 88px 14px;
      color: rgba(24, 23, 21, 0.88);
      font-family: var(--kai);
      font-size: clamp(20px, 5.3vw, 27px);
      line-height: 1.72;
      letter-spacing: 0.11em;
      text-align: center;
      white-space: pre-line;
    }

    .relationship-match-screen.is-report-step .relationship-energy-card > blockquote::before,
    .relationship-match-screen.is-report-step .relationship-energy-card > blockquote::after {
      content: "";
      position: absolute;
      top: 50%;
      width: 88px;
      height: 46px;
      background: url("/prototype/assets/relationship-match/fate/generated/relationship-fate-cloud-imagen-v1.png") center / contain no-repeat;
      opacity: 0.58;
      transform: translateY(-50%);
      pointer-events: none;
    }

    .relationship-match-screen.is-report-step .relationship-energy-card > blockquote::before {
      left: 8px;
    }

    .relationship-match-screen.is-report-step .relationship-energy-card > blockquote::after {
      right: 8px;
      transform: translateY(-50%) scaleX(-1);
    }

    .relationship-match-screen.is-report-step .relationship-energy-copy {
      padding-bottom: 14px;
      border-bottom: 1px solid rgba(173, 138, 77, 0.16);
    }

    .relationship-match-screen.is-report-step .relationship-energy-copy h2 {
      margin-bottom: 6px;
    }

    .relationship-match-screen.is-report-step .relationship-energy-copy .relationship-energy-metrics {
      width: min(350px, 100%);
      margin: 8px 0 12px;
    }

    .relationship-match-screen.is-report-step .relationship-energy-copy p:not(.relationship-energy-verdict) {
      max-width: 31em;
    }

    .relationship-match-screen.is-report-step .relationship-overview-proof {
      gap: 0;
      margin-top: 2px;
      padding: 17px 26px 4px;
      border-top: 0;
      border-bottom: 0;
      border-left: 1px solid rgba(173, 138, 77, 0.18);
      border-right: 1px solid rgba(173, 138, 77, 0.18);
      background: transparent;
    }

    .relationship-match-screen.is-report-step .relationship-overview-proof::before {
      top: 21px;
      width: min(100%, 520px);
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(173, 138, 77, 0.34), transparent);
      opacity: 0.86;
    }

    .relationship-match-screen.is-report-step .relationship-overview-proof-head {
      position: relative;
      justify-content: center;
      margin: 0 0 12px;
      padding: 0 88px;
      text-align: center;
      z-index: 1;
    }

    .relationship-match-screen.is-report-step .relationship-overview-proof-head span {
      padding: 0 14px;
      background: rgba(252, 247, 236, 0.92);
      color: #ad8a4d;
      font-size: clamp(24px, 6vw, 31px);
      letter-spacing: 0.18em;
    }

    .relationship-match-screen.is-report-step .relationship-overview-proof-head span::after {
      content: none;
    }

    .relationship-match-screen.is-report-step .relationship-overview-proof-head small {
      display: none;
    }

    .relationship-match-screen.is-report-step .relationship-overview-proof-guide {
      max-width: 37em;
      margin: -4px auto 12px;
      color: rgba(117, 98, 68, 0.62);
      font-size: 12.5px;
      line-height: 1.62;
      text-align: center;
    }

    .relationship-match-screen.is-report-step .relationship-expanded-section .relationship-overview-proof-guide {
      max-width: none;
      margin: -3px 0 2px;
      text-align: left;
    }

    .relationship-match-screen.is-report-step .relationship-proof-brief-row {
      display: grid;
      grid-template-columns: 52px 92px minmax(0, 1fr);
      align-items: center;
      gap: 12px;
      min-height: 68px;
      padding: 9px 8px 9px 2px;
      border-bottom: 1px solid rgba(173, 138, 77, 0.16);
    }

    .relationship-match-screen.is-report-step .relationship-proof-brief-row:last-of-type {
      border-bottom: 0;
    }

    .relationship-match-screen.is-report-step .relationship-proof-icon {
      display: grid;
      place-items: center;
      width: 52px;
      height: 52px;
      border: 1px solid rgba(173, 138, 77, 0.34);
      border-radius: 50%;
      background:
        radial-gradient(circle at 50% 38%, rgba(255, 252, 247, 0.96), rgba(248, 239, 217, 0.42) 70%),
        rgba(255, 252, 247, 0.58);
      box-shadow: 0 8px 18px rgba(173, 138, 77, 0.08);
      overflow: hidden;
    }

    .relationship-match-screen.is-report-step .relationship-proof-icon img {
      width: 70%;
      height: 70%;
      object-fit: contain;
    }

    .relationship-match-screen.is-report-step .relationship-proof-brief-row strong {
      color: rgba(24, 23, 21, 0.88);
      font-family: var(--serif);
      font-size: clamp(15px, 3.7vw, 18px);
      letter-spacing: 0.04em;
      white-space: nowrap;
    }

    .relationship-match-screen.is-report-step .relationship-proof-brief-row p {
      margin: 0;
      color: rgba(24, 23, 21, 0.58);
      font-size: 13.5px;
      line-height: 1.66;
      text-wrap: pretty;
    }

    .relationship-match-screen.is-report-step .relationship-overview-proof-expanded {
      display: grid;
      gap: 16px;
      margin: 20px 0 0;
      padding: 18px 0 0;
      border-top: 1px solid rgba(173, 138, 77, 0.2);
      border-right: 0;
      border-bottom: 0;
      border-left: 0;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
    }

    .relationship-match-screen.is-report-step .relationship-overview-proof-expanded-head {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 12px;
      padding: 0 0 8px;
      border-bottom: 1px solid rgba(173, 138, 77, 0.18);
    }

    .relationship-match-screen.is-report-step .relationship-overview-proof-expanded-head strong {
      color: rgba(24, 23, 21, 0.92);
      font-family: var(--serif);
      font-size: 22px;
      letter-spacing: 0.12em;
    }

    .relationship-match-screen.is-report-step .relationship-overview-proof-expanded-head span {
      color: rgba(117, 98, 68, 0.6);
      font-size: 12px;
      line-height: 1.5;
      text-align: right;
    }

    .relationship-match-screen.is-report-step .relationship-expanded-section {
      display: grid;
      gap: 10px;
      padding: 2px 0 14px;
      border-bottom: 1px solid rgba(173, 138, 77, 0.14);
    }

    .relationship-match-screen.is-report-step .relationship-expanded-section:last-child {
      border-bottom: 0;
      padding-bottom: 2px;
    }

    .relationship-match-screen.is-report-step .relationship-expanded-section h3 {
      display: flex;
      align-items: baseline;
      gap: 9px;
      margin: 0;
      color: #9f743b;
      font-family: var(--serif);
      font-size: 19px;
      letter-spacing: 0.12em;
      line-height: 1.35;
    }

    .relationship-match-screen.is-report-step .relationship-expanded-section h3 small {
      color: rgba(117, 98, 68, 0.56);
      font-family: var(--sans);
      font-size: 12px;
      font-weight: 500;
      letter-spacing: 0.04em;
    }

    .relationship-match-screen.is-report-step .relationship-expanded-posts {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr);
      align-items: center;
      gap: 10px;
    }

    .relationship-match-screen.is-report-step .relationship-expanded-posts > i {
      display: grid;
      place-items: center;
      width: 40px;
      height: 40px;
      border: 1px solid rgba(190, 58, 47, 0.32);
      border-radius: 12px;
      background: rgba(255, 252, 247, 0.76);
      color: #b33a2e;
      font-family: var(--serif);
      font-size: 24px;
      font-style: normal;
      box-shadow: 0 8px 18px rgba(173, 138, 77, 0.1);
    }

    .relationship-match-screen.is-report-step .relationship-expanded-post {
      display: grid;
      grid-template-columns: 46px minmax(0, 1fr);
      gap: 8px 10px;
      min-width: 0;
      padding: 12px;
      border: 1px solid rgba(173, 138, 77, 0.2);
      border-radius: 10px;
      background:
        radial-gradient(circle at 18% 18%, color-mix(in srgb, var(--post-color) 13%, transparent), transparent 42%),
        rgba(255, 252, 247, 0.5);
    }

    .relationship-match-screen.is-report-step .relationship-expanded-post-orb {
      grid-row: span 2;
      display: grid;
      place-items: center;
      width: 42px;
      height: 42px;
      border: 1px solid color-mix(in srgb, var(--post-color) 54%, rgba(173, 138, 77, 0.22));
      border-radius: 50%;
      color: var(--post-color);
      font-family: var(--serif);
      font-size: 24px;
      font-weight: 700;
      background: rgba(255, 252, 247, 0.62);
    }

    .relationship-match-screen.is-report-step .relationship-expanded-post small {
      display: block;
      color: rgba(117, 98, 68, 0.58);
      font-size: 11px;
      line-height: 1.5;
    }

    .relationship-match-screen.is-report-step .relationship-expanded-post strong {
      display: block;
      color: rgba(24, 23, 21, 0.92);
      font-family: var(--serif);
      font-size: 18px;
      line-height: 1.3;
    }

    .relationship-match-screen.is-report-step .relationship-expanded-post dl {
      grid-column: 1 / -1;
      display: grid;
      gap: 6px;
      margin: 4px 0 0;
      padding-top: 8px;
      border-top: 1px solid rgba(173, 138, 77, 0.13);
    }

    .relationship-match-screen.is-report-step .relationship-expanded-post dl div,
    .relationship-match-screen.is-report-step .relationship-expanded-flow-grid aside p {
      display: grid;
      grid-template-columns: 44px minmax(0, 1fr);
      gap: 8px;
      margin: 0;
      color: rgba(24, 23, 21, 0.62);
      font-size: 12px;
      line-height: 1.55;
    }

    .relationship-match-screen.is-report-step .relationship-expanded-post dt {
      color: rgba(117, 98, 68, 0.56);
    }

    .relationship-match-screen.is-report-step .relationship-expanded-post dd {
      margin: 0;
      color: rgba(24, 23, 21, 0.72);
    }

    .relationship-match-screen.is-report-step .relationship-overview-proof-expanded .relationship-bazi-matrix {
      margin: 0;
      border-color: rgba(173, 138, 77, 0.2);
      background: rgba(255, 252, 247, 0.32);
      font-size: 12px;
    }

    .relationship-match-screen.is-report-step .relationship-overview-proof-expanded .relationship-bazi-matrix-head,
    .relationship-match-screen.is-report-step .relationship-overview-proof-expanded .relationship-bazi-matrix-row {
      grid-template-columns: 44px repeat(4, minmax(0, 1fr));
    }

    .relationship-match-screen.is-report-step .relationship-expanded-flow-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.15fr) minmax(150px, 0.85fr);
      gap: 12px;
      align-items: stretch;
    }

    .relationship-match-screen.is-report-step .relationship-overview-proof-expanded .relationship-element-compare {
      gap: 0;
      padding: 8px 10px;
      border: 1px solid rgba(173, 138, 77, 0.16);
      border-radius: 10px;
      background: rgba(255, 252, 247, 0.32);
    }

    .relationship-match-screen.is-report-step .relationship-overview-proof-expanded .relationship-element-row {
      grid-template-columns: 28px minmax(0, 1fr) 54px;
      gap: 8px;
      padding: 7px 0;
    }

    .relationship-match-screen.is-report-step .relationship-overview-proof-expanded .relationship-element-row span,
    .relationship-match-screen.is-report-step .relationship-overview-proof-expanded .relationship-element-row small {
      font-size: 11px;
    }

    .relationship-match-screen.is-report-step .relationship-expanded-flow-grid aside {
      display: grid;
      gap: 8px;
      padding: 10px;
      border: 1px solid rgba(173, 138, 77, 0.16);
      border-radius: 10px;
      background: rgba(255, 252, 247, 0.42);
    }

    .relationship-match-screen.is-report-step .relationship-expanded-flow-grid aside p {
      grid-template-columns: 1fr;
      gap: 3px;
    }

    .relationship-match-screen.is-report-step .relationship-expanded-flow-grid aside b {
      color: #a9793e;
      font-family: var(--serif);
      font-size: 14px;
      letter-spacing: 0.08em;
    }

    .relationship-match-screen.is-report-step .relationship-wuxing-flow {
      display: grid;
      gap: 16px;
      padding: 2px 0 4px;
    }

    .relationship-match-screen.is-report-step .relationship-wuxing-flow-map {
      position: relative;
      display: grid;
      grid-template-columns: minmax(92px, 1fr) 94px minmax(92px, 1fr);
      align-items: center;
      gap: 8px;
      min-height: 258px;
      padding: 20px 16px 56px;
      overflow: hidden;
      border: 1px solid rgba(173, 138, 77, 0.18);
      border-radius: 18px;
      background:
        radial-gradient(circle at 50% 46%, rgba(218, 181, 99, 0.2), transparent 34%),
        radial-gradient(circle at 18% 26%, rgba(45, 113, 130, 0.08), transparent 28%),
        radial-gradient(circle at 83% 30%, rgba(76, 139, 102, 0.08), transparent 30%),
        linear-gradient(180deg, rgba(255, 252, 247, 0.54), rgba(252, 247, 236, 0.2));
      box-shadow: inset 0 0 0 1px rgba(255, 252, 247, 0.45);
    }

    .relationship-match-screen.is-report-step .relationship-wuxing-flow-map > img {
      position: absolute;
      left: 50%;
      top: 52%;
      width: min(540px, 88%);
      max-width: none;
      opacity: 0.5;
      transform: translate(-50%, -50%);
      pointer-events: none;
      filter: saturate(0.9);
    }

    .relationship-match-screen.is-report-step .relationship-wuxing-side,
    .relationship-match-screen.is-report-step .relationship-wuxing-center {
      position: relative;
      z-index: 1;
    }

    .relationship-match-screen.is-report-step .relationship-wuxing-side {
      display: grid;
      justify-items: center;
      align-items: start;
      gap: 6px;
      min-width: 0;
      min-height: 184px;
      padding: 12px 10px 14px;
      border: 1px solid color-mix(in srgb, var(--side-color) 28%, rgba(173, 138, 77, 0.16));
      border-radius: 14px;
      background:
        linear-gradient(180deg, rgba(255, 252, 247, 0.78), rgba(252, 246, 233, 0.5)),
        color-mix(in srgb, var(--side-color) 6%, transparent);
      box-shadow:
        0 12px 26px rgba(72, 51, 32, 0.06),
        inset 0 0 0 6px rgba(255, 252, 247, 0.22);
    }

    .relationship-match-screen.is-report-step .relationship-wuxing-side small {
      display: grid;
      place-items: center;
      min-width: 46px;
      height: 24px;
      padding: 0 10px;
      border: 1px solid color-mix(in srgb, var(--side-color) 24%, rgba(173, 138, 77, 0.18));
      border-radius: 999px;
      background: rgba(255, 252, 247, 0.55);
      color: color-mix(in srgb, var(--side-color) 70%, #9f743b);
      font-family: var(--serif);
      font-size: 13px;
      font-weight: 800;
      line-height: 1;
    }

    .relationship-match-screen.is-report-step .relationship-wuxing-side strong {
      display: block;
      max-width: 96px;
      overflow: hidden;
      color: rgba(24, 23, 21, 0.88);
      font-family: var(--serif);
      font-size: 20px;
      line-height: 1.35;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .relationship-match-screen.is-report-step .relationship-wuxing-side > span {
      display: grid;
      place-items: center;
      width: 62px;
      height: 62px;
      margin-top: 2px;
      border: 1px solid color-mix(in srgb, var(--side-color) 58%, rgba(173, 138, 77, 0.2));
      border-radius: 50%;
      background: color-mix(in srgb, var(--side-color) 10%, rgba(255, 252, 247, 0.88));
      color: var(--side-color);
      font-family: var(--serif);
      font-size: 32px;
      font-weight: 900;
      box-shadow: 0 0 0 6px color-mix(in srgb, var(--side-color) 6%, transparent);
    }

    .relationship-match-screen.is-report-step .relationship-wuxing-side b {
      color: var(--side-color);
      font-family: var(--serif);
      font-size: 16px;
      font-weight: 800;
      line-height: 1.2;
    }

    .relationship-match-screen.is-report-step .relationship-wuxing-side em {
      color: rgba(117, 98, 68, 0.62);
      font-size: 12px;
      font-style: normal;
      line-height: 1.35;
    }

    .relationship-match-screen.is-report-step .relationship-wuxing-center {
      justify-self: center;
      display: grid;
      place-items: center;
      align-content: center;
      gap: 2px;
      width: 88px;
      min-height: 88px;
      padding: 10px 8px;
      border: 1px solid rgba(190, 58, 47, 0.26);
      border-radius: 24px;
      background:
        radial-gradient(circle at 50% 44%, rgba(255, 252, 247, 0.96), rgba(248, 239, 217, 0.72)),
        rgba(255, 252, 247, 0.82);
      box-shadow:
        0 0 0 10px rgba(190, 58, 47, 0.05),
        0 16px 32px rgba(72, 51, 32, 0.1);
      text-align: center;
    }

    .relationship-match-screen.is-report-step .relationship-wuxing-center small {
      color: rgba(117, 98, 68, 0.58);
      font-size: 11px;
      letter-spacing: 0.08em;
    }

    .relationship-match-screen.is-report-step .relationship-wuxing-center strong {
      color: #b33a2e;
      font-family: var(--serif);
      font-size: 34px;
      letter-spacing: 0;
      line-height: 1.25;
    }

    .relationship-match-screen.is-report-step .relationship-wuxing-center em {
      color: rgba(24, 23, 21, 0.58);
      font-size: 11px;
      font-style: normal;
      line-height: 1.35;
    }

    .relationship-match-screen.is-report-step .relationship-wuxing-main-phrase {
      position: absolute;
      z-index: 1;
      left: 50%;
      bottom: 20px;
      margin: 0;
      color: #b33a2e;
      font-family: var(--serif);
      font-size: 24px;
      font-weight: 900;
      letter-spacing: 0.06em;
      line-height: 1;
      transform: translateX(-50%);
    }

    .relationship-match-screen.is-report-step .relationship-wuxing-main-note {
      position: relative;
      max-width: 520px;
      margin: -2px auto 0;
      padding: 0 44px;
      color: rgba(24, 23, 21, 0.72);
      font-size: 15px;
      line-height: 1.75;
      text-align: center;
    }

    .relationship-match-screen.is-report-step .relationship-wuxing-main-note::before,
    .relationship-match-screen.is-report-step .relationship-wuxing-main-note::after {
      content: "";
      position: absolute;
      top: 50%;
      width: 30px;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(173, 138, 77, 0.42), transparent);
    }

    .relationship-match-screen.is-report-step .relationship-wuxing-main-note::before {
      left: 0;
    }

    .relationship-match-screen.is-report-step .relationship-wuxing-main-note::after {
      right: 0;
    }

    .relationship-match-screen.is-report-step .relationship-wuxing-ripple {
      display: grid;
      gap: 12px;
      padding-top: 6px;
    }

    .relationship-match-screen.is-report-step .relationship-wuxing-ripple h4 {
      display: grid;
      grid-template-columns: minmax(40px, 1fr) auto minmax(40px, 1fr);
      align-items: center;
      gap: 14px;
      margin: 0;
      color: #aa7f3f;
      font-family: var(--serif);
      font-size: 22px;
      letter-spacing: 0.12em;
      text-align: center;
    }

    .relationship-match-screen.is-report-step .relationship-wuxing-ripple h4::before,
    .relationship-match-screen.is-report-step .relationship-wuxing-ripple h4::after {
      content: "";
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(173, 138, 77, 0.34), transparent);
    }

    .relationship-match-screen.is-report-step .relationship-wuxing-ripple-list {
      position: relative;
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 8px;
      padding: 4px 0 8px;
    }

    .relationship-match-screen.is-report-step .relationship-wuxing-ripple-list::before {
      content: "";
      position: absolute;
      left: 5%;
      right: 5%;
      top: 44px;
      height: 12px;
      border-radius: 999px;
      background:
        linear-gradient(90deg, rgba(76, 139, 102, 0.12), rgba(163, 58, 44, 0.11), rgba(189, 145, 75, 0.12), rgba(126, 133, 130, 0.1), rgba(45, 113, 130, 0.12));
      filter: blur(6px);
    }

    .relationship-match-screen.is-report-step .relationship-wuxing-ripple-item {
      position: relative;
      z-index: 1;
      display: grid;
      justify-items: center;
      gap: 5px;
      min-width: 0;
      color: rgba(24, 23, 21, 0.6);
      text-align: center;
    }

    .relationship-match-screen.is-report-step .relationship-wuxing-ripple-item b {
      display: grid;
      place-items: center;
      width: 42px;
      height: 42px;
      border: 1px solid color-mix(in srgb, var(--flow-color) 24%, rgba(173, 138, 77, 0.16));
      border-radius: 50%;
      background: color-mix(in srgb, var(--flow-color) 15%, rgba(255, 252, 247, 0.8));
      color: var(--flow-color);
      font-family: var(--serif);
      font-size: 20px;
      font-weight: 800;
    }

    .relationship-match-screen.is-report-step .relationship-wuxing-ripple-item i {
      display: block;
      width: min(46px, 82%);
      height: 6px;
      border-radius: 999px;
      background: color-mix(in srgb, var(--flow-color) 50%, rgba(255, 252, 247, 0.64));
      opacity: 0.78;
      transform-origin: center;
    }

    .relationship-match-screen.is-report-step .relationship-wuxing-ripple-item.is-left i::after,
    .relationship-match-screen.is-report-step .relationship-wuxing-ripple-item.is-right i::after {
      content: "";
      display: block;
      width: min(100%, var(--flow-strength));
      height: 100%;
      border-radius: inherit;
      background: var(--flow-color);
    }

    .relationship-match-screen.is-report-step .relationship-wuxing-ripple-item.is-balanced i {
      background: rgba(173, 138, 77, 0.18);
    }

    .relationship-match-screen.is-report-step .relationship-wuxing-ripple-item span {
      color: rgba(117, 98, 68, 0.58);
      font-size: 11px;
      text-align: center;
      white-space: nowrap;
    }

    .relationship-match-screen.is-report-step .relationship-wuxing-ripple-item small {
      color: rgba(24, 23, 21, 0.58);
      font-size: 11px;
      line-height: 1.2;
    }

    .relationship-match-screen.is-report-step .relationship-wuxing-ripple-help {
      margin: -2px 0 0;
      color: rgba(117, 98, 68, 0.62);
      font-size: 12px;
      line-height: 1.55;
      text-align: center;
    }

    .relationship-match-screen.is-report-step .relationship-wuxing-flow-notes {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
    }

    .relationship-match-screen.is-report-step .relationship-wuxing-flow-notes article {
      position: relative;
      display: grid;
      grid-template-columns: 46px minmax(0, 1fr);
      grid-template-rows: auto auto;
      gap: 3px 12px;
      align-items: start;
      min-height: 106px;
      padding: 14px 14px 14px 12px;
      overflow: visible;
      border: 1px solid rgba(173, 138, 77, 0.16);
      border-radius: 14px;
      background: rgba(255, 252, 247, 0.4);
    }

    .relationship-match-screen.is-report-step .relationship-wuxing-flow-notes article::before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(120deg, rgba(76, 139, 102, 0.05), transparent 52%);
      pointer-events: none;
    }

    .relationship-match-screen.is-report-step .relationship-wuxing-flow-notes article.is-drain::before {
      background: linear-gradient(120deg, rgba(163, 58, 44, 0.05), transparent 52%);
    }

    .relationship-match-screen.is-report-step .relationship-wuxing-flow-notes img {
      grid-row: 1 / 3;
      width: 46px;
      height: 46px;
      object-fit: contain;
      opacity: 0.72;
      filter: saturate(0.85);
    }

    .relationship-match-screen.is-report-step .relationship-wuxing-flow-notes b {
      position: relative;
      color: #9f743b;
      font-family: var(--serif);
      font-size: 18px;
      line-height: 1.35;
    }

    .relationship-match-screen.is-report-step .relationship-wuxing-flow-notes p {
      position: relative;
      margin: 0;
      color: rgba(24, 23, 21, 0.62);
      font-size: 12.5px;
      line-height: 1.62;
    }

    .relationship-match-screen.is-report-step .relationship-expanded-rule-list {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }

    .relationship-match-screen.is-report-step .relationship-expanded-rule-list article {
      padding: 10px 11px;
      border: 1px solid rgba(173, 138, 77, 0.15);
      border-radius: 9px;
      background: rgba(255, 252, 247, 0.34);
    }

    .relationship-match-screen.is-report-step .relationship-expanded-rule-list strong {
      display: block;
      margin-bottom: 5px;
      color: rgba(24, 23, 21, 0.84);
      font-family: var(--serif);
      font-size: 15px;
      letter-spacing: 0.06em;
    }

    .relationship-match-screen.is-report-step .relationship-expanded-rule-list p,
    .relationship-match-screen.is-report-step .relationship-expanded-balance p {
      margin: 0;
      color: rgba(24, 23, 21, 0.6);
      font-size: 12.5px;
      line-height: 1.68;
    }

    .relationship-match-screen.is-report-step .relationship-expanded-balance {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }

    .relationship-match-screen.is-report-step .relationship-expanded-balance article {
      display: grid;
      grid-template-columns: 42px minmax(0, 1fr);
      gap: 9px;
      align-items: start;
      padding: 11px;
      border-radius: 10px;
      border: 1px solid rgba(173, 138, 77, 0.17);
      background: rgba(255, 252, 247, 0.4);
    }

    .relationship-match-screen.is-report-step .relationship-expanded-balance b {
      display: grid;
      place-items: center;
      width: 36px;
      height: 36px;
      border-radius: 50%;
      font-family: var(--serif);
      font-size: 20px;
    }

    .relationship-match-screen.is-report-step .relationship-expanded-balance .is-help b {
      color: #4f8b62;
      background: rgba(87, 144, 98, 0.1);
    }

    .relationship-match-screen.is-report-step .relationship-expanded-balance .is-risk b {
      color: #b33a2e;
      background: rgba(190, 58, 47, 0.1);
    }

    .relationship-match-screen.is-report-step .relationship-overview-actions {
      display: grid;
      grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
      align-items: center;
      gap: 18px;
      margin-top: 10px;
      padding: 0 18px;
    }

    .relationship-match-screen.is-report-step .relationship-overview-actions button {
      min-height: 58px;
      font-size: 16px;
      letter-spacing: 0.12em;
    }

    .relationship-match-screen.is-report-step .relationship-overview-actions button.primary {
      border-color: rgba(123, 34, 27, 0.62);
      border-radius: 12px;
      background:
        radial-gradient(circle at 20% 18%, rgba(232, 197, 116, 0.22), transparent 34%),
        linear-gradient(180deg, #c43b2e, #8e241b);
      box-shadow:
        inset 0 0 0 2px rgba(255, 230, 185, 0.14),
        0 12px 22px rgba(123, 34, 27, 0.2);
      clip-path: polygon(16px 0, calc(100% - 16px) 0, 100% 12px, 100% calc(100% - 12px), calc(100% - 16px) 100%, 16px 100%, 0 calc(100% - 12px), 0 12px);
    }

    .relationship-match-screen.is-report-step .relationship-overview-actions button.link {
      min-height: auto;
      border: 0;
      background: transparent;
      color: #9f743b;
      box-shadow: none;
      clip-path: none;
      font-size: 17px;
    }

    .relationship-match-screen.is-report-step .relationship-overview-closing {
      display: grid;
      grid-template-columns: 68px minmax(0, 1fr);
      gap: 14px;
      align-items: center;
      margin-top: 12px;
      padding: 14px 18px;
      border: 1px solid rgba(173, 138, 77, 0.24);
      border-radius: 10px;
      background:
        radial-gradient(circle at 42px 50%, rgba(173, 138, 77, 0.08), transparent 46px),
        rgba(255, 252, 247, 0.28);
      box-shadow: inset 0 0 0 1px rgba(255, 252, 247, 0.28);
    }

    .relationship-match-screen.is-report-step .relationship-overview-closing-icon {
      display: grid;
      place-items: center;
      width: 62px;
      height: 62px;
      border: 1px solid rgba(173, 138, 77, 0.26);
      border-radius: 50%;
      background:
        radial-gradient(circle at 50% 42%, rgba(255, 252, 247, 0.96), rgba(248, 239, 217, 0.48) 72%),
        rgba(255, 252, 247, 0.5);
      box-shadow: 0 9px 18px rgba(173, 138, 77, 0.08);
      overflow: hidden;
    }

    .relationship-match-screen.is-report-step .relationship-overview-closing-icon img {
      width: 54px;
      height: 54px;
      object-fit: contain;
      object-position: center;
      opacity: 0.76;
      filter: sepia(0.18) saturate(0.86) contrast(0.92);
    }

    .relationship-match-screen.is-report-step .relationship-overview-closing h3 {
      display: flex;
      align-items: center;
      gap: 8px;
      margin: 0 0 6px;
      color: #ad8a4d;
      font-family: var(--serif);
      font-size: 22px;
      letter-spacing: 0.16em;
    }

    .relationship-match-screen.is-report-step .relationship-overview-closing h3 span {
      display: grid;
      place-items: center;
      width: 17px;
      height: 17px;
      border: 1px solid rgba(117, 98, 68, 0.32);
      border-radius: 4px;
      color: rgba(117, 98, 68, 0.7);
      font-size: 10px;
      letter-spacing: 0;
    }

    .relationship-match-screen.is-report-step .relationship-overview-closing p {
      margin: 0;
      color: rgba(24, 23, 21, 0.66);
      font-size: 14px;
      line-height: 1.72;
    }

    @media (max-width: 560px) {
      .relationship-match-screen.is-report-step .relationship-energy-card > blockquote {
        min-height: 134px;
        padding-inline: 50px;
        font-size: 20px;
      }

      .relationship-match-screen.is-report-step .relationship-energy-card > blockquote::before,
      .relationship-match-screen.is-report-step .relationship-energy-card > blockquote::after {
        width: 54px;
        height: 32px;
      }

      .relationship-match-screen.is-report-step .relationship-overview-proof {
        padding-inline: 14px;
      }

      .relationship-match-screen.is-report-step .relationship-proof-brief-row {
        grid-template-columns: 44px 78px minmax(0, 1fr);
        gap: 9px;
        min-height: 64px;
      }

      .relationship-match-screen.is-report-step .relationship-proof-icon {
        width: 44px;
        height: 44px;
      }

      .relationship-match-screen.is-report-step .relationship-proof-brief-row strong {
        font-size: 15px;
      }

      .relationship-match-screen.is-report-step .relationship-proof-brief-row p {
        font-size: 12.5px;
        line-height: 1.58;
      }

      .relationship-match-screen.is-report-step .relationship-overview-proof-expanded {
        margin-inline: 0;
        padding: 16px 0 0;
      }

      .relationship-match-screen.is-report-step .relationship-overview-proof-expanded-head {
        display: grid;
        gap: 3px;
      }

      .relationship-match-screen.is-report-step .relationship-overview-proof-expanded-head span {
        text-align: left;
      }

      .relationship-match-screen.is-report-step .relationship-expanded-section h3 {
        display: grid;
        gap: 2px;
        font-size: 18px;
      }

      .relationship-match-screen.is-report-step .relationship-expanded-flow-grid,
      .relationship-match-screen.is-report-step .relationship-expanded-rule-list,
      .relationship-match-screen.is-report-step .relationship-expanded-balance {
        grid-template-columns: 1fr;
      }

      /* Keep the two natal cards as a paired comparison on phones. The compact
         details grid preserves the complete profile without turning this into
         two long, unrelated cards. */
      .relationship-match-screen.is-report-step .relationship-expanded-posts {
        grid-template-columns: minmax(0, 1fr) 34px minmax(0, 1fr);
        gap: 7px;
        align-items: stretch;
      }

      .relationship-match-screen.is-report-step .relationship-expanded-posts > i {
        width: 32px;
        height: 32px;
        border-radius: 10px;
        font-size: 20px;
        transform: none;
      }

      .relationship-match-screen.is-report-step .relationship-expanded-post {
        grid-template-columns: 38px minmax(0, 1fr);
        gap: 6px 7px;
        padding: 9px 8px;
      }

      .relationship-match-screen.is-report-step .relationship-expanded-post-orb {
        width: 36px;
        height: 36px;
        font-size: 21px;
      }

      .relationship-match-screen.is-report-step .relationship-expanded-post small {
        font-size: 10px;
        line-height: 1.4;
      }

      .relationship-match-screen.is-report-step .relationship-expanded-post strong {
        font-size: 16px;
      }

      .relationship-match-screen.is-report-step .relationship-expanded-post dl {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 4px 6px;
        margin-top: 2px;
        padding-top: 6px;
      }

      .relationship-match-screen.is-report-step .relationship-expanded-post dl div {
        grid-template-columns: 28px minmax(0, 1fr);
        gap: 3px;
        font-size: 10.5px;
        line-height: 1.45;
      }

      .relationship-match-screen.is-report-step .relationship-wuxing-flow-map {
        grid-template-columns: minmax(84px, 1fr) 74px minmax(84px, 1fr);
        gap: 8px;
        min-height: 226px;
        padding: 14px 10px 48px;
      }

      .relationship-match-screen.is-report-step .relationship-wuxing-flow-map > img {
        width: 112%;
        opacity: 0.44;
      }

      .relationship-match-screen.is-report-step .relationship-wuxing-center {
        order: initial;
        width: 74px;
        min-height: 74px;
        border-radius: 20px;
      }

      .relationship-match-screen.is-report-step .relationship-wuxing-center strong {
        font-size: 28px;
      }

      .relationship-match-screen.is-report-step .relationship-wuxing-center small,
      .relationship-match-screen.is-report-step .relationship-wuxing-center em {
        font-size: 10px;
      }

      .relationship-match-screen.is-report-step .relationship-wuxing-side:first-of-type {
        order: initial;
      }

      .relationship-match-screen.is-report-step .relationship-wuxing-side:last-of-type {
        order: initial;
      }

      .relationship-match-screen.is-report-step .relationship-wuxing-side {
        min-height: 146px;
        padding: 10px 6px 12px;
      }

      .relationship-match-screen.is-report-step .relationship-wuxing-side strong {
        max-width: 82px;
        font-size: 17px;
      }

      .relationship-match-screen.is-report-step .relationship-wuxing-side > span {
        width: 48px;
        height: 48px;
        font-size: 26px;
      }

      .relationship-match-screen.is-report-step .relationship-wuxing-main-phrase {
        bottom: 15px;
        font-size: 20px;
      }

      .relationship-match-screen.is-report-step .relationship-wuxing-main-note {
        padding-inline: 18px;
        font-size: 13.5px;
      }

      .relationship-match-screen.is-report-step .relationship-wuxing-main-note::before,
      .relationship-match-screen.is-report-step .relationship-wuxing-main-note::after {
        width: 12px;
      }

      .relationship-match-screen.is-report-step .relationship-wuxing-ripple-list {
        gap: 4px;
      }

      .relationship-match-screen.is-report-step .relationship-wuxing-ripple-item b {
        width: 36px;
        height: 36px;
        font-size: 18px;
      }

      .relationship-match-screen.is-report-step .relationship-wuxing-ripple-item span,
      .relationship-match-screen.is-report-step .relationship-wuxing-ripple-item small {
        font-size: 10px;
      }

      .relationship-match-screen.is-report-step .relationship-wuxing-flow-notes {
        grid-template-columns: 1fr;
      }

      .relationship-match-screen.is-report-step .relationship-overview-proof-expanded .relationship-bazi-matrix {
        overflow: hidden;
      }

      .relationship-match-screen.is-report-step .relationship-overview-proof-expanded .relationship-bazi-matrix-head,
      .relationship-match-screen.is-report-step .relationship-overview-proof-expanded .relationship-bazi-matrix-row {
        min-width: 0;
        grid-template-columns: 32px repeat(4, minmax(0, 1fr));
      }

      .relationship-match-screen.is-report-step .relationship-overview-proof-expanded .relationship-bazi-matrix-head span,
      .relationship-match-screen.is-report-step .relationship-overview-proof-expanded .relationship-bazi-matrix-row > b,
      .relationship-match-screen.is-report-step .relationship-overview-proof-expanded .relationship-bazi-matrix-row > span {
        min-height: 40px;
        padding: 5px 1px;
      }

      .relationship-match-screen.is-report-step .relationship-overview-proof-expanded .relationship-bazi-matrix-head span,
      .relationship-match-screen.is-report-step .relationship-overview-proof-expanded .relationship-bazi-matrix-row > b {
        font-size: 11px;
      }

      .relationship-match-screen.is-report-step .relationship-overview-proof-expanded .relationship-bazi-matrix-row i {
        font-size: 16px;
      }

      .relationship-match-screen.is-report-step .relationship-overview-proof-expanded .relationship-bazi-matrix-row small {
        font-size: 9px;
      }

      /* The verdict is a vertical side inscription, including on mobile. */
      .relationship-match-screen.is-report-step .relationship-energy-copy {
        grid-template-columns: minmax(0, 1fr) 58px;
      }

      .relationship-match-screen.is-report-step .relationship-energy-verdict {
        min-height: 100%;
        padding: 8px 0;
        border-top: 0;
        border-left: 1px solid rgba(173, 138, 77, 0.3);
        justify-items: center;
        place-items: center;
        writing-mode: vertical-rl;
      }

      .relationship-match-screen.is-report-step .relationship-overview-actions {
        grid-template-columns: 1fr;
        gap: 10px;
        padding-inline: 0;
      }

      .relationship-match-screen.is-report-step .relationship-overview-closing {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
      }

      .relationship-match-screen.is-report-step .relationship-overview-closing-icon {
        width: 58px;
        height: 58px;
      }
    }

    /* Relationship risk/timing legibility fix: longer ink labels, clear year seals, stable yearly reading. */
    .relationship-match-screen .relationship-risk-wheel button {
      width: 96px !important;
      min-height: 68px !important;
      overflow: visible !important;
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="risk"] .relationship-risk-wheel button {
      width: 96px !important;
      min-height: 68px !important;
      overflow: visible !important;
    }

    .relationship-match-screen .relationship-risk-wheel button span,
    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="risk"] .relationship-risk-wheel button span {
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      width: max-content !important;
      min-width: 58px !important;
      max-width: 92px !important;
      min-height: 22px !important;
      padding: 2px 10px 3px !important;
      border-radius: 999px !important;
      background:
        linear-gradient(90deg, rgba(255, 252, 247, 0), rgba(255, 252, 247, 0.94) 14%, rgba(255, 252, 247, 0.96) 86%, rgba(255, 252, 247, 0)) !important;
      box-shadow:
        inset 0 0 0 1px rgba(177, 139, 73, 0.12),
        0 4px 10px rgba(113, 93, 62, 0.08) !important;
      color: rgba(24, 23, 21, 0.68) !important;
      font-size: 12px !important;
      line-height: 1.25 !important;
      text-align: center !important;
      white-space: nowrap !important;
      box-decoration-break: clone !important;
      -webkit-box-decoration-break: clone !important;
    }

    .relationship-match-screen .relationship-risk-wheel button.active span,
    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="risk"] .relationship-risk-wheel button.active span {
      background:
        linear-gradient(90deg, rgba(255, 252, 247, 0), rgba(255, 249, 243, 0.98) 13%, rgba(255, 247, 239, 0.98) 87%, rgba(255, 252, 247, 0)) !important;
      color: #a93226 !important;
      box-shadow:
        inset 0 0 0 1px rgba(184, 54, 43, 0.2),
        0 5px 12px rgba(169, 50, 38, 0.1) !important;
    }

    .relationship-match-screen .relationship-river-canvas > button:not(.relationship-star-cloud) i {
      overflow: visible !important;
    }

    .relationship-match-screen .relationship-timing-node-seal {
      display: grid;
      place-items: center;
      width: 34px;
      height: 34px;
      border-radius: 50%;
      border: 1px solid rgba(177, 139, 73, 0.38);
      background:
        radial-gradient(circle at 48% 40%, rgba(255, 252, 247, 0.98) 0 46%, rgba(245, 236, 216, 0.95) 47% 100%);
      box-shadow:
        0 0 0 5px rgba(255, 252, 247, 0.46),
        0 7px 14px rgba(113, 93, 62, 0.14);
      color: #8e743e;
      font-family: var(--kai);
      font-size: 15px;
      font-weight: 900;
      line-height: 1;
      text-shadow: 0 1px 0 rgba(255, 252, 247, 0.86);
    }

    .relationship-match-screen .relationship-timing-node-seal.is-good {
      border-color: rgba(84, 135, 91, 0.44);
      color: #4f8f61;
      background:
        radial-gradient(circle at 48% 40%, rgba(249, 255, 247, 0.98) 0 44%, rgba(226, 242, 221, 0.95) 45% 100%);
    }

    .relationship-match-screen .relationship-timing-node-seal.is-window {
      border-color: rgba(177, 139, 73, 0.5);
      color: #b18b49;
      background:
        radial-gradient(circle at 48% 40%, rgba(255, 252, 247, 0.98) 0 44%, rgba(246, 232, 198, 0.98) 45% 100%);
    }

    .relationship-match-screen .relationship-timing-node-seal.is-risk {
      border-color: rgba(184, 54, 43, 0.38);
      color: #a93226;
      background:
        radial-gradient(circle at 48% 40%, rgba(255, 250, 247, 0.98) 0 44%, rgba(244, 220, 211, 0.98) 45% 100%);
    }

    .relationship-match-screen .relationship-timing-neutral-dot {
      position: relative !important;
      display: grid !important;
      place-items: center !important;
      width: 34px !important;
      height: 34px !important;
      border-radius: 50% !important;
      border: 1px solid rgba(177, 139, 73, 0.34) !important;
      background:
        radial-gradient(circle at 46% 38%, rgba(255, 252, 247, 0.98) 0 38%, rgba(244, 236, 218, 0.96) 39% 72%, rgba(216, 193, 149, 0.48) 73% 100%) !important;
      box-shadow:
        0 0 0 5px rgba(255, 252, 247, 0.42),
        0 8px 14px rgba(113, 93, 62, 0.14),
        inset 0 0 0 5px rgba(255, 252, 247, 0.38) !important;
    }

    .relationship-match-screen .relationship-timing-neutral-dot::before {
      content: "";
      position: absolute;
      left: 8px;
      top: 12px;
      width: 18px;
      height: 10px;
      border-top: 2px solid rgba(142, 116, 62, 0.72);
      border-radius: 50%;
      transform: rotate(-12deg);
    }

    .relationship-match-screen .relationship-timing-neutral-dot::after {
      content: "";
      position: absolute;
      right: 9px;
      bottom: 9px;
      width: 4px;
      height: 4px;
      border-radius: 50%;
      background: rgba(177, 139, 73, 0.62);
      box-shadow: -9px 2px 0 rgba(177, 139, 73, 0.26);
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="timing"] .relationship-year-detail.compact,
    .relationship-match-screen.is-report-step .relationship-hologram-panel[data-dimension="timing"] .relationship-year-detail.compact {
      display: grid !important;
      gap: 7px !important;
      width: min(560px, calc(100% - 44px)) !important;
      margin: -8px auto 34px !important;
      padding: 16px 20px 18px !important;
      border: 0 !important;
      border-top: 1px solid rgba(177, 139, 73, 0.18) !important;
      border-bottom: 1px solid rgba(177, 139, 73, 0.12) !important;
      border-radius: 0 !important;
      background:
        linear-gradient(90deg, rgba(255, 252, 247, 0), rgba(255, 252, 247, 0.76) 18%, rgba(255, 252, 247, 0.76) 82%, rgba(255, 252, 247, 0)) !important;
      box-shadow: none !important;
      text-align: center !important;
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="timing"] .relationship-year-detail.compact small,
    .relationship-match-screen.is-report-step .relationship-hologram-panel[data-dimension="timing"] .relationship-year-detail.compact small {
      color: #b18b49 !important;
      font-family: var(--kai) !important;
      font-size: 13px !important;
      font-weight: 800 !important;
      letter-spacing: 0.08em !important;
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="timing"] .relationship-year-detail.compact h2,
    .relationship-match-screen.is-report-step .relationship-hologram-panel[data-dimension="timing"] .relationship-year-detail.compact h2 {
      margin: 0 !important;
      color: #171512 !important;
      font-family: var(--kai) !important;
      font-size: clamp(21px, 5.2vw, 28px) !important;
      line-height: 1.2 !important;
    }

    .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="timing"] .relationship-year-detail.compact p,
    .relationship-match-screen.is-report-step .relationship-hologram-panel[data-dimension="timing"] .relationship-year-detail.compact p {
      max-width: 30em !important;
      margin: 0 auto !important;
      color: rgba(24, 23, 21, 0.66) !important;
      font-size: 15px !important;
      line-height: 1.75 !important;
    }

    @media (max-width: 560px) {
      .relationship-match-screen .relationship-risk-wheel button {
        width: 88px !important;
      }

      .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="risk"] .relationship-risk-wheel button {
        width: 88px !important;
      }

      .relationship-match-screen .relationship-risk-wheel button span,
      .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="risk"] .relationship-risk-wheel button span {
        min-width: 54px !important;
        max-width: 86px !important;
        padding-inline: 8px !important;
        font-size: 11px !important;
      }

      .relationship-match-screen.is-dimensions-report .relationship-hologram-panel[data-dimension="timing"] .relationship-year-detail.compact,
      .relationship-match-screen.is-report-step .relationship-hologram-panel[data-dimension="timing"] .relationship-year-detail.compact {
        width: calc(100% - 28px) !important;
        padding-inline: 14px !important;
      }
    }

    /* Relationship Ziwei locked-card art polish: generated ornament stays visual, text remains live HTML. */
    .relationship-match-screen.is-dimensions-report .relationship-ziwei-lock-card,
    .relationship-match-screen.is-report-step .relationship-ziwei-lock-card {
      position: relative !important;
      isolation: isolate;
      grid-template-columns: minmax(0, 1fr) auto !important;
      min-height: 172px;
      overflow: hidden !important;
      margin: 24px 0 28px !important;
      padding: 28px 30px !important;
      border-color: rgba(232, 197, 116, 0.16) !important;
      border-radius: 18px !important;
      background:
        radial-gradient(circle at 18% 46%, rgba(232, 197, 116, 0.16), transparent 34%),
        linear-gradient(135deg, rgba(45, 39, 31, 0.99), rgba(23, 21, 18, 0.96)) !important;
      box-shadow:
        0 18px 36px rgba(24, 23, 21, 0.13),
        inset 0 0 0 1px rgba(255, 248, 224, 0.03) !important;
    }

    .relationship-match-screen.is-dimensions-report .relationship-ziwei-lock-card::before,
    .relationship-match-screen.is-report-step .relationship-ziwei-lock-card::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      background:
        linear-gradient(90deg, rgba(23, 21, 18, 0.02), rgba(23, 21, 18, 0.34) 48%, rgba(23, 21, 18, 0.78) 100%),
        radial-gradient(circle at 78% 50%, rgba(232, 197, 116, 0.12), transparent 32%);
    }

    .relationship-match-screen.is-dimensions-report .relationship-ziwei-lock-art,
    .relationship-match-screen.is-report-step .relationship-ziwei-lock-art {
      position: absolute;
      z-index: 0;
      left: -17%;
      top: 50%;
      width: min(760px, 122%);
      max-width: none;
      height: auto;
      opacity: 0.42;
      mix-blend-mode: screen;
      pointer-events: none;
      transform: translateY(-50%);
      filter:
        drop-shadow(0 12px 24px rgba(0, 0, 0, 0.18))
        saturate(0.92);
    }

    .relationship-match-screen.is-dimensions-report .relationship-ziwei-lock-card > div,
    .relationship-match-screen.is-dimensions-report .relationship-ziwei-lock-card > button,
    .relationship-match-screen.is-report-step .relationship-ziwei-lock-card > div,
    .relationship-match-screen.is-report-step .relationship-ziwei-lock-card > button {
      position: relative;
      z-index: 1;
    }

    .relationship-match-screen.is-dimensions-report .relationship-ziwei-lock-card .relationship-palace-map,
    .relationship-match-screen.is-report-step .relationship-ziwei-lock-card .relationship-palace-map {
      display: none !important;
    }

    @media (max-width: 560px) {
      .relationship-match-screen.is-dimensions-report .relationship-ziwei-lock-card,
      .relationship-match-screen.is-report-step .relationship-ziwei-lock-card {
        grid-template-columns: 1fr !important;
        gap: 18px !important;
        min-height: 196px;
        padding: 24px 24px 26px !important;
      }

      .relationship-match-screen.is-dimensions-report .relationship-ziwei-lock-art,
      .relationship-match-screen.is-report-step .relationship-ziwei-lock-art {
        left: -44%;
        width: 168%;
        opacity: 0.36;
      }

      .relationship-match-screen.is-dimensions-report .relationship-ziwei-lock-card > button,
      .relationship-match-screen.is-report-step .relationship-ziwei-lock-card > button {
        justify-self: start;
      }
    }

    /* Relationship invite flow: full visual pass for entry, modal, guest fill and returned states. */
    .relationship-match-screen.is-people-step .relationship-profile-panel {
      position: relative;
      grid-template-columns: minmax(0, 1fr) 58px minmax(0, 1fr);
      gap: 10px;
      align-items: stretch;
      margin: 8px 0 18px;
      padding: 8px 0 16px;
    }

    .relationship-match-screen.is-people-step .relationship-profile-panel .relationship-section-head {
      grid-column: 1 / -1;
      margin-bottom: 8px;
    }

    .relationship-match-screen.is-people-step .relationship-profile-panel .relationship-section-head h2 {
      font-size: clamp(28px, 5vw, 34px);
    }

    .relationship-match-screen.is-people-step .relationship-profile-panel .relationship-section-head p {
      max-width: 18em;
      margin-left: auto;
      color: rgba(24, 23, 21, 0.48);
      font-size: 12px;
      text-align: right;
    }

    .relationship-match-screen.is-people-step .relationship-mandate-card {
      justify-content: start;
      min-height: 0;
      height: 224px;
      padding: 48px 12px 16px;
      border: 0;
      border-radius: 0;
      background:
        linear-gradient(180deg, rgba(255, 252, 247, 0.8), rgba(255, 252, 247, 0.54)),
        url("/prototype/assets/relationship-match/invite/generated-v1/relationship-invite-dossier-bg-v1.webp") center bottom / 260px auto no-repeat,
        linear-gradient(180deg, rgba(255, 252, 247, 0.92), rgba(247, 239, 222, 0.48));
      box-shadow:
        inset 0 0 0 1px rgba(173, 138, 77, 0.18),
        0 16px 28px rgba(72, 51, 32, 0.08);
      clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0 calc(100% - 12px), 0 12px);
      animation: relationshipCardSetDown 760ms var(--ease) both;
    }

    .relationship-match-screen.is-people-step .relationship-mandate-card.is-awaiting {
      background:
        linear-gradient(180deg, rgba(255, 252, 247, 0.78), rgba(255, 252, 247, 0.46)),
        url("/prototype/assets/relationship-match/invite/generated-v1/relationship-invite-dossier-bg-v1.webp") center bottom / 255px auto no-repeat,
        repeating-linear-gradient(-45deg, rgba(173, 138, 77, 0.032) 0 7px, transparent 7px 14px);
    }

    .relationship-match-screen.is-people-step .relationship-mandate-card::before {
      inset: 10px;
      border-color: rgba(173, 138, 77, 0.13);
      border-radius: 0;
    }

    .relationship-match-screen.is-people-step .relationship-mandate-ribbon {
      top: 14px;
      left: 50%;
      right: auto;
      display: grid;
      min-width: 58px;
      min-height: 28px;
      place-items: center;
      padding: 0 12px;
      border-color: rgba(173, 138, 77, 0.28);
      border-radius: 12px;
      background: rgba(255, 252, 247, 0.72);
      color: rgba(113, 93, 62, 0.72);
      font-family: var(--serif);
      font-size: 12px;
      font-weight: 900;
      transform: translateX(-50%);
    }

    .relationship-match-screen.is-people-step .relationship-mandate-card.has-selection .relationship-mandate-ribbon {
      border-color: rgba(184, 54, 43, 0.3);
      color: var(--seal);
      background: rgba(255, 250, 242, 0.86);
    }

    .relationship-match-screen.is-people-step .relationship-mandate-card .relationship-partner-selected {
      display: grid;
      grid-template-columns: 1fr;
      justify-items: center;
      gap: 8px;
      text-align: center;
    }

    .relationship-match-screen.is-people-step .relationship-mandate-card .relationship-profile-mark {
      width: 58px;
      height: 58px;
      border: 1px solid currentColor;
      background:
        radial-gradient(circle at 50% 42%, rgba(255, 252, 247, 0.96), rgba(255, 252, 247, 0.48));
      font-size: 30px;
      box-shadow:
        inset 0 0 0 7px rgba(255, 252, 247, 0.56),
        0 8px 18px rgba(72, 51, 32, 0.08);
    }

    .relationship-match-screen.is-people-step .relationship-mandate-card .relationship-partner-selected small {
      color: rgba(24, 23, 21, 0.42);
      font-size: 11px;
      letter-spacing: 0.06em;
    }

    .relationship-match-screen.is-people-step .relationship-mandate-card .relationship-partner-selected strong {
      max-width: 100%;
      font-size: clamp(17px, 4vw, 21px);
      line-height: 1.18;
      white-space: normal;
    }

    .relationship-match-screen.is-people-step .relationship-mandate-card .relationship-partner-selected em {
      max-width: 100%;
      color: rgba(24, 23, 21, 0.52);
      font-size: 12px;
      white-space: normal;
    }

    .relationship-match-screen.is-people-step .relationship-mandate-traits,
    .relationship-match-screen.is-people-step .relationship-mandate-placeholder {
      margin-top: 12px;
      padding: 8px 4px;
      background: rgba(255, 252, 247, 0.28);
      color: rgba(24, 23, 21, 0.5);
      text-align: center;
    }

    .relationship-match-screen.is-people-step .relationship-mandate-traits span,
    .relationship-match-screen.is-people-step .relationship-mandate-placeholder span {
      white-space: normal;
    }

    .relationship-match-screen.is-people-step .relationship-mandate-card p {
      justify-content: center;
      min-height: 24px;
      margin-top: auto;
      color: rgba(24, 23, 21, 0.46);
      font-size: 11px;
      text-align: center;
    }

    .relationship-match-screen.is-people-step .relationship-flow-bridge {
      min-height: 0;
      height: 224px;
    }

    .relationship-match-screen.is-people-step .relationship-flow-bridge::before {
      left: -34px;
      right: -34px;
      height: 1px;
      background:
        linear-gradient(90deg, transparent, rgba(173, 138, 77, 0.24), rgba(184, 54, 43, 0.5), rgba(173, 138, 77, 0.24), transparent);
      opacity: 0.6;
    }

    .relationship-match-screen.is-people-step .relationship-flow-bridge i {
      width: 48px;
      height: 48px;
      border-radius: 13px;
      background:
        radial-gradient(circle at 50% 46%, rgba(255, 252, 247, 0.98), rgba(248, 239, 217, 0.72));
    }

    .relationship-match-screen.is-people-step .relationship-profile-drawer-card {
      grid-template-columns: minmax(0, 0.82fr) minmax(190px, 1fr);
      align-items: center;
      gap: 14px;
      padding: 18px 18px 16px;
      border: 0;
      border-radius: 0;
      background:
        linear-gradient(90deg, rgba(255, 252, 247, 0.98) 0 44%, rgba(255, 252, 247, 0.78) 62%, rgba(255, 252, 247, 0.34) 100%),
        url("/prototype/assets/relationship-match/invite/generated-v1/relationship-invite-dossier-bg-v1.webp") right center / 360px auto no-repeat;
      box-shadow:
        inset 0 0 0 1px rgba(173, 138, 77, 0.16),
        0 14px 26px rgba(72, 51, 32, 0.06);
      clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px);
    }

    .relationship-match-screen.is-people-step .relationship-profile-drawer-card.has-selection {
      background:
        linear-gradient(90deg, rgba(255, 252, 247, 0.98) 0 42%, rgba(255, 252, 247, 0.76) 62%, rgba(255, 252, 247, 0.32) 100%),
        url("/prototype/assets/relationship-match/invite/generated-v1/relationship-invite-dossier-bg-v1.webp") right center / 360px auto no-repeat;
    }

    .relationship-match-screen.is-people-step .relationship-profile-drawer-copy strong {
      font-size: 22px;
      line-height: 1.16;
    }

    .relationship-match-screen.is-people-step .relationship-profile-drawer-copy em {
      max-width: 18em;
      white-space: normal;
    }

    .relationship-match-screen.is-people-step .relationship-profile-drawer-card .relationship-select-field select {
      min-height: 52px;
      border-radius: 0;
      background:
        linear-gradient(180deg, rgba(255, 252, 247, 0.96), rgba(255, 252, 247, 0.72));
      clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px);
    }

    .relationship-match-screen.is-people-step .relationship-drawer-actions {
      grid-template-columns: auto minmax(0, 1fr);
      gap: 12px;
      padding-top: 12px;
    }

    .relationship-match-screen.is-people-step .relationship-drawer-actions button {
      min-height: 42px;
      padding: 0 18px;
      border-radius: 999px;
      background:
        linear-gradient(180deg, rgba(255, 252, 247, 0.98), rgba(255, 246, 235, 0.76));
      box-shadow: 0 8px 18px rgba(123, 34, 27, 0.08);
    }

    .relationship-invite-dialog {
      width: min(456px, 100%);
      max-height: min(82vh, 780px);
      border-radius: 18px;
    }

    .relationship-invite-overlay {
      z-index: 1200;
    }

    .relationship-invite-poster-layer {
      z-index: 1201;
    }

    .workspace:has(.relationship-invite-overlay) .nav,
    .workspace:has(.relationship-invite-poster-layer) .nav {
      opacity: 0;
      pointer-events: none;
    }

    .relationship-invite-dialog .relationship-invite-card {
      grid-template-columns: 58px minmax(0, 1fr);
      gap: 16px;
      padding: 24px 20px 18px;
      border: 0;
      border-radius: 18px;
      background:
        linear-gradient(180deg, rgba(255, 252, 247, 0.86), rgba(255, 252, 247, 0.58)),
        url("/prototype/assets/relationship-match/invite/generated-v1/relationship-invite-modal-bg-v1.webp") center / cover no-repeat;
      box-shadow:
        0 26px 70px rgba(27, 21, 14, 0.22),
        inset 0 0 0 1px rgba(173, 138, 77, 0.2);
    }

    .relationship-invite-dialog .relationship-invite-card::after {
      content: "";
      position: absolute;
      inset: 12px;
      border: 1px solid rgba(173, 138, 77, 0.12);
      border-radius: 14px;
      pointer-events: none;
    }

    .relationship-invite-dialog .relationship-invite-seal {
      width: 52px;
      height: 52px;
      border-radius: 13px;
      background:
        radial-gradient(circle at 50% 42%, rgba(255, 252, 247, 0.96), rgba(255, 246, 235, 0.66));
      font-size: 28px;
      box-shadow:
        0 10px 24px rgba(184, 54, 43, 0.1),
        inset 0 0 0 5px rgba(184, 54, 43, 0.045);
    }

    .relationship-invite-dialog .relationship-invite-card small {
      color: var(--gold);
      font-family: var(--serif);
      font-size: 12px;
    }

    .relationship-invite-dialog .relationship-invite-card h3 {
      font-size: 23px;
      line-height: 1.18;
    }

    .relationship-invite-dialog .relationship-invite-card p {
      max-width: 25em;
      font-size: 13px;
    }

    .relationship-invite-link-sheet {
      grid-template-columns: 52px minmax(0, 1fr);
      padding: 12px;
      border: 1px solid rgba(173, 138, 77, 0.16);
      border-radius: 12px;
      background: rgba(255, 252, 247, 0.48);
    }

    .relationship-invite-link-sheet .relationship-qr-mark {
      width: 48px;
      height: 48px;
      align-self: center;
    }

    .relationship-invite-actions {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
      justify-content: stretch;
    }

    .relationship-invite-actions button {
      min-height: 40px;
      border-radius: 999px;
      font-size: 12px;
    }

    .relationship-invite-actions button.primary {
      border-color: rgba(123, 34, 27, 0.42);
      background: linear-gradient(180deg, #ba3b2e, #90251c);
      color: #fffaf1;
      font-family: var(--serif);
      font-weight: 900;
      letter-spacing: 0.04em;
    }

    .relationship-invite-actions button.danger {
      border-color: rgba(184, 54, 43, 0.24);
      background: rgba(184, 54, 43, 0.04);
      color: rgba(123, 34, 27, 0.72);
    }

    .relationship-invite-screen {
      min-height: 100%;
      background:
        linear-gradient(180deg, rgba(255, 252, 247, 0.86), rgba(255, 252, 247, 0.68)),
        url("/prototype/assets/relationship-match/invite/generated-v1/relationship-invite-fill-bg-v1.webp") center top / cover no-repeat;
    }

    .relationship-invite-page-head {
      padding-top: max(26px, env(safe-area-inset-top));
    }

    .relationship-invite-landing {
      gap: 16px;
      max-width: 520px;
      margin: 0 auto;
      padding-inline: 24px;
    }

    .relationship-invite-scroll,
    .relationship-invite-form,
    .relationship-invite-success-card {
      border: 0;
      border-radius: 0;
      background:
        linear-gradient(180deg, rgba(255, 252, 247, 0.88), rgba(255, 252, 247, 0.6));
      box-shadow:
        inset 0 0 0 1px rgba(173, 138, 77, 0.17),
        0 16px 36px rgba(72, 51, 32, 0.07);
      clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 14px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 14px 100%, 0 calc(100% - 14px), 0 14px);
    }

    .relationship-invite-scroll {
      min-height: 176px;
      padding: 26px 26px 24px;
    }

    .relationship-invite-scroll::before {
      right: -6px;
      bottom: -10px;
      width: 260px;
      height: 168px;
      background: url("/prototype/assets/relationship-match/invite/generated-v1/relationship-invite-dossier-bg-v1.webp") right bottom / 320px auto no-repeat;
      opacity: 0.36;
    }

    .relationship-invite-scroll h2 {
      font-size: clamp(30px, 7.2vw, 40px);
    }

    .relationship-invite-form {
      gap: 13px;
      padding: 20px 20px 22px;
    }

    .relationship-invite-form input,
    .relationship-invite-form select {
      min-height: 50px;
      border-radius: 0;
      background: rgba(255, 252, 247, 0.72);
      clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px);
    }

    .relationship-invite-success-card {
      padding: 32px 20px;
    }

    @media (max-width: 520px) {
      .relationship-match-screen.is-people-step .relationship-profile-panel {
        grid-template-columns: minmax(0, 1fr) 52px minmax(0, 1fr);
        gap: 6px;
      }

      .relationship-match-screen.is-people-step .relationship-profile-current {
        grid-column: 1;
      }

      .relationship-match-screen.is-people-step .relationship-partner-list {
        grid-column: 3;
      }

      .relationship-match-screen.is-people-step .relationship-profile-drawer {
        grid-column: 1 / -1;
      }

      .relationship-match-screen.is-people-step .relationship-profile-panel .relationship-section-head p {
        max-width: 18em;
        margin-left: 0;
        text-align: left;
      }

      .relationship-match-screen.is-people-step .relationship-mandate-card {
        min-height: 0;
        height: 214px;
        padding-inline: 8px;
      }

      .relationship-match-screen.is-people-step .relationship-mandate-card .relationship-profile-mark {
        width: 52px;
        height: 52px;
        font-size: 28px;
      }

      .relationship-match-screen.is-people-step .relationship-flow-bridge {
        position: relative;
        left: auto;
        top: auto;
        grid-column: 2;
        width: auto;
        min-height: 0;
        height: 214px;
        transform: none;
      }

      .relationship-match-screen.is-people-step .relationship-flow-bridge::before {
        left: -22px;
        right: -22px;
        width: auto;
      }

      .relationship-match-screen.is-people-step .relationship-profile-drawer-card {
        grid-template-columns: 1fr;
        background:
          linear-gradient(180deg, rgba(255, 252, 247, 0.98) 0 44%, rgba(255, 252, 247, 0.8) 64%, rgba(255, 252, 247, 0.4) 100%),
          url("/prototype/assets/relationship-match/invite/generated-v1/relationship-invite-dossier-bg-v1.webp") right bottom / 320px auto no-repeat;
      }

      .relationship-match-screen.is-people-step .relationship-drawer-actions,
      .relationship-invite-actions {
        grid-template-columns: 1fr;
      }

      .relationship-invite-dialog .relationship-invite-card {
        grid-template-columns: 48px minmax(0, 1fr);
        padding: 20px 16px 16px;
      }

      .relationship-invite-dialog .relationship-invite-card h3 {
        font-size: 20px;
      }

      .relationship-invite-landing {
        padding-inline: 18px;
      }
    }

    @media (max-width: 820px) {
      .relationship-match-screen.is-people-step .relationship-profile-panel {
        grid-template-columns: minmax(122px, 1fr) clamp(48px, 8vw, 64px) minmax(122px, 1fr) !important;
        gap: clamp(6px, 2vw, 16px) !important;
      }

      .relationship-match-screen.is-people-step .relationship-profile-drawer {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        max-width: 100% !important;
      }

      .relationship-match-screen.is-people-step .relationship-profile-current {
        grid-column: 1 !important;
        width: auto !important;
        max-width: none !important;
      }

      .relationship-match-screen.is-people-step .relationship-partner-list {
        grid-column: 3 !important;
        width: auto !important;
        max-width: none !important;
      }

      .relationship-match-screen.is-people-step .relationship-flow-bridge {
        display: grid !important;
      }

      .relationship-match-screen.is-people-step .relationship-mandate-card {
        width: 100% !important;
        height: auto !important;
        min-height: 176px !important;
        padding: 48px 18px 16px !important;
        box-sizing: border-box;
      }

      .relationship-match-screen.is-people-step .relationship-mandate-card .relationship-partner-selected {
        grid-template-columns: 58px minmax(0, 1fr) !important;
        justify-items: start !important;
        text-align: left !important;
      }

      .relationship-match-screen.is-people-step .relationship-mandate-card .relationship-partner-selected strong {
        font-size: clamp(20px, 5.4vw, 26px);
      }

      .relationship-match-screen.is-people-step .relationship-mandate-traits,
      .relationship-match-screen.is-people-step .relationship-mandate-placeholder {
        text-align: left;
      }

      .relationship-match-screen.is-people-step .relationship-mandate-card p {
        justify-content: flex-start;
        text-align: left;
      }
    }

    /* Relationship people-step slip alignment: reuse the designed five-element 命帖 assets instead of boxed placeholder cards. */
    .relationship-match-screen.is-people-step .relationship-profile-panel {
      grid-template-columns: minmax(136px, 1fr) clamp(52px, 8vw, 70px) minmax(136px, 1fr) !important;
      gap: clamp(8px, 2.4vw, 22px) !important;
      align-items: center !important;
      overflow: visible;
    }

    .relationship-match-screen.is-people-step .relationship-profile-current,
    .relationship-match-screen.is-people-step .relationship-partner-list {
      display: grid;
      justify-items: center;
      align-items: center;
      overflow: visible;
      min-width: 0;
    }

    .relationship-match-screen.is-people-step .relationship-profile-current {
      grid-column: 1 !important;
    }

    .relationship-match-screen.is-people-step .relationship-partner-list {
      grid-column: 3 !important;
    }

    .relationship-match-screen.is-people-step .relationship-flow-bridge {
      position: relative !important;
      display: grid !important;
      grid-column: 2 !important;
      left: auto !important;
      top: auto !important;
      width: auto !important;
      height: clamp(250px, 49vw, 342px) !important;
      min-height: 0 !important;
      align-self: center;
      justify-self: stretch !important;
      place-items: center !important;
      z-index: 5;
      transform: none !important;
    }

    .relationship-match-screen.is-people-step .relationship-flow-bridge::before {
      left: -42px !important;
      right: -42px !important;
      height: 2px !important;
      background: linear-gradient(90deg, transparent, rgba(177, 139, 73, 0.46), rgba(184, 54, 43, 0.52), rgba(177, 139, 73, 0.46), transparent) !important;
      opacity: 0.72 !important;
    }

    .relationship-match-screen.is-people-step .relationship-flow-bridge i {
      position: absolute !important;
      left: 50% !important;
      top: 50% !important;
      width: clamp(52px, 9vw, 70px) !important;
      height: clamp(52px, 9vw, 70px) !important;
      border-radius: clamp(17px, 3vw, 22px) !important;
      transform: translate(-50%, -50%) !important;
      animation: none !important;
      box-shadow:
        0 0 0 8px rgba(255, 252, 247, 0.46),
        0 12px 24px rgba(113, 93, 62, 0.12) !important;
    }

    .relationship-match-screen.is-people-step .relationship-flow-bridge i::before {
      font-size: clamp(28px, 5.6vw, 38px) !important;
    }

    .relationship-match-screen.is-people-step .relationship-dimension-slip {
      position: relative !important;
      display: block !important;
      width: clamp(126px, 24vw, 170px) !important;
      aspect-ratio: 402 / 801;
      color: #171512;
      font-family: var(--kai);
      text-align: center;
      filter:
        drop-shadow(0 14px 20px rgba(113, 93, 62, 0.12))
        drop-shadow(0 1px 0 rgba(255, 252, 247, 0.8));
    }

    .relationship-match-screen.is-people-step .relationship-dimension-slip-bg {
      position: absolute;
      inset: 0;
      z-index: 0;
      width: 100%;
      height: 100%;
      object-fit: contain;
      pointer-events: none;
      user-select: none;
    }

    .relationship-match-screen.is-people-step .relationship-dimension-slip-role,
    .relationship-match-screen.is-people-step .relationship-dimension-slip-stem,
    .relationship-match-screen.is-people-step .relationship-dimension-slip strong,
    .relationship-match-screen.is-people-step .relationship-dimension-slip em {
      position: absolute !important;
      z-index: 3 !important;
      margin: 0 !important;
      text-align: center !important;
      text-shadow: 0 1px 0 rgba(255, 252, 247, 0.9) !important;
      transform: translateX(-50%) !important;
    }

    .relationship-match-screen.is-people-step .relationship-dimension-slip-role {
      left: 50% !important;
      top: 7.6% !important;
      display: grid !important;
      place-items: center !important;
      width: 42% !important;
      height: 7.8% !important;
      max-width: none !important;
      padding: 0 !important;
      border: 0 !important;
      background: transparent !important;
      color: #9b6f2d !important;
      font-family: var(--kai) !important;
      font-size: clamp(11px, 1.8vw, 13px) !important;
      font-weight: 900 !important;
      letter-spacing: 0.06em !important;
      line-height: 1 !important;
    }

    .relationship-match-screen.is-people-step .relationship-dimension-slip-stem {
      left: 50% !important;
      top: 33.3% !important;
      display: grid !important;
      place-items: center !important;
      width: 36% !important;
      height: 17% !important;
      max-width: none !important;
      padding: 0 !important;
      border: 0 !important;
      border-radius: 0 !important;
      background: transparent !important;
      color: #a93226 !important;
      font-family: var(--serif) !important;
      font-size: clamp(34px, 6.4vw, 48px) !important;
      font-weight: 900 !important;
      line-height: 1 !important;
      transform: translate(-50%, -50%) !important;
    }

    .relationship-match-screen.is-people-step .relationship-dimension-slip strong {
      left: 50% !important;
      top: 52% !important;
      overflow: hidden;
      max-width: 76% !important;
      color: #171512 !important;
      font-family: var(--serif) !important;
      font-size: clamp(16px, 3.1vw, 22px) !important;
      font-weight: 900 !important;
      line-height: 1.08 !important;
      letter-spacing: 0.03em !important;
      text-overflow: ellipsis;
      white-space: nowrap !important;
    }

    .relationship-match-screen.is-people-step .relationship-dimension-slip em {
      left: 50% !important;
      top: 69.8% !important;
      max-width: 74% !important;
      color: #a93226 !important;
      font-family: var(--kai) !important;
      font-size: clamp(12px, 2.1vw, 14px) !important;
      font-style: normal !important;
      font-weight: 900 !important;
      line-height: 1.15 !important;
      letter-spacing: 0.06em !important;
      white-space: nowrap !important;
    }

    .relationship-match-screen.is-people-step .relationship-dimension-slip.is-empty {
      opacity: 0.78;
      filter:
        grayscale(0.18)
        drop-shadow(0 14px 20px rgba(113, 93, 62, 0.09));
    }

    .relationship-match-screen.is-people-step .relationship-dimension-slip.is-empty .relationship-dimension-slip-stem,
    .relationship-match-screen.is-people-step .relationship-dimension-slip.is-empty strong,
    .relationship-match-screen.is-people-step .relationship-dimension-slip.is-empty em {
      color: rgba(24, 23, 21, 0.52) !important;
    }

    @media (max-width: 520px) {
      .relationship-match-screen.is-people-step .relationship-profile-panel {
        grid-template-columns: minmax(112px, 1fr) 48px minmax(112px, 1fr) !important;
        gap: 5px !important;
      }

      .relationship-match-screen.is-people-step .relationship-dimension-slip {
        width: clamp(112px, 31vw, 136px) !important;
      }

      .relationship-match-screen.is-people-step .relationship-flow-bridge {
        height: clamp(224px, 62vw, 272px) !important;
      }

      .relationship-match-screen.is-people-step .relationship-flow-bridge::before {
        left: -24px !important;
        right: -24px !important;
      }

      .relationship-match-screen.is-people-step .relationship-flow-bridge i {
        width: 48px !important;
        height: 48px !important;
        border-radius: 16px !important;
      }
    }

    /* Relationship people-step polish: lower slip role labels, simplify drawer, modal and bottom actions. */
    .relationship-match-screen.is-people-step .relationship-dimension-slip-role {
      top: 9.2% !important;
    }

    .relationship-match-screen.is-people-step .relationship-profile-drawer-card {
      grid-template-columns: minmax(0, 0.9fr) minmax(240px, 1fr) !important;
      gap: 18px !important;
      padding: 16px 22px 18px !important;
      background:
        linear-gradient(90deg, rgba(255, 252, 247, 0.98) 0 46%, rgba(255, 252, 247, 0.84) 66%, rgba(255, 252, 247, 0.48) 100%),
        url("/prototype/assets/relationship-match/invite/generated-v1/relationship-invite-dossier-bg-v1.webp") right center / 330px auto no-repeat !important;
      box-shadow:
        inset 0 0 0 1px rgba(173, 138, 77, 0.14),
        0 10px 22px rgba(72, 51, 32, 0.045) !important;
    }

    .relationship-match-screen.is-people-step .relationship-profile-drawer-copy span,
    .relationship-match-screen.is-people-step .relationship-profile-drawer-card .relationship-select-field > span {
      color: rgba(156, 111, 45, 0.84);
      font-family: var(--serif);
      font-size: 12px;
      font-weight: 900;
      letter-spacing: 0.08em;
    }

    .relationship-match-screen.is-people-step .relationship-profile-drawer-copy strong {
      font-size: clamp(20px, 4vw, 24px) !important;
      letter-spacing: 0.03em;
    }

    .relationship-match-screen.is-people-step .relationship-profile-drawer-copy em {
      max-width: 20em !important;
      color: rgba(24, 23, 21, 0.54);
      font-size: 12px;
      line-height: 1.45;
    }

    .relationship-match-screen.is-people-step .relationship-profile-drawer-card .relationship-select-field select {
      min-height: 50px !important;
      padding-inline: 16px 40px;
      border-color: rgba(173, 138, 77, 0.18);
      background:
        linear-gradient(180deg, rgba(255, 252, 247, 0.98), rgba(255, 252, 247, 0.76)) !important;
      font-family: var(--serif);
      font-size: 16px !important;
    }

    .relationship-match-screen.is-people-step .relationship-drawer-actions {
      grid-template-columns: auto minmax(0, 1fr) !important;
      gap: 14px !important;
      padding-top: 14px !important;
      border-top-color: rgba(173, 138, 77, 0.12);
    }

    .relationship-match-screen.is-people-step .relationship-drawer-actions button {
      min-height: 44px !important;
      padding: 0 28px !important;
      border-color: rgba(184, 54, 43, 0.28) !important;
      background:
        linear-gradient(180deg, rgba(255, 252, 247, 0.98), rgba(255, 246, 235, 0.78)) !important;
      color: var(--seal);
      font-family: var(--serif);
      font-size: 15px;
      font-weight: 900;
      letter-spacing: 0.04em;
    }

    .relationship-match-screen.is-people-step .relationship-drawer-actions small {
      color: rgba(24, 23, 21, 0.5);
      font-size: 12px;
    }

    .relationship-match-screen.is-people-step .relationship-setup-card {
      gap: 14px !important;
      padding: 16px 0 0 !important;
      border-top: 1px solid rgba(173, 138, 77, 0.14) !important;
    }

    .relationship-setup-compact-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 0 2px;
    }

    .relationship-setup-compact-head > span {
      color: rgba(156, 111, 45, 0.88);
      font-family: var(--serif);
      font-size: 14px;
      font-weight: 900;
      letter-spacing: 0.08em;
    }

    .relationship-match-screen.is-people-step .relationship-back-step {
      min-height: 36px;
      padding: 0 18px;
      border: 1px solid rgba(173, 138, 77, 0.22);
      border-radius: 999px;
      background: rgba(255, 252, 247, 0.56);
      color: rgba(24, 23, 21, 0.58);
      font-family: var(--serif);
      font-size: 13px;
      font-weight: 800;
    }

    .relationship-match-screen.is-people-step .relationship-preview-title,
    .relationship-match-screen.is-people-step .relationship-setup-steps,
    .relationship-match-screen.is-people-step .relationship-setup-card > p {
      display: none !important;
    }

    .relationship-match-screen.is-people-step .relationship-preview-list {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
      border: 0 !important;
      background: transparent !important;
    }

    .relationship-match-screen.is-people-step .relationship-preview-list button {
      grid-template-columns: 34px minmax(0, 1fr);
      gap: 8px;
      min-height: 70px;
      padding: 10px 10px;
      border: 1px solid rgba(173, 138, 77, 0.14);
      background: rgba(255, 252, 247, 0.4);
      text-align: left;
    }

    .relationship-match-screen.is-people-step .relationship-preview-list button i {
      display: none;
    }

    .relationship-match-screen.is-people-step .relationship-preview-list strong {
      font-size: 15px;
      white-space: nowrap;
    }

    .relationship-match-screen.is-people-step .relationship-preview-list small {
      display: -webkit-box;
      overflow: hidden;
      color: rgba(24, 23, 21, 0.5);
      font-size: 11px;
      line-height: 1.35;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }

    .relationship-match-screen.is-people-step .relationship-setup-card > .relationship-generate-button {
      margin-top: 4px;
    }

    .relationship-match-screen.is-people-step .relationship-privacy-note {
      color: rgba(24, 23, 21, 0.42);
      font-size: 12px;
      text-align: center;
    }

    .relationship-invite-overlay {
      padding: max(20px, env(safe-area-inset-top)) 22px max(24px, env(safe-area-inset-bottom)) !important;
    }

    .relationship-invite-dialog {
      width: min(520px, 100%) !important;
      max-height: min(84vh, 780px) !important;
      border-radius: 20px !important;
      filter: drop-shadow(0 28px 70px rgba(27, 21, 14, 0.28));
    }

    .relationship-invite-dialog .relationship-invite-card {
      grid-template-columns: 64px minmax(0, 1fr) !important;
      gap: 16px !important;
      padding: 28px 28px 22px !important;
      border-radius: 20px !important;
      background:
        linear-gradient(180deg, rgba(255, 252, 247, 0.94), rgba(255, 252, 247, 0.78)),
        url("/prototype/assets/relationship-match/invite/generated-v1/relationship-invite-modal-bg-v1.webp") center / cover no-repeat !important;
      box-shadow:
        0 26px 70px rgba(27, 21, 14, 0.2),
        inset 0 0 0 1px rgba(173, 138, 77, 0.18) !important;
    }

    .relationship-invite-dialog .relationship-invite-card::after {
      inset: 14px !important;
      border-color: rgba(173, 138, 77, 0.11) !important;
      border-radius: 16px !important;
    }

    .relationship-invite-dialog .relationship-invite-seal {
      width: 58px !important;
      height: 58px !important;
      border-radius: 14px !important;
      font-size: 31px !important;
    }

    .relationship-invite-dialog .relationship-invite-card h3 {
      margin-top: 4px;
      font-size: clamp(24px, 5vw, 32px) !important;
      line-height: 1.15 !important;
    }

    .relationship-invite-dialog .relationship-invite-card p {
      max-width: 31em !important;
      font-size: 14px !important;
      line-height: 1.75 !important;
    }

    .relationship-invite-link-sheet {
      grid-template-columns: 48px minmax(0, 1fr) !important;
      gap: 12px;
      padding: 12px 14px !important;
      border-radius: 14px !important;
      background: rgba(255, 252, 247, 0.58) !important;
    }

    .relationship-invite-link-sheet strong {
      font-size: 13px !important;
    }

    .relationship-invite-privacy {
      gap: 7px !important;
    }

    .relationship-invite-privacy span {
      background: rgba(255, 252, 247, 0.62);
      font-size: 11px !important;
    }

    .relationship-invite-actions {
      display: grid !important;
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      gap: 10px !important;
    }

    .relationship-invite-actions button {
      min-height: 44px !important;
      border-radius: 999px !important;
      font-family: var(--serif);
      font-size: 14px !important;
      font-weight: 900;
    }

    .relationship-invite-actions button.primary {
      background: linear-gradient(180deg, #b93a2f, #94251e) !important;
      color: #fffaf1 !important;
    }

    .relationship-invite-actions button.danger {
      background: rgba(184, 54, 43, 0.035) !important;
    }

    @media (max-width: 560px) {
      .relationship-match-screen.is-people-step .relationship-profile-drawer-card,
      .relationship-match-screen.is-people-step .relationship-drawer-actions,
      .relationship-match-screen.is-people-step .relationship-preview-list,
      .relationship-invite-actions {
        grid-template-columns: 1fr !important;
      }

      .relationship-invite-dialog .relationship-invite-card {
        grid-template-columns: 54px minmax(0, 1fr) !important;
        padding: 24px 20px 20px !important;
      }
    }

    /* Relationship people-step design fix: keep the drawer, invite dialog and bottom CTA readable. */
    .relationship-match-screen.is-people-step .relationship-dimension-slip-role {
      top: 10.4% !important;
    }

    .relationship-match-screen.is-people-step .relationship-profile-drawer-card {
      display: grid !important;
      grid-template-columns: minmax(238px, 0.86fr) minmax(280px, 1fr) !important;
      align-items: center !important;
      gap: 18px 22px !important;
      padding: 20px 28px 22px !important;
      overflow: visible !important;
      clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px) !important;
      background:
        linear-gradient(90deg, rgba(255, 252, 247, 0.99) 0 50%, rgba(255, 252, 247, 0.9) 70%, rgba(255, 252, 247, 0.66) 100%),
        url("/prototype/assets/relationship-match/invite/generated-v1/relationship-invite-dossier-bg-v1.webp") right center / 310px auto no-repeat !important;
    }

    .relationship-match-screen.is-people-step .relationship-profile-drawer-copy {
      min-width: 0 !important;
    }

    .relationship-match-screen.is-people-step .relationship-profile-drawer-copy span,
    .relationship-match-screen.is-people-step .relationship-profile-drawer-card .relationship-select-field > span {
      color: rgba(156, 111, 45, 0.86) !important;
      font-size: 12px !important;
      line-height: 1.2 !important;
    }

    .relationship-match-screen.is-people-step .relationship-profile-drawer-copy strong {
      display: block !important;
      overflow: visible !important;
      max-width: none !important;
      color: #171512 !important;
      font-size: clamp(23px, 4.4vw, 30px) !important;
      line-height: 1.14 !important;
      text-overflow: clip !important;
      white-space: normal !important;
    }

    .relationship-match-screen.is-people-step .relationship-profile-drawer-copy em {
      display: block !important;
      overflow: visible !important;
      max-width: 24em !important;
      color: rgba(24, 23, 21, 0.56) !important;
      font-size: 13px !important;
      line-height: 1.55 !important;
      text-overflow: clip !important;
      white-space: normal !important;
    }

    .relationship-match-screen.is-people-step .relationship-profile-drawer-card .relationship-select-field {
      min-width: 0 !important;
    }

    .relationship-match-screen.is-people-step .relationship-profile-drawer-card .relationship-select-field select {
      width: 100% !important;
      min-height: 56px !important;
      padding: 0 46px 0 18px !important;
      font-size: 17px !important;
      line-height: 1.2 !important;
    }

    .relationship-match-screen.is-people-step .relationship-drawer-actions {
      grid-column: 1 / -1 !important;
      display: grid !important;
      grid-template-columns: minmax(184px, 230px) minmax(0, 1fr) !important;
      align-items: center !important;
      gap: 18px !important;
      padding-top: 18px !important;
      border-top: 1px solid rgba(173, 138, 77, 0.13) !important;
    }

    .relationship-match-screen.is-people-step .relationship-drawer-actions button {
      width: 100% !important;
      min-height: 46px !important;
      padding: 0 22px !important;
      white-space: nowrap !important;
    }

    .relationship-match-screen.is-people-step .relationship-drawer-actions small {
      display: block !important;
      overflow: visible !important;
      color: rgba(24, 23, 21, 0.5) !important;
      font-size: 13px !important;
      line-height: 1.55 !important;
      text-overflow: clip !important;
      white-space: normal !important;
    }

    .relationship-match-screen.is-people-step .relationship-setup-card {
      gap: 16px !important;
      padding: 20px 0 0 !important;
      border-top: 1px solid rgba(173, 138, 77, 0.14) !important;
      background: transparent !important;
      box-shadow: none !important;
    }

    .relationship-match-screen.is-people-step .relationship-setup-compact-head {
      display: grid !important;
      grid-template-columns: minmax(0, 1fr) auto !important;
      align-items: center !important;
      gap: 14px !important;
      padding: 0 !important;
    }

    .relationship-match-screen.is-people-step .relationship-setup-compact-head > span {
      overflow: hidden !important;
      color: rgba(156, 111, 45, 0.9) !important;
      font-size: 14px !important;
      line-height: 1.35 !important;
      text-overflow: ellipsis !important;
      white-space: nowrap !important;
    }

    .relationship-match-screen.is-people-step .relationship-back-step {
      min-width: 104px !important;
      min-height: 38px !important;
      padding: 0 18px !important;
      white-space: nowrap !important;
    }

    .relationship-match-screen.is-people-step .relationship-preview-list {
      display: grid !important;
      grid-template-columns: 1fr !important;
      gap: 0 !important;
      border-top: 1px solid rgba(173, 138, 77, 0.14) !important;
      border-bottom: 1px solid rgba(173, 138, 77, 0.14) !important;
      background: transparent !important;
    }

    .relationship-match-screen.is-people-step .relationship-preview-list button {
      display: grid !important;
      grid-template-columns: 48px minmax(0, 1fr) !important;
      gap: 14px !important;
      min-height: 78px !important;
      padding: 14px 0 !important;
      border: 0 !important;
      border-bottom: 1px solid rgba(173, 138, 77, 0.12) !important;
      background: transparent !important;
      text-align: left !important;
    }

    .relationship-match-screen.is-people-step .relationship-preview-list button:last-child {
      border-bottom: 0 !important;
    }

    .relationship-match-screen.is-people-step .relationship-preview-list button .seal {
      width: 42px !important;
      height: 34px !important;
      border-radius: 10px !important;
      font-size: 16px !important;
    }

    .relationship-match-screen.is-people-step .relationship-preview-list strong {
      display: block !important;
      overflow: visible !important;
      font-size: clamp(18px, 3.6vw, 21px) !important;
      line-height: 1.25 !important;
      text-overflow: clip !important;
      white-space: normal !important;
    }

    .relationship-match-screen.is-people-step .relationship-preview-list small {
      display: block !important;
      overflow: visible !important;
      color: rgba(24, 23, 21, 0.5) !important;
      font-size: 13px !important;
      line-height: 1.5 !important;
      text-overflow: clip !important;
      white-space: normal !important;
      -webkit-box-orient: initial !important;
      -webkit-line-clamp: unset !important;
    }

    .relationship-match-screen.is-people-step .relationship-preview-list i {
      display: none !important;
    }

    .relationship-match-screen.is-people-step .relationship-setup-card > .relationship-generate-button:disabled {
      border: 1px solid rgba(173, 138, 77, 0.16) !important;
      background:
        linear-gradient(180deg, rgba(248, 239, 217, 0.76), rgba(237, 225, 203, 0.6)) !important;
      box-shadow: none !important;
      color: rgba(24, 23, 21, 0.38) !important;
      cursor: not-allowed !important;
    }

    .relationship-match-screen.is-people-step .relationship-setup-card > .relationship-generate-button:not(:disabled) {
      color: #fffaf1 !important;
    }

    .relationship-match-screen.is-people-step .relationship-privacy-note {
      display: block !important;
      overflow: visible !important;
      max-width: none !important;
      color: rgba(24, 23, 21, 0.44) !important;
      font-size: 13px !important;
      line-height: 1.55 !important;
      text-align: center !important;
      white-space: normal !important;
    }

    .relationship-match-screen.is-people-step .relationship-setup-card > .relationship-generate-button.is-generating:disabled {
      position: relative !important;
      overflow: hidden !important;
      border-color: rgba(123, 34, 27, 0.62) !important;
      background: linear-gradient(180deg, #b83a2d, #8f241b) !important;
      color: #fffaf1 !important;
      box-shadow: 0 16px 34px rgba(123, 34, 27, 0.18) !important;
      cursor: progress !important;
    }

    .relationship-match-screen.is-people-step .relationship-setup-card > .relationship-generate-button.is-generating::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(100deg, transparent 0 34%, rgba(255, 250, 241, 0.34) 46%, transparent 58% 100%);
      transform: translateX(-110%);
      pointer-events: none;
    }

    .relationship-generate-ritual {
      position: fixed;
      inset: 0;
      z-index: 82;
      display: grid;
      place-items: center;
      padding: max(18px, env(safe-area-inset-top)) 18px max(24px, env(safe-area-inset-bottom));
      background:
        linear-gradient(180deg, rgba(255, 252, 247, 0.84), rgba(243, 233, 214, 0.72)),
        rgba(255, 252, 247, 0.72);
      backdrop-filter: blur(10px) saturate(112%);
      -webkit-backdrop-filter: blur(10px) saturate(112%);
    }

    .relationship-ritual-panel {
      position: relative;
      isolation: isolate;
      width: min(520px, 100%);
      padding: 28px 24px 24px;
      overflow: hidden;
      border: 1px solid rgba(173, 138, 77, 0.2);
      border-radius: 18px;
      background:
        linear-gradient(180deg, rgba(255, 252, 247, 0.96), rgba(255, 249, 237, 0.86)),
        url("/prototype/assets/relationship-match/invite/generated-v1/relationship-invite-modal-bg-v1.webp") center / cover no-repeat;
      box-shadow:
        0 28px 80px rgba(54, 44, 32, 0.22),
        inset 0 0 0 1px rgba(255, 250, 241, 0.58);
      text-align: center;
    }

    .relationship-ritual-panel::before {
      content: "";
      position: absolute;
      inset: 13px;
      z-index: -1;
      border: 1px solid rgba(173, 138, 77, 0.12);
      border-radius: 14px;
      pointer-events: none;
    }

    .relationship-ritual-kicker {
      color: rgba(156, 111, 45, 0.88);
      font-family: var(--serif);
      font-size: 12px;
      font-weight: 900;
      letter-spacing: 0.18em;
    }

    .relationship-ritual-orbit {
      position: relative;
      display: grid;
      grid-template-columns: minmax(0, 1fr) 62px minmax(0, 1fr);
      align-items: center;
      gap: 6px;
      min-height: 190px;
      margin: 14px auto 8px;
    }

    .relationship-ritual-slip {
      position: relative;
      display: grid;
      justify-items: center;
      gap: 4px;
      min-height: 138px;
      padding: 16px 12px 14px;
      border: 1px solid color-mix(in srgb, var(--ritual-color) 30%, rgba(173, 138, 77, 0.24));
      border-radius: 16px;
      background:
        linear-gradient(180deg, rgba(255, 252, 247, 0.96), color-mix(in srgb, var(--ritual-color) 9%, rgba(248, 239, 217, 0.9))),
        rgba(255, 252, 247, 0.92);
      box-shadow:
        0 16px 32px rgba(54, 44, 32, 0.12),
        inset 0 1px 0 rgba(255, 250, 241, 0.7);
    }

    .relationship-ritual-slip small {
      color: rgba(156, 111, 45, 0.72);
      font-size: 11px;
      font-weight: 900;
      letter-spacing: 0.16em;
    }

    .relationship-ritual-slip b {
      display: grid;
      place-items: center;
      width: 54px;
      height: 54px;
      border: 1px solid color-mix(in srgb, var(--ritual-color) 48%, rgba(173, 138, 77, 0.28));
      border-radius: 50%;
      background: rgba(255, 250, 241, 0.62);
      color: var(--ritual-color);
      font-family: var(--serif);
      font-size: 30px;
      line-height: 1;
    }

    .relationship-ritual-slip strong {
      overflow: hidden;
      max-width: 100%;
      color: #171512;
      font-family: var(--serif);
      font-size: 18px;
      line-height: 1.18;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .relationship-ritual-slip em {
      color: rgba(24, 23, 21, 0.5);
      font-size: 12px;
      font-style: normal;
    }

    .relationship-ritual-seal {
      position: relative;
      z-index: 3;
      display: grid;
      place-items: center;
      width: 62px;
      height: 62px;
      border: 1px solid rgba(184, 54, 43, 0.28);
      border-radius: 50%;
      background:
        radial-gradient(circle at 48% 42%, rgba(255, 250, 241, 0.95), rgba(245, 223, 194, 0.74) 72%),
        rgba(255, 252, 247, 0.9);
      color: #a92f27;
      font-family: var(--serif);
      font-size: 34px;
      font-weight: 900;
      box-shadow:
        0 0 0 9px rgba(184, 54, 43, 0.08),
        0 16px 34px rgba(123, 34, 27, 0.16);
    }

    .relationship-ritual-thread {
      position: absolute;
      left: 18%;
      right: 18%;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(184, 54, 43, 0.42), transparent);
      transform: scaleX(0);
      transform-origin: center;
      pointer-events: none;
    }

    .relationship-ritual-thread.is-top {
      top: 57px;
    }

    .relationship-ritual-thread.is-bottom {
      bottom: 52px;
    }

    .relationship-ritual-panel h3 {
      margin: 0;
      color: #171512;
      font-family: var(--serif);
      font-size: clamp(24px, 6vw, 34px);
      line-height: 1.18;
      letter-spacing: 0.06em;
    }

    .relationship-ritual-steps {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
      margin-top: 16px;
    }

    .relationship-ritual-steps span {
      display: grid;
      place-items: center;
      min-height: 34px;
      border: 1px solid rgba(173, 138, 77, 0.18);
      border-radius: 999px;
      background: rgba(255, 250, 241, 0.62);
      color: rgba(90, 72, 50, 0.68);
      font-size: 12px;
      font-weight: 800;
      line-height: 1.2;
      white-space: nowrap;
    }

    @media (prefers-reduced-motion: no-preference) {
      .relationship-generate-ritual {
        animation: relationshipRitualFade 0.22s ease both;
      }

      .relationship-ritual-panel {
        animation: relationshipRitualPanel 0.44s cubic-bezier(0.2, 0.9, 0.2, 1) both;
      }

      .relationship-ritual-slip.is-left {
        animation: relationshipRitualLeftSlip 1.28s cubic-bezier(0.18, 0.82, 0.2, 1) both;
      }

      .relationship-ritual-slip.is-right {
        animation: relationshipRitualRightSlip 1.28s cubic-bezier(0.18, 0.82, 0.2, 1) both;
      }

      .relationship-ritual-seal {
        animation: relationshipRitualSeal 1.28s cubic-bezier(0.18, 0.82, 0.2, 1) both;
      }

      .relationship-ritual-thread {
        animation: relationshipRitualThread 1.12s 0.18s cubic-bezier(0.18, 0.82, 0.2, 1) both;
      }

      .relationship-ritual-steps span {
        animation: relationshipRitualStep 1.24s ease both;
      }

      .relationship-ritual-steps span:nth-child(2) {
        animation-delay: 0.24s;
      }

      .relationship-ritual-steps span:nth-child(3) {
        animation-delay: 0.48s;
      }

      .relationship-match-screen.is-people-step .relationship-setup-card > .relationship-generate-button.is-generating::after {
        animation: relationshipGenerateButtonSheen 1.08s ease infinite;
      }
    }

    @keyframes relationshipRitualFade {
      from { opacity: 0; }
      to { opacity: 1; }
    }

    @keyframes relationshipRitualPanel {
      from { opacity: 0; transform: translateY(18px) scale(0.98); }
      to { opacity: 1; transform: translateY(0) scale(1); }
    }

    @keyframes relationshipRitualLeftSlip {
      0% { opacity: 0; transform: translateX(-34px) rotate(-4deg) scale(0.96); }
      58% { opacity: 1; transform: translateX(9px) rotate(-1deg) scale(1); }
      100% { opacity: 1; transform: translateX(0) rotate(-1.5deg) scale(1); }
    }

    @keyframes relationshipRitualRightSlip {
      0% { opacity: 0; transform: translateX(34px) rotate(4deg) scale(0.96); }
      58% { opacity: 1; transform: translateX(-9px) rotate(1deg) scale(1); }
      100% { opacity: 1; transform: translateX(0) rotate(1.5deg) scale(1); }
    }

    @keyframes relationshipRitualSeal {
      0%, 42% { opacity: 0; transform: scale(0.58); }
      68% { opacity: 1; transform: scale(1.08); }
      100% { opacity: 1; transform: scale(1); }
    }

    @keyframes relationshipRitualThread {
      0%, 24% { opacity: 0; transform: scaleX(0); }
      100% { opacity: 1; transform: scaleX(1); }
    }

    @keyframes relationshipRitualStep {
      0%, 34% {
        border-color: rgba(173, 138, 77, 0.18);
        color: rgba(90, 72, 50, 0.58);
        transform: translateY(0);
      }
      50%, 86% {
        border-color: rgba(184, 54, 43, 0.28);
        color: #a92f27;
        transform: translateY(-2px);
      }
      100% {
        border-color: rgba(173, 138, 77, 0.18);
        color: rgba(90, 72, 50, 0.68);
        transform: translateY(0);
      }
    }

    @keyframes relationshipGenerateButtonSheen {
      from { transform: translateX(-110%); }
      to { transform: translateX(110%); }
    }

    @media (prefers-reduced-motion: reduce) {
      .relationship-generate-ritual,
      .relationship-ritual-panel,
      .relationship-ritual-slip,
      .relationship-ritual-seal,
      .relationship-ritual-thread,
      .relationship-ritual-steps span,
      .relationship-match-screen.is-people-step .relationship-setup-card > .relationship-generate-button.is-generating::after {
        animation: none !important;
        transition: none !important;
      }

      .relationship-ritual-thread {
        opacity: 1;
        transform: scaleX(1);
      }
    }

    @media (max-width: 520px) {
      .relationship-ritual-panel {
        padding: 24px 18px 20px;
      }

      .relationship-ritual-orbit {
        grid-template-columns: minmax(0, 1fr) 50px minmax(0, 1fr);
        gap: 4px;
        min-height: 168px;
      }

      .relationship-ritual-slip {
        min-height: 122px;
        padding: 13px 8px 12px;
      }

      .relationship-ritual-slip b {
        width: 46px;
        height: 46px;
        font-size: 26px;
      }

      .relationship-ritual-slip strong {
        font-size: 16px;
      }

      .relationship-ritual-seal {
        width: 50px;
        height: 50px;
        font-size: 29px;
      }

      .relationship-ritual-steps {
        grid-template-columns: 1fr;
      }
    }

    .relationship-invite-overlay {
      padding: max(18px, env(safe-area-inset-top)) 18px max(20px, env(safe-area-inset-bottom)) !important;
    }

    .relationship-invite-dialog {
      width: min(560px, calc(100vw - 32px)) !important;
      max-height: calc(100dvh - 44px) !important;
      overflow: auto !important;
    }

    .relationship-invite-dialog .relationship-invite-card {
      grid-template-columns: 62px minmax(0, 1fr) !important;
      gap: 15px 18px !important;
      padding: 28px 28px 24px !important;
    }

    .relationship-invite-link-sheet {
      grid-column: 1 / -1 !important;
      grid-template-columns: 48px minmax(0, 1fr) !important;
      align-items: center !important;
    }

    .relationship-invite-link-sheet strong,
    .relationship-invite-link-sheet em {
      overflow: visible !important;
      max-width: 100% !important;
      text-overflow: clip !important;
      white-space: normal !important;
      overflow-wrap: anywhere !important;
      word-break: break-word !important;
    }

    .relationship-invite-privacy {
      grid-column: 1 / -1 !important;
    }

    .relationship-invite-actions {
      grid-column: 1 / -1 !important;
      display: grid !important;
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      gap: 10px !important;
    }

    .relationship-invite-actions button {
      min-height: 46px !important;
      padding-inline: 14px !important;
      white-space: normal !important;
    }

    @media (max-width: 700px) {
      .relationship-match-screen.is-people-step .relationship-profile-drawer-card {
        grid-template-columns: 1fr !important;
        padding: 20px 24px 22px !important;
        background:
          linear-gradient(180deg, rgba(255, 252, 247, 0.98), rgba(255, 252, 247, 0.82)),
          url("/prototype/assets/relationship-match/invite/generated-v1/relationship-invite-dossier-bg-v1.webp") right bottom / 280px auto no-repeat !important;
      }

      .relationship-match-screen.is-people-step .relationship-drawer-actions {
        grid-template-columns: 1fr !important;
      }

      .relationship-match-screen.is-people-step .relationship-drawer-actions button {
        justify-self: start !important;
        width: min(230px, 100%) !important;
      }

      .relationship-match-screen.is-people-step .relationship-setup-compact-head {
        grid-template-columns: 1fr auto !important;
      }
    }

    @media (max-width: 560px) {
      .relationship-match-screen.is-people-step .relationship-profile-drawer-copy strong {
        font-size: 24px !important;
      }

      .relationship-match-screen.is-people-step .relationship-setup-compact-head {
        grid-template-columns: 1fr !important;
      }

      .relationship-match-screen.is-people-step .relationship-back-step {
        justify-self: start !important;
      }

      .relationship-invite-dialog .relationship-invite-card,
      .relationship-invite-actions {
        grid-template-columns: 1fr !important;
      }

      .relationship-invite-dialog .relationship-invite-seal {
        justify-self: start !important;
      }
    }

    /* Relationship invite/drawer design pass: custom archive menu and smaller modal sheet. */
    .relationship-match-screen.is-people-step .relationship-profile-drawer-card {
      grid-template-columns: minmax(0, 0.95fr) minmax(180px, 0.78fr) !important;
      gap: 16px 20px !important;
      padding: 18px 24px 20px !important;
    }

    .relationship-match-screen.is-people-step .relationship-profile-drawer-card:has(.relationship-partner-menu[open]) {
      overflow: visible !important;
      clip-path: none !important;
    }

    .relationship-match-screen.is-people-step .relationship-profile-drawer-copy strong {
      font-size: clamp(22px, 3.7vw, 26px) !important;
      line-height: 1.25 !important;
    }

    .relationship-match-screen.is-people-step .relationship-partner-menu {
      position: relative;
      align-self: end;
      box-sizing: border-box;
      width: 100%;
      min-width: 0;
      max-width: 100%;
      padding-left: 18px;
      border-left: 1px solid rgba(173, 138, 77, 0.16);
      z-index: 60;
    }

    .relationship-match-screen.is-people-step .relationship-partner-menu summary {
      box-sizing: border-box;
      display: grid;
      grid-template-columns: minmax(0, 1fr) 32px;
      align-items: center;
      width: 100%;
      min-height: 62px;
      padding: 8px 12px 8px 14px;
      border: 1px solid rgba(173, 138, 77, 0.22);
      border-radius: 12px;
      background:
        linear-gradient(180deg, rgba(255, 252, 247, 0.96), rgba(255, 248, 236, 0.72));
      color: var(--ink);
      cursor: pointer;
      list-style: none;
      box-shadow:
        inset 0 0 0 1px rgba(255, 252, 247, 0.58),
        0 8px 18px rgba(72, 51, 32, 0.045);
    }

    .relationship-match-screen.is-people-step .relationship-partner-menu summary::-webkit-details-marker {
      display: none;
    }

    .relationship-match-screen.is-people-step .relationship-partner-menu summary > span {
      grid-column: 1 / -1;
      color: rgba(156, 111, 45, 0.86);
      font-family: var(--serif);
      font-size: 12px;
      font-weight: 900;
      letter-spacing: 0.08em;
      line-height: 1.15;
    }

    .relationship-match-screen.is-people-step .relationship-partner-menu summary > strong {
      overflow: hidden;
      color: rgba(24, 23, 21, 0.84);
      font-family: var(--serif);
      font-size: 17px;
      font-weight: 500;
      line-height: 1.35;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .relationship-match-screen.is-people-step .relationship-partner-menu summary > i {
      display: grid;
      place-items: center;
      justify-self: end;
      width: 28px;
      height: 28px;
      border: 1px solid rgba(173, 138, 77, 0.18);
      border-radius: 999px;
      background: rgba(255, 252, 247, 0.72);
      transition: transform 220ms var(--ease);
    }

    .relationship-match-screen.is-people-step .relationship-partner-menu summary > i::before {
      content: "";
      width: 8px;
      height: 8px;
      margin-top: -3px;
      border-right: 2px solid rgba(24, 23, 21, 0.42);
      border-bottom: 2px solid rgba(24, 23, 21, 0.42);
      transform: rotate(45deg);
    }

    .relationship-match-screen.is-people-step .relationship-partner-menu[open] summary > i {
      transform: rotate(180deg);
    }

    .relationship-match-screen.is-people-step .relationship-partner-menu[open] {
      display: block;
      grid-column: auto;
      padding-left: 18px;
      border-left: 1px solid rgba(173, 138, 77, 0.16);
      z-index: 90;
    }

    .relationship-match-screen.is-people-step .relationship-partner-menu[open] summary {
      grid-column: auto;
    }

    .relationship-match-screen.is-people-step .relationship-partner-menu-list {
      position: absolute;
      top: calc(100% + 8px);
      left: 18px;
      right: 0;
      display: grid;
      gap: 0;
      box-sizing: border-box;
      width: auto;
      max-height: 196px;
      overflow-x: hidden;
      overflow-y: auto;
      padding: 8px 10px;
      border: 1px solid rgba(173, 138, 77, 0.22);
      border-radius: 14px;
      background: rgba(255, 252, 247, 0.98);
      box-shadow:
        0 18px 44px rgba(72, 51, 32, 0.16),
        inset 0 0 0 1px rgba(255, 252, 247, 0.64);
      z-index: 100;
    }

    .relationship-match-screen.is-people-step .relationship-partner-menu-list button,
    .relationship-match-screen.is-people-step .relationship-partner-menu-empty {
      display: grid;
      width: 100%;
      gap: 2px;
      min-height: 52px;
      padding: 9px 10px;
      border: 0;
      border-bottom: 1px solid rgba(173, 138, 77, 0.12);
      background: transparent;
      color: rgba(24, 23, 21, 0.82);
      font-family: var(--sans);
      text-align: left;
    }

    .relationship-match-screen.is-people-step .relationship-partner-menu-list button:last-child,
    .relationship-match-screen.is-people-step .relationship-partner-menu-empty:last-child {
      border-bottom: 0;
    }

    .relationship-match-screen.is-people-step .relationship-partner-menu-list button:hover {
      background: rgba(173, 138, 77, 0.06);
    }

    .relationship-match-screen.is-people-step .relationship-partner-menu-list strong {
      overflow: hidden;
      font-family: var(--serif);
      font-size: 17px;
      font-weight: 700;
      line-height: 1.25;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .relationship-match-screen.is-people-step .relationship-partner-menu-list small {
      overflow: hidden;
      color: rgba(24, 23, 21, 0.52);
      font-size: 12px;
      line-height: 1.35;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .relationship-match-screen.is-people-step .relationship-partner-menu-create strong {
      color: var(--seal);
    }

    .relationship-match-screen.is-people-step .relationship-drawer-actions {
      grid-template-columns: minmax(170px, 210px) minmax(0, 1fr) !important;
      gap: 16px !important;
      padding-top: 16px !important;
    }

    .relationship-match-screen.is-people-step .relationship-drawer-actions button {
      min-height: 44px !important;
    }

    .relationship-invite-dialog {
      width: min(430px, calc(100vw - 36px)) !important;
      max-height: calc(100dvh - 32px) !important;
      border-radius: 20px !important;
    }

    .relationship-invite-dialog .relationship-invite-card {
      grid-template-columns: 48px minmax(0, 1fr) !important;
      gap: 10px 14px !important;
      padding: 20px 20px 18px !important;
      border-radius: 20px !important;
    }

    .relationship-invite-dialog .relationship-invite-seal {
      width: 46px !important;
      height: 46px !important;
      border-radius: 14px !important;
      font-size: 25px !important;
    }

    .relationship-invite-dialog .relationship-invite-card h3 {
      font-size: clamp(21px, 3.8vw, 25px) !important;
      line-height: 1.16 !important;
    }

    .relationship-invite-dialog .relationship-invite-card p {
      font-size: 12.5px !important;
      line-height: 1.62 !important;
    }

    .relationship-invite-timeline {
      margin: 14px 0 12px !important;
    }

    .relationship-invite-link-sheet {
      padding: 10px 11px !important;
    }

    .relationship-invite-link-sheet .relationship-qr-mark {
      width: 42px !important;
      height: 42px !important;
    }

    .relationship-invite-link-sheet strong {
      font-size: 12px !important;
      line-height: 1.34 !important;
    }

    .relationship-invite-privacy span {
      padding: 5px 8px !important;
      font-size: 10.5px !important;
    }

    .relationship-invite-actions button {
      min-height: 40px !important;
      font-size: 12.5px !important;
    }

    @media (max-width: 700px) {
      .relationship-match-screen.is-people-step .relationship-profile-drawer-card {
        grid-template-columns: 1fr !important;
      }

      .relationship-match-screen.is-people-step .relationship-partner-menu {
        padding-left: 0;
        border-left: 0;
      }

      .relationship-match-screen.is-people-step .relationship-partner-menu[open] {
        padding-left: 0;
        border-left: 0;
      }

      .relationship-match-screen.is-people-step .relationship-partner-menu[open] summary {
        grid-column: auto;
      }

      .relationship-match-screen.is-people-step .relationship-partner-menu-list {
        left: 0;
      }
    }

    .relationship-match-screen.has-invite-panel {
      animation: none !important;
      transform: none !important;
    }

    /* Relationship invite and partner dossier fill polish. */
    .relationship-invite-dialog .relationship-invite-card {
      background:
        linear-gradient(180deg, rgba(255, 252, 247, 0.93), rgba(255, 252, 247, 0.76)),
        url("/prototype/assets/relationship-match/invite/generated-v1/relationship-invite-modal-bg-v1.webp") center / cover no-repeat !important;
      box-shadow:
        0 28px 72px rgba(27, 21, 14, 0.28),
        inset 0 0 0 1px rgba(173, 138, 77, 0.22) !important;
    }

    .relationship-invite-dialog .relationship-invite-card::before {
      content: "";
      position: absolute;
      inset: 10px;
      border: 1px solid rgba(173, 138, 77, 0.12);
      border-radius: 16px;
      pointer-events: none;
    }

    .relationship-invite-dialog .relationship-invite-main,
    .relationship-invite-dialog .relationship-invite-timeline,
    .relationship-invite-dialog .relationship-invite-link-sheet,
    .relationship-invite-dialog .relationship-invite-demo-warning,
    .relationship-invite-dialog .relationship-invite-privacy,
    .relationship-invite-dialog .relationship-invite-actions {
      position: relative;
      z-index: 1;
    }

    .relationship-invite-dialog .relationship-invite-card h3 {
      margin-top: 4px !important;
      margin-bottom: 7px !important;
      max-width: 12em;
      text-wrap: balance;
    }

    .relationship-invite-demo-warning {
      grid-column: 1 / -1;
      display: grid;
      gap: 4px;
      padding: 11px 12px !important;
      border: 1px solid rgba(173, 138, 77, 0.2) !important;
      border-radius: 12px !important;
      background:
        linear-gradient(90deg, rgba(255, 252, 247, 0.76), rgba(255, 252, 247, 0.46)),
        rgba(173, 138, 77, 0.05) !important;
      color: rgba(83, 62, 32, 0.78) !important;
    }

    .relationship-invite-demo-warning strong {
      color: rgba(123, 34, 27, 0.82) !important;
      font-family: var(--serif);
      font-size: 12px !important;
      letter-spacing: 0.08em;
    }

    .relationship-invite-demo-warning span {
      color: rgba(24, 23, 21, 0.54) !important;
      font-size: 11px !important;
      line-height: 1.55 !important;
    }

    .relationship-invite-actions button:first-child {
      border-color: rgba(173, 138, 77, 0.22) !important;
      background: rgba(255, 252, 247, 0.68) !important;
      color: rgba(24, 23, 21, 0.68) !important;
    }

    .relationship-invite-actions button.primary {
      border-color: rgba(123, 34, 27, 0.46) !important;
      background: linear-gradient(180deg, #b83a2d, #8f241b) !important;
      color: #fffaf1 !important;
      box-shadow: 0 12px 24px rgba(123, 34, 27, 0.14);
    }

    .relationship-invite-screen {
      padding-inline: 0;
      background:
        linear-gradient(180deg, rgba(255, 252, 247, 0.9), rgba(249, 241, 226, 0.72)),
        url("/prototype/assets/relationship-match/invite/generated-v1/relationship-invite-fill-bg-v1.webp") center top / cover no-repeat !important;
    }

    .relationship-invite-page-head {
      max-width: 540px;
      margin: 0 auto;
      padding-inline: 24px !important;
    }

    .relationship-invite-page-head .page-title h1 {
      font-size: clamp(23px, 5.6vw, 29px);
      letter-spacing: 0.09em;
    }

    .relationship-invite-page-stamp {
      background: rgba(255, 252, 247, 0.62);
      box-shadow:
        inset 0 0 0 6px rgba(184, 54, 43, 0.04),
        0 10px 22px rgba(72, 51, 32, 0.08);
    }

    .relationship-invite-landing {
      max-width: 540px !important;
      padding-bottom: max(28px, env(safe-area-inset-bottom)) !important;
    }

    .relationship-invite-scroll {
      min-height: 208px !important;
      padding: 28px 26px 26px !important;
    }

    .relationship-invite-scroll h2 {
      max-width: 7.5em;
      text-wrap: balance;
    }

    .relationship-invite-scroll p {
      max-width: 25em;
    }

    .relationship-invite-form {
      padding: 20px 18px 22px !important;
      background:
        linear-gradient(180deg, rgba(255, 252, 247, 0.9), rgba(255, 252, 247, 0.62)),
        rgba(255, 252, 247, 0.72) !important;
    }

    .relationship-invite-form-head {
      display: grid;
      gap: 4px;
      padding: 4px 2px 12px;
      border-bottom: 1px solid rgba(173, 138, 77, 0.14);
    }

    .relationship-invite-form-head small {
      color: var(--gold);
      font-family: var(--serif);
      font-size: 12px;
      font-weight: 900;
      letter-spacing: 0.12em;
    }

    .relationship-invite-form-head strong {
      color: rgba(24, 23, 21, 0.88);
      font-family: var(--serif);
      font-size: 20px;
      line-height: 1.25;
      letter-spacing: 0.04em;
    }

    .relationship-invite-form-head span {
      color: rgba(24, 23, 21, 0.5);
      font-size: 12px;
      line-height: 1.55;
    }

    .relationship-invite-form label span {
      font-family: var(--serif);
      font-size: 14px;
    }

    .relationship-invite-form input,
    .relationship-invite-form select {
      border-color: rgba(173, 138, 77, 0.22) !important;
      background: rgba(255, 252, 247, 0.82) !important;
      color: rgba(24, 23, 21, 0.84);
    }

    .relationship-invite-form > button.primary {
      position: sticky;
      bottom: max(12px, env(safe-area-inset-bottom));
      z-index: 4;
      margin-top: 4px;
      border-radius: 999px !important;
    }

    .profile-edit-screen.is-relationship-partner-edit {
      padding-inline: 0;
      background:
        linear-gradient(180deg, rgba(255, 252, 247, 0.92), rgba(249, 241, 226, 0.74)),
        url("/prototype/assets/relationship-match/invite/generated-v1/relationship-invite-fill-bg-v1.webp") center top / cover no-repeat;
    }

    .profile-edit-screen.is-relationship-partner-edit .page-head,
    .profile-edit-screen.is-relationship-partner-edit .edit-lock-banner,
    .profile-edit-screen.is-relationship-partner-edit .profile-edit-form {
      width: min(540px, calc(100% - 44px));
      margin-left: auto;
      margin-right: auto;
    }

    .profile-edit-screen.is-relationship-partner-edit .page-head {
      padding-top: max(2px, env(safe-area-inset-top));
      padding-bottom: 14px;
      border-bottom: 1px solid rgba(173, 138, 77, 0.12);
    }

    .profile-edit-screen.is-relationship-partner-edit .page-title h1 {
      font-size: clamp(24px, 5.8vw, 30px);
      letter-spacing: 0.08em;
    }

    .profile-edit-screen.is-relationship-partner-edit .edit-lock-banner {
      position: relative;
      overflow: hidden;
      margin-top: 18px;
      margin-bottom: 16px;
      padding: 22px 20px 20px;
      border: 0;
      border-radius: 0;
      background:
        linear-gradient(90deg, rgba(255, 252, 247, 0.96) 0 56%, rgba(255, 252, 247, 0.62) 100%),
        url("/prototype/assets/relationship-match/invite/generated-v1/relationship-invite-dossier-bg-v1.webp") right center / 280px auto no-repeat;
      box-shadow:
        inset 0 0 0 1px rgba(173, 138, 77, 0.16),
        0 16px 36px rgba(72, 51, 32, 0.08);
      clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0 calc(100% - 12px), 0 12px);
    }

    .profile-edit-screen.is-relationship-partner-edit .edit-lock-banner strong {
      color: var(--gold);
      font-family: var(--serif);
      font-size: 15px;
    }

    .profile-edit-screen.is-relationship-partner-edit .edit-lock-banner p {
      max-width: 24em;
      color: rgba(24, 23, 21, 0.56);
      letter-spacing: 0.04em;
    }

    .profile-edit-screen.is-relationship-partner-edit .profile-edit-form {
      gap: 15px;
      padding: 20px 18px 22px;
      background:
        linear-gradient(180deg, rgba(255, 252, 247, 0.9), rgba(255, 252, 247, 0.6));
      box-shadow:
        inset 0 0 0 1px rgba(173, 138, 77, 0.16),
        0 16px 36px rgba(72, 51, 32, 0.07);
      clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0 calc(100% - 12px), 0 12px);
    }

    .profile-edit-screen.is-relationship-partner-edit .edit-field label,
    .profile-edit-screen.is-relationship-partner-edit .edit-field > span,
    .profile-edit-screen.is-relationship-partner-edit .edit-toggle span {
      color: var(--gold);
      font-family: var(--serif);
      font-size: 14px;
      font-weight: 900;
    }

    .profile-edit-screen.is-relationship-partner-edit .edit-field input,
    .profile-edit-screen.is-relationship-partner-edit .datetime-input.picker-shell {
      border-color: rgba(173, 138, 77, 0.22);
      border-radius: 0;
      background: rgba(255, 252, 247, 0.78);
      clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px);
    }

    .profile-edit-screen.is-relationship-partner-edit .gender-choice button {
      border-color: rgba(173, 138, 77, 0.22);
      background: rgba(255, 252, 247, 0.68);
      color: rgba(24, 23, 21, 0.64);
    }

    .profile-edit-screen.is-relationship-partner-edit .gender-choice button.active {
      border-color: rgba(184, 54, 43, 0.36);
      background: rgba(184, 54, 43, 0.08);
      color: var(--seal);
    }

    .profile-edit-screen.is-relationship-partner-edit .edit-actions .primary {
      border-color: rgba(123, 34, 27, 0.44);
      background: linear-gradient(180deg, #b83a2d, #8f241b);
      color: #fffaf1;
    }

    .relationship-invite-dialog .relationship-invite-link-sheet {
      grid-template-columns: minmax(0, 1fr) !important;
    }

    .relationship-invite-dialog .relationship-invite-link-sheet .relationship-qr-mark {
      display: none !important;
    }

    /* Relationship invite implementation: align modal and fill page with the core paper style. */
    .relationship-invite-overlay {
      place-items: end center !important;
      padding: max(18px, env(safe-area-inset-top)) 18px max(28px, env(safe-area-inset-bottom)) !important;
    }

    .relationship-invite-scrim {
      background:
        radial-gradient(circle at 50% 30%, rgba(255, 252, 247, 0.16), transparent 44%),
        rgba(24, 20, 16, 0.42) !important;
      backdrop-filter: blur(5px) !important;
    }

    .relationship-invite-dialog {
      width: min(496px, calc(100vw - 36px)) !important;
      max-height: min(80dvh, 660px) !important;
      border-radius: 20px !important;
      filter: drop-shadow(0 24px 70px rgba(27, 21, 14, 0.24)) !important;
    }

    .relationship-invite-dialog .relationship-invite-card {
      grid-template-columns: 50px minmax(0, 1fr) !important;
      gap: 12px 14px !important;
      padding: 18px !important;
      border: 1px solid rgba(173, 138, 77, 0.24) !important;
      border-radius: 20px !important;
      background:
        linear-gradient(180deg, rgba(255, 252, 247, 0.99), rgba(255, 250, 242, 0.97)),
        url("/prototype/assets/relationship-match/backgrounds/relationship-scroll-wash-v1.webp") center bottom / 420px auto no-repeat !important;
      box-shadow:
        0 24px 70px rgba(27, 21, 14, 0.24),
        inset 0 0 0 1px rgba(255, 252, 247, 0.74) !important;
    }

    .relationship-invite-dialog .relationship-invite-card::after {
      content: none !important;
    }

    .relationship-invite-dialog .relationship-invite-card::before {
      content: "";
      position: absolute;
      inset: 10px;
      border: 1px solid rgba(173, 138, 77, 0.12);
      border-radius: 16px;
      pointer-events: none;
    }

    .relationship-invite-dialog .relationship-invite-seal {
      width: 44px !important;
      height: 44px !important;
      border-color: rgba(184, 54, 43, 0.34) !important;
      border-radius: 13px !important;
      background: rgba(255, 252, 247, 0.82) !important;
      font-size: 25px !important;
      box-shadow: inset 0 0 0 5px rgba(184, 54, 43, 0.045) !important;
      animation: none !important;
    }

    .relationship-invite-dialog .relationship-invite-card small {
      color: var(--gold) !important;
      font-family: var(--serif) !important;
      font-size: 12px !important;
      font-weight: 900 !important;
      letter-spacing: 0.1em !important;
    }

    .relationship-invite-dialog .relationship-invite-card h3 {
      margin: 4px 0 5px !important;
      max-width: none !important;
      font-size: clamp(22px, 5.4vw, 27px) !important;
      line-height: 1.18 !important;
      letter-spacing: 0.04em !important;
    }

    .relationship-invite-dialog .relationship-invite-card p {
      max-width: 28em !important;
      color: rgba(24, 23, 21, 0.58) !important;
      font-size: 12.5px !important;
      line-height: 1.66 !important;
    }

    .relationship-invite-dialog .relationship-invite-main,
    .relationship-invite-dialog .relationship-invite-timeline,
    .relationship-invite-dialog .relationship-invite-link-sheet,
    .relationship-invite-dialog .relationship-invite-guest,
    .relationship-invite-dialog .relationship-invite-actions {
      position: relative;
      z-index: 1;
    }

    .relationship-invite-timeline {
      margin: 2px 0 2px !important;
      padding: 12px 0 4px !important;
    }

    .relationship-invite-timeline span {
      font-size: 11px !important;
    }

    .relationship-invite-timeline i {
      width: 26px !important;
      height: 26px !important;
      background: rgba(255, 252, 247, 0.72) !important;
    }

    .relationship-invite-link-sheet {
      gap: 12px !important;
      padding: 12px !important;
      border: 1px solid rgba(173, 138, 77, 0.16) !important;
      border-radius: 12px !important;
      background: rgba(255, 252, 247, 0.58) !important;
    }

    .relationship-invite-link-sheet strong {
      display: block;
      overflow: hidden !important;
      max-width: 100% !important;
      color: rgba(24, 23, 21, 0.75) !important;
      font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important;
      font-size: 12px !important;
      font-weight: 800 !important;
      line-height: 1.4 !important;
      text-overflow: ellipsis !important;
      white-space: nowrap !important;
      overflow-wrap: normal !important;
      word-break: normal !important;
    }

    .relationship-invite-link-sheet em {
      display: block;
      margin-top: 3px;
      color: rgba(24, 23, 21, 0.52) !important;
      font-size: 11.5px !important;
      font-style: normal;
      line-height: 1.45 !important;
    }

    .relationship-invite-actions {
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      gap: 10px !important;
      padding-top: 2px !important;
    }

    .relationship-invite-actions button {
      min-width: 0;
      min-height: 44px !important;
      padding: 0 14px !important;
      border-color: rgba(184, 54, 43, 0.28) !important;
      border-radius: 999px !important;
      background: rgba(255, 252, 247, 0.74) !important;
      color: var(--seal) !important;
      font-family: var(--serif) !important;
      font-size: 14px !important;
      font-weight: 900 !important;
      letter-spacing: 0.08em !important;
    }

    .relationship-invite-actions button.primary {
      border-color: rgba(123, 34, 27, 0.42) !important;
      background: linear-gradient(180deg, #b83a2d, #90251c) !important;
      color: #fffaf1 !important;
      box-shadow: 0 14px 28px rgba(123, 34, 27, 0.14) !important;
    }

    .relationship-invite-actions .relationship-invite-cancel-action {
      grid-column: 1 / -1;
      min-height: 30px !important;
      border: 0 !important;
      background: transparent !important;
      color: rgba(123, 34, 27, 0.58) !important;
      box-shadow: none !important;
      font-size: 12px !important;
    }

    .relationship-invite-screen {
      padding-inline: 0 !important;
      background:
        radial-gradient(circle at 15% 0%, rgba(255, 255, 255, 0.7), transparent 32%),
        linear-gradient(180deg, rgba(255, 252, 247, 0.92), rgba(247, 242, 234, 0.96)) !important;
    }

    .relationship-invite-screen::after {
      content: "";
      position: fixed;
      top: 156px;
      right: max(-58px, calc((100vw - 520px) / 2 - 72px));
      z-index: 0;
      width: 290px;
      height: 410px;
      background: url("/prototype/assets/relationship-match/backgrounds/relationship-bamboo-shadow-v1.png") right top / contain no-repeat;
      opacity: 0.16;
      pointer-events: none;
    }

    .relationship-invite-page-head,
    .relationship-invite-landing {
      position: relative;
      z-index: 1;
      max-width: 540px !important;
      margin-inline: auto !important;
    }

    .relationship-invite-page-head {
      padding: max(24px, env(safe-area-inset-top)) 24px 18px !important;
      border-bottom: 1px solid rgba(24, 23, 21, 0.1);
    }

    .relationship-invite-landing {
      gap: 20px !important;
      padding: 22px 24px max(32px, env(safe-area-inset-bottom)) !important;
    }

    .relationship-invite-scroll,
    .relationship-invite-form,
    .relationship-invite-success-card {
      border: 1px solid rgba(173, 138, 77, 0.18) !important;
      border-radius: 0 !important;
      background: rgba(255, 252, 247, 0.68) !important;
      box-shadow: none !important;
      clip-path: none !important;
    }

    .relationship-invite-scroll {
      min-height: auto !important;
      padding: 26px 0 28px !important;
      border-width: 0 0 1px !important;
      background: transparent !important;
    }

    .relationship-invite-scroll::before {
      right: -16px !important;
      bottom: 0 !important;
      width: 250px !important;
      height: 178px !important;
      background: url("/prototype/assets/relationship-match/backgrounds/relationship-scroll-wash-v1.webp") right bottom / 320px auto no-repeat !important;
      opacity: 0.38 !important;
    }

    .relationship-invite-scroll h2 {
      max-width: 8.2em !important;
      font-size: clamp(30px, 7.2vw, 38px) !important;
      line-height: 1.16 !important;
    }

    .relationship-invite-scroll p {
      max-width: 28em !important;
    }

    .relationship-invite-form {
      gap: 17px !important;
      margin-top: 0 !important;
      padding: 24px 22px !important;
    }

    .relationship-invite-form-head {
      padding: 0 0 17px !important;
      border-bottom-color: rgba(24, 23, 21, 0.1) !important;
    }

    .relationship-invite-form-head strong {
      font-size: 27px !important;
      letter-spacing: 0.06em !important;
    }

    .relationship-invite-form label,
    .relationship-invite-date-time-field {
      display: grid;
      gap: 8px;
    }

    .relationship-invite-form label span,
    .relationship-invite-date-time-field > span {
      color: var(--gold) !important;
      font-family: var(--serif) !important;
      font-size: 13px !important;
      font-weight: 900 !important;
      letter-spacing: 0.08em !important;
    }

    .relationship-invite-form input,
    .relationship-invite-form select {
      min-height: 52px !important;
      padding-inline: 14px !important;
      border: 1px solid rgba(24, 23, 21, 0.12) !important;
      border-radius: 12px !important;
      background: rgba(255, 252, 247, 0.74) !important;
      clip-path: none !important;
      color: rgba(24, 23, 21, 0.72) !important;
      font-size: 16px !important;
      font-weight: 700 !important;
    }

    .relationship-invite-gender {
      gap: 12px !important;
    }

    .relationship-invite-gender button {
      min-height: 50px !important;
      border-color: rgba(24, 23, 21, 0.14) !important;
      border-radius: 12px !important;
      background: rgba(255, 252, 247, 0.64) !important;
      color: rgba(24, 23, 21, 0.72) !important;
      font-family: var(--serif);
      font-weight: 900;
    }

    .relationship-invite-gender button.active {
      border-color: rgba(184, 54, 43, 0.34) !important;
      background: rgba(184, 54, 43, 0.06) !important;
      color: var(--seal) !important;
    }

    .relationship-invite-date-time-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(124px, 0.44fr);
      gap: 10px;
    }

    .relationship-invite-date-time-field em,
    .relationship-invite-form label em {
      color: rgba(24, 23, 21, 0.48) !important;
      font-size: 12px !important;
      font-style: normal;
      line-height: 1.55 !important;
    }

    .relationship-invite-consent {
      padding: 13px 14px !important;
      border: 1px solid rgba(167, 52, 39, 0.18) !important;
      border-radius: 8px !important;
      background: rgba(167, 52, 39, 0.045) !important;
    }

    .relationship-invite-consent b {
      color: var(--seal) !important;
      font-family: var(--serif);
      font-size: 15px;
      letter-spacing: 0.08em;
    }

    .relationship-invite-form-actions {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 0.78fr);
      gap: 12px;
    }

    .relationship-invite-form-actions button {
      min-height: 50px;
      border: 1px solid rgba(184, 54, 43, 0.28);
      border-radius: 999px;
      background: rgba(255, 252, 247, 0.74);
      color: var(--seal);
      font-family: var(--serif);
      font-size: 15px;
      font-weight: 900;
      letter-spacing: 0.08em;
    }

    .relationship-invite-form-actions button.primary {
      position: static !important;
      margin: 0 !important;
      border-color: rgba(123, 34, 27, 0.42) !important;
      background: linear-gradient(180deg, #b83a2d, #90251c) !important;
      color: #fffaf1 !important;
      box-shadow: 0 14px 28px rgba(123, 34, 27, 0.14) !important;
    }

    .profile-edit-screen.is-relationship-partner-edit {
      background:
        radial-gradient(circle at 15% 0%, rgba(255, 255, 255, 0.7), transparent 32%),
        linear-gradient(180deg, rgba(255, 252, 247, 0.92), rgba(247, 242, 234, 0.96)) !important;
    }

    .profile-edit-screen.is-relationship-partner-edit .edit-lock-banner {
      background:
        linear-gradient(90deg, rgba(255, 252, 247, 0.95), rgba(255, 252, 247, 0.62)),
        url("/prototype/assets/relationship-match/backgrounds/relationship-scroll-wash-v1.webp") right bottom / 360px auto no-repeat !important;
    }

    @media (max-width: 560px) {
      .relationship-invite-overlay {
        padding-inline: 18px !important;
      }

      .relationship-invite-actions,
      .relationship-invite-form-actions {
        grid-template-columns: 1fr !important;
      }

      .relationship-invite-date-time-row {
        grid-template-columns: 1fr !important;
      }
    }

    .relationship-match-screen.is-report-step .relationship-energy-card > blockquote {
      white-space: pre-line !important;
      word-break: keep-all !important;
      overflow-wrap: normal !important;
    }

    .relationship-match-screen.is-dimensions-report .relationship-origin-answers p {
      display: block !important;
      max-height: none !important;
      overflow: visible !important;
      text-overflow: clip !important;
      -webkit-line-clamp: unset !important;
      -webkit-box-orient: initial !important;
    }

    .relationship-generate-ritual {
      position: fixed !important;
      inset: 0 !important;
      z-index: 3000 !important;
      display: grid !important;
      place-items: end center !important;
      width: 100vw !important;
      height: 100dvh !important;
      min-height: 100dvh !important;
      max-height: 100dvh !important;
      padding: max(18px, env(safe-area-inset-top)) 18px max(26px, env(safe-area-inset-bottom)) !important;
      overflow: hidden !important;
      opacity: 1 !important;
      background: transparent !important;
      pointer-events: none !important;
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
    }

    .relationship-ritual-scrim {
      position: fixed;
      inset: 0;
      z-index: 0;
      width: 100%;
      height: 100%;
      border: 0;
      background: rgba(24, 20, 16, 0.10);
      cursor: default;
      pointer-events: auto;
    }

    .relationship-ritual-panel {
      position: relative;
      z-index: 1;
      box-sizing: border-box !important;
      width: min(390px, calc(100vw - 32px)) !important;
      height: min(680px, calc(100dvh - 72px)) !important;
      min-height: min(640px, calc(100dvh - 72px)) !important;
      padding: 24px 20px 22px !important;
      border: 1px solid rgba(173, 138, 77, 0.18) !important;
      border-radius: 0 !important;
      background:
        linear-gradient(180deg, rgba(255, 252, 247, 0.9), rgba(247, 242, 234, 0.84)),
        url("/prototype/assets/relationship-match/invite/generated-v1/relationship-invite-modal-bg-v1.webp") center top / cover no-repeat !important;
      box-shadow: 0 28px 80px rgba(27, 21, 14, 0.28) !important;
      clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0 calc(100% - 12px), 0 12px);
      text-align: left !important;
      pointer-events: auto !important;
    }

    .relationship-ritual-close {
      position: absolute;
      top: 14px;
      right: 14px;
      z-index: 12;
      display: grid;
      place-items: center;
      width: 34px;
      height: 34px;
      border: 1px solid rgba(173, 138, 77, 0.18);
      border-radius: 999px;
      background: rgba(255, 252, 247, 0.78);
      color: rgba(24, 23, 21, 0.54);
      font-family: var(--serif);
      font-size: 20px;
      line-height: 1;
      cursor: pointer;
      box-shadow: 0 10px 24px rgba(54, 44, 32, 0.08);
    }

    .relationship-ritual-close:hover {
      color: var(--seal);
      border-color: rgba(167, 52, 39, 0.22);
    }

    .relationship-ritual-panel::before {
      inset: 20px !important;
      border-radius: 0 !important;
      opacity: 0.68 !important;
    }

    .relationship-ritual-ambient {
      position: absolute;
      pointer-events: none;
      user-select: none;
    }

    .relationship-ritual-ambient.is-scroll {
      right: -116px;
      top: 154px;
      width: 540px;
      opacity: 0.22;
      mix-blend-mode: multiply;
    }

    .relationship-ritual-ambient.is-bamboo {
      right: -110px;
      bottom: -92px;
      width: 300px;
      opacity: 0.16;
      mix-blend-mode: multiply;
    }

    .relationship-ritual-kicker {
      position: relative;
      z-index: 5;
      display: block;
      color: var(--gold) !important;
      font-size: 14px !important;
      letter-spacing: 0.08em !important;
    }

    .relationship-ritual-copy {
      position: relative;
      z-index: 5;
      display: grid;
      gap: 8px;
      margin-top: 10px;
    }

    .relationship-ritual-copy strong {
      color: var(--ink);
      font-family: var(--serif);
      font-size: 32px;
      line-height: 1.16;
      letter-spacing: 0.04em;
    }

    .relationship-ritual-copy span {
      max-width: 20em;
      color: rgba(24, 23, 21, 0.58);
      font-size: 13px;
      line-height: 1.65;
    }

    .relationship-ritual-stage {
      position: relative;
      z-index: 2;
      height: calc(100% - 142px);
      min-height: 500px;
      margin-top: 12px;
      overflow: hidden;
    }

    .relationship-ritual-stage > * {
      position: absolute;
    }

    .relationship-ritual-slip,
    .relationship-ritual-connector,
    .relationship-ritual-paper-halo,
    .relationship-ritual-book-art,
    .relationship-ritual-cover-label,
    .relationship-ritual-cover-status,
    .relationship-ritual-dimension-seal {
      pointer-events: none;
    }

    .relationship-ritual-slip {
      display: block !important;
      width: 104px !important;
      min-height: 0 !important;
      height: auto !important;
      padding: 0 !important;
      border: 0 !important;
      border-radius: 0 !important;
      background: transparent !important;
      box-shadow: none !important;
      filter: drop-shadow(0 18px 18px rgba(43, 34, 24, 0.13));
      opacity: 0;
      transform-origin: 50% 74%;
      will-change: transform, opacity;
    }

    .relationship-ritual-slip.is-left {
      left: 30px;
      top: 112px;
    }

    .relationship-ritual-slip.is-right {
      right: 30px;
      top: 116px;
    }

    .relationship-ritual-connector {
      left: 10px;
      top: 276px;
      z-index: 5;
      width: 310px;
      height: 114px;
      opacity: 0;
      transform-origin: center;
      filter: drop-shadow(0 10px 18px rgba(71, 38, 24, 0.13));
      will-change: transform, opacity;
    }

    .relationship-ritual-connector img,
    .relationship-ritual-book-art {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }

    .relationship-ritual-connector span {
      position: absolute;
      left: calc(50% - 22px);
      top: calc(50% - 27px);
      display: grid;
      place-items: center;
      width: 44px;
      height: 54px;
      color: var(--seal);
      font-family: var(--serif);
      font-size: 34px;
      font-weight: 900;
      line-height: 1;
    }

    .relationship-ritual-paper-halo {
      left: 10px;
      top: 122px;
      z-index: 1;
      width: 312px;
      opacity: 0;
      mix-blend-mode: multiply;
      transform-origin: center;
      will-change: transform, opacity;
    }

    .relationship-ritual-book-shell {
      left: 48px;
      top: 64px;
      z-index: 4;
      width: 234px;
      height: 356px;
      opacity: 0;
      transform-origin: 50% 100%;
      will-change: transform, opacity;
    }

    .relationship-ritual-book-shell > * {
      position: absolute;
    }

    .relationship-ritual-book-art {
      inset: 0;
      filter: drop-shadow(0 24px 44px rgba(54, 44, 32, 0.13));
    }

    .relationship-ritual-cover-label {
      top: 36px;
      left: 0;
      right: 0;
      color: var(--gold);
      font-family: var(--serif);
      font-size: 13px;
      font-weight: 900;
      letter-spacing: 0.16em;
      text-align: center;
    }

    .relationship-ritual-cover-title {
      top: 76px;
      left: 0;
      right: 0;
      display: grid;
      grid-template-rows: auto 110px;
      justify-items: center;
      font-family: var(--serif);
      text-align: center;
    }

    .relationship-ritual-cover-title > strong {
      color: var(--ink);
      font-size: 38px;
      line-height: 1.15;
      letter-spacing: 0.1em;
      writing-mode: vertical-rl;
    }

    .relationship-ritual-cover-status {
      grid-row: 2;
      grid-column: 1;
      display: grid;
      justify-items: center;
      align-content: start;
      width: 76px;
      min-height: 86px;
      margin-top: 10px;
      padding: 0;
      border: 0;
      background: transparent;
      opacity: 0;
      transform: translateY(8px) scale(0.96);
      transition: opacity 300ms ease, transform 340ms cubic-bezier(0.22, 1, 0.36, 1);
    }

    .relationship-ritual-cover-status span {
      min-height: 18px;
      color: var(--gold);
      font-size: 14px;
      font-weight: 900;
      letter-spacing: 0.12em;
      text-shadow: 0 1px 0 rgba(255, 252, 247, 0.78);
    }

    .relationship-ritual-bagua {
      position: relative;
      display: grid;
      place-items: center;
      width: 52px;
      height: 52px;
      margin-top: 9px;
      filter: drop-shadow(0 12px 18px rgba(54, 44, 32, 0.12));
    }

    .relationship-ritual-bagua img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }

    .relationship-ritual-bagua::after {
      content: "";
      position: absolute;
      left: 50%;
      top: 5px;
      width: 5px;
      height: 5px;
      margin-left: -2.5px;
      border-radius: 999px;
      background: rgba(167, 52, 39, 0.9);
      box-shadow: 0 0 0 2px rgba(255, 250, 244, 0.72);
      transform-origin: 50% 20px;
    }

    .relationship-ritual-read-button {
      grid-row: 2;
      grid-column: 1;
      position: relative !important;
      z-index: 4;
      display: grid;
      place-items: center;
      width: 140px;
      height: 46px;
      margin-top: 38px;
      padding: 0 !important;
      border: 0 !important;
      background: transparent !important;
      color: var(--seal) !important;
      cursor: pointer;
      opacity: 0;
      pointer-events: none;
      transform: translateY(10px) scale(0.96);
      transition: opacity 320ms ease, transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
    }

    .relationship-ritual-read-button img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: fill;
      filter: drop-shadow(0 12px 20px rgba(54, 44, 32, 0.12));
    }

    .relationship-ritual-read-button span {
      position: relative;
      z-index: 1;
      font-family: var(--serif);
      font-size: 17px;
      font-weight: 900;
      letter-spacing: 0.12em;
    }

    .relationship-ritual-dimension-seal {
      z-index: 6;
      display: grid;
      place-items: center;
      width: 64px;
      height: 64px;
      color: var(--seal);
      font-family: var(--serif);
      font-size: 18px;
      font-weight: 900;
      opacity: 0;
      filter: drop-shadow(0 12px 20px rgba(54, 44, 32, 0.10));
      transform: translateY(18px) scale(0.82);
      will-change: transform, opacity;
    }

    .relationship-ritual-dimension-seal.is-one {
      left: 26px;
      top: 374px;
      background: url("/prototype/assets/relationship-match/ritual/generated-v1/relationship-ritual-dimension-seal-1-v1.png") center / contain no-repeat;
    }

    .relationship-ritual-dimension-seal.is-two {
      left: 80px;
      top: 408px;
      background: url("/prototype/assets/relationship-match/ritual/generated-v1/relationship-ritual-dimension-seal-2-v1.png") center / contain no-repeat;
    }

    .relationship-ritual-dimension-seal.is-three {
      left: calc(50% - 32px);
      top: 420px;
      background: url("/prototype/assets/relationship-match/ritual/generated-v1/relationship-ritual-dimension-seal-3-v1.png") center / contain no-repeat;
    }

    .relationship-ritual-dimension-seal.is-four {
      right: 80px;
      top: 408px;
      background: url("/prototype/assets/relationship-match/ritual/generated-v1/relationship-ritual-dimension-seal-4-v1.png") center / contain no-repeat;
    }

    .relationship-ritual-dimension-seal.is-five {
      right: 26px;
      top: 374px;
      background: url("/prototype/assets/relationship-match/ritual/generated-v1/relationship-ritual-dimension-seal-5-v1.png") center / contain no-repeat;
    }

    .relationship-ritual-progress {
      position: absolute;
      left: 20px;
      right: 20px;
      bottom: 22px;
      z-index: 7;
      display: none;
      grid-template-columns: auto minmax(0, 1fr);
      gap: 12px;
      align-items: center;
      color: rgba(24, 23, 21, 0.58);
      font-family: var(--serif);
      font-size: 13px;
    }

    .relationship-ritual-progress i {
      height: 1px;
      background: linear-gradient(90deg, rgba(173, 136, 76, 0.10), rgba(167, 52, 39, 0.56));
      transform: scaleX(0);
      transform-origin: left;
    }

    .relationship-generate-ritual.is-ai-writing .relationship-ritual-slip,
    .relationship-generate-ritual.is-ready .relationship-ritual-slip,
    .relationship-generate-ritual.is-ai-writing .relationship-ritual-connector,
    .relationship-generate-ritual.is-ready .relationship-ritual-connector {
      opacity: 0 !important;
      transform: translateY(50px) scale(0.52) !important;
    }

    .relationship-generate-ritual.is-ai-writing .relationship-ritual-paper-halo,
    .relationship-generate-ritual.is-ready .relationship-ritual-paper-halo {
      opacity: 0.34;
      transform: translateY(0) scale(1.03);
    }

    .relationship-generate-ritual.is-ai-writing .relationship-ritual-book-shell,
    .relationship-generate-ritual.is-ready .relationship-ritual-book-shell {
      opacity: 1;
      transform: translateY(0) scale(1);
    }

    .relationship-generate-ritual.is-ai-writing .relationship-ritual-dimension-seal,
    .relationship-generate-ritual.is-ready .relationship-ritual-dimension-seal {
      opacity: 1;
      transform: translateY(0) scale(1) rotate(0deg);
    }

    .relationship-generate-ritual.is-ai-writing .relationship-ritual-cover-status {
      opacity: 1;
      transform: translateY(0) scale(1);
    }

    .relationship-generate-ritual.is-ai-writing .relationship-ritual-bagua img,
    .relationship-generate-ritual.is-ai-writing .relationship-ritual-bagua::after {
      animation: relationshipRitualBaguaSpin 1.15s linear infinite;
    }

    .relationship-generate-ritual.is-ready .relationship-ritual-read-button {
      opacity: 1;
      pointer-events: auto;
      transform: translateY(0) scale(1);
    }

    .relationship-generate-ritual.is-ai-writing .relationship-ritual-progress i,
    .relationship-generate-ritual.is-ready .relationship-ritual-progress i {
      opacity: 0;
    }

    @media (prefers-reduced-motion: no-preference) {
      .relationship-generate-ritual.is-ritual .relationship-ritual-slip.is-left {
        animation: relationshipRitualSlipLeftRefined 5s cubic-bezier(0.22, 1, 0.36, 1) both;
      }

      .relationship-generate-ritual.is-ritual .relationship-ritual-slip.is-right {
        animation: relationshipRitualSlipRightRefined 5s cubic-bezier(0.22, 1, 0.36, 1) both;
      }

      .relationship-generate-ritual.is-ritual .relationship-ritual-connector {
        animation: relationshipRitualConnectorRefined 5s cubic-bezier(0.22, 1, 0.36, 1) both;
      }

      .relationship-generate-ritual.is-ritual .relationship-ritual-paper-halo {
        animation: relationshipRitualPaperHaloRefined 5s cubic-bezier(0.22, 1, 0.36, 1) both;
      }

      .relationship-generate-ritual.is-ritual .relationship-ritual-book-shell {
        animation: relationshipRitualBookRefined 5s cubic-bezier(0.22, 1, 0.36, 1) both;
      }

      .relationship-generate-ritual.is-ritual .relationship-ritual-dimension-seal {
        animation: relationshipRitualSealRefined 5s cubic-bezier(0.22, 1, 0.36, 1) both;
      }

      .relationship-generate-ritual.is-ritual .relationship-ritual-dimension-seal.is-two {
        animation-delay: 0.08s;
      }

      .relationship-generate-ritual.is-ritual .relationship-ritual-dimension-seal.is-three {
        animation-delay: 0.16s;
      }

      .relationship-generate-ritual.is-ritual .relationship-ritual-dimension-seal.is-four {
        animation-delay: 0.25s;
      }

      .relationship-generate-ritual.is-ritual .relationship-ritual-dimension-seal.is-five {
        animation-delay: 0.34s;
      }

      .relationship-generate-ritual.is-ritual .relationship-ritual-progress i {
        animation: relationshipRitualProgressRefined 5s linear both;
      }
    }

    @keyframes relationshipRitualSlipLeftRefined {
      0% { opacity: 0; transform: translateX(-86px) translateY(26px) rotate(-14deg) scale(0.72); }
      13% { opacity: 0.92; transform: translateX(-28px) translateY(5px) rotate(-10deg) scale(0.86); }
      31% { opacity: 1; transform: translateX(0) translateY(0) rotate(-7deg) scale(0.93); }
      51% { opacity: 0.96; transform: translateX(42px) translateY(18px) rotate(-4deg) scale(0.78); }
      67% { opacity: 0.45; transform: translateX(72px) translateY(38px) rotate(-1.5deg) scale(0.62); }
      82%, 100% { opacity: 0; transform: translateX(88px) translateY(50px) rotate(0deg) scale(0.52); }
    }

    @keyframes relationshipRitualSlipRightRefined {
      0% { opacity: 0; transform: translateX(86px) translateY(26px) rotate(14deg) scale(0.72); }
      13% { opacity: 0.92; transform: translateX(28px) translateY(5px) rotate(10deg) scale(0.86); }
      31% { opacity: 1; transform: translateX(0) translateY(0) rotate(7deg) scale(0.93); }
      51% { opacity: 0.96; transform: translateX(-42px) translateY(18px) rotate(4deg) scale(0.78); }
      67% { opacity: 0.45; transform: translateX(-72px) translateY(38px) rotate(1.5deg) scale(0.62); }
      82%, 100% { opacity: 0; transform: translateX(-88px) translateY(50px) rotate(0deg) scale(0.52); }
    }

    @keyframes relationshipRitualConnectorRefined {
      0%, 31% { opacity: 0; transform: translateY(20px) scale(0.88); }
      47% { opacity: 0.78; transform: translateY(8px) scale(0.94); }
      58% { opacity: 0.97; transform: translateY(0) scale(1.01); }
      76% { opacity: 0.48; transform: translateY(-3px) scale(1.01); }
      90%, 100% { opacity: 0; transform: translateY(-12px) scale(1.03); }
    }

    @keyframes relationshipRitualPaperHaloRefined {
      0%, 35% { opacity: 0; transform: translateY(22px) scale(0.78); }
      53% { opacity: 0.30; transform: translateY(6px) scale(0.90); }
      69% { opacity: 0.52; transform: translateY(0) scale(1); }
      100% { opacity: 0.34; transform: translateY(0) scale(1.03); }
    }

    @keyframes relationshipRitualBookRefined {
      0%, 40% { opacity: 0; transform: translateY(30px) scale(0.92, 0.36); }
      54% { opacity: 0.65; transform: translateY(18px) scale(0.98, 0.68); }
      66% { opacity: 0.96; transform: translateY(2px) scale(1.005, 1.03); }
      76%, 100% { opacity: 1; transform: translateY(0) scale(1); }
    }

    @keyframes relationshipRitualSealRefined {
      0%, 64% { opacity: 0; transform: translateY(18px) scale(0.78) rotate(-5deg); }
      82% { opacity: 0.94; transform: translateY(2px) scale(1.04) rotate(-1deg); }
      100% { opacity: 1; transform: translateY(0) scale(1) rotate(0deg); }
    }

    @keyframes relationshipRitualProgressRefined {
      from { transform: scaleX(0); }
      to { transform: scaleX(1); }
    }

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

    @media (prefers-reduced-motion: reduce) {
      .relationship-generate-ritual.is-ritual .relationship-ritual-paper-halo,
      .relationship-generate-ritual.is-ritual .relationship-ritual-book-shell,
      .relationship-generate-ritual.is-ritual .relationship-ritual-dimension-seal {
        opacity: 1 !important;
        transform: none !important;
      }

      .relationship-generate-ritual.is-ai-writing .relationship-ritual-bagua img,
      .relationship-generate-ritual.is-ai-writing .relationship-ritual-bagua::after {
        animation: relationshipRitualBaguaSpin 1.6s linear infinite !important;
      }
    }

    @media (max-width: 420px), (max-height: 720px) {
      .relationship-ritual-panel {
        width: min(360px, calc(100vw - 24px)) !important;
        min-height: 610px !important;
        padding: 20px 18px 18px !important;
      }

      .relationship-ritual-copy strong {
        font-size: 28px;
      }

      .relationship-ritual-stage {
        min-height: 460px;
        height: calc(100% - 128px);
      }

      .relationship-ritual-book-shell {
        left: 43px;
        top: 54px;
        width: 220px;
        height: 335px;
      }

      .relationship-ritual-slip {
        width: 96px !important;
      }

      .relationship-ritual-slip.is-left {
        left: 23px;
        top: 104px;
      }

      .relationship-ritual-slip.is-right {
        right: 23px;
        top: 108px;
      }

      .relationship-ritual-connector {
        left: 0;
        top: 258px;
        width: 300px;
      }

      .relationship-ritual-dimension-seal {
        width: 58px;
        height: 58px;
      }

      .relationship-ritual-dimension-seal.is-one,
      .relationship-ritual-dimension-seal.is-five {
        top: 362px;
      }

      .relationship-ritual-dimension-seal.is-two,
      .relationship-ritual-dimension-seal.is-four {
        top: 394px;
      }

      .relationship-ritual-dimension-seal.is-three {
        top: 404px;
      }
    }

    .relationship-ledger-list article.is-book.is-ai-writing > span {
      color: var(--gold);
    }

    .relationship-ledger-list article.is-book.is-ai-ready > span,
    .relationship-ledger-list article.is-book.is-ai-fallback > span {
      color: var(--seal);
    }

    body:has(.relationship-generate-ritual) .nav {
      opacity: 0.28 !important;
      pointer-events: none !important;
    }

    .advanced-book-screen {
      background:
        linear-gradient(180deg, rgba(255, 250, 241, 0.88), rgba(247, 237, 219, 0.94)),
        var(--paper);
    }

    .advanced-book-shell {
      display: grid;
      gap: 0;
    }

    .advanced-book-cover {
      padding: 0;
      border: 0;
      background: transparent;
      box-shadow: none;
    }

    .advanced-book-cover.annual-cover-hero {
      gap: 14px;
      margin: 10px 0 22px;
    }

    .advanced-book-core-reading h2 {
      margin: 0;
      font-family: var(--serif);
      font-size: clamp(30px, 8vw, 40px);
      line-height: 1.22;
      letter-spacing: 0;
    }

    .advanced-book-core-reading p {
      margin: 12px 0 0;
      color: rgba(24, 23, 21, 0.68);
      font-family: var(--serif);
      font-size: 15px;
      line-height: 1.92;
      letter-spacing: 0.04em;
    }

    .advanced-book-life-curve {
      display: grid;
      gap: 10px;
      margin-top: 18px;
      padding-top: 14px;
      border-top: 1px dashed rgba(24, 23, 21, 0.16);
    }

    .advanced-book-life-curve h3 {
      margin: 0 0 2px;
      color: var(--seal);
      font-family: var(--serif);
      font-size: 17px;
      line-height: 1.35;
      letter-spacing: 0.08em;
    }

    .advanced-book-life-curve p {
      display: grid;
      gap: 4px;
      margin: 0;
      padding-left: 11px;
      border-left: 2px solid rgba(132, 51, 37, 0.16);
    }

    .advanced-book-life-curve strong {
      color: rgba(24, 23, 21, 0.86);
      font-family: var(--serif);
      font-size: 14px;
      line-height: 1.45;
      letter-spacing: 0.03em;
    }

    .advanced-book-life-curve span {
      color: rgba(24, 23, 21, 0.66);
      font-family: var(--serif);
      font-size: 14px;
      line-height: 1.85;
      letter-spacing: 0.03em;
    }

    .advanced-book-evidence-row {
      margin-top: 16px;
    }

    .advanced-book-profile-strip strong {
      font-size: 14px;
      line-height: 1.35;
    }

    .advanced-book-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 12px;
    }

    .advanced-book-positioning {
      color: var(--muted);
      font-size: 13px;
      line-height: 1.7;
    }

    .advanced-book-meta span {
      display: inline-flex;
      border: 1px solid rgba(24, 23, 21, .12);
      background: rgba(255, 255, 255, .48);
      padding: 4px 8px;
      font-size: 12px;
      line-height: 1.45;
    }

    .advanced-book-takeaways {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }

    .advanced-book-metrics {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }

    .advanced-book-metrics article {
      min-height: 96px;
      padding: 12px;
      border: 1px solid rgba(24, 23, 21, .1);
      background: rgba(255, 250, 241, .64);
    }

    .advanced-book-metrics span {
      display: block;
      color: var(--muted);
      font-size: 11px;
      line-height: 1.4;
    }

    .advanced-book-metrics strong {
      display: block;
      margin-top: 5px;
      color: var(--ink);
      font-family: var(--serif);
      font-size: 20px;
      line-height: 1.2;
      letter-spacing: 0;
    }

    .advanced-book-metrics p {
      margin: 6px 0 0;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.5;
    }

    .advanced-book-chapters {
      display: grid;
      gap: 12px;
    }

    .advanced-book-section {
      border-color: rgba(173, 138, 77, 0.22);
      background: rgba(255, 252, 247, 0.6);
    }

    .advanced-book-section summary span {
      font-size: 22px;
      letter-spacing: 0.04em;
    }

    .advanced-book-section summary small {
      display: -webkit-box;
      max-width: 100%;
      overflow: hidden;
      color: rgba(24, 23, 21, 0.58);
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      line-height: 1.55;
    }

    .advanced-book-section-body {
      display: grid;
      gap: 13px;
      padding-bottom: 20px;
    }

    .advanced-book-section-body p {
      margin: 0;
      color: rgba(24, 23, 21, 0.72);
      font-family: var(--serif);
      font-size: 15px;
      line-height: 1.95;
      letter-spacing: 0.04em;
    }

    .advanced-book-conclusion,
    .advanced-book-meaning {
      color: var(--ink);
      font-weight: 700;
    }

    .advanced-book-section-body .advanced-book-conclusion {
      padding: 11px 12px;
      border: 1px solid rgba(173, 138, 77, 0.15);
      background: rgba(173, 138, 77, 0.055);
      color: rgba(24, 23, 21, 0.72);
      font-size: 14px;
      line-height: 1.75;
    }

    .advanced-book-meaning {
      margin-top: 2px;
      padding-top: 12px;
      border-top: 1px dashed rgba(24, 23, 21, .12);
      color: var(--seal);
    }

    .advanced-book-action-list {
      margin: 0 0 14px;
    }

    .advanced-book-actions-panel .card-actions {
      margin-top: 4px;
    }

    .advanced-luck-table {
      display: grid;
      gap: 0;
      overflow: hidden;
      border: 1px solid rgba(24, 23, 21, .1);
    }

    .advanced-luck-legend {
      margin: 6px 0 12px;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.6;
    }

    .advanced-luck-row {
      display: grid;
      grid-template-columns: .8fr .9fr 1.1fr 1.3fr;
      gap: 8px;
      align-items: center;
      min-height: 42px;
      padding: 8px 10px;
      border-top: 1px solid rgba(24, 23, 21, .08);
      font-size: 12px;
      line-height: 1.4;
    }

    .advanced-luck-row:first-child {
      border-top: 0;
    }

    .advanced-luck-row.is-head {
      background: rgba(173, 138, 77, .1);
      color: var(--muted);
      font-weight: 700;
    }

    .advanced-luck-row.is-current {
      background: rgba(132, 51, 37, .08);
    }

    .advanced-luck-row strong {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-family: var(--serif);
      font-size: 18px;
      letter-spacing: 0;
    }

    .advanced-luck-row strong em {
      border: 1px solid rgba(132, 51, 37, .24);
      padding: 1px 4px;
      color: var(--seal);
      font-family: var(--sans);
      font-size: 9px;
      font-style: normal;
      line-height: 1.4;
      white-space: nowrap;
    }

    .advanced-luck-detail {
      display: grid;
      gap: 6px;
      padding: 8px 10px 10px;
      border-top: 1px dashed rgba(24, 23, 21, .08);
      background: rgba(255, 250, 241, .5);
    }

    .advanced-luck-detail.is-current {
      background: rgba(132, 51, 37, .05);
    }

    .advanced-luck-detail p {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      align-items: center;
      margin: 0;
      color: var(--muted);
      font-size: 11px;
      line-height: 1.5;
    }

    .advanced-luck-detail b {
      color: var(--ink);
      font-size: 11px;
    }

    .advanced-luck-detail span {
      border: 1px solid rgba(24, 23, 21, .1);
      background: rgba(255, 255, 255, .48);
      padding: 2px 6px;
    }

    .advanced-future-year-list {
      display: grid;
      gap: 10px;
    }

    .advanced-future-year-list article {
      padding: 12px;
      border: 1px solid rgba(24, 23, 21, .1);
      background: rgba(255, 250, 241, .56);
    }

    .advanced-future-year-list header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 8px;
    }

    .advanced-future-year-list strong {
      font-family: var(--serif);
      font-size: 19px;
      line-height: 1.2;
    }

    .advanced-future-year-list header span {
      border: 1px solid rgba(132, 51, 37, .16);
      background: rgba(255, 255, 255, .5);
      padding: 3px 7px;
      color: var(--seal);
      font-size: 11px;
      white-space: nowrap;
    }

    .advanced-future-year-list p {
      margin: 0;
      color: var(--ink);
      font-size: 13px;
      line-height: 1.75;
    }

    .advanced-future-year-list small {
      display: block;
      margin-top: 6px;
      color: var(--muted);
      font-size: 11px;
      line-height: 1.4;
    }

    .advanced-future-year-list div {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-top: 8px;
    }

    .advanced-future-year-list i {
      border: 1px solid rgba(24, 23, 21, .1);
      background: rgba(255, 255, 255, .48);
      padding: 2px 6px;
      color: var(--muted);
      font-size: 11px;
      font-style: normal;
    }

    .advanced-book-glossary {
      border: 1px solid rgba(24, 23, 21, .1);
      background: rgba(24, 23, 21, .045);
      color: var(--ink);
    }

    .advanced-book-glossary summary {
      cursor: pointer;
      padding: 12px 14px;
      color: var(--muted);
      font-weight: 700;
      list-style-position: inside;
    }

    .advanced-book-glossary div {
      display: grid;
      gap: 8px;
      padding: 0 14px 14px;
    }

    .advanced-book-glossary p {
      display: grid;
      grid-template-columns: 76px 1fr;
      gap: 10px;
      margin: 0;
      font-size: 12px;
      line-height: 1.65;
    }

    .advanced-book-glossary b {
      color: var(--seal);
      font-family: var(--serif);
      font-size: 14px;
    }

    @media (max-width: 520px) {
      .advanced-book-takeaways {
        grid-template-columns: 1fr;
      }

      .advanced-book-metrics {
        grid-template-columns: 1fr;
      }

      .advanced-luck-row {
        grid-template-columns: .8fr .8fr 1fr;
      }

      .advanced-luck-row span:last-child {
        grid-column: 1 / -1;
      }
    }

    .overview-screen .overview-data-strip b,
    .overview-screen .round-seal,
    .overview-screen .topbar > .icon-button,
    .overview-screen .overview-feature-card .relationship-entry-chevron {
      display: grid;
      place-items: center;
    }

    .overview-screen .overview-data-strip b > svg,
    .overview-screen .round-seal > svg,
    .overview-screen .topbar > .icon-button > svg,
    .nav button svg {
      display: block;
      margin: 0 auto;
      transform-box: fill-box;
      transform-origin: center;
    }

    .overview-screen .overview-data-strip span::after {
      content: "";
      display: block;
      justify-self: center;
      align-self: center;
      width: 7px;
      height: 7px;
      border-top: 1.8px solid currentColor;
      border-right: 1.8px solid currentColor;
      font-size: 0;
      line-height: 0;
      transform: rotate(45deg);
      transform-origin: center;
    }

    .overview-screen .quick-actions .chevron::before {
      transform: rotate(45deg);
    }

    .overview-screen .overview-feature-card .relationship-entry-chevron::before {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 10px;
      height: 10px;
      border-top-width: 2.2px;
      border-right-width: 2.2px;
      transform: translate(-58%, -50%) rotate(45deg);
      transform-origin: center;
    }

    .overview-screen .overview-feature-card .relationship-entry-chevron {
      position: relative;
      display: grid;
      place-items: center;
      overflow: hidden;
      font-size: 0 !important;
      text-indent: -999px;
    }

    .overview-screen .overview-feature-card .relationship-entry-chevron::before {
      content: "";
      position: absolute;
      top: calc(50% - 5px);
      left: calc(50% - 8px);
      width: 10px;
      height: 10px;
      border-top: 2.2px solid currentColor;
      border-right: 2.2px solid currentColor;
      transform: rotate(45deg);
      transform-origin: center;
    }

    .overview-screen .ritual-action .chevron {
      display: grid;
      place-items: center;
      justify-self: end;
      width: 18px;
      min-width: 18px;
      height: 18px;
      min-height: 18px;
      font-size: 0 !important;
      line-height: 0;
      text-indent: -999px;
    }

    .overview-screen .ritual-action .chevron::before {
      content: "";
      width: 7px;
      height: 7px;
      border-top: 1.7px solid currentColor;
      border-right: 1.7px solid currentColor;
      transform: rotate(45deg);
      transform-origin: center;
    }

    .overview-screen .overview-data-strip b,
    .overview-screen .round-seal {
      background:
        radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--strip-accent, var(--action-accent)) 84%, #fffaf1), color-mix(in srgb, var(--strip-accent, var(--action-accent)) 58%, #6f6048) 57%, rgba(255, 252, 247, 0.92) 58% 100%);
    }

    .overview-screen .round-seal {
      display: grid;
      place-items: center;
    }

    @media (hover: hover) and (pointer: fine) {
      .overview-screen .ritual-action:hover .round-seal {
        border-color: rgba(173, 138, 77, 0.28);
        background:
          radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--action-accent) 84%, #fffaf1), color-mix(in srgb, var(--action-accent) 58%, #6f6048) 57%, rgba(255, 252, 247, 0.92) 58% 100%);
        color: #fffaf1;
        box-shadow:
          inset 0 0 0 5px rgba(173, 138, 77, 0.08),
          0 8px 16px rgba(54, 44, 32, 0.1);
        transform: none;
      }
    }

    .overview-screen .overview-data-strip span::after {
      content: none !important;
      display: none !important;
    }

    .fortune-home-screen {
      position: relative;
      isolation: isolate;
      overflow: hidden;
      padding: 20px 22px var(--screen-bottom-gutter);
      background:
        radial-gradient(circle at 50% 18%, rgba(255, 255, 255, 0.78), rgba(255, 252, 247, 0.36) 34%, transparent 62%),
        linear-gradient(180deg, rgba(255, 252, 247, 0.72), rgba(247, 242, 234, 0.92) 58%, rgba(237, 229, 216, 0.98));
    }

    .fortune-home-screen::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 0;
      background:
        linear-gradient(180deg, rgba(255, 252, 247, 0.1), rgba(255, 252, 247, 0.38) 58%, rgba(237, 229, 216, 0.42));
      opacity: 0.76;
      pointer-events: none;
    }

    .fortune-home-screen::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 0;
      background:
        radial-gradient(circle at 84% 13%, rgba(181, 68, 55, 0.06), transparent 17%),
        linear-gradient(180deg, transparent 0 55%, rgba(205, 187, 157, 0.18) 100%);
      mix-blend-mode: multiply;
      pointer-events: none;
    }

    .fortune-home-screen > * {
      position: relative;
      z-index: 1;
    }

    .fortune-home-topbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      min-height: 52px;
    }

    .fortune-home-topbar .profile-switcher-host {
      justify-self: start;
      max-width: min(100%, 232px);
    }

    .fortune-home-topbar .profile-switcher-trigger {
      grid-template-columns: 34px minmax(0, 1fr) 14px;
      min-height: 42px;
      padding: 3px 8px 3px 0;
    }

    .fortune-home-topbar .profile-switcher-mark {
      width: 34px;
      height: 34px;
      border-radius: 50%;
      background: rgba(255, 252, 247, 0.76);
      transform: none;
      box-shadow: 0 8px 17px rgba(74, 58, 37, 0.09);
    }

    .fortune-home-topbar .profile-switcher-mark span {
      transform: none;
    }

    .fortune-home-topbar .profile-switcher-name {
      max-width: 152px;
      font-size: 23px;
    }

    .fortune-calendar-button {
      width: 46px;
      height: 46px;
      border-radius: 15px;
      background: rgba(255, 252, 247, 0.86);
      box-shadow: 0 14px 26px rgba(76, 58, 35, 0.1);
    }

    .fortune-home-title {
      margin-top: 10px;
      text-align: center;
    }

    .fortune-home-title h1 {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      margin: 0;
      font-family: var(--serif);
      font-size: 38px;
      font-weight: 800;
      letter-spacing: 0;
      line-height: 1;
    }

    .fortune-home-title p {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 14px;
      margin: 12px 0 0;
      color: rgba(24, 23, 21, 0.58);
      font-family: var(--serif);
      font-size: 18px;
      line-height: 1;
    }

    .fortune-home-title p::before,
    .fortune-home-title p::after {
      content: "";
      width: 48px;
      height: 1px;
      background: rgba(95, 83, 63, 0.26);
    }

    .fortune-today-card {
      position: relative;
      isolation: isolate;
      height: 154px;
      min-height: 0;
      margin-top: 18px;
      padding: 22px 20px 18px;
      overflow: hidden;
      border: 1px solid rgba(158, 130, 87, 0.25);
      border-radius: 20px;
      background:
        linear-gradient(180deg, rgba(255, 252, 247, 0.76), rgba(246, 239, 228, 0.72)),
        rgba(255, 252, 247, 0.82);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.72),
        0 18px 38px rgba(54, 44, 32, 0.1);
    }

    .fortune-today-bg {
      position: absolute;
      inset: 0;
      z-index: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center center;
      opacity: 0.96;
      mix-blend-mode: multiply;
      pointer-events: none;
      user-select: none;
      -webkit-user-drag: none;
    }

    .fortune-today-card::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 0;
      background:
        radial-gradient(circle at 58% 52%, rgba(255, 252, 247, 0.22), transparent 24%),
        linear-gradient(90deg, rgba(255, 252, 247, 0.8) 0 31%, rgba(255, 252, 247, 0.28) 48%, rgba(255, 252, 247, 0.44) 100%),
        linear-gradient(180deg, rgba(255, 252, 247, 0.1), rgba(255, 252, 247, 0.4) 100%);
      pointer-events: none;
    }

    .fortune-today-head {
      position: relative;
      z-index: 1;
    }

    .fortune-today-head {
      min-height: 100%;
    }

    .fortune-today-copy {
      display: grid;
      justify-items: start;
      gap: 8px;
      width: 46%;
    }

    .fortune-today-copy strong {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: #3d382f;
      font-size: 27px;
      font-weight: 800;
      line-height: 1;
    }

    .fortune-today-copy strong::before {
      content: "";
      width: 24px;
      height: 24px;
      flex: 0 0 auto;
      background: url("/prototype/assets/fortune-ink/gold-ink-seal-v1.webp") center / contain no-repeat;
      transform: rotate(-4deg);
    }

    .fortune-today-copy span {
      color: #3f3b35;
      font-size: 16px;
      line-height: 1;
      white-space: nowrap;
    }

    .fortune-today-copy small {
      color: #625c54;
      font-size: 14px;
      line-height: 1;
      white-space: nowrap;
    }

    .fortune-today-grade {
      position: absolute;
      left: 58%;
      top: 8px;
      isolation: isolate;
      display: grid;
      place-items: center;
      width: 94px;
      height: 94px;
      color: var(--wood);
      font-family: var(--serif);
      font-size: 52px;
      font-weight: 700;
      line-height: 1;
      text-shadow: 0 1px 0 rgba(255, 252, 247, 0.72);
      transform: translateX(-50%);
    }

    .fortune-today-grade-ring {
      position: absolute;
      inset: -7px;
      z-index: 0;
      width: calc(100% + 14px);
      height: calc(100% + 14px);
      object-fit: contain;
      opacity: 0.66;
      mix-blend-mode: multiply;
      pointer-events: none;
      user-select: none;
      -webkit-user-drag: none;
    }

    .fortune-today-grade span {
      position: relative;
      z-index: 1;
    }

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

    .fortune-today-entry-card {
      position: relative;
      isolation: isolate;
      display: grid;
      align-content: center;
      gap: 9px;
      height: 66px;
      min-height: 0;
      padding: 10px 12px;
      overflow: hidden;
      border: 1px solid rgba(154, 128, 88, 0.22);
      border-radius: 16px;
      background:
        linear-gradient(180deg, rgba(255, 252, 247, 0.78), rgba(255, 252, 247, 0.58));
      color: inherit;
      text-align: left;
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.62),
        0 8px 18px rgba(74, 58, 37, 0.04);
      cursor: pointer;
    }

    .fortune-entry-bg {
      position: absolute;
      inset: 0;
      z-index: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center center;
      opacity: 0.9;
      mix-blend-mode: multiply;
      pointer-events: none;
      user-select: none;
      -webkit-user-drag: none;
    }

    .fortune-oracle-entry::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 1;
      background: linear-gradient(90deg, rgba(255, 252, 247, 0.9) 0 50%, rgba(255, 252, 247, 0.46) 100%);
      pointer-events: none;
    }

    .fortune-entry-kicker,
    .fortune-entry-copy,
    .fortune-oracle-copy {
      position: relative;
      z-index: 2;
    }

    .fortune-entry-kicker {
      display: flex;
      align-items: center;
      gap: 7px;
      color: var(--wood);
      font-size: 15px;
      font-weight: 800;
      line-height: 1;
    }

    .fortune-entry-kicker::before {
      content: "";
      width: 3px;
      height: 18px;
      border-radius: 999px;
      background: currentColor;
      opacity: 0.65;
    }

    .fortune-entry-copy {
      display: flex;
      align-items: center;
      gap: 7px;
      min-width: 0;
    }

    .fortune-entry-copy b {
      display: grid;
      place-items: center;
      width: 24px;
      height: 24px;
      border-radius: 50%;
      background: var(--wood);
      color: #fffaf1;
      font-size: 15px;
      font-style: normal;
      font-weight: 800;
      box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.2);
    }

    .fortune-entry-copy b.avoid {
      background: var(--seal);
    }

    .fortune-entry-copy em {
      color: #585249;
      font-size: 13px;
      font-style: normal;
      line-height: 1;
      white-space: nowrap;
    }

    .fortune-oracle-entry .fortune-entry-kicker {
      color: #4f4a43;
    }

    .fortune-oracle-copy {
      display: block;
      color: #5a544c;
      font-size: 13px;
      font-weight: 600;
      line-height: 1;
      white-space: nowrap;
    }

    .fortune-week-strip.date-strip {
      display: grid;
      grid-template-columns: repeat(7, minmax(0, 1fr));
      gap: 6px;
      height: 50px;
      margin: 18px 0 0;
      padding: 6px;
      border: 1px solid rgba(158, 130, 87, 0.2);
      border-radius: 15px;
      background: rgba(255, 252, 247, 0.7);
      box-shadow: 0 13px 24px rgba(74, 58, 37, 0.08);
    }

    .fortune-week-strip.date-strip button {
      display: grid;
      place-items: center;
      align-content: center;
      gap: 3px;
      min-width: 0;
      padding: 0;
      border: 1px solid rgba(158, 130, 87, 0.17);
      border-radius: 10px;
      background: rgba(255, 252, 247, 0.54);
      color: #746d63;
      font: inherit;
    }

    .fortune-week-strip.date-strip button span,
    .fortune-week-strip.date-strip button em {
      color: inherit;
      font-size: 9px;
      font-style: normal;
      line-height: 1;
      white-space: nowrap;
    }

    .fortune-week-strip.date-strip button strong {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 3px;
      width: auto;
      height: auto;
      color: #433e38;
      font-family: var(--serif);
      font-size: 12px;
      font-weight: 800;
      line-height: 1;
      white-space: nowrap;
    }

    .fortune-week-strip.date-strip button.active {
      border-color: rgba(181, 68, 55, 0.68);
      background: rgba(255, 249, 241, 0.9);
      color: var(--seal);
      box-shadow: inset 0 0 0 1px rgba(181, 68, 55, 0.2);
    }

    .fortune-week-strip.date-strip button.active strong {
      border-radius: 0;
      background: transparent;
      color: var(--ink);
      box-shadow: none;
    }

    .fortune-week-strip.date-strip button.active strong::before {
      content: "今";
      display: inline-grid;
      place-items: center;
      width: 17px;
      height: 17px;
      border-radius: 50%;
      background: var(--seal);
      color: #fffaf1;
      font-size: 11px;
      line-height: 1;
    }

    .fortune-kline-card {
      height: 146px;
      min-height: 0;
      margin-top: 22px;
      padding: 17px 20px 14px;
      overflow: hidden;
      border: 1px solid rgba(158, 130, 87, 0.25);
      border-radius: 18px;
      background: rgba(255, 252, 247, 0.72);
      box-shadow: 0 14px 28px rgba(74, 58, 37, 0.08);
    }

    .fortune-kline-head {
      display: grid;
      grid-template-columns: 1fr auto;
      align-items: start;
      gap: 10px;
    }

    .fortune-kline-head h2 {
      margin: 0;
      color: var(--ink);
      font-family: var(--serif);
      font-size: 22px;
      font-weight: 800;
      letter-spacing: 0;
      line-height: 1;
    }

    .fortune-kline-head p {
      margin: 7px 0 0;
      color: #80786d;
      font-size: 13px;
      font-weight: 600;
      line-height: 1;
    }

    .fortune-kline-legend {
      display: flex;
      gap: 10px;
      color: #736b60;
      font-size: 11px;
      line-height: 1;
      white-space: nowrap;
    }

    .fortune-kline-legend span {
      display: inline-flex;
      align-items: center;
      gap: 5px;
    }

    .fortune-kline-legend i {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--wood);
    }

    .fortune-kline-legend span:nth-child(2) i {
      background: var(--seal);
    }

    .fortune-kline-svg {
      display: block;
      width: 100%;
      height: 86px;
      margin-top: 6px;
      overflow: visible;
    }

    .fortune-annual-card {
      position: relative;
      isolation: isolate;
      display: grid;
      grid-template-columns: minmax(0, 1fr) 42px;
      align-items: center;
      gap: 10px;
      width: 100%;
      height: 92px;
      margin-top: 18px;
      padding: 12px 14px 12px 138px;
      overflow: hidden;
      border: 1px solid rgba(158, 130, 87, 0.22);
      border-radius: 17px;
      background:
        linear-gradient(180deg, rgba(255, 252, 247, 0.7), rgba(243, 235, 222, 0.72)),
        rgba(255, 252, 247, 0.78);
      color: inherit;
      text-align: left;
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.68),
        0 15px 28px rgba(74, 58, 37, 0.09);
      cursor: pointer;
    }

    .fortune-annual-card::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 1;
      background:
        linear-gradient(90deg, rgba(255, 252, 247, 0) 0 34%, rgba(255, 252, 247, 0.54) 47%, rgba(255, 252, 247, 0.96) 100%);
      pointer-events: none;
    }

    .fortune-annual-bg {
      position: absolute;
      inset: 0;
      z-index: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: left center;
      opacity: 0.98;
      mix-blend-mode: multiply;
      pointer-events: none;
      user-select: none;
      -webkit-user-drag: none;
    }

    .fortune-annual-copy {
      position: relative;
      z-index: 2;
      display: grid;
      gap: 9px;
      min-width: 0;
    }

    .fortune-annual-copy span {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 8px;
      min-width: 0;
    }

    .fortune-annual-copy strong {
      overflow: hidden;
      color: var(--ink);
      font-size: 20px;
      font-weight: 800;
      line-height: 1;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .fortune-annual-copy em {
      flex: 0 0 auto;
      display: inline-grid;
      place-items: center;
      height: 24px;
      padding: 0 9px;
      border: 1px solid rgba(181, 68, 55, 0.36);
      border-radius: 999px;
      background: rgba(255, 250, 245, 0.72);
      color: var(--seal);
      font-size: 12px;
      font-style: normal;
      font-weight: 800;
      line-height: 1;
      white-space: nowrap;
    }

    .fortune-annual-copy small {
      overflow: hidden;
      color: #6c655d;
      font-size: 13px;
      line-height: 1;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .fortune-round-arrow {
      position: relative;
      z-index: 2;
      display: grid;
      place-items: center;
      width: 38px;
      height: 38px;
      border-radius: 50%;
      background: var(--gold);
      color: #fffaf1;
      font-family: Georgia, serif;
      font-size: 34px;
      font-style: normal;
      line-height: 1;
      box-shadow: inset 0 0 0 5px rgba(255, 255, 255, 0.14), 0 10px 18px rgba(119, 84, 36, 0.16);
    }

    @media (max-width: 390px) {
      .fortune-home-screen {
        padding-right: 18px;
        padding-left: 18px;
      }

      .fortune-today-card {
        padding-right: 16px;
        padding-left: 16px;
      }

      .fortune-today-copy strong {
        font-size: 25px;
      }

      .fortune-today-copy span {
        font-size: 15px;
      }

      .fortune-today-grade {
        left: 59%;
        top: 12px;
        width: 86px;
        height: 86px;
        font-size: 48px;
      }

      .fortune-today-entry-row {
        gap: 8px;
      }

      .fortune-today-entry-card {
        padding-right: 10px;
        padding-left: 10px;
      }

      .fortune-entry-kicker {
        font-size: 14px;
      }

      .fortune-entry-copy {
        gap: 5px;
      }

      .fortune-entry-copy b {
        width: 22px;
        height: 22px;
        font-size: 14px;
      }

      .fortune-entry-copy em,
      .fortune-oracle-copy {
        font-size: 12px;
      }

      .fortune-week-strip.date-strip {
        gap: 4px;
      }

      .fortune-week-strip.date-strip button span,
      .fortune-week-strip.date-strip button em {
        font-size: 8px;
      }

      .fortune-week-strip.date-strip button strong {
        font-size: 11px;
      }

      .fortune-annual-card {
        grid-template-columns: minmax(0, 1fr) 38px;
        padding-left: 128px;
      }

      .fortune-annual-copy strong {
        font-size: 18px;
      }
    }

    /* Fortune home: solar-term dial direction selected from the July 10 visual reference. */
    .fortune-home-screen {
      --fortune-wheel-size: min(100%, 334px);
      --fortune-term-radius: 139px;
      --fortune-marker-radius: 153px;
      overflow: hidden;
      padding: 18px 18px var(--screen-bottom-gutter);
      background: #f7f1e8;
    }

    .fortune-home-screen::before {
      inset: 0;
      background: url("/prototype/assets/fortune-ink/fortune-page-bg-v2.webp") center top / 100% auto no-repeat;
      opacity: 1;
      mix-blend-mode: normal;
    }

    .fortune-home-screen::after {
      inset: 0;
      background: none;
      mix-blend-mode: normal;
    }

    .fortune-home-topbar {
      position: relative;
      z-index: 12;
      min-height: 46px;
    }

    .fortune-home-topbar .profile-switcher-trigger {
      grid-template-columns: 36px minmax(0, 1fr) 14px;
      min-height: 42px;
      gap: 10px;
      padding: 2px 7px 2px 0;
    }

    .fortune-home-topbar .profile-switcher-mark {
      width: 36px;
      height: 36px;
      border-color: rgba(173, 138, 77, 0.2);
      background: rgba(255, 252, 247, 0.76);
      box-shadow: 0 8px 18px rgba(74, 58, 37, 0.08);
    }

    .fortune-home-topbar .profile-switcher-name {
      font-size: 22px;
    }

    .fortune-calendar-button {
      width: 44px;
      height: 44px;
      border: 1px solid rgba(154, 128, 88, 0.2);
      border-radius: 15px;
      background: rgba(255, 252, 247, 0.82);
      box-shadow: 0 11px 22px rgba(74, 58, 37, 0.09);
    }

    .fortune-home-title {
      margin-top: 4px;
    }

    .fortune-home-title h1 {
      gap: 9px;
      font-size: 36px;
      line-height: 1;
    }

    .fortune-home-title h1 .seal {
      transform: translateY(1px);
    }

    .fortune-home-title p {
      gap: 12px;
      margin-top: 9px;
      color: rgba(24, 23, 21, 0.54);
      font-size: 16px;
      letter-spacing: 0.08em;
    }

    .fortune-home-title p::before,
    .fortune-home-title p::after {
      width: 38px;
      background: rgba(95, 83, 63, 0.22);
    }

    .fortune-day-wheel {
      position: relative;
      isolation: isolate;
      display: grid;
      place-items: center;
      width: var(--fortune-wheel-size);
      aspect-ratio: 1;
      margin: 6px auto 0;
      padding: 0;
      border: 0;
      border-radius: 50%;
      background: transparent;
      color: inherit;
      cursor: pointer;
    }

    .fortune-day-wheel::before,
    .fortune-day-wheel::after {
      content: "";
      position: absolute;
      border-radius: 50%;
      pointer-events: none;
    }

    .fortune-day-wheel::before {
      inset: 2.5%;
      border: 1px solid rgba(173, 138, 77, 0.3);
      background:
        radial-gradient(circle, transparent 0 61.5%, rgba(173, 138, 77, 0.18) 61.8% 62.2%, transparent 62.5% 75.5%, rgba(173, 138, 77, 0.19) 75.8% 76.2%, transparent 76.5%),
        radial-gradient(circle at 50% 50%, rgba(255, 253, 248, 0.54), rgba(255, 252, 247, 0.14) 56%, transparent 76%);
      box-shadow:
        inset 0 0 0 5px rgba(255, 252, 247, 0.22),
        0 20px 48px rgba(74, 58, 37, 0.04);
    }

    .fortune-day-wheel::after {
      inset: 19%;
      border: 1px solid rgba(173, 138, 77, 0.2);
      box-shadow:
        0 0 0 14px rgba(255, 252, 247, 0.1),
        inset 0 0 34px rgba(173, 138, 77, 0.045);
    }

    .fortune-wheel-orbit {
      position: absolute;
      inset: 0;
      z-index: 0;
      display: block;
      border-radius: 50%;
      pointer-events: none;
    }

    .fortune-wheel-ticks {
      position: absolute;
      inset: 4.5%;
      display: block;
      border-radius: 50%;
      background: repeating-conic-gradient(from -0.55deg, rgba(158, 126, 75, 0.48) 0 0.72deg, transparent 0.72deg 15deg);
      -webkit-mask: radial-gradient(circle, transparent 0 77.6%, #000 78% 82%, transparent 82.5%);
      mask: radial-gradient(circle, transparent 0 77.6%, #000 78% 82%, transparent 82.5%);
    }

    .fortune-solar-terms {
      position: absolute;
      inset: 0;
      display: block;
      border-radius: 50%;
    }

    .fortune-solar-terms > span {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 30px;
      color: rgba(93, 76, 49, 0.7);
      font-family: var(--serif);
      font-size: 9px;
      font-weight: 600;
      line-height: 1;
      text-align: center;
      white-space: nowrap;
      transform:
        translate(-50%, -50%)
        rotate(calc(var(--term-index) * 15deg))
        translateY(calc(var(--fortune-term-radius) * -1))
        rotate(calc(var(--term-index) * -15deg));
      transform-origin: center;
    }

    .fortune-wheel-marker {
      --fortune-wheel-angle: 28deg;
      position: absolute;
      top: 50%;
      left: 50%;
      z-index: 3;
      display: block;
      width: 9px;
      height: 9px;
      border: 2px solid rgba(255, 252, 247, 0.92);
      border-radius: 50%;
      background: var(--wood);
      box-shadow: 0 0 0 1px rgba(76, 139, 102, 0.42), 0 5px 10px rgba(54, 44, 32, 0.12);
      transform:
        translate(-50%, -50%)
        rotate(var(--fortune-wheel-angle))
        translateY(calc(var(--fortune-marker-radius) * -1));
      transform-origin: center;
    }

    .fortune-wheel-marker::after {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      width: 1px;
      height: 15px;
      background: linear-gradient(180deg, rgba(76, 139, 102, 0.54), transparent);
      transform: translate(-50%, 2px);
    }

    .fortune-wheel-core {
      position: relative;
      z-index: 2;
      display: grid;
      justify-items: center;
      align-content: center;
      width: 60%;
      aspect-ratio: 1;
      padding: 24px 8px 15px;
      border: 1px solid rgba(173, 138, 77, 0.2);
      border-radius: 50%;
      background:
        radial-gradient(circle at 50% 46%, rgba(255, 254, 251, 0.94), rgba(255, 252, 247, 0.7) 55%, rgba(249, 244, 235, 0.4) 75%, transparent 76%),
        rgba(255, 252, 247, 0.34);
      box-shadow:
        inset 0 0 0 8px rgba(255, 252, 247, 0.15),
        0 12px 30px rgba(74, 58, 37, 0.045);
    }

    .fortune-wheel-core time {
      color: #403b34;
      font-family: var(--serif);
      font-size: 13px;
      font-weight: 700;
      line-height: 1;
      white-space: nowrap;
    }

    .fortune-wheel-ganzhi {
      margin-top: 7px;
      color: #292622;
      font-family: var(--serif);
      font-size: 16px;
      font-weight: 800;
      line-height: 1;
    }

    .fortune-wheel-grade {
      margin-top: 1px;
      color: var(--wood);
      font-family: var(--serif);
      font-size: clamp(56px, 17vw, 72px);
      font-weight: 600;
      line-height: 0.96;
      text-shadow: 0 1px 0 rgba(255, 252, 247, 0.8);
    }

    .fortune-wheel-grade[data-fortune-grade="steady"] {
      color: #668a6a;
    }

    .fortune-wheel-grade[data-fortune-grade="neutral"] {
      color: #a48656;
    }

    .fortune-wheel-grade[data-fortune-grade="careful"] {
      color: #ad493c;
    }

    .fortune-wheel-guidance {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      margin-top: 6px;
    }

    .fortune-wheel-guidance > span {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      min-width: 0;
    }

    .fortune-wheel-guidance b {
      display: grid;
      place-items: center;
      width: 24px;
      height: 24px;
      flex: 0 0 auto;
      border-radius: 50%;
      background: var(--wood);
      color: #fffaf1;
      font-family: var(--serif);
      font-size: 14px;
      font-weight: 800;
      box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.18);
    }

    .fortune-wheel-guidance .is-avoid b {
      background: var(--seal);
    }

    .fortune-wheel-guidance em {
      max-width: 56px;
      overflow: hidden;
      color: #514b43;
      font-size: 10px;
      font-style: normal;
      font-weight: 650;
      line-height: 1;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .fortune-week-strip.date-strip {
      height: 70px;
      margin-top: 8px;
      padding: 5px;
      gap: 4px;
      border-color: rgba(158, 130, 87, 0.2);
      border-radius: 17px;
      background: rgba(255, 252, 247, 0.76);
      box-shadow: 0 11px 22px rgba(74, 58, 37, 0.08);
    }

    .fortune-week-strip.date-strip button {
      gap: 5px;
      border: 0;
      border-radius: 11px;
      background: transparent;
      cursor: pointer;
    }

    .fortune-week-strip.date-strip button + button {
      box-shadow: inset 1px 0 0 rgba(158, 130, 87, 0.13);
    }

    .fortune-week-strip.date-strip button span,
    .fortune-week-strip.date-strip button em {
      font-size: 8px;
    }

    .fortune-week-strip.date-strip button strong {
      display: grid;
      gap: 3px;
      font-size: 12px;
    }

    .fortune-week-strip.date-strip button.active {
      border: 1px solid rgba(181, 68, 55, 0.66);
      background: rgba(255, 250, 244, 0.92);
      box-shadow: inset 0 0 0 1px rgba(181, 68, 55, 0.13), 0 6px 13px rgba(181, 68, 55, 0.06);
    }

    .fortune-week-strip.date-strip button.active strong {
      color: var(--seal);
    }

    .fortune-week-strip.date-strip button.active strong::before {
      content: "今";
      width: 18px;
      height: 18px;
      margin: 0 auto;
      font-size: 11px;
    }

    .fortune-home-entry-list {
      display: grid;
      gap: 10px;
      margin-top: 10px;
    }

    .fortune-home-entry-card {
      position: relative;
      isolation: isolate;
      display: grid;
      grid-template-columns: minmax(0, 1fr) 38px;
      align-items: center;
      gap: 10px;
      width: 100%;
      height: 74px;
      margin: 0;
      padding: 10px 12px 10px 126px;
      overflow: hidden;
      border: 1px solid rgba(158, 130, 87, 0.22);
      border-radius: 18px;
      background: rgba(255, 252, 247, 0.76);
      color: inherit;
      text-align: left;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 12px 24px rgba(74, 58, 37, 0.075);
      cursor: pointer;
    }

    .fortune-home-entry-card.fortune-annual-card::before {
      content: none;
      display: none;
    }

    .fortune-home-entry-bg {
      position: absolute;
      inset: 0;
      z-index: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: left center;
      opacity: 0.94;
      mix-blend-mode: multiply;
      pointer-events: none;
      user-select: none;
      -webkit-user-drag: none;
    }

    .fortune-home-entry-card::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 1;
      background: linear-gradient(90deg, rgba(255, 252, 247, 0.02) 0 29%, rgba(255, 252, 247, 0.58) 41%, rgba(255, 252, 247, 0.9) 100%);
      pointer-events: none;
    }

    .fortune-home-entry-copy,
    .fortune-home-entry-card .fortune-round-arrow {
      position: relative;
      z-index: 2;
    }

    .fortune-home-entry-copy,
    .fortune-home-entry-copy.fortune-annual-copy {
      display: grid;
      gap: 7px;
      min-width: 0;
    }

    .fortune-home-entry-copy > strong,
    .fortune-home-entry-copy > span strong,
    .fortune-home-entry-copy.fortune-annual-copy strong {
      overflow: hidden;
      color: var(--ink);
      font-family: var(--serif);
      font-size: 19px;
      font-weight: 800;
      line-height: 1;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .fortune-home-entry-copy > small,
    .fortune-home-entry-copy.fortune-annual-copy small {
      overflow: hidden;
      color: #6c655d;
      font-size: 12px;
      line-height: 1;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .fortune-home-entry-copy.fortune-annual-copy > span {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 7px;
      min-width: 0;
    }

    .fortune-home-entry-copy.fortune-annual-copy em {
      display: inline-grid;
      place-items: center;
      height: 23px;
      padding: 0 8px;
      border: 1px solid rgba(181, 68, 55, 0.3);
      border-radius: 999px;
      background: rgba(255, 250, 245, 0.76);
      color: var(--seal);
      font-size: 11px;
      font-style: normal;
      font-weight: 800;
      white-space: nowrap;
    }

    .fortune-home-entry-card .fortune-round-arrow {
      width: 36px;
      height: 36px;
      font-size: 31px;
    }

    @media (max-width: 374px) {
      .fortune-home-screen {
        --fortune-wheel-size: min(100%, 318px);
        --fortune-term-radius: 132px;
        --fortune-marker-radius: 145px;
        padding-right: 14px;
        padding-left: 14px;
      }

      .fortune-home-title h1 {
        font-size: 34px;
      }

      .fortune-solar-terms > span {
        font-size: 8px;
      }

      .fortune-wheel-core {
        padding-top: 21px;
      }

      .fortune-wheel-grade {
        font-size: 58px;
      }

      .fortune-wheel-guidance {
        gap: 10px;
      }

      .fortune-home-entry-card,
      .fortune-home-entry-card.fortune-annual-card {
        padding-left: 116px;
      }

      .fortune-home-entry-copy > strong,
      .fortune-home-entry-copy > span strong,
      .fortune-home-entry-copy.fortune-annual-copy strong {
        font-size: 18px;
      }
    }

    /* Fortune home visual corrections from the approved solar-dial crop. */
    .fortune-home-screen {
      --fortune-wheel-size: min(100%, 340px);
      --fortune-term-radius: 142px;
      --fortune-marker-radius: 156px;
      color: inherit;
    }

    .fortune-day-wheel {
      --fortune-term-radius: 142px;
      --fortune-marker-radius: 156px;
      width: min(100%, 340px);
      margin-top: 0;
    }

    .fortune-day-wheel::before {
      background:
        radial-gradient(circle, transparent 0 61.5%, rgba(173, 138, 77, 0.18) 61.8% 62.2%, transparent 62.5% 75.5%, rgba(173, 138, 77, 0.2) 75.8% 76.2%, transparent 76.5%),
        radial-gradient(circle at 50% 50%, rgba(255, 254, 250, 0.96), rgba(249, 244, 235, 0.88) 68%, rgba(247, 241, 231, 0.84) 100%);
    }

    .fortune-wheel-ticks {
      z-index: 1;
      opacity: 0.68;
      -webkit-mask: radial-gradient(circle, transparent 0 71.5%, #000 72.5% 95%, transparent 96%);
      mask: radial-gradient(circle, transparent 0 71.5%, #000 72.5% 95%, transparent 96%);
    }

    .fortune-solar-terms {
      z-index: 2;
    }

    .fortune-solar-terms > span {
      width: 32px;
      padding: 3px 2px;
      border-radius: 999px;
      background: rgba(248, 243, 233, 0.94);
      color: rgba(91, 72, 43, 0.76);
      font-size: 9.5px;
      line-height: 1;
      box-shadow: 0 0 0 2px rgba(248, 243, 233, 0.58);
    }

    .fortune-solar-terms > span.is-current {
      color: rgba(53, 91, 67, 0.96);
      font-weight: 800;
    }

    .fortune-wheel-guidance > span {
      flex: 0 0 auto;
    }

    .fortune-wheel-guidance em {
      max-width: none;
      overflow: visible;
      font-size: 11px;
      text-overflow: clip;
    }

    .fortune-week-strip.date-strip {
      height: 76px;
      margin-top: 4px;
    }

    .fortune-week-strip.date-strip button {
      grid-template-rows: auto auto 20px;
      gap: 3px;
    }

    .fortune-week-strip.date-strip button span,
    .fortune-week-strip.date-strip button em {
      font-size: 8px;
    }

    .fortune-week-strip.date-strip button strong {
      display: block;
      color: #312d28;
      font-size: 13px;
      line-height: 1;
    }

    .fortune-week-strip.date-strip button.active strong::before {
      content: none;
      display: none;
    }

    .fortune-date-status {
      display: inline-grid;
      place-items: center;
      width: 20px;
      height: 20px;
      margin: 0 auto;
      border-radius: 50%;
      background: rgba(173, 138, 77, 0.58);
      color: #fffaf1;
      font-family: var(--serif);
      font-size: 10px;
      font-weight: 800;
      line-height: 1;
      box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.18);
    }

    .fortune-date-status.is-good {
      background: rgba(76, 139, 102, 0.88);
    }

    .fortune-date-status.is-steady {
      background: rgba(104, 139, 106, 0.88);
    }

    .fortune-date-status.is-careful {
      background: rgba(167, 52, 39, 0.82);
    }

    .fortune-date-status.is-pending {
      background: rgba(173, 138, 77, 0.34);
    }

    .fortune-week-strip.date-strip button.active .fortune-date-status {
      background: var(--seal);
    }

    .fortune-home-entry-list {
      gap: 8px;
      margin-top: 6px;
    }

    .fortune-home-entry-card {
      grid-template-columns: minmax(0, 1fr) 36px;
      gap: 7px;
      min-height: clamp(98px, 24vw, 118px);
      height: auto;
      padding: 12px 10px 12px clamp(118px, 33vw, 156px);
      border-radius: 20px;
      transition:
        transform 360ms var(--ease),
        border-color 360ms var(--ease),
        background-color 360ms var(--ease),
        box-shadow 360ms var(--ease);
    }

    .fortune-home-entry-bg {
      transition: transform 520ms var(--ease), filter 360ms var(--ease);
    }

    .fortune-home-entry-copy,
    .fortune-home-entry-copy.fortune-annual-copy {
      gap: 4px;
      justify-items: start;
      align-items: center;
    }

    .fortune-home-entry-copy > strong,
    .fortune-home-entry-copy > span strong,
    .fortune-home-entry-copy.fortune-annual-copy strong {
      font-size: clamp(20px, 5.2vw, 26px);
      font-weight: 820;
      letter-spacing: 0.04em;
      line-height: 1.08;
    }

    .fortune-home-entry-copy > small,
    .fortune-home-entry-copy.fortune-annual-copy small {
      font-size: clamp(10px, 2.8vw, 12px);
      line-height: 1.26;
    }

    .fortune-home-entry-card .fortune-round-arrow {
      position: relative;
      display: grid;
      place-items: center;
      justify-self: end;
      width: clamp(34px, 9vw, 44px);
      height: clamp(34px, 9vw, 44px);
      overflow: hidden;
      font-size: 0;
      line-height: 0;
      text-indent: -999px;
      transition: transform 360ms var(--ease), box-shadow 360ms var(--ease);
    }

    .fortune-home-entry-card .fortune-round-arrow::before {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      width: 10px;
      height: 10px;
      border-top: 2.2px solid currentColor;
      border-right: 2.2px solid currentColor;
      transform: translate(-64%, -50%) rotate(45deg);
      transform-origin: center;
    }

    @media (hover: hover) and (pointer: fine) {
      .fortune-home-entry-card:hover {
        border-color: rgba(167, 52, 39, 0.18);
        background-color: rgba(255, 252, 247, 0.88);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78), 0 18px 44px rgba(54, 44, 32, 0.1);
        transform: translateY(-3px);
      }

      .fortune-home-entry-card:hover .fortune-home-entry-bg {
        filter: saturate(1.03) contrast(1.02);
        transform: scale(1.018);
      }

      .fortune-home-entry-card:hover .fortune-round-arrow {
        box-shadow: inset 0 0 0 5px rgba(255, 255, 255, 0.18), 0 12px 24px rgba(119, 84, 36, 0.2);
        transform: translateX(2px) scale(1.04);
      }
    }

    .fortune-home-entry-card:focus-visible {
      outline: 2px solid rgba(181, 68, 55, 0.5);
      outline-offset: 3px;
    }

    .fortune-home-entry-card:active {
      transform: translateY(-1px) scale(0.995);
    }

    @media (max-width: 374px) {
      .fortune-solar-terms > span {
        width: 30px;
        font-size: 8.5px;
      }

      .fortune-home-entry-card,
      .fortune-home-entry-card.fortune-annual-card {
        padding-left: 118px;
      }
    }

    @media (min-width: 760px) {
      .fortune-day-wheel {
        --fortune-term-radius: 163px;
        --fortune-marker-radius: 180px;
        width: min(100%, 392px);
      }
    }

    /* Fortune calendar dialog: a compact almanac surface for choosing a daily reading. */
    body.fortune-calendar-open {
      overflow: hidden;
    }

    .fortune-calendar-modal[hidden] {
      display: none;
    }

    .fortune-calendar-modal {
      position: fixed;
      inset: 0 auto 0 50%;
      z-index: 140;
      display: grid;
      place-items: center;
      width: min(480px, 100vw);
      padding: max(18px, env(safe-area-inset-top)) 16px max(18px, env(safe-area-inset-bottom));
      color: var(--ink);
      transform: translateX(-50%);
    }

    .fortune-calendar-scrim {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      padding: 0;
      border: 0;
      background: rgba(38, 34, 29, 0.3);
      opacity: 0;
      backdrop-filter: blur(13px) saturate(0.86);
      -webkit-backdrop-filter: blur(13px) saturate(0.86);
      cursor: pointer;
      transition: opacity 240ms var(--ease);
    }

    .fortune-calendar-modal.is-open .fortune-calendar-scrim {
      opacity: 1;
    }

    .fortune-calendar-panel {
      position: relative;
      isolation: isolate;
      display: grid;
      width: min(100%, 392px);
      max-height: calc(100dvh - 36px);
      overflow: auto;
      border: 1px solid rgba(156, 124, 75, 0.3);
      border-radius: 22px;
      background:
        radial-gradient(circle at 82% 9%, rgba(181, 68, 55, 0.055), transparent 24%),
        linear-gradient(180deg, rgba(255, 253, 248, 0.99), rgba(247, 241, 232, 0.985));
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.84),
        0 34px 84px rgba(54, 44, 32, 0.27);
      opacity: 0;
      transform: translateY(14px) scale(0.975);
      transition: opacity 260ms var(--ease), transform 360ms var(--ease);
    }

    .fortune-calendar-panel::before {
      content: "";
      position: absolute;
      inset: 8px;
      z-index: -1;
      border: 1px solid rgba(156, 124, 75, 0.12);
      border-radius: 16px;
      pointer-events: none;
    }

    .fortune-calendar-modal.is-open .fortune-calendar-panel {
      opacity: 1;
      transform: translateY(0) scale(1);
    }

    .fortune-calendar-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 20px 20px 8px;
    }

    .fortune-calendar-head > div {
      display: flex;
      align-items: baseline;
      gap: 9px;
    }

    .fortune-calendar-head small {
      order: 2;
      color: rgba(167, 52, 39, 0.74);
      font-family: var(--serif);
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.1em;
    }

    .fortune-calendar-head h2 {
      margin: 0;
      color: #26231f;
      font-family: var(--serif);
      font-size: 28px;
      font-weight: 800;
      line-height: 1;
      letter-spacing: 0.08em;
    }

    .fortune-calendar-close {
      display: grid;
      place-items: center;
      width: 34px;
      height: 34px;
      padding: 0 0 2px;
      border: 1px solid rgba(93, 75, 48, 0.16);
      border-radius: 50%;
      background: rgba(255, 252, 247, 0.76);
      color: rgba(44, 39, 33, 0.66);
      font-size: 24px;
      line-height: 1;
      cursor: pointer;
      transition: transform 220ms var(--ease), border-color 220ms var(--ease), color 220ms var(--ease);
    }

    .fortune-calendar-month-nav {
      display: grid;
      grid-template-columns: 38px minmax(0, 1fr) 38px;
      align-items: center;
      gap: 12px;
      margin: 8px 20px 10px;
      padding: 10px 12px;
      border-top: 1px solid rgba(156, 124, 75, 0.16);
      border-bottom: 1px solid rgba(156, 124, 75, 0.16);
    }

    .fortune-calendar-month-nav > button {
      display: grid;
      place-items: center;
      width: 38px;
      height: 38px;
      padding: 0 0 3px;
      border: 1px solid rgba(156, 124, 75, 0.18);
      border-radius: 50%;
      background: rgba(255, 252, 247, 0.62);
      color: rgba(76, 61, 40, 0.78);
      font-family: Georgia, serif;
      font-size: 25px;
      line-height: 1;
      cursor: pointer;
    }

    .fortune-calendar-month-nav > div {
      display: grid;
      gap: 4px;
      justify-items: center;
    }

    .fortune-calendar-month-nav strong {
      color: #2e2a25;
      font-family: var(--serif);
      font-size: 18px;
      line-height: 1;
      letter-spacing: 0.05em;
    }

    .fortune-calendar-month-nav span {
      color: rgba(76, 65, 50, 0.52);
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.12em;
    }

    .fortune-calendar-week,
    .fortune-calendar-grid {
      display: grid;
      grid-template-columns: repeat(7, minmax(0, 1fr));
      margin: 0 18px;
    }

    .fortune-calendar-week {
      padding: 1px 0 6px;
      color: rgba(75, 65, 51, 0.46);
      font-family: var(--serif);
      font-size: 10px;
      font-weight: 700;
      text-align: center;
    }

    .fortune-calendar-grid {
      gap: 3px 2px;
    }

    .fortune-calendar-day {
      position: relative;
      display: grid;
      place-items: center;
      align-content: center;
      gap: 3px;
      min-width: 0;
      min-height: 45px;
      padding: 4px 1px 3px;
      border: 1px solid transparent;
      border-radius: 13px;
      background: transparent;
      color: rgba(39, 35, 30, 0.84);
      cursor: pointer;
      transition: transform 180ms var(--ease), border-color 180ms var(--ease), background 180ms var(--ease), color 180ms var(--ease), box-shadow 180ms var(--ease);
    }

    .fortune-calendar-day span {
      font-family: var(--serif);
      font-size: 15px;
      font-weight: 800;
      line-height: 1;
    }

    .fortune-calendar-day small {
      display: block;
      max-width: 100%;
      overflow: hidden;
      color: rgba(76, 65, 51, 0.5);
      font-size: 8px;
      font-weight: 650;
      line-height: 1;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .fortune-calendar-day.is-outside {
      color: rgba(39, 35, 30, 0.25);
    }

    .fortune-calendar-day.is-outside small {
      color: rgba(76, 65, 51, 0.22);
    }

    .fortune-calendar-day.has-jieqi small {
      color: rgba(56, 108, 76, 0.88);
      font-weight: 800;
    }

    .fortune-calendar-day.is-today:not(.is-selected) {
      border-color: rgba(173, 138, 77, 0.45);
      background: rgba(255, 252, 247, 0.78);
      box-shadow: inset 0 0 0 2px rgba(173, 138, 77, 0.07);
    }

    .fortune-calendar-day.is-selected {
      border-color: rgba(167, 52, 39, 0.78);
      background: linear-gradient(180deg, rgba(190, 58, 47, 0.96), rgba(157, 43, 35, 0.96));
      color: #fffaf1;
      box-shadow: inset 0 0 0 3px rgba(255, 250, 241, 0.12), 0 7px 15px rgba(167, 52, 39, 0.18);
    }

    .fortune-calendar-day.is-selected small,
    .fortune-calendar-day.is-selected.has-jieqi small,
    .fortune-calendar-day.is-selected.is-outside small {
      color: rgba(255, 250, 241, 0.8);
    }

    .fortune-calendar-footer {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 14px;
      align-items: end;
      margin-top: 12px;
      padding: 14px 20px 18px;
      border-top: 1px solid rgba(156, 124, 75, 0.16);
      background: linear-gradient(180deg, rgba(246, 239, 229, 0.18), rgba(238, 229, 216, 0.46));
    }

    .fortune-calendar-selection {
      display: grid;
      gap: 3px;
      min-width: 0;
    }

    .fortune-calendar-selection small {
      color: rgba(167, 52, 39, 0.7);
      font-size: 9px;
      font-weight: 800;
      letter-spacing: 0.1em;
    }

    .fortune-calendar-selection strong {
      overflow: hidden;
      color: #2a2723;
      font-family: var(--serif);
      font-size: 15px;
      line-height: 1.2;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .fortune-calendar-selection span {
      overflow: hidden;
      color: rgba(64, 56, 47, 0.58);
      font-size: 10px;
      line-height: 1.2;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .fortune-calendar-actions {
      display: grid;
      grid-template-columns: 1fr;
      gap: 6px;
    }

    .fortune-calendar-actions button {
      min-width: 84px;
      min-height: 34px;
      padding: 0 12px;
      border: 1px solid rgba(76, 61, 40, 0.2);
      border-radius: 999px;
      background: rgba(255, 252, 247, 0.72);
      color: rgba(48, 42, 35, 0.7);
      font-size: 11px;
      font-weight: 800;
      white-space: nowrap;
      cursor: pointer;
      transition: transform 180ms var(--ease), box-shadow 180ms var(--ease), border-color 180ms var(--ease);
    }

    .fortune-calendar-actions button.primary {
      border-color: rgba(167, 52, 39, 0.54);
      background: linear-gradient(180deg, #bd3d31, #a53128);
      color: #fffaf1;
      box-shadow: 0 8px 18px rgba(167, 52, 39, 0.18);
    }

    .fortune-calendar-close:focus-visible,
    .fortune-calendar-month-nav > button:focus-visible,
    .fortune-calendar-day:focus-visible,
    .fortune-calendar-actions button:focus-visible {
      outline: 2px solid rgba(167, 52, 39, 0.46);
      outline-offset: 2px;
    }

    @media (hover: hover) and (pointer: fine) {
      .fortune-calendar-close:hover,
      .fortune-calendar-month-nav > button:hover,
      .fortune-calendar-actions button:hover {
        border-color: rgba(167, 52, 39, 0.32);
        transform: translateY(-1px);
      }

      .fortune-calendar-day:hover:not(.is-selected) {
        border-color: rgba(173, 138, 77, 0.22);
        background: rgba(255, 252, 247, 0.74);
        color: #2a2723;
        transform: translateY(-1px);
      }
    }

    .fortune-calendar-close:active,
    .fortune-calendar-month-nav > button:active,
    .fortune-calendar-day:active,
    .fortune-calendar-actions button:active {
      transform: translateY(1px) scale(0.98);
    }

    @media (max-width: 374px) {
      .fortune-calendar-modal {
        padding-right: 10px;
        padding-left: 10px;
      }

      .fortune-calendar-head {
        padding-right: 17px;
        padding-left: 17px;
      }

      .fortune-calendar-month-nav {
        margin-right: 16px;
        margin-left: 16px;
      }

      .fortune-calendar-week,
      .fortune-calendar-grid {
        margin-right: 13px;
        margin-left: 13px;
      }

      .fortune-calendar-day {
        min-height: 42px;
      }

      .fortune-calendar-footer {
        gap: 8px;
        padding-right: 16px;
        padding-left: 16px;
      }

      .fortune-calendar-actions button {
        min-width: 76px;
        padding: 0 9px;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .fortune-calendar-scrim,
      .fortune-calendar-panel,
      .fortune-calendar-close,
      .fortune-calendar-month-nav > button,
      .fortune-calendar-day,
      .fortune-calendar-actions button {
        transition-duration: 1ms !important;
      }
    }

    /* 风水首页：以整宅 / 一室承载同一幅浅墨太极，保留原有路由与业务入口。 */
    .fengshui-home-screen {
      --fengshui-home-seal: #a95f4b;
      --fengshui-home-jade: #587d71;
      --fengshui-home-gold: #c4a979;
      --fengshui-route-whole-height: clamp(340px, 72vw, 360px);
      --fengshui-route-canvas-height: clamp(600px, 150vw, 777px);
      isolation: isolate;
      min-height: var(--screen-min-height);
      padding: 18px 16px var(--screen-bottom-gutter);
      overflow: visible;
      font-family: var(--serif);
      background: #f7f2e9;
    }

    .fengshui-home-screen > :not(.fengshui-home-landscape) {
      position: relative;
      z-index: 2;
    }

    .fengshui-home-landscape {
      position: absolute;
      z-index: 0;
      top: 0;
      left: 0;
      width: 100%;
      height: auto;
      object-fit: contain;
      object-position: center top;
      pointer-events: none;
      opacity: 1;
      mix-blend-mode: normal;
      filter: none;
      -webkit-mask-image: linear-gradient(to bottom, #000 0 68%, rgba(0, 0, 0, 0.74) 78%, rgba(0, 0, 0, 0.2) 86%, transparent 92%);
      mask-image: linear-gradient(to bottom, #000 0 68%, rgba(0, 0, 0, 0.74) 78%, rgba(0, 0, 0, 0.2) 86%, transparent 92%);
    }

    .fengshui-home-topbar {
      z-index: 12 !important;
      align-items: center;
      min-height: 42px;
    }

    .fengshui-home-topbar .profile-switcher-host {
      max-width: min(100%, 226px);
    }

    .fengshui-home-screen .profile-switcher-trigger {
      grid-template-columns: 34px minmax(0, 1fr) 16px;
      gap: 9px;
      min-height: 40px;
      max-width: 226px;
      padding: 2px 8px 2px 0;
    }

    .fengshui-home-screen .profile-switcher-trigger > .profile-switcher-mark {
      width: 32px;
      height: 32px;
      border-color: rgba(120, 101, 61, 0.2);
      border-radius: 50%;
      background: rgba(255, 252, 247, 0.72);
      color: rgba(24, 23, 21, 0.86);
      font-size: 18px;
      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.62);
      transform: none;
    }

    .fengshui-home-screen .profile-switcher-trigger > .profile-switcher-mark span {
      transform: none;
    }

    .fengshui-home-screen .profile-switcher-name {
      max-width: 148px;
      font-size: 22px;
      font-weight: 700;
    }

    .fengshui-home-archive-pill {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      min-height: 40px;
      padding: 0 11px;
      border: 1px solid rgba(126, 103, 66, 0.18);
      border-radius: 999px;
      background: rgba(255, 252, 247, 0.78);
      color: rgba(40, 36, 31, 0.76);
      box-shadow: 0 9px 24px rgba(54, 44, 32, 0.07);
      cursor: pointer;
      transition: transform 220ms var(--ease), border-color 220ms var(--ease), background 220ms var(--ease);
    }

    .fengshui-home-archive-pill svg {
      width: 18px;
      height: 18px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.6;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .fengshui-home-archive-pill span {
      font-family: var(--serif);
      font-size: 12px;
      font-weight: 760;
      letter-spacing: 0.05em;
      white-space: nowrap;
    }

    .fengshui-home-title {
      display: grid;
      gap: 8px;
      justify-items: center;
      margin: 10px 0 0;
      text-align: center;
    }

    .fengshui-home-title h1 {
      margin: 0;
      color: #171614;
      font-family: var(--serif);
      font-size: clamp(40px, 11.5vw, 52px);
      font-weight: 820;
      line-height: 1.08;
      letter-spacing: 0.11em;
      text-shadow: 0 2px 0 rgba(255, 252, 247, 0.62);
    }

    .fengshui-home-title .seal {
      margin-left: 2px;
      vertical-align: 7px;
    }

    .fengshui-home-title p {
      display: grid;
      grid-template-columns: 34px auto 34px;
      align-items: center;
      gap: 10px;
      margin: 0;
      color: rgba(36, 32, 28, 0.58);
      font-family: var(--serif);
      font-size: 15px;
      line-height: 1.4;
      letter-spacing: 0.16em;
    }

    .fengshui-home-title p i {
      width: 34px;
      height: 1px;
      background: rgba(91, 78, 59, 0.34);
    }

    .fengshui-duality {
      position: relative;
      z-index: 3 !important;
      height: var(--fengshui-route-canvas-height);
      margin: 14px -16px 0;
      overflow: hidden;
      isolation: isolate;
    }

    .fengshui-duality-bg {
      position: absolute;
      inset: 0;
      z-index: 0;
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
      pointer-events: none;
      -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.28) 10%, rgba(0, 0, 0, 0.82) 22%, #000 32%);
      mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.28) 10%, rgba(0, 0, 0, 0.82) 22%, #000 32%);
    }

    .fengshui-duality-panel {
      position: absolute;
      left: 0;
      display: block;
      width: 100%;
      margin: 0;
      border: 0;
      color: var(--ink);
      font-family: var(--serif);
      text-align: left;
      cursor: pointer;
      overflow: hidden;
      appearance: none;
      -webkit-appearance: none;
      transition: filter 220ms var(--ease), transform 220ms var(--ease);
    }

    .fengshui-duality-panel::after {
      content: none;
    }

    .fengshui-duality-whole {
      top: 0;
      z-index: 3;
      height: var(--fengshui-route-whole-height);
      padding: clamp(140px, 22vw, 176px) 18px 20px;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
    }

    .fengshui-duality-room {
      top: var(--fengshui-route-whole-height);
      z-index: 2;
      height: calc(var(--fengshui-route-canvas-height) - var(--fengshui-route-whole-height));
      padding: clamp(44px, 8vw, 68px) 18px 28px;
      border-radius: 0;
      background: transparent;
    }

    .fengshui-duality-room::after {
      content: none;
    }

    .fengshui-duality-copy {
      position: relative;
      z-index: 3;
      display: grid;
      gap: 9px;
      width: 47%;
    }

    .fengshui-duality-whole .fengshui-duality-copy {
      margin-left: clamp(44px, 9vw, 66px);
      width: 42%;
    }

    .fengshui-duality-room .fengshui-duality-copy {
      justify-items: start;
      margin-left: auto;
      width: 43%;
      transform: translateY(-40px);
    }

    .fengshui-duality-title {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .fengshui-duality-title strong {
      color: var(--fengshui-home-seal);
      font-family: var(--serif);
      font-size: clamp(34px, 8.8vw, 42px);
      font-weight: 820;
      line-height: 1;
      letter-spacing: 0.08em;
    }

    .fengshui-duality-room .fengshui-duality-title strong {
      color: var(--fengshui-home-jade);
    }

    .fengshui-duality-title em {
      display: grid;
      place-items: center;
      min-width: 25px;
      min-height: 37px;
      padding: 4px 3px;
      border: 1px solid currentColor;
      border-radius: 9px;
      color: var(--fengshui-home-seal);
      font-size: 11px;
      font-style: normal;
      font-weight: 760;
      line-height: 1.2;
      letter-spacing: 0.02em;
      writing-mode: vertical-rl;
    }

    .fengshui-duality-room .fengshui-duality-title em {
      color: var(--fengshui-home-jade);
    }

    .fengshui-duality-copy > small {
      color: rgba(36, 32, 28, 0.66);
      font-size: 12px;
      font-weight: 600;
      line-height: 1.45;
      letter-spacing: 0.06em;
      white-space: nowrap;
    }

    .fengshui-duality-cta {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      width: fit-content;
      min-height: 40px;
      padding: 0 13px;
      border: 1px solid color-mix(in srgb, var(--fengshui-home-seal) 35%, white);
      border-radius: 999px;
      background: rgba(255, 252, 247, 0.48);
      color: var(--fengshui-home-seal);
      box-shadow: 0 8px 18px rgba(126, 76, 57, 0.07);
      font-family: var(--serif);
      font-size: 14px;
      font-weight: 760;
      line-height: 1;
      letter-spacing: 0.08em;
    }

    .fengshui-duality-room .fengshui-duality-cta {
      border-color: color-mix(in srgb, var(--fengshui-home-jade) 38%, white);
      color: var(--fengshui-home-jade);
      box-shadow: 0 8px 18px rgba(66, 98, 86, 0.07);
    }

    .fengshui-duality-cta svg {
      width: 20px;
      height: 20px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.6;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .fengshui-duality-art {
      position: absolute;
      z-index: 1;
      pointer-events: none;
      object-fit: contain;
      mix-blend-mode: multiply;
      filter: saturate(0.72) contrast(0.92) drop-shadow(0 12px 24px rgba(54, 44, 32, 0.08));
    }

    .fengshui-duality-whole .fengshui-duality-art {
      top: clamp(104px, 16vw, 126px);
      right: -6px;
      width: 58%;
      height: clamp(210px, 44vw, 226px);
      opacity: 0.7;
    }

    .fengshui-duality-room .fengshui-duality-art {
      bottom: clamp(52px, 10vw, 74px);
      left: -18px;
      width: 58%;
      height: clamp(198px, 46vw, 230px);
      object-position: left bottom;
      opacity: 0.64;
    }

    .fengshui-home-archive-row {
      display: grid;
      grid-template-columns: 54px minmax(0, 1fr) 22px;
      align-items: center;
      gap: 12px;
      width: 100%;
      min-height: 72px;
      margin-top: 8px;
      padding: 8px 14px 8px 9px;
      border: 1px solid rgba(126, 103, 66, 0.14);
      border-radius: 999px;
      background: rgba(255, 252, 247, 0.66);
      box-shadow: 0 10px 26px rgba(54, 44, 32, 0.055);
      color: var(--ink);
      text-align: left;
      cursor: pointer;
      transition: transform 220ms var(--ease), border-color 220ms var(--ease), background 220ms var(--ease);
    }

    .fengshui-home-archive-thumb {
      display: grid;
      place-items: center;
      width: 52px;
      height: 52px;
      border: 1px solid rgba(182, 150, 93, 0.2);
      border-radius: 50%;
      background: rgba(239, 232, 219, 0.72);
      overflow: hidden;
    }

    .fengshui-home-archive-thumb img {
      width: 64px;
      height: 64px;
      object-fit: contain;
      opacity: 0.7;
      mix-blend-mode: multiply;
    }

    .fengshui-home-archive-row > span:nth-child(2) {
      display: grid;
      gap: 5px;
      min-width: 0;
    }

    .fengshui-home-archive-row strong {
      color: var(--ink);
      font-family: var(--serif);
      font-size: 18px;
      line-height: 1.1;
      letter-spacing: 0.08em;
    }

    .fengshui-home-archive-row small {
      overflow: hidden;
      color: rgba(36, 32, 28, 0.55);
      font-family: var(--serif);
      font-size: 12px;
      line-height: 1.35;
      letter-spacing: 0.05em;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .fengshui-home-archive-row .chevron {
      justify-self: end;
      color: rgba(36, 32, 28, 0.46);
    }

    .fengshui-home-prerequisite {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      min-height: 30px;
      margin: 10px 0 0;
      color: rgba(131, 102, 57, 0.68);
      font-family: var(--serif);
      font-size: 12px;
      line-height: 1.4;
      letter-spacing: 0.06em;
      text-align: center;
    }

    .fengshui-home-prerequisite::before,
    .fengshui-home-prerequisite::after {
      content: "";
      flex: 0 1 50px;
      height: 1px;
      background: rgba(182, 150, 93, 0.34);
    }

    .fengshui-home-prerequisite svg {
      flex: 0 0 auto;
      width: 20px;
      height: 20px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.5;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .fengshui-home-prerequisite span {
      white-space: nowrap;
    }

    @media (hover: hover) and (pointer: fine) {
      .fengshui-home-archive-pill:hover,
      .fengshui-home-archive-row:hover {
        border-color: rgba(159, 53, 41, 0.28);
        background: rgba(255, 252, 247, 0.9);
        transform: translateY(-1px);
      }

      .fengshui-duality-panel:hover {
        filter: saturate(1.05) contrast(1.02);
      }
    }

    .fengshui-home-archive-pill:active,
    .fengshui-home-archive-row:active,
    .fengshui-duality-panel:active {
      transform: scale(0.985);
    }

    @media (max-width: 759px) {
      /* 手机端不沿用桌面端的深下移：文案回到上半暖色太极的视觉中心。 */
      .fengshui-duality-whole {
        padding-top: 92px;
      }

      .fengshui-duality-whole .fengshui-duality-art {
        top: 56px;
      }
    }

    @media (max-width: 374px) {
      .fengshui-home-screen {
        padding-right: 14px;
        padding-left: 14px;
      }

      .fengshui-home-archive-pill {
        padding: 0 10px;
      }

      .fengshui-home-archive-pill span {
        font-size: 12px;
      }

      .fengshui-home-title h1 {
        font-size: 39px;
      }

      .fengshui-duality {
        margin-right: -14px;
        margin-left: -14px;
      }

      .fengshui-duality-title strong {
        font-size: 39px;
      }

      .fengshui-duality-copy > small {
        font-size: 12px;
      }

      .fengshui-duality-cta {
        min-height: 40px;
        padding: 0 12px;
        font-size: 14px;
      }

      .fengshui-home-prerequisite::before,
      .fengshui-home-prerequisite::after {
        flex-basis: 24px;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .fengshui-home-archive-pill,
      .fengshui-home-archive-row,
      .fengshui-duality-panel {
        transition-duration: 1ms !important;
      }
    }

    /* Auth reference v1 — the supplied 853 × 1844 artwork is the visual source of truth. */
    .auth-experience {
      --auth-paper: #f3ead9;
      --auth-jade: #083f35;
      --auth-jade-deep: #07362f;
      --auth-gold: #b0873d;
      --auth-gutter: 32px;
      min-height: 100dvh;
      padding: 0;
      overflow: hidden;
      background-color: var(--auth-paper);
      background-image:
        repeating-linear-gradient(7deg, rgba(94, 73, 43, 0.018) 0 1px, transparent 1px 5px),
        repeating-linear-gradient(97deg, rgba(255, 255, 255, 0.12) 0 1px, transparent 1px 7px);
      isolation: isolate;
    }

    .auth-experience::after {
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 0;
      height: 90px;
      opacity: 1;
      background: url("/assets/auth-reference-v1/ink-mountains.webp") center bottom / 100% 100% no-repeat;
      mix-blend-mode: normal;
      -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.1) 13%, rgba(0, 0, 0, 0.46) 36%, rgba(0, 0, 0, 0.8) 66%, #000 90%);
      mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.1) 13%, rgba(0, 0, 0, 0.46) 36%, rgba(0, 0, 0, 0.8) 66%, #000 90%);
    }

    .auth-reference-hero {
      position: absolute;
      top: 0;
      right: 0;
      left: 0;
      z-index: 0;
      height: 306px;
      overflow: hidden;
      pointer-events: none;
      -webkit-mask: url("/assets/auth-reference-v1/auth-hero-fade-mask-v12.svg?v=20260711-hero-mask-v12a") center / 100% 100% no-repeat;
      mask: url("/assets/auth-reference-v1/auth-hero-fade-mask-v12.svg?v=20260711-hero-mask-v12a") center / 100% 100% no-repeat;
    }

    .auth-reference-hero img {
      display: block;
      width: 100%;
      height: auto;
      animation: authHeroReveal 920ms var(--ease) both;
    }

    .auth-reference-hero::after {
      content: "";
      position: absolute;
      inset: -12% -28%;
      background: linear-gradient(111deg, transparent 42%, rgba(255, 250, 231, 0.17) 48%, rgba(255, 250, 231, 0.07) 53%, transparent 59%);
      mix-blend-mode: screen;
      animation: authLightBreath 12s ease-in-out 1s infinite alternate;
    }

    .auth-experience .auth-content {
      position: relative;
      z-index: 2;
      display: block;
      min-height: 100dvh;
      padding: 312px var(--auth-gutter) 0;
    }

    .auth-experience .auth-brand {
      display: block;
      justify-items: initial;
      padding: 0;
      text-align: left;
      animation: authCopyRise 620ms var(--ease) 120ms both;
    }

    .auth-experience .auth-seal {
      position: absolute !important;
      width: 1px !important;
      height: 1px !important;
      margin: -1px !important;
      padding: 0 !important;
      overflow: hidden !important;
      clip: rect(0, 0, 0, 0) !important;
      border: 0 !important;
      white-space: nowrap !important;
    }

    .auth-experience .auth-title h1 {
      display: flex;
      align-items: center;
      margin: 0;
      color: #0b2e25;
      font-family: var(--serif);
      font-size: 34px;
      font-weight: 600;
      line-height: 1.12;
      letter-spacing: 0.06em;
    }

    .auth-experience .auth-title {
      width: 100%;
    }

    .auth-experience .auth-title-seal {
      display: block;
      width: 18px;
      height: 27px;
      margin-left: 7px;
      object-fit: contain;
    }

    .auth-experience .auth-title p {
      margin: 7px 0 0;
      color: rgba(38, 39, 37, 0.64);
      font-family: var(--serif);
      font-size: 12px;
      line-height: 1.55;
      letter-spacing: 0.07em;
    }

    .auth-experience .auth-panel {
      display: grid;
      gap: 0;
      margin-top: 30px;
      padding: 0;
      border: 0;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
      animation: authCopyRise 680ms var(--ease) 180ms both;
    }

    .auth-experience .auth-field {
      position: relative;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      grid-template-rows: 23px 29px;
      grid-template-areas:
        "label action"
        "input action";
      min-height: 73px;
      padding: 0;
      border: 0;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
      align-content: start;
      transition: none;
    }

    .auth-experience .auth-field::before,
    .auth-experience .auth-field::after {
      content: "";
      position: absolute;
      top: 46px;
      left: 0;
      height: 1px;
    }

    .auth-experience .auth-field::before {
      right: 0;
      background: rgba(59, 57, 52, 0.55);
    }

    .auth-experience .auth-field::after {
      width: 0;
      height: 3px;
      border-radius: 999px;
      background: var(--auth-gold);
      transform: translateY(-1px);
      transition: width 320ms var(--ease);
    }

    .auth-experience .auth-panel:not(:has(.auth-field:focus-within)) .auth-field:first-child::after,
    .auth-experience .auth-field:focus-within::after {
      width: 52px;
    }

    .auth-experience .auth-field:focus-within,
    .auth-experience .auth-field.is-invalid {
      border: 0;
      background: transparent;
      box-shadow: none;
    }

    .auth-experience .auth-field.is-invalid::before {
      background: rgba(167, 52, 39, 0.62);
    }

    .auth-experience .auth-field.is-invalid::after {
      width: 52px;
      background: var(--seal);
    }

    .auth-experience .auth-field > svg {
      display: none;
    }

    .auth-field-label {
      grid-area: label;
      color: rgba(23, 24, 22, 0.93);
      font-family: var(--serif);
      font-size: 13px;
      font-weight: 700;
      line-height: 1.35;
      letter-spacing: 0.07em;
    }

    .auth-experience .auth-field input {
      grid-area: input;
      align-self: start;
      width: 100%;
      height: 29px;
      padding: 0;
      color: #1e2421;
      font-family: var(--serif);
      font-size: 14px;
      line-height: 29px;
      letter-spacing: 0.035em;
    }

    .auth-experience .auth-field input::placeholder {
      color: rgba(54, 55, 52, 0.4);
      font-size: 0.88em;
      letter-spacing: 0.02em;
      opacity: 1;
    }

    .auth-experience .auth-eye,
    .auth-experience .auth-code-button {
      grid-area: action;
      align-self: end;
      min-width: 42px;
      min-height: 42px;
      margin: 0 -8px 12px 0;
      border: 0;
      padding: 0 8px;
      background: transparent;
      color: rgba(45, 48, 45, 0.66);
    }

    .auth-experience .auth-eye {
      display: grid;
      place-items: center;
    }

    .auth-experience .auth-eye svg {
      display: block;
      width: 20px;
      height: 20px;
    }

    .auth-experience .auth-code-button {
      border-left: 0;
      color: var(--seal);
      font-family: var(--serif);
      font-size: 13px;
      font-weight: 700;
    }

    .auth-experience .auth-row {
      min-height: 20px;
      margin-top: -11px;
      color: var(--seal);
      font-family: var(--serif);
      font-size: 12px;
      line-height: 20px;
    }

    .auth-experience .auth-link {
      color: var(--seal);
      font-weight: 650;
    }

    .auth-experience .auth-primary {
      min-height: 50px;
      margin-top: 13px;
      margin-right: -3px;
      margin-left: -3px;
      border: 1px solid rgba(191, 154, 84, 0.98);
      border-radius: 5px;
      color: rgba(255, 252, 244, 0.95);
      font-family: var(--serif);
      font-size: 17px;
      font-weight: 650;
      line-height: 1;
      letter-spacing: 0.12em;
      text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
      background:
        radial-gradient(circle at 78% 64%, #e0bd78 0 1px, #a27330 2px, transparent 3px),
        radial-gradient(90% 180% at 84% 12%, transparent 0 48%, rgba(211, 176, 108, 0.44) 49%, transparent 50%),
        radial-gradient(84% 175% at 88% 5%, transparent 0 55%, rgba(211, 176, 108, 0.28) 56%, transparent 57%),
        linear-gradient(180deg, rgba(244, 219, 157, 0.14) 0, transparent 14%),
        linear-gradient(180deg, #0d4f42 0%, #083d33 52%, var(--auth-jade-deep) 100%);
      box-shadow:
        inset 0 1px 0 rgba(253, 235, 190, 0.22),
        inset 0 0 0 2px rgba(12, 43, 36, 0.72),
        inset 0 0 0 3px rgba(222, 187, 115, 0.34),
        0 8px 14px rgba(42, 36, 25, 0.18);
      transition: transform 160ms var(--ease), filter 180ms var(--ease), box-shadow 180ms var(--ease);
    }

    .auth-experience .auth-primary:active {
      transform: translateY(1px) scale(0.996);
      filter: brightness(0.96);
      box-shadow:
        inset 0 1px 0 rgba(253, 235, 190, 0.18),
        inset 0 0 0 2px rgba(12, 43, 36, 0.72),
        inset 0 0 0 3px rgba(222, 187, 115, 0.34),
        0 4px 8px rgba(42, 36, 25, 0.14);
    }

    .auth-experience .auth-primary::before,
    .auth-experience .auth-primary::after {
      content: "";
      position: absolute;
      top: 3px;
      bottom: 3px;
      width: 9px;
      border-top: 1px solid rgba(224, 190, 121, 0.72);
      border-bottom: 1px solid rgba(224, 190, 121, 0.72);
      pointer-events: none;
    }

    .auth-experience .auth-primary::before {
      left: 4px;
      border-left: 1px solid rgba(224, 190, 121, 0.72);
    }

    .auth-experience .auth-primary::after {
      right: 4px;
      border-right: 1px solid rgba(224, 190, 121, 0.72);
    }

    .auth-experience .auth-divider {
      gap: 12px;
      margin: 20px 18px 0;
      color: rgba(43, 43, 40, 0.68);
      font-family: var(--serif);
      font-size: 14px;
      line-height: 20px;
      letter-spacing: 0.08em;
    }

    .auth-experience .auth-divider::before,
    .auth-experience .auth-divider::after {
      background: linear-gradient(90deg, transparent, rgba(120, 100, 64, 0.36));
    }

    .auth-experience .auth-divider::after {
      transform: scaleX(-1);
    }

    .auth-experience .auth-providers {
      gap: 24px;
      margin-top: 10px;
      padding: 0 22px;
    }

    .auth-experience .auth-provider {
      position: relative;
      gap: 5px;
      color: rgba(38, 39, 37, 0.73);
      font-family: var(--serif);
      font-size: 13px;
      line-height: 1.25;
      transition: transform 180ms var(--ease), color 180ms var(--ease);
    }

    .auth-experience .auth-provider + .auth-provider::before {
      content: "";
      position: absolute;
      top: 0;
      left: -12px;
      width: 1px;
      height: 50px;
      background: linear-gradient(180deg, transparent, rgba(133, 112, 74, 0.22), transparent);
      pointer-events: none;
    }

    .auth-experience .auth-provider b {
      width: 50px;
      height: 50px;
      border: 0;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
    }

    .auth-experience .auth-provider b img {
      display: block;
      width: 50px;
      height: 50px;
      object-fit: contain;
    }

    .auth-experience .auth-provider:active {
      transform: translateY(1px) scale(0.97);
    }

    .auth-experience .auth-switch {
      position: absolute;
      right: var(--auth-gutter);
      bottom: max(68px, env(safe-area-inset-bottom) + 58px);
      left: var(--auth-gutter);
      z-index: 2;
      margin: 0;
      padding: 0;
      color: rgba(39, 40, 38, 0.7);
      font-family: var(--serif);
      font-size: 14px;
      line-height: 22px;
      letter-spacing: 0.03em;
      text-align: center;
    }

    .auth-experience .auth-switch .auth-link {
      font-weight: 750;
    }

    .auth-register-experience .auth-reference-hero {
      height: 212px;
      -webkit-mask-image: linear-gradient(to bottom, #000 0 78%, rgba(0, 0, 0, 0.7) 90%, transparent 100%);
      mask-image: linear-gradient(to bottom, #000 0 78%, rgba(0, 0, 0, 0.7) 90%, transparent 100%);
    }

    .auth-register-experience .auth-content {
      padding-top: 210px;
    }

    .auth-register-experience .auth-title h1 {
      font-size: 32px;
    }

    .auth-register-experience .auth-title p {
      margin-top: 4px;
    }

    .auth-register-experience .auth-panel {
      margin-top: 12px;
    }

    .auth-register-experience .auth-field {
      grid-template-rows: 20px 27px;
      min-height: 59px;
    }

    .auth-register-experience .auth-field::before,
    .auth-register-experience .auth-field::after {
      top: 47px;
    }

    .auth-register-experience .auth-field input {
      height: 27px;
      font-size: 14px;
      line-height: 27px;
    }

    .auth-register-experience .auth-field-label {
      font-size: 14px;
    }

    .auth-register-experience .auth-field-label small {
      margin-left: 5px;
      color: rgba(54, 55, 52, 0.44);
      font-family: var(--sans);
      font-size: 10px;
      font-weight: 500;
      letter-spacing: 0.04em;
    }

    .auth-register-experience .auth-inviter-field input {
      font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .auth-register-experience .auth-eye,
    .auth-register-experience .auth-code-button {
      margin-bottom: 7px;
    }

    .auth-register-experience .auth-check {
      margin-top: 7px;
      color: rgba(42, 43, 41, 0.62);
      font-family: var(--serif);
      font-size: 12px;
      line-height: 1.5;
    }

    .auth-register-experience .auth-primary {
      margin-top: 10px;
    }

    .auth-register-experience .auth-switch {
      bottom: max(67px, env(safe-area-inset-bottom) + 58px);
    }

    @media (max-width: 374px) {
      .auth-experience {
        --auth-gutter: 28px;
      }

      .auth-reference-hero {
        height: 272px;
      }

      .auth-experience .auth-content {
        padding-top: 278px;
      }

      .auth-experience .auth-title h1 {
        font-size: 30px;
      }

      .auth-experience .auth-title p {
        font-size: 12px;
      }

      .auth-experience[data-screen="auth-login"] .auth-panel {
        margin-top: 20px;
      }

      .auth-experience .auth-field {
        grid-template-rows: 20px 26px;
        min-height: 65px;
      }

      .auth-experience .auth-field::before,
      .auth-experience .auth-field::after {
        top: 42px;
      }

      .auth-experience .auth-field input {
        height: 26px;
        font-size: 14px;
        line-height: 26px;
      }

      .auth-experience .auth-row {
        min-height: 18px;
        margin-top: -10px;
        font-size: 12px;
        line-height: 18px;
      }

      .auth-experience .auth-providers {
        padding: 0 12px;
      }

      .auth-experience .auth-provider {
        font-size: 12px;
      }

      .auth-experience .auth-provider b,
      .auth-experience .auth-provider b img {
        width: 45px;
        height: 45px;
      }

      .auth-experience .auth-provider + .auth-provider::before {
        top: 0;
        left: -11px;
        height: 45px;
      }

      .auth-experience .auth-primary {
        min-height: 43px;
        margin-top: 12px;
        font-size: 14px;
      }

      .auth-experience .auth-switch {
        bottom: max(58px, env(safe-area-inset-bottom) + 50px);
        font-size: 12px;
      }

      .auth-experience::after {
        height: 80px;
      }

      .auth-register-experience .auth-reference-hero {
        height: 198px;
      }

      .auth-register-experience .auth-content {
        padding-top: 194px;
      }

      .auth-register-experience .auth-title h1 {
        font-size: 28px;
      }

      .auth-register-experience .auth-title p {
        margin-top: 3px;
        font-size: 11px;
      }

      .auth-register-experience .auth-panel {
        margin-top: 10px;
      }

      .auth-register-experience .auth-field {
        grid-template-rows: 18px 24px;
        min-height: 53px;
      }

      .auth-register-experience .auth-field::before,
      .auth-register-experience .auth-field::after {
        top: 42px;
      }

      .auth-register-experience .auth-field-label {
        font-size: 12px;
      }

      .auth-register-experience .auth-field input {
        height: 24px;
        font-size: 13px;
        line-height: 24px;
      }

      .auth-register-experience .auth-eye,
      .auth-register-experience .auth-code-button {
        margin-bottom: 6px;
      }

      .auth-register-experience .auth-check {
        margin-top: 6px;
        font-size: 11px;
      }

      .auth-register-experience .auth-primary {
        margin-top: 9px;
      }

      .auth-register-experience .auth-switch {
        bottom: max(60px, env(safe-area-inset-bottom) + 52px);
      }
    }

    @media (min-width: 500px) and (max-width: 759px) {
      .auth-experience {
        --auth-gutter: 43px;
      }

      .auth-experience::after {
        height: 120px;
      }

      .auth-reference-hero {
        height: 408px;
      }

      .auth-experience .auth-content {
        padding-top: 416px;
      }

      .auth-experience .auth-title h1 {
        font-size: 45px;
      }

      .auth-experience .auth-title-seal {
        width: 24px;
        height: 36px;
        margin-left: 9px;
      }

      .auth-experience .auth-title p {
        margin-top: 9px;
        font-size: 15px;
      }

      .auth-experience .auth-panel {
        margin-top: 41px;
      }

      .auth-experience .auth-field {
        grid-template-rows: 31px 39px;
        min-height: 97px;
      }

      .auth-experience .auth-field::before,
      .auth-experience .auth-field::after {
        top: 61px;
      }

      .auth-field-label {
        font-size: 17px;
      }

      .auth-experience .auth-field input {
        height: 39px;
        font-size: 18px;
        line-height: 39px;
      }

      .auth-experience .auth-eye,
      .auth-experience .auth-code-button {
        margin-bottom: 16px;
      }

      .auth-experience .auth-eye svg {
        width: 27px;
        height: 27px;
      }

      .auth-experience .auth-row {
        min-height: 27px;
        margin-top: -15px;
        font-size: 16px;
        line-height: 27px;
      }

      .auth-experience .auth-primary {
        min-height: 64px;
        margin-top: 17px;
        margin-right: -4px;
        margin-left: -4px;
        font-size: 21px;
      }

      .auth-experience .auth-divider {
        gap: 16px;
        margin: 27px 24px 0;
        font-size: 18px;
        line-height: 27px;
      }

      .auth-experience .auth-providers {
        gap: 32px;
        margin-top: 13px;
        padding: 0 29px;
      }

      .auth-experience .auth-provider {
        gap: 7px;
        font-size: 17px;
      }

      .auth-experience .auth-provider b,
      .auth-experience .auth-provider b img {
        width: 67px;
        height: 67px;
      }

      .auth-experience .auth-provider + .auth-provider::before {
        left: -16px;
        height: 67px;
      }

      .auth-experience .auth-switch {
        bottom: max(91px, env(safe-area-inset-bottom) + 78px);
        font-size: 19px;
        line-height: 29px;
      }

      .auth-register-experience .auth-reference-hero {
        height: 283px;
      }

      .auth-register-experience .auth-content {
        padding-top: 280px;
      }

      .auth-register-experience .auth-title h1 {
        font-size: 43px;
      }

      .auth-register-experience .auth-title p {
        margin-top: 5px;
        font-size: 16px;
      }

      .auth-register-experience .auth-panel {
        margin-top: 16px;
      }

      .auth-register-experience .auth-field {
        grid-template-rows: 27px 36px;
        min-height: 79px;
      }

      .auth-register-experience .auth-field::before,
      .auth-register-experience .auth-field::after {
        top: 63px;
      }

      .auth-register-experience .auth-field-label {
        font-size: 19px;
      }

      .auth-register-experience .auth-field input {
        height: 36px;
        font-size: 19px;
        line-height: 36px;
      }

      .auth-register-experience .auth-eye,
      .auth-register-experience .auth-code-button {
        margin-bottom: 9px;
      }

      .auth-register-experience .auth-check {
        margin-top: 9px;
        font-size: 16px;
      }

      .auth-register-experience .auth-primary {
        margin-top: 13px;
      }

      .auth-register-experience .auth-switch {
        bottom: max(89px, env(safe-area-inset-bottom) + 78px);
      }
    }

    @media (min-width: 760px) and (hover: hover) and (pointer: fine) {
      .auth-experience {
        --auth-gutter: 40px;
        min-height: 1038px;
      }

      .auth-experience::after {
        height: 111px;
      }

      .auth-reference-hero {
        height: 377px;
      }

      .auth-experience .auth-content {
        min-height: 1038px;
        padding-top: 384px;
      }

      .auth-experience .auth-title h1 {
        font-size: 42px;
      }

      .auth-experience .auth-title-seal {
        width: 22px;
        height: 33px;
        margin-left: 8px;
      }

      .auth-experience .auth-title p {
        margin-top: 8px;
        font-size: 14px;
      }

      .auth-experience .auth-panel {
        margin-top: 38px;
      }

      .auth-experience .auth-field {
        grid-template-rows: 29px 36px;
        min-height: 90px;
      }

      .auth-experience .auth-field::before,
      .auth-experience .auth-field::after {
        top: 56px;
      }

      .auth-field-label {
        font-size: 16px;
      }

      .auth-experience .auth-field input {
        height: 36px;
        font-size: 17px;
        line-height: 36px;
      }

      .auth-experience .auth-eye,
      .auth-experience .auth-code-button {
        margin-bottom: 14px;
      }

      .auth-experience .auth-eye svg {
        width: 25px;
        height: 25px;
      }

      .auth-experience .auth-row {
        min-height: 25px;
        margin-top: -14px;
        font-size: 15px;
        line-height: 25px;
      }

      .auth-experience .auth-primary {
        min-height: 59px;
        margin-top: 16px;
        margin-right: -4px;
        margin-left: -4px;
        font-size: 19px;
      }

      .auth-experience .auth-divider {
        gap: 15px;
        margin: 25px 22px 0;
        font-size: 17px;
        line-height: 25px;
      }

      .auth-experience .auth-providers {
        gap: 30px;
        margin-top: 12px;
        padding: 0 27px;
      }

      .auth-experience .auth-provider {
        gap: 6px;
        font-size: 16px;
      }

      .auth-experience .auth-provider b,
      .auth-experience .auth-provider b img {
        width: 62px;
        height: 62px;
      }

      .auth-experience .auth-provider + .auth-provider::before {
        left: -15px;
        height: 62px;
      }

      .auth-experience .auth-switch {
        bottom: 84px;
        font-size: 17px;
        line-height: 27px;
      }

      .auth-register-experience {
        min-height: 960px;
      }

      .auth-register-experience .auth-reference-hero {
        height: 261px;
      }

      .auth-register-experience .auth-content {
        min-height: 960px;
        padding-top: 258px;
      }

      .auth-register-experience .auth-title h1 {
        font-size: 40px;
      }

      .auth-register-experience .auth-title p {
        margin-top: 5px;
        font-size: 15px;
      }

      .auth-register-experience .auth-panel {
        margin-top: 15px;
      }

      .auth-register-experience .auth-field {
        grid-template-rows: 25px 33px;
        min-height: 73px;
      }

      .auth-register-experience .auth-field::before,
      .auth-register-experience .auth-field::after {
        top: 58px;
      }

      .auth-register-experience .auth-field-label {
        font-size: 17px;
      }

      .auth-register-experience .auth-field input {
        height: 33px;
        font-size: 17px;
        line-height: 33px;
      }

      .auth-register-experience .auth-eye,
      .auth-register-experience .auth-code-button {
        margin-bottom: 8px;
      }

      .auth-register-experience .auth-check {
        margin-top: 8px;
        font-size: 15px;
      }

      .auth-register-experience .auth-primary {
        margin-top: 12px;
      }

      .auth-register-experience .auth-switch {
        bottom: 82px;
      }
    }

    @media (max-height: 780px) and (min-width: 375px) {
      .auth-experience {
        overflow-y: auto;
      }

      .auth-experience .auth-content {
        min-height: 780px;
      }

      .auth-experience .auth-switch {
        bottom: 70px;
      }

      .auth-register-experience .auth-content {
        min-height: 720px;
      }
    }

    /* Continue the source plate beneath the right side of the paper field, so its edge can descend instead of stopping on a horizontal line. */
    .auth-experience:not(.auth-register-experience) .auth-reference-hero {
      height: auto;
      aspect-ratio: 853 / 670;
      -webkit-mask: none;
      mask: none;
    }

    .auth-experience:not(.auth-register-experience) .auth-reference-hero img {
      position: relative;
      z-index: 1;
      /* The plate dissolves well before its bitmap edge; only paper tone reaches the form. */
      -webkit-mask-image: linear-gradient(to bottom, #000 0 42%, rgba(0, 0, 0, 0.94) 56%, rgba(0, 0, 0, 0.58) 75%, rgba(0, 0, 0, 0.16) 91%, transparent 100%);
      mask-image: linear-gradient(to bottom, #000 0 42%, rgba(0, 0, 0, 0.94) 56%, rgba(0, 0, 0, 0.58) 75%, rgba(0, 0, 0, 0.16) 91%, transparent 100%);
    }

    .auth-experience:not(.auth-register-experience) .auth-reference-hero::after {
      z-index: 2;
    }

    /* On shorter online viewports, hold a clear visual gap between provider sign-in and account creation. */
    .auth-experience[data-screen="auth-login"] .auth-providers {
      transform: translateY(-20px);
    }

    .auth-experience[data-screen="auth-login"] .auth-switch {
      transform: translateY(-6px);
    }

    @media (hover: hover) and (pointer: fine) {
      .auth-experience .auth-primary:hover {
        filter: brightness(1.05);
        transform: translateY(-1px);
      }

      .auth-experience .auth-provider:hover {
        color: var(--seal);
        transform: translateY(-1px);
      }
    }

    @keyframes authHeroReveal {
      from {
        opacity: 0;
        transform: scale(1.025);
        filter: blur(3px);
      }
      to {
        opacity: 1;
        transform: scale(1);
        filter: blur(0);
      }
    }

    @keyframes authCopyRise {
      from {
        opacity: 0;
        transform: translateY(10px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @keyframes authLightBreath {
      from {
        opacity: 0.18;
        transform: translate3d(-1.5%, 0, 0);
      }
      to {
        opacity: 0.62;
        transform: translate3d(1.5%, 0, 0);
      }
    }

    /* 日运日签：山水底图与内容分层，日期、节奏与宜忌始终由真实日运数据驱动。 */
    .daily-rhythm-screen {
      --daily-rhythm-accent: #b28a48;
      --daily-rhythm-accent-soft: rgba(178, 138, 72, 0.32);
      --daily-content-lift: 48px;
      position: relative;
      isolation: isolate;
      overflow: hidden;
      min-height: var(--screen-min-height);
      padding: 18px 20px var(--screen-bottom-gutter);
      background-color: #f7f2e9;
      background-position: center top;
      background-size: cover;
      background-repeat: no-repeat;
    }

    .daily-rhythm-screen[data-daily-rhythm="good"] {
      --daily-rhythm-accent: #4c8b66;
      --daily-rhythm-accent-soft: rgba(76, 139, 102, 0.34);
      --daily-content-lift: 42px;
      background-image: url("../assets/fortune-ink/daily-rhythm/daily-rhythm-high-landscape-v1.webp");
    }

    .daily-rhythm-screen[data-daily-rhythm="steady"] {
      --daily-rhythm-accent: #4c8b66;
      --daily-rhythm-accent-soft: rgba(76, 139, 102, 0.3);
      --daily-content-lift: 52px;
      background-image: url("../assets/fortune-ink/daily-rhythm/daily-rhythm-steady-lake-v1.webp");
    }

    .daily-rhythm-screen[data-daily-rhythm="neutral"] {
      --daily-rhythm-accent: #ad8a4d;
      --daily-rhythm-accent-soft: rgba(173, 138, 77, 0.3);
      --daily-content-lift: 48px;
      background-image: url("../assets/fortune-ink/daily-rhythm/daily-rhythm-neutral-river-v1.webp");
    }

    .daily-rhythm-screen[data-daily-rhythm="careful"] {
      --daily-rhythm-accent: #a33a2c;
      --daily-rhythm-accent-soft: rgba(163, 58, 44, 0.3);
      --daily-content-lift: 56px;
      background-image: url("../assets/fortune-ink/daily-rhythm/daily-rhythm-careful-rain-v1.webp");
    }

    .daily-rhythm-screen .daily-rhythm-top {
      position: relative;
      z-index: 1;
      align-items: center;
      min-height: 44px;
      margin: 0;
    }

    .daily-rhythm-screen .fortune-title {
      gap: 0;
    }

    .daily-rhythm-screen .fortune-title h1 {
      font-size: 27px;
      font-weight: 700;
      letter-spacing: 0.16em;
      line-height: 1;
    }

    .daily-rhythm-screen .icon-button {
      width: 42px;
      height: 42px;
      border-color: rgba(80, 71, 55, 0.12);
      border-radius: 50%;
      background: rgba(255, 252, 247, 0.44);
      box-shadow: none;
    }

    .daily-rhythm-screen .daily-rhythm-calendar-button {
      color: rgba(24, 23, 21, 0.86);
    }

    .daily-rhythm-date {
      position: relative;
      z-index: 1;
      margin: 12px 0 0;
      color: rgba(24, 23, 21, 0.68);
      font-family: var(--serif);
      font-size: 13px;
      letter-spacing: 0.08em;
      line-height: 1.45;
      text-align: center;
      text-shadow: 0 1px 6px rgba(255, 252, 247, 0.92);
    }

    .daily-rhythm-content {
      position: relative;
      z-index: 1;
      display: grid;
      align-content: start;
      gap: 38px;
      max-width: 344px;
      /* 保留上半部山水留白；同时以底栏安全区限制，短屏不压住宜忌。 */
      margin: min(104vw, calc(100dvh - var(--nav-height) - 475px)) auto 0;
      transform: translateY(calc(-1 * var(--daily-content-lift)));
    }

    .daily-rhythm-screen .daily-rhythm-status {
      display: grid;
      justify-items: center;
      gap: 8px;
      text-align: center;
    }

    .daily-rhythm-kicker {
      margin: 0;
      color: rgba(24, 23, 21, 0.82);
      font-family: var(--serif);
      font-size: 21px;
      font-weight: 700;
      letter-spacing: 0.18em;
      line-height: 1.2;
      text-shadow: 0 0 3px rgba(255, 252, 247, 1), 0 1px 10px rgba(255, 252, 247, 0.96);
    }

    .daily-rhythm-grade {
      display: block;
      margin: -2px 0 0.08em;
      color: var(--daily-rhythm-accent);
      font-family: var(--kai);
      font-size: clamp(92px, 27vw, 118px);
      font-weight: 700;
      letter-spacing: 0.04em;
      line-height: 0.92;
      text-shadow: 0 5px 18px rgba(54, 44, 32, 0.07);
    }

    .daily-rhythm-summary {
      max-width: 280px;
      margin: 0;
      color: rgba(24, 23, 21, 0.76);
      font-family: var(--serif);
      font-size: 17px;
      letter-spacing: 0.08em;
      line-height: 1.55;
      text-shadow: 0 1px 8px rgba(255, 252, 247, 0.96);
    }

    .daily-rhythm-screen .daily-rhythm-guidance {
      position: relative;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0;
      margin: 0;
      border-top: 1px solid rgba(80, 71, 55, 0.14);
    }

    .daily-rhythm-screen .daily-rhythm-guidance::before {
      position: absolute;
      top: 16px;
      bottom: 16px;
      left: 50%;
      width: 1px;
      content: "";
      background: rgba(80, 71, 55, 0.18);
    }

    .daily-rhythm-screen .daily-rhythm-guidance > div {
      display: grid;
      justify-items: center;
      align-content: start;
      gap: 8px;
      min-height: 122px;
      padding: 16px 14px 8px;
      border: 0;
      text-align: center;
    }

    .daily-rhythm-screen .daily-rhythm-guidance strong {
      position: relative;
      color: var(--wood);
      font-size: 30px;
      letter-spacing: 0.15em;
      line-height: 1;
      text-shadow: 0 0 3px rgba(255, 252, 247, 1), 0 1px 10px rgba(255, 252, 247, 0.96);
    }

    .daily-rhythm-screen .daily-rhythm-guidance strong::after {
      position: absolute;
      right: 8%;
      bottom: -9px;
      left: 8%;
      height: 1px;
      content: "";
      background: var(--daily-rhythm-accent-soft);
    }

    .daily-rhythm-screen .daily-rhythm-guidance .fire {
      color: var(--fire);
    }

    .daily-rhythm-screen .daily-rhythm-guidance p {
      margin: 7px 0 0;
      color: rgba(24, 23, 21, 0.72);
      font-family: var(--serif);
      font-size: 15px;
      letter-spacing: 0.045em;
      line-height: 1.72;
      text-shadow: 0 0 3px rgba(255, 252, 247, 1), 0 1px 10px rgba(255, 252, 247, 0.96);
    }

    .workspace[data-current-route="fortune-daily"] .nav button.active {
      color: var(--wood);
    }

    .workspace[data-current-route="fortune-daily"] .nav button.active svg {
      background: rgba(76, 139, 102, 0.1);
      box-shadow: inset 0 0 0 1px rgba(76, 139, 102, 0.2), 0 8px 20px rgba(76, 139, 102, 0.08);
    }

    @media (max-height: 760px) {
      .daily-rhythm-screen {
        padding-top: 12px;
      }

      .daily-rhythm-content {
        gap: 25px;
        margin-top: 40px;
      }

      .daily-rhythm-grade {
        font-size: 88px;
      }

      .daily-rhythm-screen .daily-rhythm-guidance > div {
        min-height: 106px;
        padding-top: 13px;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .auth-reference-hero img,
      .auth-reference-hero::after,
      .auth-experience .auth-brand,
      .auth-experience .auth-panel {
        animation: none !important;
      }

      .auth-experience .auth-field::after,
      .auth-experience .auth-primary,
      .auth-experience .auth-provider {
        transition-duration: 1ms !important;
      }
    }

    .advanced-book-sealed {
      position: relative;
      display: grid;
      justify-items: center;
      gap: 13px;
      margin: 14px 0 20px;
      padding: 30px 22px 21px;
      overflow: hidden;
      border: 1px solid rgba(109, 111, 78, 0.23);
      border-radius: 10px;
      background:
        radial-gradient(circle at 50% 27%, rgba(190, 177, 125, 0.13), transparent 32%),
        linear-gradient(180deg, rgba(255, 253, 248, 0.98), rgba(242, 238, 225, 0.94));
      box-shadow: 0 22px 46px rgba(54, 44, 32, 0.1);
      text-align: center;
    }

    .advanced-book-sealed::before {
      position: absolute;
      inset: 9px;
      border: 1px solid rgba(173, 138, 77, 0.16);
      content: "";
      pointer-events: none;
    }

    .advanced-book-sealed > * {
      position: relative;
    }

    .advanced-book-sealed-art {
      display: grid;
      place-items: center;
      height: 178px;
      margin: 0 0 2px;
    }

    .advanced-book-ritual-art {
      position: relative;
      z-index: 0;
      display: grid;
      place-items: center;
      width: 144px;
      height: 176px;
    }

    .advanced-book-ritual-art::before,
    .advanced-book-ritual-orbit {
      position: absolute;
      border: 1px solid rgba(157, 134, 75, 0.25);
      border-radius: 50%;
      content: "";
    }

    .advanced-book-ritual-art::before {
      inset: 17px 5px 7px;
      background: radial-gradient(circle, rgba(255, 252, 245, 0.96), rgba(238, 234, 219, 0.3) 64%, transparent 65%);
      box-shadow: inset 0 0 0 8px rgba(173, 138, 77, 0.04), 0 20px 30px rgba(54, 44, 32, 0.1);
    }

    .advanced-book-ritual-orbit {
      inset: 7px -1px 0;
      border-color: rgba(132, 51, 37, 0.18) rgba(173, 138, 77, 0.17) rgba(173, 138, 77, 0.17) rgba(173, 138, 77, 0.17);
      transform: rotate(-18deg);
    }

    .advanced-book-ritual-art img {
      position: relative;
      z-index: 1;
      width: 128px;
      height: 166px;
      object-fit: contain;
      filter: drop-shadow(0 13px 12px rgba(35, 39, 29, 0.13));
    }

    .advanced-book-ritual-art b {
      position: absolute;
      z-index: 2;
      right: 2px;
      bottom: 14px;
      display: grid;
      width: 30px;
      height: 30px;
      place-items: center;
      border: 1px solid rgba(132, 51, 37, 0.38);
      border-radius: 50%;
      background: #a63c32;
      box-shadow: 0 7px 16px rgba(132, 51, 37, 0.2);
      color: #fff7ed;
      font: 800 17px/1 var(--serif);
    }

    .advanced-book-sealed-kicker,
    .advanced-book-unlock-kicker {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: var(--seal);
      font-size: 12px;
      font-weight: 800;
      letter-spacing: 0.18em;
    }

    .advanced-book-sealed-kicker::before,
    .advanced-book-sealed-kicker::after,
    .advanced-book-unlock-kicker::before,
    .advanced-book-unlock-kicker::after {
      width: 20px;
      height: 1px;
      background: rgba(167, 52, 39, 0.28);
      content: "";
    }

    .advanced-book-sealed h2 {
      margin: 0;
      color: var(--ink);
      font: 800 clamp(26px, 7vw, 32px)/1.2 var(--serif);
      letter-spacing: 0.06em;
    }

    .advanced-book-sealed > p:not(.advanced-book-sealed-note) {
      max-width: 310px;
      margin: 0;
      color: rgba(24, 23, 21, 0.68);
      font: 15px/1.82 var(--serif);
      letter-spacing: 0.035em;
    }

    .advanced-book-sealed-tags,
    .advanced-book-unlock-tags {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 7px;
    }

    .advanced-book-sealed-tags span,
    .advanced-book-unlock-tags span {
      padding: 6px 9px;
      border: 1px solid rgba(109, 111, 78, 0.2);
      border-radius: 999px;
      background: rgba(255, 253, 247, 0.66);
      color: rgba(24, 23, 21, 0.62);
      font: 800 11px/1.3 var(--serif);
      letter-spacing: 0.06em;
    }

    .advanced-book-sealed-note {
      max-width: 302px;
      margin: 0;
      padding-top: 12px;
      border-top: 1px solid rgba(24, 23, 21, 0.08);
      color: rgba(45, 58, 75, 0.66);
      font-size: 12px;
      line-height: 1.65;
    }

    .advanced-book-sealed-actions,
    .advanced-book-unlock-actions {
      display: grid;
      grid-template-columns: 0.9fr 1.1fr;
      width: 100%;
      gap: 10px;
    }

    .advanced-book-sealed-actions button,
    .advanced-book-unlock-actions button {
      display: inline-flex;
      min-height: 46px;
      align-items: center;
      justify-content: center;
      border: 1px solid rgba(24, 23, 21, 0.14);
      border-radius: 999px;
      background: rgba(255, 252, 247, 0.72);
      color: rgba(24, 23, 21, 0.72);
      cursor: pointer;
      font: 800 14px/1 var(--serif);
      letter-spacing: 0.08em;
    }

    .advanced-book-sealed-actions .primary,
    .advanced-book-unlock-actions .primary {
      border-color: rgba(38, 52, 42, 0.44);
      background: linear-gradient(180deg, #3f5847, #273b30);
      box-shadow: 0 14px 28px rgba(35, 55, 43, 0.22);
      color: #fffaf1;
    }

    .advanced-book-unlock-modal[hidden] {
      display: none;
    }

    .advanced-book-unlock-modal {
      position: fixed;
      z-index: 86;
      inset: 0;
      display: grid;
      align-items: end;
      justify-items: center;
      padding: 18px 14px calc(18px + env(safe-area-inset-bottom));
      color: var(--ink);
    }

    .advanced-book-unlock-scrim {
      position: absolute;
      inset: 0;
      border: 0;
      background: rgba(20, 29, 24, 0.33);
      backdrop-filter: blur(18px);
      cursor: pointer;
    }

    .advanced-book-unlock-scrim.is-static {
      cursor: wait;
    }

    .advanced-book-unlock-card {
      position: relative;
      display: grid;
      width: min(100%, 396px);
      max-height: calc(100dvh - 36px);
      gap: 14px;
      overflow: auto;
      padding: 22px 20px 18px;
      border: 1px solid rgba(119, 125, 83, 0.32);
      border-radius: 10px;
      background:
        radial-gradient(circle at 50% 19%, rgba(192, 179, 124, 0.14), transparent 35%),
        linear-gradient(180deg, rgba(255, 253, 248, 0.99), rgba(245, 241, 231, 0.98));
      box-shadow: 0 34px 72px rgba(25, 36, 29, 0.29);
      animation: advancedBookUnlockRise 420ms var(--ease) both;
    }

    .advanced-book-unlock-card::before {
      position: absolute;
      inset: 9px;
      border: 1px solid rgba(173, 138, 77, 0.15);
      content: "";
      pointer-events: none;
    }

    .advanced-book-unlock-card > * {
      position: relative;
    }

    .advanced-book-unlock-close {
      position: absolute;
      z-index: 2;
      top: 15px;
      right: 15px;
      display: grid;
      width: 34px;
      height: 34px;
      place-items: center;
      border: 1px solid rgba(24, 23, 21, 0.1);
      border-radius: 50%;
      background: rgba(255, 252, 247, 0.78);
      color: rgba(24, 23, 21, 0.68);
      cursor: pointer;
      font-size: 23px;
      line-height: 1;
    }

    .advanced-book-unlock-hero {
      display: grid;
      justify-items: center;
      gap: 10px;
      padding: 1px 15px 0;
      text-align: center;
    }

    .advanced-book-unlock-hero .advanced-book-ritual-art {
      height: 154px;
      margin: -1px 0 -4px;
      transform: scale(0.9);
    }

    .advanced-book-unlock-hero h2 {
      margin: 0 0 7px;
      color: var(--ink);
      font: 800 29px/1.18 var(--serif);
      letter-spacing: 0.07em;
    }

    .advanced-book-unlock-hero h2 + p {
      margin: 0;
      color: rgba(24, 23, 21, 0.6);
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 0.08em;
      line-height: 1.45;
    }

    .advanced-book-unlock-brief {
      margin: 2px 0 0;
      color: rgba(24, 23, 21, 0.72);
      font: 15px/1.64 var(--serif);
      letter-spacing: 0.045em;
    }

    .advanced-book-unlock-footnote {
      margin: 0;
      padding-top: 12px;
      border-top: 1px solid rgba(24, 23, 21, 0.08);
      color: rgba(45, 58, 75, 0.7);
      font-size: 12px;
      line-height: 1.6;
      text-align: center;
    }

    .advanced-book-ritual-steps {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      gap: 6px;
      color: rgba(24, 23, 21, 0.56);
      font: 800 11px/1.5 var(--serif);
      letter-spacing: 0.05em;
    }

    .advanced-book-ritual-steps i {
      color: var(--seal);
      font-style: normal;
    }

    .advanced-book-unlock-progress {
      position: relative;
      height: 2px;
      overflow: hidden;
      background: rgba(109, 111, 78, 0.18);
    }

    .advanced-book-unlock-progress::before {
      position: absolute;
      inset: 0 auto 0 0;
      width: 48%;
      background: linear-gradient(90deg, transparent, rgba(57, 83, 66, 0.86), transparent);
      content: "";
      animation: advancedBookUnlockSweep 1200ms var(--ease) infinite;
    }

    .advanced-book-unlock-card.is-generating .advanced-book-ritual-orbit {
      animation: advancedBookUnlockOrbit 1800ms linear infinite;
    }

    body:has(.advanced-book-unlock-modal:not([hidden])) .nav {
      opacity: 0.28;
      pointer-events: none;
    }

    @keyframes advancedBookUnlockRise {
      from { opacity: 0; transform: translateY(22px) scale(0.985); }
      to { opacity: 1; transform: translateY(0) scale(1); }
    }

    @keyframes advancedBookUnlockOrbit {
      to { transform: rotate(342deg); }
    }

    @keyframes advancedBookUnlockSweep {
      from { transform: translateX(-110%); }
      to { transform: translateX(250%); }
    }

    @media (max-height: 720px) {
      .advanced-book-unlock-card {
        gap: 10px;
        padding-top: 18px;
      }

      .advanced-book-unlock-hero .advanced-book-ritual-art {
        height: 126px;
        transform: scale(0.75);
        margin: -12px 0 -16px;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .advanced-book-unlock-card,
      .advanced-book-unlock-card.is-generating .advanced-book-ritual-orbit,
      .advanced-book-unlock-progress::before {
        animation: none !important;
      }
    }

    /* Relationship commentary v2: distinct evidence chains and mobile-first reading hierarchy. */
    .relationship-match-screen.is-report-step .relationship-energy-summary {
      display: grid;
      gap: 8px;
    }

    .relationship-match-screen.is-report-step .relationship-energy-summary p {
      margin: 0;
    }

    .relationship-match-screen.is-report-step .relationship-energy-observation {
      display: grid;
      gap: 5px;
      margin-top: 13px;
      padding: 10px 0 0 12px;
      border-top: 1px solid rgba(173, 138, 77, 0.15);
      border-left: 2px solid rgba(173, 138, 77, 0.36);
    }

    .relationship-match-screen.is-report-step .relationship-energy-observation p {
      margin: 0;
      color: rgba(24, 23, 21, 0.66);
      font-size: 13px;
      line-height: 1.65;
    }

    .relationship-match-screen.is-report-step .relationship-energy-observation span {
      display: inline-block;
      min-width: 5.5em;
      margin-right: 7px;
      color: #9f743b;
      font-family: var(--serif);
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.08em;
    }

    .relationship-match-screen.is-report-step .relationship-proof-brief-row {
      align-items: start;
      padding-block: 13px;
    }

    .relationship-match-screen.is-report-step .relationship-proof-brief-row > strong {
      align-self: start;
      padding-top: 6px;
    }

    .relationship-match-screen.is-report-step .relationship-proof-chain {
      display: grid;
      gap: 5px;
      min-width: 0;
    }

    .relationship-match-screen.is-report-step .relationship-proof-chain p {
      margin: 0;
      color: rgba(24, 23, 21, 0.65);
      font-size: 12.5px;
      line-height: 1.52;
    }

    .relationship-match-screen.is-report-step .relationship-proof-chain span {
      display: inline-block;
      min-width: 4.7em;
      margin-right: 6px;
      color: rgba(117, 98, 68, 0.58);
      font-family: var(--serif);
      font-size: 10px;
      font-weight: 800;
      letter-spacing: 0.06em;
    }

    .relationship-match-screen.is-dimensions-report .relationship-dimension-takeaway {
      display: block;
      margin-top: -2px;
      color: #9f743b;
      font-family: var(--serif);
      font-size: 15px;
      font-weight: 800;
      letter-spacing: 0.08em;
    }

    .relationship-match-screen.is-dimensions-report .relationship-timing-observation-list {
      display: grid;
      gap: 0;
      width: min(560px, calc(100% - 28px));
      margin: 16px auto 0;
      border-top: 1px solid rgba(173, 138, 77, 0.18);
    }

    .relationship-match-screen.is-dimensions-report .relationship-timing-observation-list header {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      padding: 10px 0 8px;
      color: rgba(117, 98, 68, 0.6);
      font-size: 11px;
      line-height: 1.5;
    }

    .relationship-match-screen.is-dimensions-report .relationship-timing-observation-list header small {
      color: #9f743b;
      font-family: var(--serif);
      font-size: 12px;
      font-weight: 800;
      letter-spacing: 0.08em;
    }

    .relationship-match-screen.is-dimensions-report .relationship-timing-observation-list article {
      display: grid;
      grid-template-columns: 48px minmax(0, 1fr);
      gap: 10px;
      padding: 10px 0;
      border-top: 1px solid rgba(173, 138, 77, 0.12);
    }

    .relationship-match-screen.is-dimensions-report .relationship-timing-observation-list strong {
      color: #9f743b;
      font-family: var(--serif);
      font-size: 15px;
      letter-spacing: 0.05em;
    }

    .relationship-match-screen.is-dimensions-report .relationship-timing-observation-list p {
      margin: 0;
      color: rgba(24, 23, 21, 0.64);
      font-size: 13px;
      line-height: 1.65;
    }

    @media (max-width: 560px) {
      .relationship-match-screen.is-report-step .relationship-energy-observation p,
      .relationship-match-screen.is-report-step .relationship-proof-chain p {
        font-size: 12px;
      }

      .relationship-match-screen.is-report-step .relationship-proof-chain span {
        min-width: 4.4em;
        font-size: 9.5px;
      }

      .relationship-match-screen.is-dimensions-report .relationship-timing-observation-list header {
        display: grid;
        gap: 2px;
      }
    }

    /* Personal invitation center: first-class profile page with live records. */
    .profile-invite-center-screen {
      padding-top: max(0px, env(safe-area-inset-top));
      background: #faf7f0;
    }

    .invite-center-topbar {
      display: grid;
      grid-template-columns: 42px minmax(0, 1fr) 42px;
      align-items: center;
      min-height: 48px;
      margin-bottom: 2px;
      padding-bottom: 0;
      border-bottom: 1px solid rgba(24, 23, 21, 0.1);
    }

    .invite-center-topbar .fortune-title {
      text-align: center;
    }

    .invite-center-topbar .fortune-title h1 {
      margin: 0;
      font-size: 22px;
      letter-spacing: 0.12em;
    }

    .invite-center-tabs {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      margin: 0 -22px 16px;
      border-bottom: 1px solid rgba(24, 23, 21, 0.1);
      background: rgba(255, 252, 247, 0.54);
    }

    .invite-center-tabs button {
      position: relative;
      min-height: 42px;
      padding: 0 8px;
      border: 0;
      background: transparent;
      color: rgba(24, 23, 21, 0.54);
      font-family: var(--serif);
      font-size: 15px;
      font-weight: 700;
      letter-spacing: 0.08em;
      cursor: pointer;
    }

    .invite-center-tabs button::after {
      content: "";
      position: absolute;
      right: 30%;
      bottom: -1px;
      left: 30%;
      height: 2px;
      border-radius: 999px;
      background: transparent;
      transition: right 220ms var(--ease), left 220ms var(--ease), background 220ms var(--ease);
    }

    .invite-center-tabs button.active {
      color: var(--seal);
    }

    .invite-center-tabs button.active::after {
      right: 24%;
      left: 24%;
      background: var(--seal);
    }

    .invite-center-tabs button:focus-visible {
      outline: 0;
    }

    .invite-center-tabs button:focus-visible::after {
      right: 24%;
      left: 24%;
      background: rgba(167, 52, 39, 0.72);
    }

    .invite-center-tabs button b {
      display: inline-grid;
      place-items: center;
      min-width: 20px;
      height: 20px;
      margin-left: 4px;
      padding: 0 5px;
      border-radius: 999px;
      background: var(--seal);
      color: #fffaf1;
      font-family: var(--sans);
      font-size: 10px;
      letter-spacing: 0;
    }

    .invite-center-panel {
      min-width: 0;
    }

    .invite-center-panel.is-active {
      display: block;
    }

    .invite-center-poster-preview {
      position: relative;
      aspect-ratio: 1.78 / 1;
      overflow: hidden;
      border: 1px solid rgba(141, 112, 62, 0.24);
      border-radius: 13px;
      background:
        url("/prototype/assets/relationship-match/invite/generated-v1/relationship-invite-dossier-bg-v1.webp") center / cover no-repeat,
        #f7efe2;
      box-shadow: 0 12px 28px rgba(68, 49, 25, 0.08);
    }

    .invite-center-poster-preview > header {
      position: absolute;
      top: 15px;
      left: 16px;
      display: grid;
      gap: 2px;
    }

    .invite-center-poster-preview > header strong {
      font-family: var(--serif);
      font-size: 18px;
      letter-spacing: 0.18em;
    }

    .invite-center-poster-preview > header small {
      color: rgba(24, 23, 21, 0.5);
      font-size: 7px;
      letter-spacing: 0.1em;
    }

    .invite-center-poster-copy {
      position: absolute;
      top: 50%;
      left: 16px;
      max-width: 58%;
      transform: translateY(-42%);
    }

    .invite-center-poster-copy h2 {
      margin: 0;
      font-family: var(--serif);
      font-size: clamp(16px, 5.4vw, 23px);
      line-height: 1.35;
      letter-spacing: 0.05em;
      white-space: nowrap;
    }

    .invite-center-poster-copy h2 span {
      color: var(--seal);
    }

    .invite-center-poster-copy p {
      margin: 7px 0 0;
      color: rgba(24, 23, 21, 0.64);
      font-size: clamp(7px, 2.6vw, 10px);
      letter-spacing: 0.12em;
      white-space: nowrap;
    }

    .invite-center-poster-qr {
      position: absolute;
      top: 26px;
      right: 18px;
      display: grid;
      place-items: center;
      width: 72px;
      height: 72px;
      padding: 6px;
      border: 1px solid rgba(167, 52, 39, 0.6);
      background: rgba(255, 252, 247, 0.9);
    }

    .invite-center-poster-qr .relationship-qr-image-wrap,
    .invite-center-poster-qr .relationship-qr-image {
      width: 100%;
      height: 100%;
    }

    .invite-center-poster-qr .relationship-qr-image {
      display: block;
      object-fit: contain;
    }

    .invite-center-poster-qr .relationship-qr-mark {
      position: absolute;
      inset: 6px;
    }

    .invite-center-poster-id {
      position: absolute;
      right: 16px;
      bottom: 15px;
      display: grid;
      justify-items: end;
      gap: 3px;
    }

    .invite-center-poster-id small {
      color: rgba(24, 23, 21, 0.58);
      font-size: 8px;
      letter-spacing: 0.08em;
    }

    .invite-center-poster-id strong {
      color: var(--seal);
      font: 800 15px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
      letter-spacing: 0.06em;
    }

    .invite-center-identity {
      margin-top: 17px;
    }

    .invite-center-identity h2,
    .invite-center-link > span,
    .invite-center-recent h2,
    .invite-center-records h2 {
      margin: 0;
      color: rgba(24, 23, 21, 0.82);
      font-family: var(--serif);
      font-size: 15px;
      font-weight: 700;
      letter-spacing: 0.06em;
    }

    .invite-center-identity > div {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      min-height: 42px;
      margin-top: 8px;
      padding: 0 14px 0 16px;
      border: 1px solid rgba(141, 112, 62, 0.2);
      border-radius: 10px;
      background: rgba(255, 252, 247, 0.68);
    }

    .invite-center-identity > div strong {
      color: var(--seal);
      font: 800 20px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
      letter-spacing: 0.06em;
    }

    .invite-center-identity > div button {
      min-height: 32px;
      padding: 0 6px 0 14px;
      border: 0;
      border-left: 1px solid rgba(141, 112, 62, 0.18);
      background: transparent;
      color: rgba(91, 71, 42, 0.82);
      font-family: var(--serif);
      font-size: 13px;
      font-weight: 700;
      cursor: pointer;
    }

    .invite-center-identity > p {
      display: none;
      margin: 6px 2px 0;
      color: rgba(24, 23, 21, 0.5);
      font-family: var(--sans);
      font-size: 11px;
      line-height: 1.6;
    }

    .invite-center-link {
      display: grid;
      gap: 8px;
      margin-top: 13px;
    }

    .invite-center-link input {
      width: 100%;
      min-width: 0;
      height: 44px;
      padding: 0 14px;
      overflow: hidden;
      border: 1px solid rgba(141, 112, 62, 0.2);
      border-radius: 10px;
      outline: 0;
      background: rgba(255, 252, 247, 0.68);
      color: rgba(24, 23, 21, 0.7);
      font: 11px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
      text-overflow: ellipsis;
    }

    .invite-center-link input:focus {
      border-color: rgba(47, 107, 90, 0.46);
      box-shadow: 0 0 0 3px rgba(47, 107, 90, 0.08);
    }

    .invite-center-actions {
      display: grid;
      grid-template-columns: 1fr;
      gap: 8px;
      margin-top: 10px;
    }

    .invite-center-actions button {
      min-height: 42px;
      border: 1px solid rgba(47, 107, 90, 0.65);
      border-radius: 10px;
      background: rgba(255, 252, 247, 0.72);
      color: #2f6b5a;
      font-family: var(--serif);
      font-size: 14px;
      font-weight: 800;
      letter-spacing: 0.06em;
      cursor: pointer;
      transition: transform 180ms var(--ease), background 180ms var(--ease);
    }

    .invite-center-actions button.primary {
      border-color: #2f6b5a;
      background: #347a64;
      box-shadow: 0 10px 20px rgba(47, 107, 90, 0.13);
      color: #fffaf1;
    }

    .invite-center-actions button:active {
      transform: translateY(1px);
    }

    .invite-center-recent {
      margin-top: 17px;
      padding-top: 13px;
      border-top: 1px solid rgba(141, 112, 62, 0.22);
    }

    .invite-center-recent > header,
    .invite-center-records > header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
    }

    .invite-center-recent > header button,
    .invite-center-records > header button {
      min-height: 38px;
      padding: 0 2px 0 12px;
      border: 0;
      background: transparent;
      color: rgba(24, 23, 21, 0.5);
      font-size: 12px;
      cursor: pointer;
    }

    .invite-center-recent > header button i {
      margin-left: 4px;
      font: 19px/1 Georgia, serif;
      font-style: normal;
    }

    .invite-center-record-list {
      margin-top: 8px;
      overflow: hidden;
      border: 1px solid rgba(141, 112, 62, 0.18);
      border-radius: 11px;
      background: rgba(255, 252, 247, 0.55);
    }

    .invite-center-record {
      display: grid;
      grid-template-columns: 38px minmax(0, 1fr) auto;
      align-items: center;
      gap: 10px;
      min-height: 56px;
      padding: 8px 12px;
    }

    .invite-center-record + .invite-center-record {
      border-top: 1px solid rgba(24, 23, 21, 0.09);
    }

    .invite-center-record-mark {
      display: grid;
      place-items: center;
      width: 32px;
      height: 32px;
      border: 1px solid rgba(173, 138, 77, 0.22);
      border-radius: 50%;
      background: rgba(255, 252, 247, 0.74);
      color: #9b7537;
    }

    .invite-center-record-mark svg {
      width: 20px;
      height: 20px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.5;
    }

    .invite-center-record-main {
      display: grid;
      gap: 4px;
      min-width: 0;
    }

    .invite-center-record-main strong {
      overflow: hidden;
      color: var(--seal);
      font: 800 15px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
      letter-spacing: 0.05em;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .invite-center-record-main small {
      overflow: hidden;
      color: rgba(24, 23, 21, 0.48);
      font-size: 10px;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .invite-center-record > em {
      color: #2f7d62;
      font-size: 11px;
      font-style: normal;
      font-weight: 800;
      white-space: nowrap;
    }

    .invite-center-record-empty {
      display: grid;
      gap: 10px;
      justify-items: center;
      margin: 0;
      padding: 26px 18px;
      color: rgba(24, 23, 21, 0.52);
      font-size: 12px;
      line-height: 1.65;
      text-align: center;
    }

    .invite-center-record-empty button {
      min-height: 36px;
      padding: 0 18px;
      border: 1px solid rgba(47, 107, 90, 0.35);
      border-radius: 8px;
      background: rgba(255, 252, 247, 0.76);
      color: #2f6b5a;
      cursor: pointer;
    }

    .invite-center-record-hint,
    .invite-center-rule,
    .invite-center-records > p {
      color: rgba(24, 23, 21, 0.48);
      font-family: var(--sans);
      font-size: 10px;
      line-height: 1.65;
    }

    .invite-center-record-hint {
      margin: 10px 2px 0;
    }

    .invite-center-rule {
      margin: 22px 0 0;
      padding-top: 17px;
      border-top: 1px solid rgba(24, 23, 21, 0.1);
    }

    .invite-center-records > header div {
      display: grid;
      gap: 5px;
    }

    .invite-center-records > header small {
      color: var(--seal);
      font-size: 10px;
      font-weight: 800;
      letter-spacing: 0.12em;
    }

    .invite-center-records h2 {
      font-size: 20px;
    }

    .invite-center-records h2 b {
      color: var(--seal);
      font-size: 22px;
    }

    .invite-center-records > p {
      margin: 10px 0 16px;
    }

    .profile-invite-center-screen.is-unavailable [data-copy-public-user-id],
    .profile-invite-center-screen.is-unavailable [data-copy-personal-invite-link],
    .profile-invite-center-screen.is-unavailable [data-open-personal-invite-poster] {
      pointer-events: none;
    }

    @media (min-width: 700px) {
      .profile-invite-center-screen {
        padding-right: 34px;
        padding-left: 34px;
      }

      .invite-center-tabs {
        margin-right: -34px;
        margin-left: -34px;
      }

      .invite-center-poster-preview {
        max-height: 270px;
      }

      .invite-center-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .invite-center-identity > p {
        display: block;
      }
    }

    @media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
      .profile-invite-center-screen.is-active {
        display: block;
      }

      .profile-invite-center-screen {
        padding-top: 36px;
      }

      .invite-center-topbar {
        margin-bottom: 6px;
      }

      .invite-center-tabs {
        width: 360px;
        margin: 0 auto 28px;
        border: 1px solid rgba(141, 112, 62, 0.15);
        border-radius: 12px;
        overflow: hidden;
      }

      .invite-center-tabs button {
        min-height: 48px;
      }

      .invite-center-tabs button + button {
        border-left: 1px solid rgba(141, 112, 62, 0.13);
      }

      .invite-center-panel[data-personal-invite-panel="invite"].is-active {
        display: grid;
        grid-template-columns: minmax(360px, 0.9fr) minmax(380px, 1.1fr);
        grid-template-rows: auto auto auto auto;
        gap: 18px 34px;
        align-items: start;
      }

      .invite-center-poster-preview {
        grid-column: 1;
        grid-row: 1 / span 3;
        width: 100%;
        max-height: none;
      }

      .invite-center-identity {
        grid-column: 2;
        grid-row: 1;
        margin-top: 0;
      }

      .invite-center-link {
        grid-column: 2;
        grid-row: 2;
        margin-top: 0;
      }

      .invite-center-actions {
        grid-column: 2;
        grid-row: 3;
        margin-top: 0;
      }

      .invite-center-recent {
        grid-column: 1 / -1;
        grid-row: 4;
        margin-top: 8px;
      }

      .invite-center-rule {
        grid-column: 1 / -1;
        grid-row: 5;
        margin-top: 0;
      }

      .invite-center-records {
        width: min(100%, 720px);
        margin: 0 auto;
      }
    }

    /* 个人邀请海报：深墨绿星宿命盘（动态公开 ID 与二维码保持为真实 DOM 内容）。 */
    .personal-invite-poster-layer {
      z-index: 1301;
      grid-template-rows: auto auto;
      align-content: center;
      row-gap: 12px;
      padding: max(14px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
    }

    .personal-invite-poster-layer .relationship-invite-poster-scrim {
      background: rgba(2, 10, 8, 0.76);
      backdrop-filter: blur(10px);
    }

    .personal-invite-poster.personal-invite-poster--celestial {
      isolation: isolate;
      display: block;
      width: auto;
      height: min(530px, calc(100dvh - 144px));
      min-height: 0;
      aspect-ratio: 1006 / 1564;
      padding: 0;
      border: 1px solid rgba(218, 190, 125, 0.52);
      border-radius: 4px;
      background: #071a17;
      color: #f6efdc;
      box-shadow: 0 28px 66px rgba(0, 0, 0, 0.5);
    }

    .personal-invite-poster.personal-invite-poster--celestial::before,
    .personal-invite-poster.personal-invite-poster--celestial::after {
      display: none;
    }

    .personal-invite-poster .personal-invite-poster-backdrop,
    .personal-invite-poster .personal-invite-poster-veil {
      position: absolute;
      inset: 0;
      z-index: -2;
      width: 100%;
      height: 100%;
      pointer-events: none;
    }

    .personal-invite-poster .personal-invite-poster-backdrop {
      display: block;
      object-fit: cover;
    }

    .personal-invite-poster .personal-invite-poster-veil {
      z-index: -1;
      background: rgba(2, 14, 12, 0.1);
    }

    .personal-invite-poster .personal-invite-poster-brand,
    .personal-invite-poster .personal-invite-poster-copy,
    .personal-invite-poster .personal-invite-poster-code,
    .personal-invite-poster .personal-invite-poster-qr-block {
      position: absolute;
      z-index: 1;
    }

    .personal-invite-poster .personal-invite-poster-brand {
      top: 30px;
      right: 20px;
      left: 20px;
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      justify-items: center;
      gap: 4px;
      color: #f3e4bd;
      font-family: var(--serif);
      letter-spacing: 0.22em;
    }

    .personal-invite-poster .personal-invite-poster-brand span {
      font-size: 23px;
      font-weight: 900;
      line-height: 1;
    }

    .personal-invite-poster .personal-invite-poster-brand small {
      color: rgba(232, 215, 172, 0.8);
      font-family: var(--sans);
      font-size: 8px;
      letter-spacing: 0.25em;
    }

    .personal-invite-poster .personal-invite-poster-copy {
      top: 31.5%;
      right: 14px;
      left: 14px;
      display: grid;
      gap: 9px;
      margin: 0;
      text-align: center;
    }

    .personal-invite-poster .personal-invite-poster-copy h2 {
      margin: 0;
      color: #f8f1df;
      font-family: var(--serif);
      font-size: 30px;
      font-weight: 900;
      line-height: 1.22;
      letter-spacing: 0.09em;
    }

    .personal-invite-poster .personal-invite-poster-copy p {
      margin: 0;
      color: rgba(228, 211, 169, 0.9);
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.16em;
      line-height: 1.5;
      text-align: center;
    }

    .personal-invite-poster .personal-invite-poster-code {
      top: 52.2%;
      left: 50%;
      display: flex;
      align-items: center;
      gap: 9px;
      min-width: 0;
      padding: 7px 10px;
      border: 1px solid rgba(205, 178, 110, 0.62);
      border-radius: 4px;
      background: rgba(3, 17, 14, 0.66);
      color: #f4e6c4;
      transform: translateX(-50%);
      white-space: nowrap;
    }

    .personal-invite-poster .personal-invite-poster-code span {
      color: rgba(218, 198, 150, 0.86);
      font-size: 9px;
      letter-spacing: 0.12em;
    }

    .personal-invite-poster .personal-invite-poster-code strong {
      color: #f5e5bd;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
      font-size: 17px;
      letter-spacing: 0.12em;
      line-height: 1;
    }

    .personal-invite-poster .personal-invite-poster-qr-block {
      right: 14px;
      bottom: 20px;
      left: 14px;
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      grid-auto-flow: row;
      grid-auto-rows: max-content;
      justify-items: center;
      gap: 8px;
      margin: 0;
      padding: 0;
      border: 0;
      border-radius: 0;
      background: transparent;
    }

    .personal-invite-poster .personal-invite-poster-qr-block .relationship-qr-image-wrap,
    .personal-invite-poster .personal-invite-poster-qr-block .relationship-qr-mark {
      width: 113px;
      height: 113px;
      border: 0;
      border-radius: 3px;
      background: #fffdf7;
      box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
    }

    .personal-invite-poster .personal-invite-poster-qr-block .relationship-qr-image {
      width: 100%;
      height: 100%;
      border: 7px solid #fffdf7;
      border-radius: 3px;
      background: #fffdf7;
      box-shadow: none;
    }

    .personal-invite-poster .personal-invite-poster-qr-block > div:last-child {
      display: grid;
      justify-items: center;
      gap: 3px;
    }

    .personal-invite-poster .personal-invite-poster-qr-block strong {
      color: #f2e6c7;
      font-family: var(--serif);
      font-size: 15px;
      letter-spacing: 0.11em;
    }

    .personal-invite-poster .personal-invite-poster-qr-block small {
      overflow: visible;
      color: rgba(217, 198, 155, 0.82);
      font-size: 8px;
      letter-spacing: 0.08em;
      text-align: center;
      text-overflow: clip;
      white-space: normal;
    }

    .personal-invite-poster-layer .relationship-invite-poster-actions {
      z-index: 1;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      width: min(341px, calc(100vw - 32px));
      margin: 0;
      gap: 7px;
    }

    .personal-invite-poster-layer .relationship-invite-poster-actions button {
      min-width: 0;
      min-height: 38px;
      padding: 0 7px;
      border-color: rgba(221, 194, 133, 0.36);
      background: rgba(10, 27, 22, 0.94);
      color: rgba(245, 235, 211, 0.92);
      font-size: 12px;
      white-space: nowrap;
    }

    .personal-invite-poster-layer .relationship-invite-poster-actions button.primary {
      border-color: rgba(209, 167, 83, 0.76);
      background: #a13e2d;
      color: #fff8e8;
    }

    /* 我的 / 隐私与安全、关于应用 */
    .profile-detail-screen {
      --profile-detail-jade: #376755;
      --profile-detail-gold: #a68242;
      --profile-detail-paper: rgba(255, 252, 247, 0.72);
      padding-top: 20px;
      padding-bottom: var(--screen-bottom-gutter);
      font-family: var(--serif);
      background:
        radial-gradient(circle at 86% 7%, rgba(173, 138, 77, 0.11), transparent 31%),
        radial-gradient(circle at 8% 42%, rgba(55, 103, 85, 0.065), transparent 30%),
        linear-gradient(180deg, rgba(250, 246, 237, 0.98), rgba(244, 237, 225, 0.96));
    }

    .profile-detail-topbar {
      grid-template-columns: 42px minmax(0, 1fr) 42px;
      align-items: center;
      min-height: 52px;
      margin-bottom: 18px;
    }

    .profile-detail-topbar .fortune-title {
      min-width: 0;
      text-align: center;
    }

    .profile-detail-topbar .fortune-title h1 {
      justify-content: center;
      font-size: 24px;
      text-wrap: balance;
    }

    .profile-detail-topbar .fortune-title .sub {
      margin-top: 4px;
      color: rgba(24, 23, 21, 0.5);
      font-size: 11px;
      letter-spacing: 0.08em;
    }

    .profile-detail-refresh {
      display: grid;
      place-items: center;
      width: 38px;
      height: 38px;
      justify-self: end;
      padding: 0;
      border: 1px solid rgba(113, 93, 62, 0.18);
      border-radius: 50%;
      background: rgba(255, 252, 247, 0.56);
      color: rgba(113, 93, 62, 0.82);
      font: 500 20px/1 var(--sans);
      cursor: pointer;
      transition: transform 220ms var(--ease), border-color 220ms var(--ease), background 220ms var(--ease);
    }

    .profile-detail-refresh.is-loading {
      animation: profileDetailSpin 720ms linear infinite;
    }

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

    .profile-detail-hero {
      position: relative;
      display: grid;
      grid-template-columns: 66px minmax(0, 1fr);
      align-items: center;
      gap: 16px;
      min-height: 138px;
      margin: 4px 0 26px;
      padding: 22px 20px;
      overflow: hidden;
      border: 1px solid rgba(55, 103, 85, 0.2);
      border-radius: 18px 15px 20px 14px;
      background:
        radial-gradient(circle at 90% 18%, rgba(191, 161, 94, 0.18), transparent 35%),
        linear-gradient(135deg, rgba(236, 245, 238, 0.9), rgba(255, 252, 247, 0.84));
      box-shadow: 0 18px 42px rgba(54, 44, 32, 0.07);
      isolation: isolate;
    }

    .profile-detail-hero::after {
      content: "安";
      position: absolute;
      right: 0;
      bottom: -43px;
      z-index: -1;
      color: rgba(55, 103, 85, 0.045);
      font-size: 170px;
      font-weight: 800;
      line-height: 1;
      transform: none;
    }

    .profile-detail-hero-mark {
      display: grid;
      place-items: center;
      width: 64px;
      height: 64px;
      border: 1px solid rgba(55, 103, 85, 0.26);
      border-radius: 21px 18px 22px 17px;
      background: rgba(255, 252, 247, 0.68);
      color: var(--profile-detail-jade);
      box-shadow: inset 0 0 0 5px rgba(55, 103, 85, 0.045), 0 13px 28px rgba(55, 103, 85, 0.09);
    }

    .profile-detail-hero-mark svg {
      width: 38px;
      height: 38px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .profile-detail-hero > div {
      min-width: 0;
    }

    .profile-detail-hero small,
    .about-brand-stage > div > small {
      color: var(--profile-detail-gold);
      font-size: 10px;
      font-weight: 800;
      letter-spacing: 0.2em;
    }

    .profile-detail-hero h2 {
      margin: 6px 0 5px;
      color: #223b32;
      font-size: clamp(19px, 5.2vw, 24px);
      font-weight: 800;
      line-height: 1.28;
      letter-spacing: 0.05em;
      text-wrap: balance;
    }

    .profile-detail-hero p {
      max-width: 58ch;
      margin: 0;
      color: rgba(24, 23, 21, 0.58);
      font-size: 12px;
      line-height: 1.65;
      letter-spacing: 0.035em;
      text-wrap: pretty;
    }

    .profile-detail-layout,
    .profile-detail-column {
      display: grid;
      gap: 22px;
    }

    .profile-detail-group > header {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      align-items: end;
      gap: 10px;
      margin: 0 2px 10px;
    }

    .profile-detail-group > header small {
      padding-bottom: 3px;
      color: var(--profile-detail-gold);
      font-size: 10px;
      font-weight: 800;
      letter-spacing: 0.2em;
    }

    .profile-detail-group > header h2 {
      margin: 0;
      color: var(--ink);
      font-size: 18px;
      line-height: 1.2;
      letter-spacing: 0.1em;
    }

    .profile-detail-rows {
      overflow: hidden;
      border: 1px solid rgba(113, 93, 62, 0.14);
      border-radius: 14px 12px 16px 11px;
      background: var(--profile-detail-paper);
      box-shadow: 0 13px 30px rgba(54, 44, 32, 0.045);
    }

    .profile-detail-row {
      display: grid;
      grid-template-columns: 38px minmax(0, 1fr) auto;
      align-items: center;
      gap: 12px;
      width: 100%;
      min-height: 68px;
      padding: 11px 14px;
      border: 0;
      background: transparent;
      color: inherit;
      font: inherit;
      text-align: left;
      cursor: pointer;
      transition: background 220ms var(--ease), transform 220ms var(--ease);
    }

    .profile-detail-row + .profile-detail-row {
      border-top: 1px solid rgba(113, 93, 62, 0.11);
    }

    .profile-detail-row.is-static {
      cursor: default;
    }

    .profile-detail-row-icon {
      display: grid;
      place-items: center;
      width: 36px;
      height: 36px;
      border: 1px solid rgba(55, 103, 85, 0.2);
      border-radius: 12px 10px 13px 9px;
      background: rgba(239, 246, 239, 0.7);
      color: var(--profile-detail-jade);
      font-size: 13px;
      font-weight: 800;
      letter-spacing: 0;
    }

    .profile-detail-row > span:nth-child(2) {
      display: grid;
      gap: 5px;
      min-width: 0;
    }

    .profile-detail-row strong {
      color: rgba(24, 23, 21, 0.83);
      font-size: 14px;
      font-weight: 800;
      line-height: 1.2;
      letter-spacing: 0.06em;
    }

    .profile-detail-row small {
      overflow-wrap: anywhere;
      color: rgba(24, 23, 21, 0.5);
      font-family: var(--sans);
      font-size: 11px;
      line-height: 1.45;
      letter-spacing: 0.02em;
    }

    .profile-detail-row > em {
      justify-self: end;
      color: rgba(113, 93, 62, 0.78);
      font-size: 10px;
      font-style: normal;
      font-weight: 800;
      letter-spacing: 0.08em;
      white-space: nowrap;
    }

    .profile-detail-row > em.is-safe {
      color: var(--profile-detail-jade);
    }

    .profile-detail-row > i {
      justify-self: end;
      color: rgba(113, 93, 62, 0.5);
      font-family: Georgia, serif;
      font-size: 20px;
      font-style: normal;
      transition: transform 220ms var(--ease), color 220ms var(--ease);
    }

    .profile-detail-row:disabled {
      opacity: 0.52;
      cursor: wait;
    }

    .profile-detail-footnote {
      margin: 9px 4px 0;
      color: rgba(24, 23, 21, 0.48);
      font-size: 10px;
      line-height: 1.6;
      letter-spacing: 0.04em;
    }

    .privacy-commitments ul {
      display: grid;
      gap: 0;
      margin: 0;
      padding: 4px 0;
      list-style: none;
      border-top: 1px solid rgba(113, 93, 62, 0.12);
      border-bottom: 1px solid rgba(113, 93, 62, 0.12);
    }

    .privacy-commitments li {
      display: grid;
      grid-template-columns: 72px minmax(0, 1fr);
      gap: 12px;
      padding: 12px 4px;
      color: rgba(24, 23, 21, 0.59);
      font-size: 12px;
      line-height: 1.65;
      letter-spacing: 0.035em;
    }

    .privacy-commitments li + li {
      border-top: 1px dashed rgba(113, 93, 62, 0.13);
    }

    .privacy-commitments li b {
      color: var(--profile-detail-jade);
      font-size: 12px;
      letter-spacing: 0.1em;
    }

    .profile-detail-disclosures {
      display: grid;
      gap: 8px;
      margin-top: 26px;
      border-top: 1px solid rgba(113, 93, 62, 0.13);
    }

    .profile-detail-disclosures details {
      border-bottom: 1px solid rgba(113, 93, 62, 0.13);
    }

    .profile-detail-disclosures summary {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 24px;
      align-items: center;
      gap: 12px;
      min-height: 66px;
      cursor: pointer;
      list-style: none;
    }

    .profile-detail-disclosures summary::-webkit-details-marker {
      display: none;
    }

    .profile-detail-disclosures summary > span {
      display: grid;
      gap: 4px;
    }

    .profile-detail-disclosures summary b {
      color: rgba(24, 23, 21, 0.78);
      font-size: 14px;
      letter-spacing: 0.07em;
    }

    .profile-detail-disclosures summary small {
      color: rgba(24, 23, 21, 0.46);
      font-size: 10px;
      letter-spacing: 0.05em;
    }

    .profile-detail-disclosures summary i {
      color: rgba(113, 93, 62, 0.7);
      font: 400 21px/1 var(--sans);
      text-align: center;
      transition: transform 220ms var(--ease);
    }

    .profile-detail-disclosures details[open] summary i {
      transform: rotate(45deg);
    }

    .profile-detail-disclosures details > div {
      max-width: 66ch;
      padding: 0 30px 18px 0;
      color: rgba(24, 23, 21, 0.6);
      font-size: 12px;
      line-height: 1.82;
      letter-spacing: 0.035em;
    }

    .profile-detail-disclosures details p {
      margin: 0;
      text-wrap: pretty;
    }

    .profile-detail-disclosures details p + p {
      margin-top: 9px;
    }

    .about-brand-stage {
      position: relative;
      display: grid;
      grid-template-columns: 82px minmax(0, 1fr);
      align-items: center;
      gap: 20px;
      min-height: 180px;
      margin: 3px 0 28px;
      padding: 25px 22px;
      overflow: hidden;
      border-top: 1px solid rgba(113, 93, 62, 0.14);
      border-bottom: 1px solid rgba(113, 93, 62, 0.14);
      background:
        radial-gradient(circle at 90% 30%, rgba(167, 52, 39, 0.08), transparent 33%),
        radial-gradient(circle at 8% 90%, rgba(55, 103, 85, 0.08), transparent 32%);
    }

    .about-brand-stage::after {
      content: "XUANJI";
      position: absolute;
      right: 0;
      bottom: -8px;
      color: rgba(113, 93, 62, 0.045);
      font: 800 54px/1 Georgia, serif;
      letter-spacing: 0.04em;
      pointer-events: none;
    }

    .about-brand-seal {
      display: grid;
      place-items: center;
      width: 78px;
      height: 78px;
      border: 1px solid rgba(143, 50, 39, 0.52);
      border-radius: 24px 20px 25px 18px;
      background:
        radial-gradient(circle at 38% 28%, rgba(255, 255, 255, 0.22), transparent 42%),
        #a74738;
      color: #fff7e9;
      font-size: 39px;
      font-weight: 800;
      line-height: 1;
      box-shadow: inset 0 0 0 6px rgba(255, 247, 233, 0.085), 0 15px 30px rgba(118, 44, 35, 0.14);
      transform: rotate(-2deg);
    }

    .about-brand-stage > div {
      position: relative;
      z-index: 1;
      min-width: 0;
    }

    .about-brand-stage h2 {
      margin: 5px 0 7px;
      color: var(--ink);
      font-size: clamp(34px, 9vw, 48px);
      font-weight: 800;
      line-height: 1;
      letter-spacing: 0.16em;
    }

    .about-brand-stage p {
      max-width: 48ch;
      margin: 0;
      color: rgba(24, 23, 21, 0.58);
      font-size: 12px;
      line-height: 1.65;
      letter-spacing: 0.04em;
      text-wrap: pretty;
    }

    .about-version {
      display: inline-flex;
      margin-top: 10px;
      color: rgba(55, 103, 85, 0.82);
      font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
      font-size: 10px;
      font-variant-numeric: tabular-nums;
      letter-spacing: 0.03em;
    }

    .about-purpose ol {
      display: grid;
      gap: 0;
      margin: 0;
      padding: 0;
      list-style: none;
      border-top: 1px solid rgba(113, 93, 62, 0.13);
      border-bottom: 1px solid rgba(113, 93, 62, 0.13);
    }

    .about-purpose li {
      display: grid;
      grid-template-columns: 38px minmax(0, 1fr);
      align-items: center;
      gap: 12px;
      min-height: 68px;
      padding: 9px 3px;
    }

    .about-purpose li + li {
      border-top: 1px dashed rgba(113, 93, 62, 0.13);
    }

    .about-purpose li > i {
      display: grid;
      place-items: center;
      width: 34px;
      height: 34px;
      border: 1px solid rgba(166, 130, 66, 0.28);
      border-radius: 50%;
      color: var(--profile-detail-gold);
      font-size: 12px;
      font-style: normal;
      font-weight: 800;
    }

    .about-purpose li > span {
      display: grid;
      gap: 4px;
    }

    .about-purpose li b {
      color: rgba(24, 23, 21, 0.8);
      font-size: 14px;
      letter-spacing: 0.08em;
    }

    .about-purpose li small {
      color: rgba(24, 23, 21, 0.5);
      font-size: 11px;
      line-height: 1.5;
      letter-spacing: 0.035em;
    }

    .about-boundary {
      position: relative;
      padding: 18px 19px 20px;
      overflow: hidden;
      border-left: 3px solid rgba(167, 52, 39, 0.66);
      background: rgba(167, 52, 39, 0.045);
    }

    .about-boundary > small {
      color: var(--seal);
      font-size: 10px;
      font-weight: 800;
      letter-spacing: 0.2em;
    }

    .about-boundary h2 {
      margin: 7px 0 7px;
      color: rgba(80, 31, 27, 0.9);
      font-size: 18px;
      line-height: 1.3;
      letter-spacing: 0.07em;
      text-wrap: balance;
    }

    .about-boundary p {
      max-width: 62ch;
      margin: 0;
      color: rgba(55, 34, 31, 0.66);
      font-size: 12px;
      line-height: 1.75;
      letter-spacing: 0.035em;
      text-wrap: pretty;
    }

    .about-footer {
      display: grid;
      justify-items: center;
      gap: 5px;
      margin-top: 30px;
      padding: 24px 0 6px;
      border-top: 1px solid rgba(113, 93, 62, 0.12);
      color: rgba(24, 23, 21, 0.46);
      text-align: center;
    }

    .about-footer span {
      color: rgba(24, 23, 21, 0.68);
      font-size: 14px;
      font-weight: 800;
      letter-spacing: 0.14em;
    }

    .about-footer small {
      font-size: 10px;
      letter-spacing: 0.08em;
    }

    @media (hover: hover) and (pointer: fine) {
      .profile-detail-refresh:hover,
      .profile-detail-row:not(.is-static):hover {
        background-color: rgba(255, 255, 255, 0.48);
      }

      .profile-detail-refresh:hover {
        border-color: rgba(55, 103, 85, 0.34);
      }

      .profile-detail-row:not(.is-static):hover > i {
        color: var(--profile-detail-jade);
        transform: translateX(2px);
      }
    }

    .profile-detail-refresh:active,
    .profile-detail-row:not(.is-static):active {
      transform: scale(0.985);
    }

    .profile-detail-refresh:focus-visible,
    .profile-detail-row:focus-visible,
    .profile-detail-disclosures summary:focus-visible {
      outline: 2px solid rgba(55, 103, 85, 0.34);
      outline-offset: 3px;
    }

    @media (min-width: 760px) {
      .profile-detail-layout {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
        column-gap: clamp(26px, 4vw, 48px);
      }

      .profile-detail-hero,
      .about-brand-stage {
        padding-right: clamp(28px, 5vw, 58px);
        padding-left: clamp(28px, 5vw, 58px);
      }

      .profile-detail-disclosures {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 30px;
      }

      .profile-detail-disclosures.about-disclosures {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }
    }

    @media (max-width: 420px) {
      .profile-detail-screen {
        padding-right: 16px;
        padding-left: 16px;
      }

      .profile-detail-topbar .fortune-title h1 {
        font-size: 21px;
      }

      .profile-detail-hero {
        grid-template-columns: 52px minmax(0, 1fr);
        gap: 13px;
        min-height: 126px;
        padding: 17px 15px;
      }

      .profile-detail-hero-mark {
        width: 50px;
        height: 50px;
        border-radius: 17px 15px 18px 13px;
      }

      .profile-detail-hero-mark svg {
        width: 31px;
        height: 31px;
      }

      .profile-detail-row {
        grid-template-columns: 36px minmax(0, 1fr) auto;
        gap: 10px;
        padding-right: 12px;
        padding-left: 11px;
      }

      .profile-detail-row > em {
        max-width: 58px;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .about-brand-stage {
        grid-template-columns: 66px minmax(0, 1fr);
        gap: 15px;
        min-height: 162px;
        margin-right: -16px;
        margin-left: -16px;
        padding: 22px 16px;
      }

      .about-brand-seal {
        width: 64px;
        height: 64px;
        border-radius: 20px 17px 21px 15px;
        font-size: 32px;
      }

      .about-brand-stage h2 {
        font-size: 36px;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .profile-detail-refresh,
      .profile-detail-row,
      .profile-detail-row > i,
      .profile-detail-disclosures summary i {
        transition-duration: 1ms !important;
      }
    }

    /* 我的权益：复用“我的”统一页面壳，不再使用独立 iframe 页面。 */
    .member-benefits-screen {
      --native-member-jade: var(--profile-detail-jade, #315f50);
      --native-member-gold: var(--profile-detail-gold, #9b793e);
      --native-member-line: var(--profile-detail-line, rgba(87, 72, 52, 0.13));
    }

    .member-benefits-shell {
      gap: 0;
    }

    .native-member-panel {
      display: grid;
      gap: 28px;
      min-width: 0;
      animation: pageIn 260ms var(--ease) both;
    }

    .native-member-panel[hidden],
    .native-member-redeem-card[hidden],
    .native-member-redeem-success[hidden],
    .native-member-primary[hidden],
    .native-member-reward-preview[hidden],
    .native-member-form-error[hidden] {
      display: none;
    }

    .native-member-overview {
      display: grid;
      grid-template-columns: 58px minmax(0, 1fr) auto;
      align-items: center;
      gap: 16px;
      padding: 21px;
      border: 1px solid rgba(49, 95, 80, 0.18);
      border-radius: 18px;
      background:
        radial-gradient(circle at 100% 0%, rgba(189, 163, 105, 0.14), transparent 38%),
        rgba(240, 246, 239, 0.82);
      box-shadow: 0 16px 36px rgba(49, 67, 53, 0.055);
    }

    .native-member-mark {
      display: grid;
      place-items: center;
      width: 56px;
      height: 56px;
      border: 1px solid rgba(49, 95, 80, 0.2);
      border-radius: 17px;
      background: rgba(255, 255, 252, 0.68);
    }

    .native-member-mark img,
    .native-member-redeem-mark img {
      width: 44px;
      height: 44px;
      object-fit: contain;
      filter: drop-shadow(0 6px 8px rgba(44, 82, 65, 0.14));
    }

    .native-member-overview-copy {
      min-width: 0;
    }

    .native-member-overview-copy > small,
    .native-member-redeem-card > small,
    .native-member-redeem-success > small,
    .native-member-report-dialog > small {
      color: var(--native-member-gold);
      font-family: var(--sans);
      font-size: 9px;
      font-weight: 800;
      letter-spacing: 0.17em;
    }

    .native-member-overview-copy h2 {
      margin: 5px 0 4px;
      color: #213d33;
      font-size: clamp(18px, 2.7vw, 22px);
      line-height: 1.3;
      letter-spacing: 0.05em;
    }

    .native-member-overview-copy p {
      margin: 0;
      color: rgba(24, 23, 21, 0.52);
      font-family: var(--sans);
      font-size: 11px;
      line-height: 1.55;
    }

    .native-member-status {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      align-self: start;
      padding: 6px 9px;
      border: 1px solid rgba(155, 121, 62, 0.16);
      border-radius: 999px;
      background: rgba(255, 255, 252, 0.6);
      color: var(--native-member-gold);
      font-family: var(--sans);
      font-size: 10px;
      white-space: nowrap;
    }

    .native-member-status i {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #b18a48;
      box-shadow: 0 0 0 3px rgba(177, 138, 72, 0.11);
    }

    .native-member-status.is-active {
      border-color: rgba(49, 95, 80, 0.16);
      color: var(--native-member-jade);
    }

    .native-member-status.is-active i {
      background: #4f8a70;
      box-shadow: 0 0 0 3px rgba(79, 138, 112, 0.11);
    }

    .native-member-status.is-frozen {
      border-color: rgba(167, 52, 39, 0.16);
      color: var(--seal);
    }

    .native-member-status.is-frozen i {
      background: var(--seal);
      box-shadow: 0 0 0 3px rgba(167, 52, 39, 0.1);
    }

    .native-member-points {
      display: grid;
      grid-column: 1 / -1;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      margin-top: 3px;
      overflow: hidden;
      border: 1px solid rgba(49, 95, 80, 0.12);
      border-radius: 14px;
      background: rgba(255, 253, 248, 0.66);
    }

    .native-member-points article {
      display: grid;
      align-content: start;
      gap: 10px;
      min-width: 0;
      min-height: 176px;
      padding: 17px 18px 15px;
    }

    .native-member-points article + article {
      border-left: 1px solid rgba(49, 95, 80, 0.1);
    }

    .native-member-points article > span:first-child {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 10px;
    }

    .native-member-points article > span:first-child small {
      color: rgba(33, 61, 51, 0.84);
      font-size: 13px;
      font-weight: 800;
      letter-spacing: 0.06em;
    }

    .native-member-points article > span:first-child em {
      color: rgba(24, 23, 21, 0.4);
      font-family: var(--sans);
      font-size: 9px;
      font-style: normal;
      white-space: nowrap;
    }

    .native-member-points article > strong {
      display: flex;
      align-items: baseline;
      gap: 5px;
      color: var(--native-member-jade);
      font-size: 36px;
      font-weight: 500;
      line-height: 1;
      font-variant-numeric: tabular-nums;
    }

    .native-member-points article:nth-child(2) > strong {
      color: var(--native-member-gold);
    }

    .native-member-points article > strong b {
      font: inherit;
    }

    .native-member-points article > strong small {
      color: rgba(24, 23, 21, 0.45);
      font-size: 14px;
    }

    .native-member-progress {
      width: 100%;
      height: 4px;
      overflow: hidden;
      border-radius: 99px;
      background: rgba(49, 95, 80, 0.12);
    }

    .native-member-progress i {
      display: block;
      width: 0;
      height: 100%;
      border-radius: inherit;
      background: #4f806e;
      transition: width 300ms var(--ease);
    }

    .native-member-permanent-rule {
      display: inline-flex;
      align-items: center;
      width: max-content;
      min-height: 22px;
      padding: 0 9px;
      border-radius: 999px;
      background: rgba(155, 121, 62, 0.1);
      color: var(--native-member-gold);
      font-family: var(--sans);
      font-size: 9px;
    }

    .native-member-points article > p {
      margin: auto 0 0;
      color: rgba(24, 23, 21, 0.48);
      font-family: var(--sans);
      font-size: 10px;
      line-height: 1.55;
    }

    .native-member-primary {
      display: grid;
      grid-template-columns: 38px minmax(0, 1fr) auto 20px;
      align-items: center;
      gap: 11px;
      width: 100%;
      min-height: 66px;
      padding: 10px 15px;
      border: 1px solid rgba(49, 95, 80, 0.2);
      border-radius: 15px;
      background: rgba(239, 246, 239, 0.84);
      box-shadow: 0 12px 28px rgba(49, 67, 53, 0.045);
      color: inherit;
      text-align: left;
      cursor: pointer;
    }

    .native-member-primary > span:first-child {
      display: grid;
      place-items: center;
      width: 36px;
      height: 36px;
      border-radius: 12px;
      background: var(--native-member-jade);
      color: #fffdf8;
      font-size: 13px;
      font-weight: 800;
    }

    .native-member-primary > strong {
      color: rgba(24, 23, 21, 0.84);
      font-size: 15px;
      letter-spacing: 0.08em;
    }

    .native-member-primary > small {
      color: rgba(24, 23, 21, 0.46);
      font-family: var(--sans);
      font-size: 10px;
    }

    .native-member-primary > i {
      color: rgba(49, 95, 80, 0.58);
      font-size: 20px;
      font-style: normal;
    }

    .native-member-ledger-section .profile-settings-heading {
      grid-template-columns: 30px minmax(0, 1fr) auto;
    }

    .native-member-ledger-section .profile-settings-heading > button {
      align-self: center;
      padding: 6px 0 6px 10px;
      border: 0;
      background: transparent;
      color: var(--seal);
      font-family: var(--sans);
      font-size: 10px;
      cursor: pointer;
    }

    .native-member-ledger-section .profile-settings-heading > button i {
      font-family: Georgia, serif;
      font-size: 15px;
      font-style: normal;
    }

    .native-member-ledger {
      overflow: hidden;
      border: 1px solid var(--native-member-line);
      border-radius: 15px;
      background: rgba(255, 253, 248, 0.86);
      box-shadow: 0 12px 28px rgba(57, 43, 29, 0.035);
    }

    .native-member-ledger-row {
      display: grid;
      grid-template-columns: 36px minmax(0, 1fr) auto;
      align-items: center;
      gap: 11px;
      min-height: 66px;
      padding: 10px 14px;
    }

    .native-member-ledger-row + .native-member-ledger-row {
      border-top: 1px solid var(--native-member-line);
    }

    .native-member-ledger-icon {
      display: grid;
      place-items: center;
      width: 34px;
      height: 34px;
      border-radius: 12px;
      background: rgba(49, 95, 80, 0.11);
      color: var(--native-member-jade);
      font-size: 11px;
      font-weight: 800;
    }

    .native-member-ledger-row.is-gold .native-member-ledger-icon {
      background: rgba(155, 121, 62, 0.11);
      color: var(--native-member-gold);
    }

    .native-member-ledger-row.is-seal .native-member-ledger-icon {
      background: rgba(167, 52, 39, 0.1);
      color: var(--seal);
    }

    .native-member-ledger-row > span:nth-child(2),
    .native-member-ledger-row > span:last-child {
      display: grid;
      gap: 4px;
      min-width: 0;
    }

    .native-member-ledger-row > span:last-child {
      text-align: right;
    }

    .native-member-ledger-row strong {
      overflow: hidden;
      color: rgba(24, 23, 21, 0.82);
      font-size: 13px;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .native-member-ledger-row small {
      color: rgba(24, 23, 21, 0.42);
      font-family: var(--sans);
      font-size: 9px;
    }

    .native-member-ledger-row > span:last-child b {
      color: var(--native-member-jade);
      font-size: 16px;
      font-weight: 700;
    }

    .native-member-ledger-row.is-gold > span:last-child b {
      color: var(--native-member-gold);
    }

    .native-member-ledger-row.is-seal > span:last-child b {
      color: var(--seal);
    }

    .native-member-empty {
      margin: 0;
      padding: 30px 16px;
      color: rgba(24, 23, 21, 0.46);
      font-family: var(--sans);
      font-size: 11px;
      text-align: center;
    }

    .native-member-ledger-filters {
      display: flex;
      align-items: center;
      gap: 7px;
      overflow-x: auto;
      padding: 3px;
      border: 1px solid var(--native-member-line);
      border-radius: 14px;
      background: rgba(255, 253, 248, 0.76);
      scrollbar-width: none;
    }

    .native-member-ledger-filters::-webkit-scrollbar {
      display: none;
    }

    .native-member-ledger-filters button {
      flex: 1 0 auto;
      min-height: 38px;
      padding: 0 13px;
      border: 0;
      border-radius: 11px;
      background: transparent;
      color: rgba(24, 23, 21, 0.5);
      font-family: var(--sans);
      font-size: 11px;
      cursor: pointer;
    }

    .native-member-ledger-filters button.active {
      background: rgba(49, 95, 80, 0.11);
      color: var(--native-member-jade);
      font-weight: 800;
    }

    .native-member-ledger-summary {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      overflow: hidden;
      border: 1px solid rgba(49, 95, 80, 0.14);
      border-radius: 15px;
      background: rgba(240, 246, 239, 0.72);
    }

    .native-member-ledger-summary > span {
      display: grid;
      place-items: center;
      align-content: center;
      gap: 8px;
      min-height: 92px;
      padding: 14px;
    }

    .native-member-ledger-summary > span + span {
      border-left: 1px solid rgba(49, 95, 80, 0.11);
    }

    .native-member-ledger-summary small {
      color: rgba(24, 23, 21, 0.46);
      font-family: var(--sans);
      font-size: 10px;
    }

    .native-member-ledger-summary strong {
      color: var(--native-member-jade);
      font-size: 21px;
      font-weight: 700;
      font-variant-numeric: tabular-nums;
    }

    .native-member-ledger-summary strong b,
    .native-member-ledger-summary strong i {
      font: inherit;
      font-style: normal;
    }

    .native-member-redeem-card,
    .native-member-redeem-success {
      display: grid;
      justify-items: center;
      padding: 34px 26px 28px;
      border: 1px solid rgba(49, 95, 80, 0.17);
      border-radius: 18px;
      background:
        radial-gradient(circle at 50% 0%, rgba(189, 163, 105, 0.13), transparent 38%),
        rgba(255, 253, 248, 0.86);
      box-shadow: 0 16px 36px rgba(49, 67, 53, 0.05);
      text-align: center;
    }

    .native-member-redeem-mark {
      display: grid;
      place-items: center;
      width: 66px;
      height: 66px;
      margin-bottom: 14px;
      border: 1px solid rgba(49, 95, 80, 0.18);
      border-radius: 21px;
      background: rgba(240, 246, 239, 0.82);
    }

    .native-member-redeem-card h2,
    .native-member-redeem-success h2 {
      margin: 7px 0 6px;
      color: #213d33;
      font-size: 23px;
      letter-spacing: 0.09em;
    }

    .native-member-redeem-card > p,
    .native-member-redeem-success > p {
      margin: 0;
      color: rgba(24, 23, 21, 0.5);
      font-family: var(--sans);
      font-size: 11px;
      line-height: 1.65;
    }

    .native-member-redeem-form {
      display: grid;
      gap: 11px;
      width: min(100%, 520px);
      margin-top: 25px;
      text-align: left;
    }

    .native-member-redeem-form > label {
      color: rgba(24, 23, 21, 0.75);
      font-size: 12px;
      font-weight: 800;
      letter-spacing: 0.08em;
    }

    .native-member-redeem-form > input {
      width: 100%;
      height: 50px;
      padding: 0 14px;
      border: 1px solid rgba(87, 72, 52, 0.2);
      border-radius: 13px;
      outline: 0;
      background: rgba(255, 255, 252, 0.82);
      color: rgba(24, 23, 21, 0.82);
      font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
      font-size: 14px;
      letter-spacing: 0.08em;
    }

    .native-member-redeem-form > input:focus {
      border-color: rgba(49, 95, 80, 0.5);
      box-shadow: 0 0 0 3px rgba(49, 95, 80, 0.08);
    }

    .native-member-form-error {
      margin: -2px 2px 0;
      color: var(--seal);
      font-family: var(--sans);
      font-size: 10px;
      line-height: 1.55;
    }

    .native-member-reward-preview {
      padding: 15px;
      border: 1px solid rgba(49, 95, 80, 0.19);
      border-radius: 13px;
      background: rgba(239, 246, 239, 0.8);
    }

    .native-member-reward-preview header {
      display: flex;
      align-items: center;
      gap: 9px;
      color: var(--native-member-jade);
    }

    .native-member-reward-preview header > span {
      display: grid;
      place-items: center;
      width: 26px;
      height: 26px;
      border-radius: 50%;
      background: rgba(49, 95, 80, 0.11);
      font-family: var(--sans);
      font-size: 12px;
      font-weight: 800;
    }

    .native-member-reward-preview header > div {
      display: grid;
      gap: 3px;
    }

    .native-member-reward-preview header strong {
      font-size: 12px;
    }

    .native-member-reward-preview header small,
    .native-member-reward-preview > p {
      color: rgba(24, 23, 21, 0.47);
      font-family: var(--sans);
      font-size: 9px;
    }

    .native-member-reward-preview > div,
    .native-member-redeem-success > div {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      margin: 14px 0 10px;
      overflow: hidden;
      border-top: 1px solid rgba(49, 95, 80, 0.11);
      border-bottom: 1px solid rgba(49, 95, 80, 0.11);
    }

    .native-member-reward-preview > div > span,
    .native-member-redeem-success > div > span {
      display: grid;
      place-items: center;
      align-content: center;
      gap: 5px;
      min-height: 74px;
      padding: 10px;
    }

    .native-member-reward-preview > div > span + span,
    .native-member-redeem-success > div > span + span {
      border-left: 1px solid rgba(49, 95, 80, 0.11);
    }

    .native-member-reward-preview > div strong,
    .native-member-redeem-success > div strong {
      color: var(--native-member-jade);
      font-size: 21px;
    }

    .native-member-reward-preview > div small,
    .native-member-redeem-success > div small {
      color: rgba(24, 23, 21, 0.48);
      font-family: var(--sans);
      font-size: 9px;
    }

    .native-member-reward-preview > p {
      margin: 0;
      text-align: center;
    }

    .native-member-primary.is-submit {
      display: flex;
      justify-content: center;
      min-height: 48px;
      margin-top: 5px;
      border-color: var(--native-member-jade);
      border-radius: 13px;
      background: var(--native-member-jade);
      color: #fffdf8;
      font-size: 14px;
      font-weight: 800;
      letter-spacing: 0.13em;
      text-align: center;
    }

    .native-member-primary.is-submit:disabled {
      opacity: 0.62;
      cursor: wait;
    }

    .native-member-redeem-success > span:first-child {
      display: grid;
      place-items: center;
      width: 62px;
      height: 62px;
      margin-bottom: 15px;
      border: 1px solid rgba(49, 95, 80, 0.22);
      border-radius: 50%;
      background: rgba(239, 246, 239, 0.86);
      color: var(--native-member-jade);
      font-family: var(--sans);
      font-size: 25px;
    }

    .native-member-redeem-success > div {
      width: min(100%, 520px);
      margin: 25px 0 18px;
    }

    .native-member-redeem-success .native-member-primary {
      width: min(100%, 520px);
    }

    .native-member-rules {
      padding: 17px 19px;
      border-left: 3px solid rgba(155, 121, 62, 0.35);
      background: rgba(255, 253, 248, 0.54);
    }

    .native-member-rules strong {
      color: rgba(24, 23, 21, 0.77);
      font-size: 12px;
      letter-spacing: 0.08em;
    }

    .native-member-rules p {
      margin: 7px 0 0;
      color: rgba(24, 23, 21, 0.47);
      font-family: var(--sans);
      font-size: 10px;
      line-height: 1.65;
    }

    .native-member-report-dialog {
      background:
        radial-gradient(circle at 100% 0%, rgba(189, 163, 105, 0.15), transparent 42%),
        #fffdf8;
    }

    .native-member-report-dialog > small {
      display: block;
      margin-bottom: 8px;
    }

    @media (hover: hover) and (pointer: fine) {
      .native-member-primary:hover,
      .native-member-ledger-section .profile-settings-heading > button:hover,
      .native-member-ledger-filters button:hover {
        border-color: rgba(49, 95, 80, 0.3);
        background-color: rgba(49, 95, 80, 0.09);
      }

      .native-member-primary.is-submit:hover {
        background: #284f43;
      }
    }

    @media (max-width: 600px) {
      .native-member-panel {
        gap: 24px;
      }

      .native-member-overview {
        grid-template-columns: 50px minmax(0, 1fr);
        gap: 13px;
        margin-right: -2px;
        margin-left: -2px;
        padding: 17px 15px 15px;
      }

      .native-member-mark {
        width: 48px;
        height: 48px;
        border-radius: 15px;
      }

      .native-member-mark img {
        width: 38px;
        height: 38px;
      }

      .native-member-status {
        grid-column: 1 / -1;
        justify-self: start;
        margin-top: -3px;
      }

      .native-member-points {
        margin-right: -1px;
        margin-left: -1px;
      }

      .native-member-points article {
        min-height: 165px;
        padding: 15px 12px 13px;
      }

      .native-member-points article > span:first-child {
        display: grid;
        gap: 3px;
      }

      .native-member-points article > strong {
        font-size: 31px;
      }

      .native-member-primary {
        grid-template-columns: 38px minmax(0, 1fr) 20px;
      }

      .native-member-primary > small {
        display: none;
      }

      .native-member-ledger-section .profile-settings-heading {
        grid-template-columns: 27px minmax(0, 1fr) auto;
      }

      .native-member-ledger-filters {
        margin-right: -2px;
        margin-left: -2px;
      }

      .native-member-ledger-filters button {
        padding: 0 11px;
      }

      .native-member-redeem-card,
      .native-member-redeem-success {
        padding: 28px 17px 22px;
      }
    }

    /* 我的设置页 v8：完整内容与统一单栏信息架构 */
    .profile-detail-screen {
      --profile-detail-jade: #315f50;
      --profile-detail-gold: #9b793e;
      --profile-detail-line: rgba(87, 72, 52, 0.13);
      --profile-detail-surface: rgba(255, 253, 248, 0.88);
      padding-top: 18px;
      padding-bottom: calc(var(--screen-bottom-gutter) + 28px);
      background:
        radial-gradient(circle at 50% -5%, rgba(255, 255, 255, 0.84), transparent 31%),
        linear-gradient(180deg, #faf6ee 0%, #f4ede1 100%);
    }

    .profile-detail-topbar,
    .profile-detail-shell {
      width: min(100%, 780px);
      margin-right: auto;
      margin-left: auto;
    }

    .profile-detail-topbar {
      grid-template-columns: 42px minmax(0, 1fr) 42px;
      min-height: 54px;
      margin-bottom: 22px;
    }

    .profile-detail-topbar .fortune-title h1 {
      justify-content: center;
      font-size: clamp(22px, 3vw, 27px);
      letter-spacing: 0.12em;
    }

    .profile-detail-topbar .fortune-title .sub {
      margin-top: 3px;
      color: rgba(24, 23, 21, 0.46);
      font-family: var(--sans);
      font-size: 10px;
      letter-spacing: 0.07em;
    }

    .profile-detail-refresh {
      width: 38px;
      height: 38px;
      border-color: var(--profile-detail-line);
      border-radius: 13px;
      background: rgba(255, 253, 248, 0.72);
      box-shadow: 0 7px 18px rgba(57, 43, 29, 0.04);
      color: rgba(49, 95, 80, 0.78);
      font-size: 18px;
    }

    .profile-detail-shell {
      display: grid;
      gap: 30px;
    }

    .security-overview {
      display: grid;
      grid-template-columns: 54px minmax(0, 1fr) auto;
      align-items: center;
      gap: 16px;
      min-height: 112px;
      padding: 20px 21px;
      border: 1px solid rgba(49, 95, 80, 0.18);
      border-radius: 18px;
      background:
        radial-gradient(circle at 100% 0%, rgba(189, 163, 105, 0.13), transparent 38%),
        rgba(240, 246, 239, 0.82);
      box-shadow: 0 16px 36px rgba(49, 67, 53, 0.055);
    }

    .security-overview-mark {
      display: grid;
      place-items: center;
      width: 52px;
      height: 52px;
      border: 1px solid rgba(49, 95, 80, 0.2);
      border-radius: 16px;
      background: rgba(255, 255, 252, 0.66);
      color: var(--profile-detail-jade);
    }

    .security-overview-mark svg {
      width: 31px;
      height: 31px;
      fill: none;
      stroke: currentColor;
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-width: 1.8;
    }

    .security-overview-copy {
      min-width: 0;
    }

    .security-overview-copy > small,
    .about-identity-copy > small,
    .about-boundary small {
      color: var(--profile-detail-gold);
      font-family: var(--sans);
      font-size: 9px;
      font-weight: 800;
      letter-spacing: 0.16em;
    }

    .security-overview-copy h2 {
      margin: 5px 0 4px;
      color: #213d33;
      font-size: clamp(17px, 2.5vw, 21px);
      line-height: 1.3;
      letter-spacing: 0.04em;
      text-wrap: balance;
    }

    .security-overview-copy p {
      max-width: 52ch;
      margin: 0;
      color: rgba(24, 23, 21, 0.52);
      font-family: var(--sans);
      font-size: 11px;
      line-height: 1.6;
    }

    .security-overview-state {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      align-self: start;
      padding: 6px 9px;
      border: 1px solid rgba(49, 95, 80, 0.16);
      border-radius: 999px;
      background: rgba(255, 255, 252, 0.58);
      color: var(--profile-detail-gold);
      font-family: var(--sans);
      font-size: 10px;
      white-space: nowrap;
    }

    .security-overview-state > i {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #b18a48;
      box-shadow: 0 0 0 3px rgba(177, 138, 72, 0.11);
    }

    .security-overview-state:has(b.is-safe) {
      color: var(--profile-detail-jade);
    }

    .security-overview-state:has(b.is-safe) > i {
      background: #4f8a70;
      box-shadow: 0 0 0 3px rgba(79, 138, 112, 0.11);
    }

    .security-overview-facts {
      display: grid;
      grid-column: 1 / -1;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 0;
      margin: 2px 0 0;
      padding: 16px 0 0;
      border-top: 1px solid rgba(49, 95, 80, 0.12);
      list-style: none;
    }

    .security-overview-facts li {
      display: grid;
      gap: 4px;
      padding: 0 14px;
    }

    .security-overview-facts li:first-child {
      padding-left: 0;
    }

    .security-overview-facts li + li {
      border-left: 1px solid rgba(49, 95, 80, 0.1);
    }

    .security-overview-facts b {
      color: rgba(33, 61, 51, 0.84);
      font-size: 11px;
      letter-spacing: 0.06em;
    }

    .security-overview-facts span {
      color: rgba(24, 23, 21, 0.48);
      font-family: var(--sans);
      font-size: 9px;
      line-height: 1.55;
    }

    .profile-settings-section {
      display: grid;
      gap: 12px;
    }

    .profile-settings-heading {
      display: grid;
      grid-template-columns: 30px minmax(0, 1fr);
      align-items: start;
      gap: 10px;
      padding: 0 3px;
    }

    .profile-settings-heading > span {
      padding-top: 3px;
      color: rgba(155, 121, 62, 0.72);
      font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
      font-size: 10px;
      font-variant-numeric: tabular-nums;
      letter-spacing: 0.05em;
    }

    .profile-settings-heading h2 {
      margin: 0;
      color: rgba(24, 23, 21, 0.87);
      font-size: 18px;
      line-height: 1.25;
      letter-spacing: 0.08em;
    }

    .profile-settings-heading p {
      margin: 4px 0 0;
      color: rgba(24, 23, 21, 0.46);
      font-family: var(--sans);
      font-size: 10px;
      line-height: 1.55;
      letter-spacing: 0.02em;
    }

    .profile-detail-rows {
      overflow: hidden;
      border: 1px solid var(--profile-detail-line);
      border-radius: 17px;
      background: var(--profile-detail-surface);
      box-shadow: 0 12px 32px rgba(57, 43, 29, 0.035);
    }

    .profile-detail-row {
      grid-template-columns: 36px minmax(0, 1fr) auto;
      gap: 13px;
      min-height: 68px;
      padding: 11px 16px;
      transition: background-color 190ms var(--ease), transform 190ms var(--ease);
    }

    .profile-detail-row + .profile-detail-row,
    .profile-detail-row + .profile-settings-note {
      border-top: 1px solid rgba(87, 72, 52, 0.1);
    }

    .profile-detail-row-icon {
      width: 34px;
      height: 34px;
      border-color: rgba(49, 95, 80, 0.13);
      border-radius: 11px;
      background: rgba(234, 242, 235, 0.72);
      color: var(--profile-detail-jade);
      font-size: 12px;
    }

    .profile-detail-row > span:nth-child(2) {
      gap: 4px;
    }

    .profile-detail-row strong {
      font-size: 13px;
      font-weight: 800;
      letter-spacing: 0.045em;
    }

    .profile-detail-row small {
      color: rgba(24, 23, 21, 0.47);
      font-size: 10px;
      line-height: 1.5;
    }

    .profile-detail-row > em {
      color: rgba(83, 67, 45, 0.66);
      font-family: var(--sans);
      font-size: 9px;
      letter-spacing: 0.05em;
    }

    .profile-detail-row > em.is-safe {
      color: var(--profile-detail-jade);
    }

    .profile-detail-row > em[data-security-email-state]:not(.is-safe) {
      color: var(--profile-detail-gold);
    }

    .profile-detail-row > i {
      color: rgba(83, 67, 45, 0.38);
      font-size: 19px;
    }

    .profile-settings-note {
      display: flex;
      align-items: flex-start;
      gap: 8px;
      margin: 0;
      padding: 11px 16px 12px;
      color: rgba(24, 23, 21, 0.46);
      font-family: var(--sans);
      font-size: 9px;
      line-height: 1.55;
    }

    .profile-settings-note > span {
      display: grid;
      place-items: center;
      flex: 0 0 auto;
      width: 15px;
      height: 15px;
      margin-top: 1px;
      border: 1px solid rgba(49, 95, 80, 0.2);
      border-radius: 50%;
      color: var(--profile-detail-jade);
      font: 700 9px/1 Georgia, serif;
    }

    .device-session-panel {
      overflow: hidden;
      border: 1px solid rgba(49, 95, 80, 0.16);
      border-radius: 17px;
      background:
        linear-gradient(135deg, rgba(239, 246, 240, 0.7), rgba(255, 253, 248, 0.84) 48%),
        var(--profile-detail-surface);
      box-shadow: 0 14px 34px rgba(49, 67, 53, 0.045);
    }

    .device-session-heading {
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 18px;
      min-height: 69px;
      padding: 14px 16px 13px;
      border-bottom: 1px solid rgba(49, 95, 80, 0.11);
    }

    .device-session-heading > div {
      display: grid;
      gap: 3px;
    }

    .device-session-heading small {
      color: rgba(155, 121, 62, 0.74);
      font: 800 8px/1.2 var(--sans);
      letter-spacing: 0.16em;
    }

    .device-session-heading h3 {
      margin: 0;
      color: rgba(24, 23, 21, 0.88);
      font-size: 15px;
      letter-spacing: 0.07em;
    }

    .device-session-heading > span {
      color: rgba(49, 95, 80, 0.72);
      font: 700 9px/1.4 var(--sans);
      text-align: right;
    }

    .device-session-list {
      display: grid;
    }

    .device-session-loading,
    .device-session-empty {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      min-height: 76px;
      padding: 16px;
      color: rgba(24, 23, 21, 0.46);
      font: 10px/1.5 var(--sans);
    }

    .device-session-loading > i {
      width: 12px;
      height: 12px;
      border: 1px solid rgba(49, 95, 80, 0.2);
      border-top-color: var(--profile-detail-jade);
      border-radius: 50%;
      animation: spin 800ms linear infinite;
    }

    .device-session-row {
      display: grid;
      grid-template-columns: 40px minmax(0, 1fr) auto;
      align-items: center;
      gap: 13px;
      min-height: 82px;
      padding: 13px 16px;
      background: rgba(255, 253, 248, 0.46);
    }

    .device-session-row + .device-session-row {
      border-top: 1px solid rgba(87, 72, 52, 0.09);
    }

    .device-session-row.is-current {
      background: rgba(235, 244, 237, 0.72);
    }

    .device-session-icon {
      display: grid;
      place-items: center;
      width: 38px;
      height: 38px;
      border: 1px solid rgba(49, 95, 80, 0.15);
      border-radius: 12px;
      background: rgba(255, 255, 252, 0.72);
      color: var(--profile-detail-jade);
    }

    .device-session-icon svg {
      width: 21px;
      height: 21px;
      fill: none;
      stroke: currentColor;
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-width: 1.65;
    }

    .device-session-copy {
      display: grid;
      min-width: 0;
      gap: 5px;
    }

    .device-session-copy > div {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 7px;
    }

    .device-session-copy strong {
      overflow: hidden;
      color: rgba(24, 23, 21, 0.86);
      font-size: 12px;
      letter-spacing: 0.035em;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .device-session-current {
      padding: 3px 6px;
      border: 1px solid rgba(49, 95, 80, 0.16);
      border-radius: 999px;
      background: rgba(255, 255, 252, 0.64);
      color: var(--profile-detail-jade);
      font: 800 8px/1 var(--sans);
      letter-spacing: 0.05em;
    }

    .device-session-copy p {
      margin: 0;
      overflow: hidden;
      color: rgba(24, 23, 21, 0.47);
      font: 9px/1.55 var(--sans);
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .device-session-actions {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 6px;
    }

    .device-session-actions:empty {
      display: none;
    }

    .device-session-action,
    .device-session-cancel,
    .device-session-bulk,
    .device-session-bulk-cancel {
      min-height: 32px;
      border: 1px solid rgba(49, 95, 80, 0.18);
      border-radius: 10px;
      background: rgba(255, 255, 252, 0.72);
      color: rgba(49, 95, 80, 0.86);
      font: 800 9px/1 var(--sans);
      transition: border-color 160ms var(--ease), background-color 160ms var(--ease), color 160ms var(--ease), transform 160ms var(--ease);
    }

    .device-session-action,
    .device-session-cancel {
      padding: 0 10px;
    }

    .device-session-action.is-confirm {
      border-color: rgba(157, 70, 57, 0.23);
      background: rgba(167, 71, 56, 0.07);
      color: #93483c;
    }

    .device-session-cancel,
    .device-session-bulk-cancel {
      color: rgba(24, 23, 21, 0.5);
    }

    .device-session-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      padding: 12px 16px;
      border-top: 1px solid rgba(49, 95, 80, 0.11);
      background: rgba(255, 250, 240, 0.38);
    }

    .device-session-footer > p {
      max-width: 56ch;
      margin: 0;
      color: rgba(24, 23, 21, 0.43);
      font: 8.5px/1.55 var(--sans);
    }

    .device-session-bulk-actions {
      display: flex;
      align-items: stretch;
      flex: 0 0 auto;
      gap: 6px;
    }

    .device-session-bulk {
      display: grid;
      justify-items: start;
      gap: 3px;
      min-width: 164px;
      padding: 8px 11px;
      text-align: left;
    }

    .device-session-bulk strong {
      font-size: 9px;
      letter-spacing: 0.03em;
    }

    .device-session-bulk small {
      color: rgba(24, 23, 21, 0.42);
      font-size: 8px;
      font-weight: 500;
    }

    .device-session-bulk.is-confirming {
      border-color: rgba(157, 70, 57, 0.23);
      background: rgba(167, 71, 56, 0.07);
      color: #93483c;
    }

    .device-session-bulk-cancel {
      padding: 0 10px;
    }

    .device-session-action:disabled,
    .device-session-bulk:disabled {
      cursor: default;
      opacity: 0.42;
    }

    .device-session-action:not(:disabled):active,
    .device-session-cancel:active,
    .device-session-bulk:not(:disabled):active,
    .device-session-bulk-cancel:active {
      transform: scale(0.98);
    }

    .device-session-action:focus-visible,
    .device-session-cancel:focus-visible,
    .device-session-bulk:focus-visible,
    .device-session-bulk-cancel:focus-visible {
      outline: 2px solid rgba(49, 95, 80, 0.28);
      outline-offset: 2px;
    }

    .security-advice {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      align-items: center;
      gap: 16px;
      padding: 12px 16px;
      border: 1px dashed rgba(155, 121, 62, 0.22);
      border-radius: 14px;
      background: rgba(255, 250, 240, 0.48);
    }

    .security-advice strong {
      color: rgba(92, 69, 35, 0.8);
      font-size: 10px;
      letter-spacing: 0.05em;
      white-space: nowrap;
    }

    .security-advice ul {
      display: flex;
      flex-wrap: wrap;
      gap: 5px 19px;
      margin: 0;
      padding: 0;
      color: rgba(24, 23, 21, 0.48);
      font-family: var(--sans);
      font-size: 9px;
      line-height: 1.5;
      list-style: none;
    }

    .security-advice li::before {
      content: "·";
      margin-right: 5px;
      color: var(--profile-detail-gold);
      font-weight: 800;
    }

    .privacy-data-ledger {
      overflow: hidden;
      border: 1px solid var(--profile-detail-line);
      border-radius: 17px;
      background: var(--profile-detail-surface);
      box-shadow: 0 12px 32px rgba(57, 43, 29, 0.035);
    }

    .privacy-data-ledger article {
      display: grid;
      grid-template-columns: 34px minmax(0, 1fr) auto;
      align-items: center;
      gap: 13px;
      min-height: 76px;
      padding: 13px 16px;
    }

    .privacy-data-ledger article + article {
      border-top: 1px solid rgba(87, 72, 52, 0.1);
    }

    .privacy-data-ledger-mark {
      display: grid;
      place-items: center;
      width: 34px;
      height: 34px;
      border: 1px solid rgba(155, 121, 62, 0.16);
      border-radius: 11px;
      background: rgba(250, 243, 228, 0.7);
      color: var(--profile-detail-gold);
      font-size: 12px;
      font-weight: 800;
    }

    .privacy-data-ledger h3 {
      margin: 0 0 4px;
      color: rgba(24, 23, 21, 0.84);
      font-size: 13px;
      letter-spacing: 0.045em;
    }

    .privacy-data-ledger p {
      max-width: 60ch;
      margin: 0;
      color: rgba(24, 23, 21, 0.49);
      font-family: var(--sans);
      font-size: 10px;
      line-height: 1.6;
    }

    .privacy-data-ledger article > small {
      padding: 5px 8px;
      border-radius: 8px;
      background: rgba(49, 95, 80, 0.055);
      color: rgba(49, 95, 80, 0.74);
      font-family: var(--sans);
      font-size: 9px;
      white-space: nowrap;
    }

    .profile-detail-row.is-sensitive .profile-detail-row-icon {
      border-color: rgba(157, 70, 57, 0.14);
      background: rgba(167, 71, 56, 0.055);
      color: #9d4639;
    }

    .profile-detail-row.is-sensitive strong {
      color: rgba(111, 45, 37, 0.86);
    }

    .privacy-principles {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      margin: 0;
      padding: 0;
      overflow: hidden;
      border: 1px solid var(--profile-detail-line);
      border-radius: 17px;
      background: rgba(255, 253, 248, 0.62);
      list-style: none;
    }

    .privacy-principles li {
      display: grid;
      align-content: start;
      gap: 6px;
      min-height: 86px;
      padding: 16px;
    }

    .privacy-principles li + li {
      border-left: 1px solid rgba(87, 72, 52, 0.1);
    }

    .privacy-principles li:nth-child(n + 3) {
      border-top: 1px solid rgba(87, 72, 52, 0.1);
    }

    .privacy-principles li:nth-child(odd) {
      border-left: 0;
    }

    .privacy-principles b {
      color: var(--profile-detail-jade);
      font-size: 12px;
      letter-spacing: 0.08em;
    }

    .privacy-principles small {
      color: rgba(24, 23, 21, 0.49);
      font-family: var(--sans);
      font-size: 9px;
      line-height: 1.6;
    }

    .profile-detail-disclosures {
      display: block;
      margin: 0;
      overflow: hidden;
      border: 1px solid var(--profile-detail-line);
      border-radius: 17px;
      background: var(--profile-detail-surface);
    }

    .privacy-principles + .profile-detail-disclosures {
      margin-top: 0;
    }

    .profile-detail-disclosures details {
      border: 0;
    }

    .profile-detail-disclosures details + details {
      border-top: 1px solid rgba(87, 72, 52, 0.1);
    }

    .profile-detail-disclosures summary {
      min-height: 66px;
      padding: 11px 16px;
    }

    .profile-detail-disclosures summary > span {
      gap: 4px;
    }

    .profile-detail-disclosures summary b {
      font-size: 13px;
      letter-spacing: 0.045em;
    }

    .profile-detail-disclosures summary small {
      color: rgba(24, 23, 21, 0.46);
      font-family: var(--sans);
      font-size: 10px;
      letter-spacing: 0.02em;
    }

    .profile-detail-disclosures summary i {
      color: rgba(83, 67, 45, 0.44);
      font-size: 18px;
    }

    .profile-detail-disclosures details > div {
      max-width: none;
      padding: 0 46px 18px 16px;
      color: rgba(24, 23, 21, 0.56);
      font-family: var(--sans);
      font-size: 10px;
      line-height: 1.75;
      letter-spacing: 0.015em;
    }

    .privacy-policy-meta {
      margin: 0;
      padding: 0 3px;
      color: rgba(24, 23, 21, 0.4);
      font-family: var(--sans);
      font-size: 9px;
      line-height: 1.55;
      text-align: right;
    }

    .about-identity {
      position: relative;
      display: grid;
      grid-template-columns: 64px minmax(0, 1fr) auto;
      align-items: center;
      gap: 17px;
      min-height: 132px;
      padding: 22px;
      overflow: hidden;
      border: 1px solid var(--profile-detail-line);
      border-radius: 19px;
      background:
        radial-gradient(circle at 100% 0%, rgba(167, 71, 56, 0.08), transparent 35%),
        rgba(255, 253, 248, 0.82);
      box-shadow: 0 16px 38px rgba(57, 43, 29, 0.045);
    }

    .about-identity::after {
      content: "XUANJI";
      position: absolute;
      right: 15px;
      bottom: -5px;
      color: rgba(87, 72, 52, 0.035);
      font: 800 40px/1 Georgia, serif;
      letter-spacing: 0.04em;
      pointer-events: none;
    }

    .about-brand-seal {
      display: grid;
      place-items: center;
      width: 62px;
      height: 62px;
      border: 1px solid rgba(136, 52, 41, 0.46);
      border-radius: 18px;
      background: #a74738;
      box-shadow: inset 0 0 0 5px rgba(255, 247, 233, 0.07), 0 12px 24px rgba(118, 44, 35, 0.11);
      color: #fff8ec;
      font-size: 31px;
      font-weight: 800;
      line-height: 1;
      transform: rotate(-1.5deg);
    }

    .about-identity-copy {
      position: relative;
      z-index: 1;
      min-width: 0;
    }

    .about-identity-copy h2 {
      margin: 4px 0 5px;
      color: rgba(24, 23, 21, 0.9);
      font-size: 25px;
      line-height: 1;
      letter-spacing: 0.13em;
    }

    .about-identity-copy p {
      max-width: 46ch;
      margin: 0;
      color: rgba(24, 23, 21, 0.52);
      font-family: var(--sans);
      font-size: 10px;
      line-height: 1.65;
    }

    .about-version {
      position: relative;
      z-index: 1;
      align-self: start;
      margin: 0;
      padding: 6px 9px;
      border: 1px solid rgba(49, 95, 80, 0.13);
      border-radius: 999px;
      background: rgba(240, 246, 239, 0.7);
      color: rgba(49, 95, 80, 0.84);
      font-size: 9px;
      white-space: nowrap;
    }

    .about-capabilities {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      overflow: hidden;
      border: 1px solid var(--profile-detail-line);
      border-radius: 17px;
      background: var(--profile-detail-surface);
    }

    .about-capabilities article {
      display: grid;
      align-content: start;
      gap: 6px;
      min-height: 128px;
      padding: 18px 20px;
    }

    .about-capabilities article:nth-child(even) {
      border-left: 1px solid rgba(87, 72, 52, 0.1);
    }

    .about-capabilities article:nth-child(n + 3) {
      border-top: 1px solid rgba(87, 72, 52, 0.1);
    }

    .about-capabilities b {
      color: var(--profile-detail-jade);
      font-size: 14px;
      letter-spacing: 0.08em;
    }

    .about-capabilities p {
      max-width: 38ch;
      margin: 0;
      color: rgba(24, 23, 21, 0.53);
      font-family: var(--sans);
      font-size: 10px;
      line-height: 1.65;
    }

    .about-capabilities small {
      align-self: end;
      margin-top: 3px;
      color: rgba(155, 121, 62, 0.75);
      font-family: var(--sans);
      font-size: 9px;
      letter-spacing: 0.03em;
    }

    .about-method-flow {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      margin: 0;
      padding: 0;
      border-block: 1px solid var(--profile-detail-line);
      list-style: none;
    }

    .about-method-flow li {
      position: relative;
      display: grid;
      grid-template-columns: 29px minmax(0, 1fr);
      gap: 10px;
      min-height: 114px;
      padding: 17px 15px;
    }

    .about-method-flow li + li {
      border-left: 1px solid rgba(87, 72, 52, 0.1);
    }

    .about-method-flow li > span {
      display: grid;
      place-items: center;
      width: 27px;
      height: 27px;
      border: 1px solid rgba(49, 95, 80, 0.18);
      border-radius: 9px;
      color: var(--profile-detail-jade);
      font: 700 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
    }

    .about-method-flow b {
      color: rgba(24, 23, 21, 0.82);
      font-size: 12px;
      letter-spacing: 0.06em;
    }

    .about-method-flow p {
      margin: 5px 0 0;
      color: rgba(24, 23, 21, 0.49);
      font-family: var(--sans);
      font-size: 9px;
      line-height: 1.65;
    }

    .about-content-principles {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 9px;
    }

    .about-content-principles > span {
      display: grid;
      gap: 3px;
      padding: 11px 13px;
      border-radius: 12px;
      background: rgba(49, 95, 80, 0.055);
    }

    .about-content-principles b {
      color: rgba(49, 95, 80, 0.86);
      font-size: 10px;
      letter-spacing: 0.06em;
    }

    .about-content-principles small {
      color: rgba(24, 23, 21, 0.44);
      font-family: var(--sans);
      font-size: 9px;
      line-height: 1.5;
    }

    .about-boundary {
      display: grid;
      grid-template-columns: 42px minmax(0, 1fr);
      align-items: start;
      gap: 14px;
      padding: 17px 19px;
      border: 1px solid rgba(167, 71, 56, 0.14);
      border-left: 1px solid rgba(167, 71, 56, 0.14);
      border-radius: 16px;
      background: rgba(167, 71, 56, 0.045);
    }

    .about-boundary-mark {
      display: grid;
      place-items: center;
      width: 40px;
      height: 40px;
      border: 1px solid rgba(167, 71, 56, 0.19);
      border-radius: 13px;
      background: rgba(255, 253, 248, 0.58);
      color: #9d4639;
      font-size: 15px;
      font-weight: 800;
    }

    .about-boundary h2 {
      margin: 4px 0 5px;
      color: rgba(91, 38, 31, 0.88);
      font-size: 16px;
      line-height: 1.35;
      letter-spacing: 0.06em;
    }

    .about-boundary p {
      max-width: 66ch;
      margin: 0;
      color: rgba(73, 45, 41, 0.62);
      font-family: var(--sans);
      font-size: 10px;
      line-height: 1.7;
      letter-spacing: 0.01em;
    }

    .about-boundary ul {
      display: flex;
      flex-wrap: wrap;
      gap: 5px 16px;
      margin: 9px 0 0;
      padding: 0;
      color: rgba(73, 45, 41, 0.58);
      font-family: var(--sans);
      font-size: 9px;
      line-height: 1.5;
      list-style: none;
    }

    .about-boundary li::before {
      content: "—";
      margin-right: 5px;
      color: rgba(157, 70, 57, 0.7);
    }

    .about-footer {
      gap: 4px;
      margin-top: -6px;
      padding: 18px 0 0;
      border-top: 1px solid var(--profile-detail-line);
    }

    .about-footer span {
      font-size: 12px;
      letter-spacing: 0.12em;
    }

    .about-footer small {
      font-family: var(--sans);
      font-size: 9px;
      letter-spacing: 0.05em;
    }

    .about-footer em {
      color: rgba(24, 23, 21, 0.34);
      font-family: var(--sans);
      font-size: 8px;
      font-style: normal;
      letter-spacing: 0.04em;
    }

    @media (hover: hover) and (pointer: fine) {
      .profile-detail-refresh:hover,
      .profile-detail-row:not(.is-static):hover {
        background-color: rgba(247, 250, 245, 0.9);
      }

      .profile-detail-row:not(.is-static):hover > i {
        color: var(--profile-detail-jade);
        transform: translateX(2px);
      }

      .profile-detail-disclosures summary:hover {
        background: rgba(247, 250, 245, 0.56);
      }
    }

    .profile-detail-refresh:active,
    .profile-detail-row:not(.is-static):active,
    .profile-detail-disclosures summary:active {
      transform: scale(0.99);
    }

    @media (max-width: 560px) {
      .profile-detail-screen {
        padding-top: max(14px, env(safe-area-inset-top));
        padding-right: 18px;
        padding-left: 18px;
      }

      .profile-detail-topbar {
        margin-bottom: 18px;
      }

      .profile-detail-topbar .fortune-title h1 {
        font-size: 21px;
      }

      .profile-detail-shell {
        gap: 26px;
      }

      .security-overview {
        grid-template-columns: 46px minmax(0, 1fr);
        gap: 13px;
        min-height: 0;
        padding: 17px 15px;
        border-radius: 16px;
      }

      .security-overview-mark {
        width: 44px;
        height: 44px;
        border-radius: 14px;
      }

      .security-overview-mark svg {
        width: 27px;
        height: 27px;
      }

      .security-overview-copy h2 {
        font-size: 16px;
      }

      .security-overview-state {
        grid-column: 2;
        justify-self: start;
        align-self: auto;
        margin-top: -2px;
        padding: 4px 8px;
        font-size: 9px;
      }

      .security-overview-facts {
        grid-column: 1 / -1;
        grid-template-columns: 1fr;
        gap: 9px;
        padding-top: 13px;
      }

      .security-overview-facts li,
      .security-overview-facts li:first-child {
        grid-template-columns: 58px minmax(0, 1fr);
        gap: 7px;
        padding: 0;
      }

      .security-overview-facts li + li {
        border-left: 0;
      }

      .profile-settings-heading {
        grid-template-columns: 25px minmax(0, 1fr);
        gap: 7px;
      }

      .profile-settings-heading h2 {
        font-size: 17px;
      }

      .profile-detail-rows,
      .profile-detail-disclosures,
      .privacy-principles {
        border-radius: 15px;
      }

      .profile-detail-row {
        grid-template-columns: 34px minmax(0, 1fr) auto;
        gap: 11px;
        min-height: 66px;
        padding: 10px 13px;
      }

      .profile-detail-row-icon {
        width: 32px;
        height: 32px;
        border-radius: 10px;
      }

      .profile-detail-row > em {
        max-width: 62px;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .device-session-panel {
        border-radius: 15px;
      }

      .device-session-heading {
        align-items: center;
        min-height: 62px;
        padding: 12px 13px;
      }

      .device-session-row {
        grid-template-columns: 36px minmax(0, 1fr);
        gap: 10px;
        min-height: 0;
        padding: 12px 13px;
      }

      .device-session-icon {
        width: 34px;
        height: 34px;
        border-radius: 11px;
      }

      .device-session-actions {
        grid-column: 2;
        justify-content: flex-start;
        margin-top: 1px;
      }

      .device-session-action,
      .device-session-cancel {
        min-height: 30px;
      }

      .device-session-footer {
        display: grid;
        gap: 10px;
        padding: 11px 13px 13px;
      }

      .device-session-bulk-actions,
      .device-session-bulk {
        width: 100%;
      }

      .device-session-bulk {
        min-width: 0;
      }

      .device-session-bulk-cancel {
        flex: 0 0 auto;
      }

      .security-advice {
        grid-template-columns: 1fr;
        gap: 7px;
        padding: 12px 14px;
      }

      .security-advice ul {
        display: grid;
        gap: 3px;
      }

      .privacy-data-ledger article {
        grid-template-columns: 32px minmax(0, 1fr);
        gap: 11px;
        padding: 12px 13px;
      }

      .privacy-data-ledger-mark {
        width: 32px;
        height: 32px;
        border-radius: 10px;
      }

      .privacy-data-ledger article > small {
        grid-column: 2;
        justify-self: start;
        margin-top: -2px;
      }

      .privacy-principles {
        grid-template-columns: 1fr;
      }

      .privacy-principles li {
        min-height: 0;
        padding: 13px 15px;
      }

      .privacy-principles li + li {
        border-top: 1px solid rgba(87, 72, 52, 0.1);
        border-left: 0;
      }

      .privacy-policy-meta {
        text-align: left;
      }

      .profile-detail-disclosures summary {
        padding-right: 13px;
        padding-left: 14px;
      }

      .profile-detail-disclosures details > div {
        padding-right: 36px;
        padding-left: 14px;
      }

      .about-identity {
        grid-template-columns: 54px minmax(0, 1fr);
        gap: 14px;
        min-height: 0;
        padding: 18px 16px;
        border-radius: 17px;
      }

      .about-identity::after {
        right: 6px;
        font-size: 34px;
      }

      .about-brand-seal {
        width: 52px;
        height: 52px;
        border-radius: 16px;
        font-size: 26px;
      }

      .about-identity-copy h2 {
        font-size: 22px;
      }

      .about-version {
        grid-column: 2;
        justify-self: start;
        margin-top: -3px;
        padding: 4px 7px;
      }

      .about-capabilities {
        grid-template-columns: 1fr;
      }

      .about-capabilities article {
        min-height: 0;
        padding: 15px 16px;
      }

      .about-capabilities article:nth-child(even) {
        border-left: 0;
      }

      .about-capabilities article + article {
        border-top: 1px solid rgba(87, 72, 52, 0.1);
      }

      .about-method-flow {
        grid-template-columns: 1fr;
      }

      .about-method-flow li {
        min-height: 0;
        padding: 13px 3px;
      }

      .about-method-flow li + li {
        border-top: 1px solid rgba(87, 72, 52, 0.1);
        border-left: 0;
      }

      .about-content-principles {
        grid-template-columns: 1fr;
        gap: 6px;
      }

      .about-content-principles > span {
        grid-template-columns: 54px minmax(0, 1fr);
        align-items: baseline;
      }

      .about-boundary {
        grid-template-columns: 36px minmax(0, 1fr);
        gap: 11px;
        padding: 15px;
      }

      .about-boundary-mark {
        width: 34px;
        height: 34px;
        border-radius: 11px;
        font-size: 13px;
      }

      .about-boundary h2 {
        font-size: 15px;
      }
    }

    /* Legal screens override the shared profile shell at the end of the cascade. */
    .legal-document-screen {
      padding-top: 18px;
      padding-bottom: calc(var(--screen-bottom-gutter) + 40px);
      background:
        radial-gradient(circle at 50% -2%, rgba(255, 255, 255, 0.92), transparent 30%),
        linear-gradient(180deg, #faf6ee 0%, #f3ecdf 100%);
    }

    .legal-document-screen .legal-document-topbar,
    .legal-document-screen .legal-document-shell {
      width: min(100%, 980px);
      margin-right: auto;
      margin-left: auto;
    }

    .legal-document-screen .legal-document-topbar {
      margin-bottom: 24px;
    }

    @media (max-width: 760px) {
      .legal-document-screen {
        padding-top: max(14px, env(safe-area-inset-top));
        padding-right: 18px;
        padding-left: 18px;
      }

      .legal-document-screen .legal-document-topbar {
        margin-bottom: 18px;
      }
    }

    /* 站内消息：报告完成提醒与报告回跳 */
    .profile-list button[data-route="profile-notifications"] small {
      display: inline-flex;
      align-items: center;
      gap: 7px;
    }

    .profile-list button[data-route="profile-notifications"] small > b {
      display: inline-grid;
      place-items: center;
      min-width: 20px;
      height: 20px;
      padding: 0 5px;
      border-radius: 999px;
      background: #a74738;
      color: #fff9ed;
      font-family: var(--sans);
      font-size: 10px;
      font-weight: 800;
      line-height: 1;
      letter-spacing: 0;
      box-shadow: 0 5px 12px rgba(139, 55, 43, 0.18);
    }

    .profile-list button[data-route="profile-notifications"] small > b[hidden] {
      display: none;
    }

    .notification-center-shell {
      gap: 22px;
    }

    .notification-overview {
      position: relative;
      display: grid;
      grid-template-columns: 58px minmax(0, 1fr) auto;
      align-items: center;
      gap: 17px;
      min-height: 134px;
      padding: 24px 25px 23px;
      overflow: hidden;
      border: 1px solid rgba(49, 95, 80, 0.16);
      border-radius: 10px 25px 18px 22px;
      background:
        radial-gradient(circle at 100% 0%, rgba(184, 148, 78, 0.13), transparent 38%),
        linear-gradient(135deg, rgba(242, 247, 241, 0.96), rgba(255, 252, 247, 0.92));
      box-shadow: 0 17px 35px rgba(49, 67, 53, 0.045);
      isolation: isolate;
    }

    .notification-overview::before {
      content: "";
      position: absolute;
      top: -26px;
      right: 22%;
      width: 122px;
      height: 72px;
      border: 1px solid rgba(155, 121, 62, 0.09);
      border-radius: 0 0 58px 58px;
      transform: rotate(12deg);
      pointer-events: none;
    }

    .notification-overview::after {
      content: "阅";
      position: absolute;
      right: 59px;
      bottom: -61px;
      z-index: -1;
      color: rgba(49, 95, 80, 0.045);
      font-size: 168px;
      font-weight: 900;
      line-height: 1;
    }

    .notification-overview-mark {
      display: grid;
      place-items: center;
      width: 56px;
      height: 56px;
      border: 1px solid rgba(49, 95, 80, 0.22);
      border-radius: 17px 14px 18px 13px;
      background: rgba(255, 255, 252, 0.7);
      color: var(--profile-detail-jade);
      box-shadow: inset 0 0 0 5px rgba(49, 95, 80, 0.04);
    }

    .notification-overview-mark svg {
      width: 34px;
      height: 34px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.7;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .notification-overview-copy {
      min-width: 0;
    }

    .notification-overview-copy small {
      color: var(--profile-detail-gold);
      font-family: var(--sans);
      font-size: 10px;
      font-weight: 800;
      letter-spacing: 0.12em;
    }

    .notification-overview-copy h2 {
      margin: 7px 0 6px;
      color: #213d33;
      font-size: clamp(19px, 2.7vw, 24px);
      line-height: 1.28;
      letter-spacing: 0.05em;
    }

    .notification-overview-copy p {
      max-width: 56ch;
      margin: 0;
      color: rgba(24, 23, 21, 0.52);
      font-family: var(--sans);
      font-size: 11px;
      line-height: 1.68;
    }

    .notification-overview-count {
      display: grid;
      justify-items: center;
      align-content: center;
      min-width: 70px;
      min-height: 70px;
      padding: 10px;
      border-left: 1px solid rgba(49, 95, 80, 0.13);
      color: var(--profile-detail-jade);
    }

    .notification-overview-count strong {
      font: 600 32px/1 Georgia, var(--serif);
      font-variant-numeric: tabular-nums;
    }

    .notification-overview-count span {
      margin-top: 6px;
      color: rgba(24, 23, 21, 0.48);
      font-family: var(--sans);
      font-size: 10px;
      letter-spacing: 0.08em;
    }

    .notification-timeline-heading {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 18px;
      padding-bottom: 13px;
      border-bottom: 1px solid rgba(87, 72, 52, 0.13);
    }

    .notification-timeline-heading > button {
      min-height: 32px;
      padding: 0 12px;
      border: 1px solid rgba(49, 95, 80, 0.18);
      border-radius: 999px;
      background: rgba(255, 253, 248, 0.62);
      color: var(--profile-detail-jade);
      font-family: var(--sans);
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.05em;
      cursor: pointer;
    }

    .notification-timeline-heading > button:disabled {
      cursor: default;
      opacity: 0.42;
    }

    .notification-timeline {
      overflow: hidden;
      border: 1px solid rgba(87, 72, 52, 0.1);
      border-radius: 8px 18px 12px 15px;
      background: rgba(255, 253, 248, 0.64);
      box-shadow: 0 12px 28px rgba(69, 57, 43, 0.026);
    }

    .notification-day-group > h3 {
      margin: 0;
      padding: 13px 18px 9px;
      border-bottom: 1px solid rgba(87, 72, 52, 0.08);
      color: rgba(155, 121, 62, 0.76);
      font-family: var(--sans);
      font-size: 10px;
      font-weight: 800;
      letter-spacing: 0.12em;
    }

    .notification-day-group + .notification-day-group {
      border-top: 8px solid rgba(244, 237, 225, 0.72);
    }

    .notification-item + .notification-item {
      border-top: 1px solid rgba(87, 72, 52, 0.1);
    }

    .notification-item > button {
      display: grid;
      grid-template-columns: 46px minmax(0, 1fr) auto;
      align-items: center;
      gap: 15px;
      width: 100%;
      min-height: 112px;
      padding: 17px 18px;
      border: 0;
      background: transparent;
      color: inherit;
      font: inherit;
      text-align: left;
      cursor: pointer;
      transition: background-color 180ms var(--ease);
    }

    .notification-item.is-unread > button {
      background:
        linear-gradient(90deg, rgba(49, 95, 80, 0.055), transparent 42%),
        rgba(255, 255, 252, 0.38);
    }

    .notification-item > button:disabled {
      cursor: wait;
      opacity: 0.64;
    }

    .notification-item-mark {
      display: grid;
      place-items: center;
      width: 44px;
      height: 44px;
      border: 1px solid rgba(155, 121, 62, 0.24);
      border-radius: 50%;
      background: rgba(251, 246, 234, 0.82);
      color: var(--profile-detail-gold);
      font-size: 18px;
      font-weight: 800;
      box-shadow: inset 0 0 0 4px rgba(155, 121, 62, 0.035);
    }

    .notification-item.is-unread .notification-item-mark {
      border-color: rgba(49, 95, 80, 0.28);
      background: rgba(237, 246, 239, 0.9);
      color: var(--profile-detail-jade);
    }

    .notification-item-copy {
      display: grid;
      gap: 5px;
      min-width: 0;
    }

    .notification-item-meta {
      display: flex;
      align-items: center;
      gap: 9px;
      color: rgba(24, 23, 21, 0.4);
      font-family: var(--sans);
      font-size: 9px;
      letter-spacing: 0.04em;
    }

    .notification-item-meta b {
      color: rgba(24, 23, 21, 0.44);
      font-weight: 700;
    }

    .notification-item.is-unread .notification-item-meta b {
      color: var(--profile-detail-jade);
    }

    .notification-item-copy > strong {
      overflow-wrap: anywhere;
      color: rgba(24, 23, 21, 0.86);
      font-size: 16px;
      line-height: 1.32;
      letter-spacing: 0.055em;
    }

    .notification-item-copy > p {
      max-width: 60ch;
      margin: 0;
      color: rgba(24, 23, 21, 0.52);
      font-family: var(--sans);
      font-size: 11px;
      line-height: 1.6;
    }

    .notification-item-action {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      color: var(--profile-detail-jade);
      font-family: var(--sans);
      font-size: 10px;
      font-weight: 800;
      letter-spacing: 0.05em;
      white-space: nowrap;
    }

    .notification-item-action i {
      font: 400 18px/1 Georgia, serif;
    }

    .notification-empty-state {
      display: grid;
      justify-items: center;
      gap: 7px;
      min-height: 184px;
      padding: 32px 22px 35px;
      text-align: center;
    }

    .notification-empty-state > span,
    .notification-empty-state > i {
      display: grid;
      place-items: center;
      width: 48px;
      height: 48px;
      border: 1px solid rgba(155, 121, 62, 0.2);
      border-radius: 50%;
      background: rgba(251, 246, 234, 0.72);
      color: var(--profile-detail-gold);
      font-style: normal;
      font-size: 18px;
    }

    .notification-empty-state.is-loading > i {
      border-color: rgba(49, 95, 80, 0.18);
      border-top-color: var(--profile-detail-jade);
      animation: profileDetailSpin 780ms linear infinite;
    }

    .notification-empty-state strong {
      color: rgba(24, 23, 21, 0.78);
      font-size: 16px;
      letter-spacing: 0.06em;
    }

    .notification-empty-state p {
      max-width: 42ch;
      margin: 0;
      color: rgba(24, 23, 21, 0.48);
      font-family: var(--sans);
      font-size: 11px;
      line-height: 1.62;
    }

    .notification-empty-state > button {
      min-height: 32px;
      padding: 0 13px;
      border: 1px solid rgba(49, 95, 80, 0.2);
      border-radius: 999px;
      background: rgba(255, 253, 248, 0.78);
      color: var(--profile-detail-jade);
      font-family: var(--sans);
      font-size: 10px;
      cursor: pointer;
    }

    @media (hover: hover) {
      .notification-item > button:hover {
        background-color: rgba(49, 95, 80, 0.045);
      }
    }

    @media (max-width: 640px) {
      .notification-center-screen {
        padding-right: 17px;
        padding-left: 17px;
      }

      .notification-center-shell {
        gap: 23px;
      }

      .notification-overview {
        grid-template-columns: 48px minmax(0, 1fr);
        gap: 13px;
        padding: 18px 16px;
      }

      .notification-overview-mark {
        width: 46px;
        height: 46px;
        border-radius: 14px 12px 15px 11px;
      }

      .notification-overview-mark svg {
        width: 29px;
        height: 29px;
      }

      .notification-overview-copy h2 {
        font-size: 18px;
      }

      .notification-overview-copy p {
        font-size: 10.5px;
      }

      .notification-overview-count {
        grid-column: 1 / -1;
        grid-template-columns: auto auto;
        justify-content: start;
        gap: 7px;
        min-width: 0;
        min-height: 0;
        padding: 13px 0 0;
        border-top: 1px solid rgba(49, 95, 80, 0.12);
        border-left: 0;
      }

      .notification-overview-count strong {
        font-size: 24px;
      }

      .notification-overview-count span {
        margin: 2px 0 0;
      }

      .notification-timeline-heading > button {
        padding: 0 10px;
      }

      .notification-day-group > h3 {
        padding-right: 14px;
        padding-left: 14px;
      }

      .notification-item > button {
        grid-template-columns: 40px minmax(0, 1fr);
        gap: 12px;
        min-height: 0;
        padding: 16px 14px;
      }

      .notification-item-mark {
        align-self: start;
        width: 38px;
        height: 38px;
        font-size: 16px;
      }

      .notification-item-copy > strong {
        font-size: 15px;
      }

      .notification-item-action {
        grid-column: 2;
        justify-self: start;
        margin-top: -2px;
      }

    }

/* Report preferences desktop proportion and modal alignment · 2026-07-18 */
@media (min-width: 760px) {
  .profile-preferences-screen {
    padding-right: clamp(28px, 4vw, 56px);
    padding-left: clamp(28px, 4vw, 56px);
  }

  .profile-preferences-screen > .profile-detail-topbar,
  .profile-preferences-screen .report-preference-shell {
    width: min(100%, 780px);
    max-width: 780px;
    margin-right: auto;
    margin-left: auto;
  }

  .report-preference-modal,
  .report-style-modal {
    display: grid;
    place-items: center;
    padding: 24px;
  }

  .report-preference-modal[hidden],
  .report-style-modal[hidden] {
    display: none !important;
  }

  .report-preference-modal .report-style-sheet,
  .report-style-modal .report-style-sheet,
  .report-style-modal .report-style-report-sheet {
    position: relative;
    z-index: 1;
    inset: auto;
    width: min(420px, calc(100vw - 48px));
    max-height: calc(100dvh - 48px);
    margin: 0;
    padding: 22px;
    overflow: auto;
    border: 1px solid rgba(89, 76, 58, 0.16);
    border-radius: 22px;
    background: #fbf8f1;
    box-shadow: 0 24px 70px rgba(38, 32, 24, 0.24);
  }

  .report-preference-modal .report-style-sheet::before,
  .report-style-modal .report-style-sheet::before,
  .report-style-modal .report-style-report-sheet::before {
    display: none;
  }

  .report-preference-modal .report-style-sheet > header {
    align-items: center;
  }

  .report-preference-modal .report-style-sheet:focus,
  .report-style-modal .report-style-sheet:focus {
    outline: none;
  }

  .report-preference-modal .report-style-sheet > header > button {
    flex: 0 0 auto;
  }

  .report-preference-modal .report-style-choice-list {
    gap: 6px;
  }

  .report-preference-modal .report-style-choice-list > button {
    min-height: 54px;
  }
}

/* 一室档案独立于家宅档案：只保留三张实拍与局部取证，不承载九宫或飞星。 */
.fengshui-room-archive-detail-screen {
  padding-bottom: 132px;
  background:
    linear-gradient(180deg, rgba(255, 253, 249, 0.97), rgba(246, 240, 230, 0.94));
}

.fengshui-room-archive-hero,
.fengshui-room-archive-photos,
.fengshui-room-archive-boundary,
.fengshui-room-archive-evidence-grid article {
  border: 1px solid rgba(173, 138, 77, 0.18);
  border-radius: 12px;
  background:
    linear-gradient(135deg, rgba(255, 253, 249, 0.92), rgba(247, 239, 225, 0.52)),
    rgba(255, 253, 249, 0.8);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.66),
    0 10px 24px rgba(54, 44, 32, 0.045);
}

.fengshui-room-archive-hero {
  display: grid;
  gap: 8px;
  margin-top: 16px;
  padding: 18px;
}

.fengshui-room-archive-hero small,
.fengshui-room-archive-section-head small,
.fengshui-room-archive-boundary small {
  color: rgba(167, 52, 39, 0.7);
  font-size: 10.5px;
  font-weight: 850;
  letter-spacing: 0.13em;
}

.fengshui-room-archive-hero h2 {
  margin: 0;
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(24px, 4vw, 32px);
  line-height: 1.2;
  letter-spacing: 0.07em;
}

.fengshui-room-archive-hero p,
.fengshui-room-archive-boundary p {
  margin: 0;
  color: rgba(24, 23, 21, 0.62);
  font-family: var(--serif);
  font-size: 14px;
  line-height: 1.8;
  letter-spacing: 0.04em;
}

.fengshui-room-archive-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 2px;
}

.fengshui-room-archive-tags em {
  padding: 5px 9px;
  border: 1px solid rgba(173, 138, 77, 0.16);
  border-radius: 999px;
  color: rgba(128, 91, 36, 0.92);
  background: rgba(255, 253, 249, 0.72);
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: 0.04em;
}

.fengshui-room-archive-photos {
  margin-top: 14px;
  padding: 14px;
}

.fengshui-room-archive-section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
}

.fengshui-room-archive-section-head h2 {
  margin: 4px 0 0;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: 0.04em;
}

.fengshui-room-archive-section-head > span {
  flex: 0 0 auto;
  padding: 6px 9px;
  border: 1px solid rgba(78, 136, 101, 0.18);
  border-radius: 999px;
  color: rgba(54, 119, 83, 0.96);
  background: rgba(242, 249, 243, 0.82);
  font-size: 10.5px;
  font-weight: 850;
  line-height: 1.1;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.fengshui-room-archive-photo-note {
  margin: 10px 0 14px;
  color: rgba(24, 23, 21, 0.54);
  font-size: 12px;
  line-height: 1.7;
  letter-spacing: 0.03em;
}

.fengshui-room-archive-photo-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.fengshui-room-archive-photo {
  overflow: hidden;
  border: 1px solid rgba(173, 138, 77, 0.16);
  border-radius: 10px;
  background: rgba(255, 253, 249, 0.72);
}

.fengshui-room-archive-photo-media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background:
    linear-gradient(135deg, rgba(247, 239, 226, 0.8), rgba(235, 226, 210, 0.56));
}

.fengshui-room-archive-photo-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fengshui-room-archive-photo-media > span {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  color: rgba(24, 23, 21, 0.42);
  font-family: var(--serif);
  font-size: 13px;
  letter-spacing: 0.05em;
}

.fengshui-room-archive-photo-media em {
  position: absolute;
  top: 9px;
  left: 9px;
  padding: 5px 8px;
  border: 1px solid rgba(255, 255, 255, 0.52);
  border-radius: 999px;
  color: rgba(255, 253, 249, 0.96);
  background: rgba(42, 37, 29, 0.48);
  font-size: 10.5px;
  font-style: normal;
  font-weight: 850;
  line-height: 1;
  letter-spacing: 0.04em;
}

.fengshui-room-archive-photo > div:last-child {
  display: grid;
  gap: 3px;
  padding: 10px 11px 11px;
}

.fengshui-room-archive-photo b {
  color: var(--ink);
  font-family: var(--serif);
  font-size: 14px;
  line-height: 1.35;
  letter-spacing: 0.04em;
}

.fengshui-room-archive-photo span {
  color: rgba(54, 119, 83, 0.92);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.04em;
}

.fengshui-room-archive-photo.is-missing span {
  color: rgba(167, 52, 39, 0.78);
}

.fengshui-room-archive-evidence .fengshui-section-title {
  margin-top: 22px;
}

.fengshui-room-archive-evidence-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.fengshui-room-archive-evidence-grid article {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  column-gap: 9px;
  align-items: start;
  min-height: 100px;
  padding: 12px;
}

.fengshui-room-archive-evidence-grid article > i {
  display: grid;
  width: 27px;
  height: 27px;
  place-items: center;
  border: 1px solid rgba(173, 138, 77, 0.24);
  border-radius: 50%;
  color: rgba(173, 138, 77, 0.98);
  background: rgba(255, 253, 249, 0.88);
  font-family: var(--serif);
  font-size: 13px;
  font-style: normal;
  font-weight: 850;
}

.fengshui-room-archive-evidence-grid article > div {
  min-width: 0;
}

.fengshui-room-archive-evidence-grid b,
.fengshui-room-archive-evidence-grid span {
  display: block;
}

.fengshui-room-archive-evidence-grid b {
  color: var(--ink);
  font-family: var(--serif);
  font-size: 14px;
  line-height: 1.32;
  letter-spacing: 0.04em;
}

.fengshui-room-archive-evidence-grid span {
  margin-top: 4px;
  color: rgba(24, 23, 21, 0.58);
  font-size: 11.5px;
  line-height: 1.6;
  letter-spacing: 0.025em;
}

.fengshui-room-archive-evidence-grid em {
  grid-column: 2;
  margin-top: 6px;
  color: rgba(54, 119, 83, 0.9);
  font-size: 10.5px;
  font-style: normal;
  font-weight: 850;
  letter-spacing: 0.04em;
}

.fengshui-room-archive-evidence-grid article.warn em {
  color: rgba(167, 52, 39, 0.88);
}

.fengshui-room-archive-boundary {
  margin-top: 14px;
  padding: 14px 15px;
}

.fengshui-room-archive-boundary p {
  margin-top: 6px;
}

.fengshui-room-archive-empty {
  grid-column: 1 / -1;
  margin: 0;
  padding: 22px 14px;
  border: 1px dashed rgba(173, 138, 77, 0.26);
  border-radius: 10px;
  color: rgba(24, 23, 21, 0.52);
  font-family: var(--serif);
  font-size: 13px;
  line-height: 1.7;
  text-align: center;
}

@media (min-width: 760px) {
  .fengshui-room-archive-hero {
    padding: 22px 24px;
  }

  .fengshui-room-archive-photos {
    padding: 18px;
  }

  .fengshui-room-archive-photo-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 430px) {
  .fengshui-room-archive-evidence-grid {
    grid-template-columns: 1fr;
  }
}

/* Relationship mobile-layout repair: keep compact fields on one line and
   prevent the generic form-control rules from turning consent into a full row. */
.relationship-invite-form .relationship-invite-consent > label {
  display: flex !important;
  align-items: flex-start;
  gap: 10px !important;
  color: rgba(24, 23, 21, 0.82);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.55;
}

.relationship-invite-form .relationship-invite-consent > label > input[type="checkbox"] {
  box-sizing: border-box;
  flex: 0 0 20px;
  width: 20px !important;
  min-width: 20px;
  height: 20px !important;
  min-height: 20px !important;
  margin: 2px 0 0;
  padding: 0 !important;
  border-radius: 4px !important;
  accent-color: var(--seal);
}

@media (max-width: 560px) {
  .relationship-match-screen.is-report-step .relationship-expanded-post dl {
    gap: 4px;
  }

  .relationship-match-screen.is-report-step .relationship-expanded-post dl div {
    grid-template-columns: 22px minmax(0, 1fr);
    gap: 2px;
    font-size: 10px;
  }

  .relationship-match-screen.is-report-step .relationship-expanded-post dl dt,
  .relationship-match-screen.is-report-step .relationship-expanded-post dl dd {
    min-width: 0;
    white-space: nowrap;
  }

  .relationship-match-screen.is-report-step .relationship-expanded-post dl dd {
    font-size: 10px;
    letter-spacing: -0.08em;
  }
}

/* Relationship v2: explicit real-world context is intentionally separate from chart evidence. */
.relationship-context-card,
.relationship-context-summary {
  margin: 14px 0;
  border: 1px solid rgba(158, 119, 67, .24);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(255, 252, 245, .88), rgba(245, 237, 221, .72));
  box-shadow: 0 9px 22px rgba(85, 59, 26, .055);
}

.relationship-context-card {
  padding: 16px;
}

.relationship-context-card header small,
.relationship-context-summary header small {
  display: block;
  color: var(--seal, #a33a2c);
  font-size: 11px;
  letter-spacing: .13em;
}

.relationship-context-card h3,
.relationship-context-summary strong {
  display: block;
  margin: 4px 0 6px;
  color: #4b3421;
  font-size: 17px;
}

.relationship-context-card header p,
.relationship-context-summary p {
  margin: 0;
  color: rgba(67, 51, 35, .68);
  font-size: 12px;
  line-height: 1.65;
}

.relationship-context-fields {
  display: grid;
  gap: 10px;
  margin-top: 13px;
}

.relationship-context-fields label {
  display: grid;
  gap: 6px;
}

.relationship-context-fields label > span {
  color: rgba(69, 49, 30, .78);
  font-size: 12px;
  font-weight: 700;
}

.relationship-context-fields select,
.relationship-context-fields input {
  width: 100%;
  min-height: 39px;
  box-sizing: border-box;
  border: 1px solid rgba(129, 99, 65, .2);
  border-radius: 10px;
  outline: none;
  background: rgba(255, 255, 255, .74);
  color: #3d2c1d;
  font: inherit;
  font-size: 13px;
  padding: 0 11px;
}

.relationship-context-fields select:focus,
.relationship-context-fields input:focus {
  border-color: rgba(163, 58, 44, .55);
  box-shadow: 0 0 0 3px rgba(163, 58, 44, .09);
}

.relationship-context-card footer {
  display: grid;
  gap: 5px;
  margin-top: 13px;
  padding-top: 11px;
  border-top: 1px dashed rgba(129, 99, 65, .2);
}

.relationship-context-card footer span {
  color: #99703e;
  font-size: 11px;
  font-weight: 700;
}

.relationship-context-card footer em,
.relationship-context-summary footer {
  color: rgba(103, 69, 38, .72);
  font-size: 11px;
  font-style: normal;
  line-height: 1.55;
}

.relationship-context-summary {
  margin: 14px 16px 2px;
  padding: 13px 14px;
}

.relationship-context-summary > div {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 10px;
}

.relationship-context-summary > div span {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  max-width: 100%;
  padding: 6px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .62);
  color: #5d442b;
  font-size: 11px;
}

.relationship-context-summary > div b {
  color: rgba(116, 78, 39, .66);
  font-weight: 600;
}

.relationship-context-summary footer {
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px dashed rgba(129, 99, 65, .18);
}

@media (min-width: 620px) {
  .relationship-context-fields {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}