:root {
  color-scheme: dark;
  --bg: #030914;
  --panel: rgba(7, 16, 29, .92);
  --panel-2: rgba(10, 23, 40, .9);
  --line: rgba(224, 190, 105, .28);
  --gold: #e8c46d;
  --gold-light: #fff0b0;
  --text: #f7f2e7;
  --muted: #aeb8c8;
  --error: #ff9b8e;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg); }
body {
  min-height: 100vh;
  margin: 0;
  color: var(--text);
  background:
    radial-gradient(circle at 78% 10%, rgba(22, 86, 146, .25), transparent 32rem),
    radial-gradient(circle at 12% 72%, rgba(87, 48, 130, .13), transparent 27rem),
    linear-gradient(145deg, #020711, #071424 58%, #030812);
  font-family: "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .42;
  background-image:
    radial-gradient(circle, rgba(255,240,176,.8) 0 1px, transparent 1.5px),
    radial-gradient(circle, rgba(93,162,228,.72) 0 1px, transparent 1.6px);
  background-position: 12px 18px, 74px 91px;
  background-size: 118px 136px, 173px 191px;
  mask-image: linear-gradient(to bottom, #000, transparent 92%);
}
button, input, select { font: inherit; }
button { cursor: pointer; }

.app-shell { width: min(100%, 820px); min-height: 100vh; margin: 0 auto; padding: max(28px, env(safe-area-inset-top)) 20px max(48px, env(safe-area-inset-bottom)); }
.view { display: none; }
.view.active { display: block; animation: enter .28s ease-out; }
@keyframes enter { from { opacity: 0; transform: translateY(8px); } }

.page-head, .section-head { text-align: center; margin: 24px auto 30px; }
h1 { margin: 0; color: var(--gold-light); font-family: SimSun, serif; font-size: clamp(32px, 8.5vw, 48px); line-height: 1.25; }
.page-head > p:last-child, .section-head > p:last-child { margin: 14px auto 0; max-width: 620px; color: var(--muted); font-size: 17px; line-height: 1.75; }
.chooser-eyebrow { margin: 0 0 9px; color: var(--gold); font-size: 13px; font-weight: 700; letter-spacing: .22em; }
.eyebrow { margin: 0 0 8px; color: var(--gold); font-size: 15px; letter-spacing: .14em; }
.section-head { position: relative; padding-top: 40px; }
.section-head.compact { padding-top: 18px; }
.back-btn { position: absolute; top: 0; left: 0; min-height: 48px; padding: 0 8px; color: var(--gold-light); border: 0; background: transparent; font-size: 18px; }

.product-list { display: grid; gap: 14px; }
.product-card {
  position: relative;
  min-height: 164px;
  overflow: hidden;
  padding: 21px 22px;
  color: var(--text);
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: linear-gradient(145deg, rgba(12, 27, 47, .96), rgba(4, 11, 22, .97));
  box-shadow: 0 18px 45px rgba(0, 0, 0, .28);
}
.product-card::after { content: ""; position: absolute; right: -55px; top: -65px; width: 180px; height: 180px; border-radius: 50%; background: radial-gradient(circle, rgba(60,137,209,.16), transparent 68%); pointer-events: none; }
.product-card.featured { border-color: rgba(239, 199, 94, .58); background: linear-gradient(145deg, rgba(18,38,61,.98), rgba(5,13,25,.98)); box-shadow: 0 0 30px rgba(232, 196, 109, .1), 0 18px 45px rgba(0, 0, 0, .3); }
.product-card.featured::after { background: radial-gradient(circle, rgba(232,196,109,.17), transparent 68%); }
.product-card .tag { display: inline-block; margin-bottom: 8px; padding: 4px 9px; color: var(--gold-light); border: 1px solid var(--line); border-radius: 999px; font-size: 12px; }
.product-card strong { display: block; margin-bottom: 7px; color: var(--gold-light); font-size: 24px; }
.product-card > span:not(.tag) { display: block; max-width: 92%; color: var(--muted); font-size: 15.5px; line-height: 1.58; }
.product-card i { display: block; margin-top: 9px; color: var(--gold); font-size: 15px; font-style: normal; font-weight: 700; }

.form-card {
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--panel);
  box-shadow: 0 22px 55px rgba(0, 0, 0, .28);
}
.form-card { display: grid; gap: 20px; }
label { display: grid; gap: 9px; color: #e8e3d7; font-size: 18px; font-weight: 650; }
.date-fields { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
input, select {
  width: 100%;
  min-height: 58px;
  padding: 0 17px;
  color: #fff;
  border: 1px solid rgba(226, 200, 130, .3);
  border-radius: 14px;
  outline: none;
  background: rgba(0, 5, 13, .85);
  font-size: 18px;
}
input:focus, select:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(232, 196, 109, .1); }
fieldset { display: grid; gap: 18px; margin: 8px 0; padding: 22px; border: 1px solid rgba(226, 200, 130, .22); border-radius: 18px; }
legend { padding: 0 10px; color: var(--gold-light); font-family: SimSun, serif; font-size: 25px; font-weight: 800; }
.field-note { margin: -9px 2px 0; color: var(--muted); font-size: 14px; line-height: 1.55; }
.consent { display: grid; grid-template-columns: 28px 1fr; align-items: start; font-size: 15px; font-weight: 400; line-height: 1.55; }
.consent input { width: 23px; min-height: 23px; height: 23px; margin: 1px 0 0; accent-color: #d9ad48; }
.error { min-height: 22px; margin: -4px 0; color: var(--error); font-size: 15px; }

.primary-btn, .secondary-btn {
  width: 100%;
  min-height: 58px;
  padding: 12px 22px;
  border-radius: 999px;
  font-size: 18px;
  font-weight: 800;
}
.primary-btn { color: #241b08; border: 0; background: linear-gradient(100deg, #fff3ad, #e7ae31 58%, #fff0a0); box-shadow: 0 8px 28px rgba(231, 174, 49, .19); }
.secondary-btn { color: var(--gold-light); border: 1px solid rgba(232, 196, 109, .4); background: rgba(2, 8, 16, .72); }
.primary-btn:disabled { cursor: wait; opacity: .58; }
.text-link { display: block; min-height: 48px; margin: 22px auto 0; padding: 8px 15px; color: #d8d4c9; border: 0; background: transparent; font-size: 16px; }
.chooser-home { margin-top: 8px; color: #929daf; }
.qr-box { display: block; width: min(68vw, 270px); aspect-ratio: 1; margin: 20px auto 10px; padding: 10px; border: 1px solid var(--line); border-radius: 18px; background: #fff; }
.qr-box img { display: block; width: 100%; height: 100%; object-fit: contain; }

.qr-dialog { width: min(92vw, 470px); padding: 0; color: var(--text); border: 1px solid var(--line); border-radius: 22px; background: #07111f; }
.qr-dialog::backdrop { background: rgba(0, 0, 0, .82); }
.qr-dialog-card { position: relative; padding: 28px; text-align: center; }
.qr-dialog-card h2 { color: var(--gold-light); font-size: 26px; }
.qr-dialog-card img { width: 100%; margin-top: 10px; border-radius: 15px; background: white; }
.qr-dialog-card p { color: var(--muted); }
.dialog-close { position: absolute; top: 10px; right: 10px; min-width: 52px; min-height: 44px; color: #fff; border: 0; background: transparent; }

@media (min-width: 720px) {
  .app-shell { padding-left: 34px; padding-right: 34px; }
  .product-list { grid-template-columns: repeat(3, 1fr); }
  .product-card { min-height: 280px; }
}

@media (max-width: 540px) {
  .app-shell { padding: max(16px, env(safe-area-inset-top)) 15px max(16px, env(safe-area-inset-bottom)); }
  #viewChooser.active { display: flex; flex-direction: column; min-height: calc(100dvh - max(16px, env(safe-area-inset-top)) - max(16px, env(safe-area-inset-bottom))); }
  #viewChooser .page-head { flex: 0 0 auto; margin: 2px auto 15px; }
  #viewChooser .page-head h1 { font-size: clamp(30px, 8.4vw, 36px); line-height: 1.28; }
  #viewChooser .page-head > p:last-child { margin-top: 10px; font-size: 15px; line-height: 1.6; }
  .chooser-eyebrow { margin-bottom: 7px; font-size: 12px; }
  #viewChooser .product-list { flex: 1 1 auto; grid-template-rows: repeat(3, minmax(154px, 1fr)); gap: 11px; min-height: 484px; }
  #viewChooser .product-card { min-height: 0; padding: 17px 18px; border-radius: 18px; }
  #viewChooser .product-card strong { font-size: 23px; }
  #viewChooser .product-card > span:not(.tag) { font-size: 15px; line-height: 1.52; }
  #viewChooser .product-card i { margin-top: 7px; font-size: 14.5px; }
  #viewChooser .chooser-home { flex: 0 0 auto; min-height: 42px; margin-top: 3px; padding: 4px 12px; }
  .date-fields { grid-template-columns: 1fr; gap: 17px; }
  .form-card { padding: 19px; border-radius: 18px; }
  fieldset { padding: 20px 15px; }
  label { font-size: 17px; }
  input, select { min-height: 62px; font-size: 19px; }
  .primary-btn, .secondary-btn { min-height: 62px; font-size: 19px; }
}

@media (max-width: 540px) and (max-height: 760px) {
  #viewChooser .page-head { margin-bottom: 11px; }
  #viewChooser .page-head h1 { font-size: 28px; }
  #viewChooser .page-head > p:last-child { margin-top: 7px; font-size: 14px; line-height: 1.48; }
  #viewChooser .product-list { grid-template-rows: repeat(3, minmax(142px, 1fr)); min-height: 448px; gap: 9px; }
  #viewChooser .product-card { padding: 14px 16px; }
  #viewChooser .product-card strong { font-size: 21px; }
  #viewChooser .product-card > span:not(.tag) { font-size: 14px; line-height: 1.45; }
  #viewChooser .product-card i { margin-top: 5px; font-size: 13.5px; }
}

/* Some Android browsers report a desktop-like width even on a phone.
   Portrait aspect ratio is the reliable signal for the locked 9:16 chooser. */
@media (max-aspect-ratio: 4/5) {
  .app-shell {
    width: 100%;
    max-width: none;
    min-height: 100dvh;
    padding: max(20px, env(safe-area-inset-top)) clamp(18px, 4.5vw, 42px) max(18px, env(safe-area-inset-bottom));
  }

  #viewChooser.active {
    display: flex;
    flex-direction: column;
    width: min(100%, 720px);
    min-height: calc(100dvh - max(20px, env(safe-area-inset-top)) - max(18px, env(safe-area-inset-bottom)));
    margin: 0 auto;
  }

  #viewChooser .page-head {
    flex: 0 0 auto;
    margin: 0 auto clamp(16px, 2.2dvh, 28px);
  }

  #viewChooser .chooser-eyebrow {
    margin-bottom: clamp(8px, 1.2dvh, 14px);
    font-size: clamp(13px, 2.1vw, 17px);
  }

  #viewChooser .page-head h1 {
    font-size: clamp(34px, 6.2vw, 54px);
    line-height: 1.25;
  }

  #viewChooser .page-head > p:last-child {
    max-width: 680px;
    margin-top: clamp(10px, 1.6dvh, 18px);
    font-size: clamp(16px, 2.35vw, 20px);
    line-height: 1.62;
  }

  #viewChooser .product-list {
    display: grid;
    flex: 1 1 auto;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(3, minmax(150px, 1fr));
    gap: clamp(12px, 1.7dvh, 20px);
    min-height: 0;
  }

  #viewChooser .product-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    min-height: 0;
    padding: clamp(18px, 2.7dvh, 30px) clamp(20px, 4.2vw, 36px);
    border-radius: clamp(18px, 3vw, 26px);
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  #viewChooser .product-card:active {
    transform: scale(.985);
  }

  #viewChooser .product-card .tag {
    align-self: flex-start;
    margin-bottom: clamp(8px, 1.1dvh, 13px);
    padding: 5px 11px;
    font-size: clamp(12px, 1.9vw, 15px);
  }

  #viewChooser .product-card strong {
    margin-bottom: clamp(7px, 1dvh, 12px);
    font-size: clamp(24px, 3.9vw, 32px);
  }

  #viewChooser .product-card > span:not(.tag) {
    max-width: 100%;
    font-size: clamp(16px, 2.45vw, 20px);
    line-height: 1.58;
  }

  #viewChooser .product-card i {
    margin-top: clamp(8px, 1.15dvh, 14px);
    font-size: clamp(15px, 2.2vw, 18px);
  }

  #viewChooser .chooser-home {
    flex: 0 0 auto;
    min-height: 52px;
    margin-top: clamp(5px, .8dvh, 10px);
    padding: 7px 16px;
    font-size: clamp(16px, 2.2vw, 18px);
  }
}

/* 02 · 了解体系：参考移动端深蓝星空、金线卡片与东方星象元素。 */
#viewChooser.chooser-view.active {
  display: flex;
  flex-direction: column;
  width: min(100%, 720px);
  min-height: calc(100dvh - max(24px, env(safe-area-inset-top)) - max(22px, env(safe-area-inset-bottom)));
  margin: 0 auto;
}

.chooser-view .chooser-head {
  flex: 0 0 auto;
  margin: 0 auto clamp(18px, 2.4dvh, 30px);
}

.chooser-view .chooser-eyebrow {
  margin: 0 0 8px;
  color: #ffe39a;
  font-family: SimSun, serif;
  font-size: clamp(16px, 3.4vw, 22px);
  letter-spacing: .16em;
}

.chooser-view .chooser-head h1 {
  position: relative;
  display: inline-block;
  color: var(--gold-light);
  font-size: clamp(30px, 7.2vw, 46px);
  line-height: 1.25;
  text-shadow: 0 0 22px rgba(225,177,63,.18);
}

.chooser-view .chooser-head h1::after {
  content: "";
  position: absolute;
  right: 12%;
  bottom: -10px;
  left: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(232,196,109,.64), transparent);
}

.chooser-view .chooser-head > p:last-child {
  max-width: 620px;
  margin-top: 22px;
  color: rgba(233,235,239,.76);
  font-size: clamp(15px, 3.5vw, 18px);
  line-height: 1.75;
}

.chooser-view .product-list {
  display: grid;
  flex: 1 1 auto;
  grid-template-columns: 1fr !important;
  grid-template-rows: repeat(3, minmax(154px, 1fr));
  gap: clamp(13px, 1.8dvh, 19px);
  min-height: 0;
}

.chooser-view .product-card,
.chooser-view .product-card.featured {
  display: grid;
  grid-template-columns: clamp(84px, 23vw, 128px) minmax(0, 1fr);
  align-items: center;
  width: 100%;
  min-height: 0;
  padding: clamp(15px, 2.3dvh, 24px) clamp(16px, 3.5vw, 26px);
  border: 1px solid rgba(223,185,96,.43);
  border-radius: 16px;
  background:
    radial-gradient(circle at 92% 0, rgba(50,112,174,.18), transparent 42%),
    linear-gradient(145deg, rgba(8,22,38,.97), rgba(3,12,24,.96));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.018), 0 14px 34px rgba(0,0,0,.26);
  text-align: left;
  touch-action: manipulation;
}

.chooser-view .product-card::after {
  right: -72px;
  top: -74px;
  width: 210px;
  height: 210px;
  background: radial-gradient(circle, rgba(232,196,109,.11), transparent 68%);
}

.chooser-view .product-card:active {
  transform: scale(.987);
  border-color: rgba(255,220,134,.75);
}

.chooser-view .product-card-copy {
  display: flex !important;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  max-width: none !important;
  color: inherit !important;
  font-size: inherit !important;
  line-height: normal !important;
}

.chooser-view .product-card-copy .tag {
  order: 0;
  margin: 0 0 7px;
  padding: 3px 8px;
  color: rgba(255,232,168,.85);
  border-color: rgba(232,196,109,.3);
  background: rgba(232,196,109,.04);
  font-size: clamp(11px, 2.45vw, 13px);
}

.chooser-view .product-card-copy strong {
  order: 1;
  margin-bottom: 6px;
  color: #ffe59e;
  font-family: SimSun, serif;
  font-size: clamp(22px, 5.2vw, 29px);
  letter-spacing: .03em;
}

.chooser-view .product-card-copy .product-description {
  order: 2;
  display: block;
  max-width: 100%;
  color: rgba(225,229,236,.72);
  font-size: clamp(14px, 3.25vw, 17px);
  line-height: 1.58;
}

.chooser-view .product-card-copy i {
  order: 3;
  display: inline-flex;
  align-items: center;
  min-height: 35px;
  margin-top: 9px;
  padding: 3px 12px;
  color: #ffe29a;
  border: 1px solid rgba(232,196,109,.42);
  border-radius: 999px;
  font-size: clamp(13px, 3vw, 15px);
}

.chooser-view .product-card-copy i b {
  margin-left: 9px;
  font-size: 19px;
  font-weight: 400;
  line-height: 1;
}

.chooser-view .product-visual {
  position: relative;
  display: block !important;
  width: clamp(68px, 18vw, 98px);
  aspect-ratio: .76;
  max-width: none !important;
  margin: 0 auto 0 0;
  overflow: visible;
  color: #f6d675 !important;
  border: 1px solid rgba(232,196,109,.5);
  border-radius: 11px;
  background:
    radial-gradient(circle at 50% 42%, rgba(65,144,220,.25), transparent 42%),
    linear-gradient(145deg, #07192c, #020914);
  box-shadow: 0 0 24px rgba(35,109,180,.18), inset 0 0 18px rgba(232,196,109,.06);
}

.chooser-view .product-visual::before,
.chooser-view .product-visual::after,
.chooser-view .product-visual > span::before,
.chooser-view .product-visual > span::after {
  content: "";
  position: absolute;
}

.chooser-view .visual-daily::before {
  inset: 16% 18%;
  transform: rotate(45deg);
  border: 1px solid rgba(255,220,128,.7);
  background: radial-gradient(circle, #fff3bd 0 4%, #e0ad42 5% 9%, rgba(32,91,159,.8) 10% 30%, rgba(77,41,133,.72) 31% 54%, #071525 56%);
  box-shadow: 0 0 18px rgba(99,118,237,.5);
}

.chooser-view .visual-daily::after {
  top: 9%;
  left: 50%;
  width: 2px;
  height: 82%;
  transform: translateX(-50%);
  background: linear-gradient(transparent, rgba(255,224,139,.8), transparent);
}

.chooser-view .visual-report {
  border: 0;
  background: transparent;
  box-shadow: none;
}

.chooser-view .visual-report::before {
  inset: 12% 15%;
  border: 1px solid rgba(244,210,126,.58);
  border-radius: 4px;
  background: linear-gradient(90deg, rgba(181,128,45,.22), rgba(255,232,164,.11) 50%, rgba(181,128,45,.22));
  box-shadow: 0 0 18px rgba(232,196,109,.17);
}

.chooser-view .visual-report::after {
  top: 8%;
  left: 8%;
  width: 84%;
  height: 8px;
  border: 1px solid rgba(255,222,139,.62);
  border-radius: 999px;
  background: linear-gradient(90deg, #6e471b, #e7b85b 45%, #6e471b);
  box-shadow: 0 clamp(67px, 17vw, 91px) 0 -1px rgba(203,148,54,.9);
}

.chooser-view .visual-report > span::before {
  top: 29%;
  right: 28%;
  bottom: 29%;
  left: 28%;
  border-left: 1px solid rgba(255,224,151,.52);
  border-right: 1px solid rgba(255,224,151,.52);
}

.chooser-view .chooser-note {
  flex: 0 0 auto;
  margin: clamp(15px, 2dvh, 24px) auto 8px;
  color: rgba(220,224,230,.68);
  font-size: clamp(13px, 3vw, 15px);
  line-height: 1.65;
  text-align: center;
}

.chooser-view .chooser-home {
  flex: 0 0 auto;
  width: 100%;
  min-height: 52px;
  margin: 0 auto;
  color: #f6df9c;
  border: 1px solid rgba(232,196,109,.55);
  border-radius: 999px;
  background: rgba(3,10,20,.62);
  font-size: clamp(16px, 3.6vw, 18px);
}

@media (max-height: 760px) and (max-aspect-ratio: 4/5) {
  .chooser-view .chooser-head { margin-bottom: 13px; }
  .chooser-view .chooser-head h1 { font-size: 28px; }
  .chooser-view .chooser-head > p:last-child { margin-top: 16px; font-size: 14px; line-height: 1.55; }
  .chooser-view .product-list { grid-template-rows: repeat(3, minmax(142px, 1fr)); gap: 10px; }
  .chooser-view .product-card,
  .chooser-view .product-card.featured { padding-top: 12px; padding-bottom: 12px; }
  .chooser-view .product-card-copy .product-description { font-size: 13.5px; line-height: 1.48; }
  .chooser-view .product-card-copy i { min-height: 31px; margin-top: 6px; }
  .chooser-view .chooser-note { margin-top: 12px; }
  .chooser-view .chooser-home { min-height: 48px; }
}

/* 精确还原版：只在“了解体系”视图生效，离开该视图后不影响其他业务页。 */
body.system-intro-page {
  --page-bg: #020912;
  --gold-bright: #fff0b8;
  --gold-main: #e3b664;
  --gold-dark: #c98a36;
  --text-primary: rgba(238, 239, 242, .9);
  --text-secondary: rgba(231, 233, 237, .82);
  --card-border: rgba(216, 158, 72, .78);
  --card-bg: linear-gradient(135deg, rgba(9, 28, 51, .82), rgba(4, 16, 31, .92));
  --page-padding: clamp(16px, 5.6vw, 24px);
  --card-radius: 10px;
  min-height: 100dvh;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 52% 22%, rgba(13, 42, 75, .55) 0%, rgba(4, 17, 32, .38) 35%, rgba(2, 9, 18, 0) 68%),
    radial-gradient(circle at 90% 63%, rgba(15, 54, 102, .16) 0%, rgba(2, 9, 18, 0) 42%),
    linear-gradient(180deg, #020912 0%, #041120 38%, #03101e 72%, #020912 100%);
}

body.system-intro-page::before {
  opacity: .22;
  background-image:
    radial-gradient(circle, rgba(255,232,172,.72) 0 1px, transparent 1.4px),
    radial-gradient(circle, rgba(102,165,223,.54) 0 1px, transparent 1.5px);
  background-position: 19px 31px, 81px 103px;
  background-size: 151px 173px, 211px 239px;
}

body.system-intro-page .app-shell {
  width: 100%;
  max-width: 430px;
  min-height: 100dvh;
  margin: 0 auto;
  padding: max(18px, env(safe-area-inset-top)) var(--page-padding) max(20px, env(safe-area-inset-bottom));
  position: relative;
  overflow-x: hidden;
}

body.system-intro-page #viewChooser.chooser-view.active {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 390px;
  min-height: 0;
  margin: 0 auto;
}

body.system-intro-page .chooser-back {
  position: absolute;
  z-index: 3;
  top: max(12px, env(safe-area-inset-top));
  left: max(9px, calc((100% - 390px) / 2));
  display: grid;
  width: 44px;
  height: 44px;
  padding: 8px;
  place-items: center;
  color: var(--gold-main);
  border: 0;
  border-radius: 0;
  outline: 0;
  background: transparent;
  -webkit-tap-highlight-color: transparent;
}

body.system-intro-page .chooser-back svg {
  width: 28px;
  height: 28px;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body.system-intro-page .chooser-back:active { opacity: .68; }
body.system-intro-page .chooser-back:focus-visible { outline: 2px solid rgba(232,196,109,.78); outline-offset: 2px; }

body.system-intro-page .chooser-view .chooser-head {
  width: 100%;
  margin: 0 auto 16px;
  padding-top: 4px;
}

body.system-intro-page .chooser-view .chooser-eyebrow {
  margin: -36px 0 0;
  background: linear-gradient(180deg, var(--gold-bright) 0%, #f3cf7a 42%, var(--gold-dark) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-family: "Noto Serif SC", "Source Han Serif SC", "Songti SC", STSong, serif;
  font-size: clamp(28px, 7.45vw, 30px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .08em;
  text-shadow: none;
}

body.system-intro-page .chooser-view .chooser-head h1 {
  display: block;
  margin-top: 0;
  background: linear-gradient(180deg, #fff0b1 0%, #edc56e 55%, #d69a3d 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-family: "Noto Serif SC", "Source Han Serif SC", "Songti SC", STSong, serif;
  font-size: clamp(21px, 5.9vw, 23px);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: .03em;
  text-shadow: none;
}

body.system-intro-page .chooser-view .chooser-head h1::after { content: none; }

body.system-intro-page .chooser-view .chooser-head > p:last-child {
  max-width: 356px;
  margin: 10px auto 0;
  color: rgba(231, 233, 237, .84);
  font-family: "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.75;
  text-align: center;
}

body.system-intro-page .chooser-view .chooser-intro-line {
  display: block;
  white-space: nowrap;
}

body.system-intro-page .chooser-view .product-list {
  display: grid;
  flex: 0 0 auto;
  grid-template-columns: 1fr !important;
  grid-template-rows: none;
  gap: 10px;
  min-height: 0;
}

body.system-intro-page .chooser-view .product-card,
body.system-intro-page .chooser-view .product-card.featured {
  display: grid;
  grid-template-columns: minmax(0, 45%) minmax(0, 55%);
  align-items: center;
  width: 100%;
  min-height: 168px;
  padding: 12px 14px;
  gap: 10px;
  overflow: hidden;
  color: inherit;
  text-align: left;
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  outline: 0;
  background: var(--card-bg);
  box-shadow: inset 0 1px 0 rgba(255,234,180,.04), 0 8px 24px rgba(0,0,0,.16);
  transform: none;
}

body.system-intro-page .chooser-view .product-card::after { content: none; }
body.system-intro-page .chooser-view .product-card:active { opacity: .82; transform: translateY(1px); }
body.system-intro-page .chooser-view .product-card:focus-visible { outline: 2px solid rgba(238,195,105,.72); outline-offset: 2px; }

body.system-intro-page .chooser-view .product-visual {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 142px;
  max-width: none !important;
  aspect-ratio: auto;
  margin: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body.system-intro-page .chooser-view .product-visual::before,
body.system-intro-page .chooser-view .product-visual::after,
body.system-intro-page .chooser-view .product-visual > span::before,
body.system-intro-page .chooser-view .product-visual > span::after { content: none; display: none; }

body.system-intro-page .chooser-view .product-visual img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 145px;
  max-height: 145px;
  object-fit: contain;
  object-position: center;
  filter: saturate(.94) contrast(1.02);
}

body.system-intro-page .chooser-view .product-card:first-child .product-visual img { max-width: 132px; max-height: 142px; }

body.system-intro-page .chooser-view .product-card-copy {
  display: flex !important;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-width: 0;
  width: 100%;
  max-width: none !important;
  color: inherit !important;
  font-size: inherit !important;
  line-height: normal !important;
}

body.system-intro-page .chooser-view .product-card-copy strong {
  margin: 0 0 10px;
  background: linear-gradient(180deg, #fff0b1 0%, #edc56e 55%, #d69a3d 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-family: "Noto Serif SC", "Source Han Serif SC", "Songti SC", STSong, serif;
  font-size: clamp(19px, 5.35vw, 22px);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .02em;
  white-space: nowrap;
}

body.system-intro-page .chooser-view .product-card-copy .product-description {
  display: block;
  max-width: 100%;
  color: rgba(232, 234, 239, .88);
  font-family: "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.65;
  overflow: visible;
  white-space: normal;
}

body.system-intro-page .chooser-view .product-copy-line {
  display: block;
  white-space: nowrap;
}

body.system-intro-page .chooser-view .product-card-copy i {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 94px;
  height: 31px;
  min-height: 31px;
  margin-top: 10px;
  padding: 0 15px;
  gap: 11px;
  color: #e7b75b;
  border: 1px solid rgba(211,145,54,.78);
  border-radius: 999px;
  background: rgba(3,13,25,.34);
  font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 15px;
  font-style: normal;
  font-weight: 600;
  line-height: 1;
}

body.system-intro-page .chooser-view .product-card-copy i::after {
  content: "";
  position: absolute;
  inset: -7px -5px;
}

body.system-intro-page .chooser-view .card-arrow {
  display: block;
  width: 9px;
  height: 9px;
  transform: rotate(45deg);
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
}

body.system-intro-page .chooser-view .chooser-note {
  max-width: 300px;
  margin: 16px auto 12px;
  color: rgba(229, 231, 235, .82);
  font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 13px;
  line-height: 1.75;
  text-align: center;
}

body.system-intro-page .chooser-view .chooser-home {
  width: 100%;
  height: 48px;
  min-height: 48px;
  margin: 0 auto;
  padding: 0 18px;
  color: #f0c567;
  border: 1px solid rgba(228,168,77,.9);
  border-radius: 999px;
  outline: 0;
  background: linear-gradient(180deg, rgba(8,25,44,.55), rgba(2,10,20,.75));
  box-shadow: 0 8px 20px rgba(0,0,0,.24), 0 2px 10px rgba(207,141,44,.12);
  font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .04em;
}

body.system-intro-page .chooser-view .chooser-home:active { opacity: .74; }
body.system-intro-page .chooser-view .chooser-home:focus-visible { outline: 2px solid rgba(240,197,103,.8); outline-offset: 3px; }

@media (max-width: 359px) {
  body.system-intro-page .app-shell { --page-padding: 16px; }
  body.system-intro-page .chooser-view .product-card,
  body.system-intro-page .chooser-view .product-card.featured { padding-right: 11px; padding-left: 11px; gap: 7px; }
  body.system-intro-page .chooser-view .product-visual img { max-width: 134px; transform: scale(.92); }
  body.system-intro-page .chooser-view .product-card-copy strong { font-size: 19px; }
  body.system-intro-page .chooser-view .product-card-copy .product-description { font-size: 13px; }
  body.system-intro-page .chooser-view .chooser-intro-line { font-size: 12.5px; }
}

@media (min-width: 400px) {
  body.system-intro-page .app-shell { --page-padding: 24px; }
  body.system-intro-page .chooser-view .chooser-eyebrow { font-size: 30px; }
  body.system-intro-page .chooser-view .product-card-copy strong { font-size: 22px; }
}

/* 提升到旧版 #viewChooser 手机规则之上，确保始终为左图右文。 */
body.system-intro-page #viewChooser.chooser-view .chooser-head {
  margin: 0 auto 16px;
  padding-top: 4px;
}

body.system-intro-page #viewChooser.chooser-view .chooser-eyebrow {
  margin: -36px 0 0;
  font-size: clamp(28px, 7.45vw, 30px);
}

body.system-intro-page #viewChooser.chooser-view .chooser-head h1 {
  display: block;
  margin-top: 0;
  font-size: clamp(21px, 5.9vw, 23px);
  line-height: 1.35;
}

body.system-intro-page #viewChooser.chooser-view .chooser-head > p:last-child {
  max-width: 356px;
  margin: 10px auto 0;
  font-size: 14px;
  line-height: 1.75;
}

body.system-intro-page #viewChooser.chooser-view .product-list {
  display: grid;
  flex: 0 0 auto;
  grid-template-columns: 1fr !important;
  grid-template-rows: none;
  gap: 10px;
  min-height: 0;
}

body.system-intro-page #viewChooser.chooser-view .product-card,
body.system-intro-page #viewChooser.chooser-view .product-card.featured {
  display: grid;
  grid-template-columns: minmax(0, 45%) minmax(0, 55%);
  align-items: center;
  justify-content: initial;
  width: 100%;
  min-height: 168px;
  padding: 12px 14px;
  gap: 10px;
  border-radius: 10px;
}

body.system-intro-page #viewChooser.chooser-view .product-visual {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 142px;
  max-width: none !important;
  margin: 0;
}

body.system-intro-page #viewChooser.chooser-view .product-card-copy {
  display: flex !important;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  max-width: none !important;
}

body.system-intro-page #viewChooser.chooser-view .product-card-copy strong {
  margin: 0 0 10px;
  font-size: clamp(19px, 5.35vw, 22px);
  line-height: 1.3;
}

body.system-intro-page #viewChooser.chooser-view .product-card-copy .product-description {
  max-width: 100%;
  font-size: 14px;
  line-height: 1.65;
}

body.system-intro-page #viewChooser.chooser-view .product-copy-line {
  display: block;
  white-space: nowrap;
}

body.system-intro-page #viewChooser.chooser-view .product-card-copy i {
  min-width: 94px;
  height: 31px;
  min-height: 31px;
  margin-top: 10px;
  padding: 0 15px;
  font-size: 15px;
}

body.system-intro-page #viewChooser.chooser-view .chooser-home {
  width: 100%;
  height: 48px;
  min-height: 48px;
  margin: 0 auto;
  padding: 0 18px;
  font-size: 17px;
}

@media (max-width: 359px) {
  body.system-intro-page #viewChooser.chooser-view .product-card,
  body.system-intro-page #viewChooser.chooser-view .product-card.featured { padding-right: 11px; padding-left: 11px; gap: 7px; }
  body.system-intro-page #viewChooser.chooser-view .product-card-copy strong { font-size: 19px; }
  body.system-intro-page #viewChooser.chooser-view .product-card-copy .product-description { font-size: 13px; }
}

/* 今日势卡展示页：独立作用域，不影响锁定首页与“了解体系”页。 */
body.daily-intro-page {
  --daily-gold: #f4d27a;
  --daily-gold-deep: #d6a44a;
  --daily-copy: rgba(240, 240, 240, .88);
  min-height: 100dvh;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 20% 38%, rgba(13, 59, 111, .26), transparent 34%),
    radial-gradient(circle at 88% 54%, rgba(8, 48, 94, .28), transparent 38%),
    linear-gradient(180deg, #020814 0%, #04152b 48%, #020a17 100%);
}

body.daily-intro-page::before {
  opacity: .34;
  background-image:
    radial-gradient(circle, rgba(255, 221, 142, .72) 0 1px, transparent 1.45px),
    radial-gradient(circle, rgba(146, 198, 255, .56) 0 1px, transparent 1.5px);
  background-position: 23px 37px, 87px 123px;
  background-size: 149px 181px, 223px 257px;
}

body.daily-intro-page .app-shell {
  width: 100%;
  max-width: 430px;
  min-height: 100dvh;
  margin: 0 auto;
  padding: max(13px, env(safe-area-inset-top)) clamp(15px, 4.6vw, 20px) max(15px, env(safe-area-inset-bottom));
  overflow-x: hidden;
}

body.daily-intro-page #viewDailyIntro.daily-intro-view.active {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: calc(100dvh - max(28px, env(safe-area-inset-top) + env(safe-area-inset-bottom)));
  margin: 0 auto;
}

.daily-intro-back {
  position: absolute;
  z-index: 4;
  top: 10px;
  left: -3px;
  display: grid;
  width: 46px;
  height: 46px;
  padding: 8px;
  place-items: center;
  color: var(--daily-gold);
  border: 0;
  outline: 0;
  background: transparent;
  -webkit-tap-highlight-color: transparent;
}

.daily-intro-back svg {
  width: 31px;
  height: 31px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.55;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.daily-intro-back:active { opacity: .66; }
.daily-intro-back:focus-visible { outline: 2px solid rgba(244, 210, 122, .82); outline-offset: 1px; }

.daily-intro-head {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-top: 5px;
  text-align: center;
}

.daily-intro-head h1 {
  position: relative;
  display: inline-block;
  margin: 0;
  padding: 7px 27px 5px;
  background: linear-gradient(180deg, #fff2b7 0%, #f0c86c 55%, #c88a34 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-family: "Noto Serif SC", "Source Han Serif SC", "Songti SC", STSong, serif;
  font-size: clamp(32px, 9.4vw, 39px);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: .09em;
  filter: drop-shadow(0 0 10px rgba(233, 180, 73, .2));
}

.daily-intro-head h1::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -8px -18px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(222, 164, 65, .16), transparent 68%);
}

.daily-intro-head > p {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 7px 0 0;
  gap: 10px;
  color: #efca76;
  font-family: "Noto Serif SC", "Songti SC", STSong, serif;
  font-size: 15px;
  line-height: 1.35;
  letter-spacing: .04em;
}

.daily-intro-head > p i {
  display: block;
  width: 34px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(226, 169, 74, .78));
}

.daily-intro-head > p i:last-child { transform: scaleX(-1); }

.daily-intro-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 54%) minmax(0, 46%);
  align-items: center;
  width: 100%;
  min-height: 402px;
  margin-top: 8px;
}

.daily-intro-hero::before {
  content: "";
  position: absolute;
  inset: 6% -20% 0 -20%;
  pointer-events: none;
  background: radial-gradient(ellipse at 29% 55%, rgba(8, 62, 122, .28), transparent 51%);
}

.daily-intro-art {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 115%;
  height: 390px;
  margin-left: -16%;
}

.daily-intro-art img {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: saturate(1.05) contrast(1.06) drop-shadow(0 0 14px rgba(36, 119, 218, .36));
  transform: perspective(620px) rotateY(3deg) rotateZ(-2deg);
}

.daily-art-halo {
  position: absolute;
  z-index: 0;
  width: 108%;
  aspect-ratio: 1;
  border: 1px solid rgba(208, 153, 60, .34);
  border-radius: 50%;
  box-shadow: 0 0 27px rgba(31, 99, 182, .33), inset 0 0 27px rgba(31, 99, 182, .2);
  animation: dailyHaloTurn 30s linear infinite;
}

.daily-art-halo::before,
.daily-art-halo::after {
  content: "";
  position: absolute;
  inset: 12%;
  border: 1px dashed rgba(225, 173, 81, .28);
  border-radius: 50%;
}

.daily-art-halo::after { inset: 28%; border-style: solid; border-color: rgba(62, 139, 231, .34); }

.daily-art-base {
  position: absolute;
  z-index: 1;
  bottom: 17px;
  left: 50%;
  width: 86%;
  height: 30px;
  transform: translateX(-50%);
  border: 1px solid rgba(235, 183, 78, .5);
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(236, 179, 73, .34), rgba(19, 78, 145, .14) 45%, transparent 72%);
  box-shadow: 0 0 22px rgba(235, 183, 78, .24);
}

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

.daily-intro-copy {
  position: relative;
  z-index: 2;
  min-width: 0;
  padding: 16px 0 4px 1px;
}

.daily-intro-copy h2 {
  margin: 0;
  background: linear-gradient(180deg, #fff0af, #e6b954 75%, #c78931);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-family: "Noto Serif SC", "Source Han Serif SC", "Songti SC", STSong, serif;
  font-size: clamp(22px, 6.4vw, 27px);
  font-weight: 700;
  line-height: 1.48;
  letter-spacing: .03em;
}

.daily-copy-rule {
  display: flex;
  align-items: center;
  width: 100%;
  height: 12px;
  margin: 10px 0 8px;
}

.daily-copy-rule::before,
.daily-copy-rule::after {
  content: "";
  height: 1px;
  flex: 1;
  background: rgba(215, 155, 60, .56);
}

.daily-copy-rule i {
  width: 7px;
  height: 7px;
  margin: 0 7px;
  transform: rotate(45deg);
  border: 1px solid rgba(240, 193, 95, .75);
}

.daily-lead {
  margin: 0;
  color: var(--daily-copy);
  font-size: clamp(12px, 3.45vw, 14px);
  line-height: 1.78;
}

.daily-feature-list {
  display: grid;
  margin-top: 10px;
  gap: 9px;
}

.daily-feature {
  display: grid;
  grid-template-columns: 39px minmax(0, 1fr);
  align-items: center;
  min-height: 43px;
  gap: 8px;
}

.daily-feature-icon {
  position: relative;
  display: grid;
  width: 35px;
  height: 39px;
  place-items: center;
  color: #f4cd71;
  filter: drop-shadow(0 0 5px rgba(244, 205, 113, .38));
}

.daily-feature-icon::before {
  content: "";
  position: absolute;
  inset: 2px 0;
  clip-path: polygon(50% 0, 94% 25%, 94% 75%, 50% 100%, 6% 75%, 6% 25%);
  background: currentColor;
}

.daily-feature-icon::after {
  content: "";
  position: absolute;
  inset: 3px 1px;
  clip-path: polygon(50% 0, 94% 25%, 94% 75%, 50% 100%, 6% 75%, 6% 25%);
  background: #061326;
}

.daily-feature-icon svg {
  position: relative;
  z-index: 2;
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.35;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.daily-feature > span:last-child { min-width: 0; }

.daily-feature strong,
.daily-feature small { display: block; }

.daily-feature strong {
  color: #f3ca6f;
  font-family: "Noto Serif SC", "Songti SC", STSong, serif;
  font-size: clamp(14px, 4vw, 16px);
  font-weight: 700;
  line-height: 1.35;
  white-space: nowrap;
}

.daily-feature small {
  margin-top: 2px;
  color: rgba(238, 239, 242, .82);
  font-size: clamp(10px, 2.8vw, 12px);
  line-height: 1.35;
  white-space: nowrap;
}

.daily-intro-note {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  align-items: center;
  width: calc(100% - 22px);
  min-height: 100px;
  margin: -1px auto 0;
  padding: 14px 14px;
  gap: 10px;
  border: 1px solid rgba(215, 158, 67, .54);
  border-radius: 11px;
  background: linear-gradient(135deg, rgba(7, 26, 48, .78), rgba(4, 16, 31, .9));
  box-shadow: inset 0 1px 0 rgba(255, 230, 169, .04), 0 8px 24px rgba(0, 0, 0, .18);
}

.daily-note-icon {
  position: relative;
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border: 1px solid rgba(228, 176, 79, .64);
  border-radius: 50%;
  box-shadow: 0 0 12px rgba(226, 169, 67, .24);
}

.daily-note-icon::before,
.daily-note-icon::after,
.daily-note-icon i::before,
.daily-note-icon i::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 26px;
  height: 1px;
  transform: translate(-50%, -50%);
  background: #efc66b;
}

.daily-note-icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.daily-note-icon i::before { transform: translate(-50%, -50%) rotate(45deg); }
.daily-note-icon i::after { transform: translate(-50%, -50%) rotate(-45deg); }

.daily-intro-note h2 {
  margin: 0 0 6px;
  color: #f1ca70;
  font-family: "Noto Serif SC", "Songti SC", STSong, serif;
  font-size: 16px;
  line-height: 1.4;
}

.daily-intro-note p {
  margin: 0;
  color: rgba(239, 240, 243, .84);
  font-size: 11.5px;
  line-height: 1.65;
}

.daily-intro-cta {
  position: relative;
  width: calc(100% - 34px);
  height: 56px;
  min-height: 56px;
  margin: 18px auto 0;
  padding: 0 18px;
  overflow: visible;
  color: #17120a;
  border: 1px solid rgba(255, 235, 170, .85);
  border-radius: 999px;
  outline: 0;
  background: linear-gradient(105deg, #ffefaa 0%, #f5cf72 28%, #d9a33d 62%, #f8d983 100%);
  box-shadow: 0 0 20px rgba(241, 194, 91, .32), inset 0 1px 0 rgba(255, 255, 255, .5);
  font-family: "Noto Serif SC", "Songti SC", STSong, serif;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: .04em;
}

.daily-intro-cta::before,
.daily-intro-cta::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 29px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 218, 123, .9));
  box-shadow: 0 0 7px rgba(255, 218, 123, .72);
}

.daily-intro-cta::before { right: 100%; }
.daily-intro-cta::after { left: 100%; transform: scaleX(-1); }
.daily-intro-cta:active { transform: translateY(1px); filter: brightness(.93); }
.daily-intro-cta:focus-visible { outline: 2px solid #fff1b6; outline-offset: 3px; }

.daily-intro-free {
  margin: 10px 0 0;
  color: rgba(237, 239, 243, .76);
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
}

@media (max-width: 359px) {
  body.daily-intro-page .app-shell { padding-right: 13px; padding-left: 13px; }
  .daily-intro-head h1 { font-size: 31px; }
  .daily-intro-hero { grid-template-columns: 52% 48%; min-height: 380px; }
  .daily-intro-art { width: 121%; height: 365px; margin-left: -22%; }
  .daily-intro-copy h2 { font-size: 21px; }
  .daily-lead { font-size: 11.5px; }
  .daily-feature { grid-template-columns: 36px minmax(0, 1fr); gap: 6px; }
  .daily-feature-icon { width: 32px; height: 36px; }
  .daily-feature strong { font-size: 13.5px; }
  .daily-feature small { font-size: 9.5px; }
  .daily-intro-note { width: calc(100% - 10px); padding-right: 10px; padding-left: 10px; }
  .daily-intro-note p { font-size: 10.5px; }
  .daily-intro-cta { width: calc(100% - 20px); font-size: 19px; }
}

@media (min-width: 400px) {
  .daily-intro-hero { min-height: 420px; }
  .daily-intro-art { height: 408px; }
  .daily-intro-note { min-height: 106px; }
}

@media (prefers-reduced-motion: reduce) {
  .daily-art-halo { animation: none; }
}

/* 今日势卡结果页：真实数据叠加在独立星盘组件上。 */
body.daily-result-page {
  --result-gold-bright: #f8dda0;
  --result-gold: #e9bd62;
  --result-gold-mid: #cc9340;
  --result-gold-dark: #986021;
  --result-copy: rgba(245, 244, 241, .94);
  --result-copy-soft: rgba(231, 230, 226, .84);
  min-height: 100dvh;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 78% 16%, rgba(20, 81, 148, .2) 0%, transparent 34%),
    radial-gradient(circle at 22% 57%, rgba(14, 59, 116, .22) 0%, transparent 42%),
    radial-gradient(circle at 76% 73%, rgba(48, 75, 123, .16) 0%, transparent 36%),
    linear-gradient(180deg, #020916 0%, #031426 42%, #04172c 72%, #020a16 100%);
}

body.daily-result-page::before {
  opacity: .46;
  background-image:
    radial-gradient(circle, rgba(250, 207, 110, .82) 0 1px, transparent 1.5px),
    radial-gradient(circle, rgba(132, 190, 246, .62) 0 1px, transparent 1.4px);
  background-position: 17px 39px, 91px 127px;
  background-size: 143px 179px, 219px 251px;
}

body.daily-result-page .app-shell {
  width: 100%;
  max-width: 430px;
  min-height: 100dvh;
  margin: 0 auto;
  padding: max(7px, env(safe-area-inset-top)) clamp(16px, 5.6vw, 24px) max(16px, env(safe-area-inset-bottom));
  overflow-x: hidden;
}

body.daily-result-page #viewDailyResult.daily-result-view.active {
  display: block;
  width: 100%;
  max-width: 390px;
  margin: 0 auto;
}

.daily-result-card {
  position: relative;
  width: 100%;
  overflow: hidden;
  color: var(--result-copy);
}

.daily-result-card::before,
.daily-result-card::after {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
}

.daily-result-card::before {
  top: 105px;
  right: -150px;
  width: 330px;
  height: 330px;
  transform: rotate(-18deg);
  opacity: .26;
  background:
    linear-gradient(24deg, transparent 47%, rgba(107, 172, 235, .4) 48% 48.5%, transparent 49%),
    linear-gradient(106deg, transparent 47%, rgba(224, 171, 72, .35) 48% 48.5%, transparent 49%);
}

.daily-result-card::after {
  left: 5%;
  bottom: 105px;
  width: 90%;
  height: 220px;
  opacity: .18;
  background: radial-gradient(ellipse, rgba(15, 78, 143, .46), transparent 66%);
}

.daily-result-nav {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  align-items: center;
  width: 100%;
  min-height: 54px;
}

.daily-result-icon-btn {
  display: grid;
  width: 44px;
  height: 44px;
  padding: 7px;
  place-items: center;
  color: var(--result-gold);
  border: 0;
  outline: 0;
  background: transparent;
  -webkit-tap-highlight-color: transparent;
}

.daily-result-icon-btn svg {
  width: 29px;
  height: 29px;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.55;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.daily-share-btn { justify-self: end; }
.daily-result-icon-btn:active { opacity: .64; }
.daily-result-icon-btn:focus-visible { outline: 2px solid rgba(233, 189, 98, .8); outline-offset: 1px; }

.daily-result-title {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}

.daily-result-title span {
  flex: 0 0 auto;
  background: linear-gradient(180deg, #fff0b5 0%, #efc76f 48%, #b9792f 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-family: "Noto Serif SC", "Source Han Serif SC", "Songti SC", STSong, serif;
  font-size: clamp(29px, 8.1vw, 32px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .08em;
  filter: drop-shadow(0 0 8px rgba(223, 165, 73, .18));
}

.daily-astrolabe {
  position: relative;
  z-index: 1;
  width: min(100vw, 366px);
  height: 286px;
  margin: -4px auto 0;
}

.daily-astrolabe::before {
  content: "";
  position: absolute;
  top: 7%;
  left: 50%;
  width: 92%;
  aspect-ratio: 1;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(10, 57, 108, .24), rgba(3, 16, 33, .04) 62%, transparent 72%);
  box-shadow: 0 0 36px rgba(32, 108, 187, .13);
}

.daily-astrolabe-art {
  position: absolute;
  top: -35px;
  left: 50%;
  display: block;
  width: 350px;
  height: 350px;
  max-width: none;
  transform: translateX(-50%);
  overflow: visible;
  filter: drop-shadow(0 0 8px rgba(223, 165, 73, .13));
  pointer-events: none;
  user-select: none;
}

.daily-date-layer {
  position: absolute;
  z-index: 2;
  top: 70px;
  left: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  transform: translateX(-50%);
  font-family: "Noto Serif SC", "Source Han Serif SC", "Songti SC", STSong, serif;
  text-align: center;
}

.daily-date-layer span {
  color: #e9bd62;
  font-size: 16px;
  line-height: 1.5;
}

.daily-date-layer strong {
  margin-top: 10px;
  background: linear-gradient(180deg, #f8dea0, #e3b45b 60%, #b8732c);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: clamp(54px, 15.5vw, 62px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: .04em;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .45));
}

.daily-date-layer small {
  margin-top: 16px;
  color: #e7bb63;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: .08em;
  white-space: nowrap;
}

.daily-keyword-section {
  position: relative;
  z-index: 2;
  width: calc(100% - 44px);
  margin: -23px auto 0;
  padding: 25px 10px 18px;
  text-align: center;
  border-right: 1px solid rgba(204, 147, 64, .48);
  border-left: 1px solid rgba(204, 147, 64, .48);
  border-radius: 16px 16px 0 0;
  background: linear-gradient(180deg, rgba(3, 15, 31, .05), rgba(3, 17, 34, .42));
}

.daily-keyword-section > p {
  margin: 0;
  color: var(--result-gold);
  font-family: "Noto Serif SC", "Songti SC", STSong, serif;
  font-size: 16px;
  line-height: 1.5;
}

.daily-keyword-section h1 {
  margin: 7px 0 5px;
  background: linear-gradient(180deg, #ffe3a1, #efc66b 57%, #c38434);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-family: "Noto Serif SC", "Source Han Serif SC", "Songti SC", STSong, serif;
  font-size: clamp(34px, 10.1vw, 40px);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: .08em;
  filter: drop-shadow(0 0 6px rgba(229, 177, 76, .15));
}

.daily-keyword-section > div {
  color: rgba(241, 240, 236, .9);
  font-size: 16px;
  line-height: 1.7;
}

.daily-focus-section {
  position: relative;
  z-index: 2;
  width: calc(100% - 44px);
  margin: 0 auto;
  padding: 0 17px 14px;
  border-right: 1px solid rgba(204, 147, 64, .48);
  border-left: 1px solid rgba(204, 147, 64, .48);
  border-radius: 0 0 16px 16px;
  background: linear-gradient(180deg, rgba(3, 17, 34, .42), rgba(2, 13, 28, .32));
}

.daily-result-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 10px;
  gap: 9px;
  color: var(--result-gold);
  font-family: "Noto Serif SC", "Songti SC", STSong, serif;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .05em;
}

.daily-result-divider i {
  position: relative;
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(215, 158, 65, .54));
}

.daily-result-divider i:last-child { transform: scaleX(-1); }
.daily-result-divider i::after {
  content: "";
  position: absolute;
  top: -3px;
  right: 0;
  width: 6px;
  height: 6px;
  transform: rotate(45deg);
  border: 1px solid rgba(225, 176, 78, .7);
}

.daily-focus-item {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  min-height: 78px;
  column-gap: 14px;
}

.daily-focus-item + .daily-focus-item { margin-top: 5px; }

.daily-focus-icon {
  position: relative;
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  color: #e9bd62;
  border: 1px solid rgba(233, 189, 98, .82);
  border-radius: 50%;
  filter: drop-shadow(0 0 5px rgba(222, 166, 72, .2));
}

.daily-focus-icon::before,
.daily-focus-icon::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 1px;
  height: 10px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, transparent, rgba(232, 184, 85, .65));
}

.daily-focus-icon::before { bottom: 100%; }
.daily-focus-icon::after { top: 100%; transform: translateX(-50%) scaleY(-1); }

.daily-focus-icon svg {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.daily-focus-item p {
  margin: 0;
  color: rgba(241, 240, 236, .9);
  font-size: 15px;
  line-height: 1.72;
  text-align: left;
}

.daily-advice-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: calc(100% - 44px);
  margin: 12px auto 0;
  gap: 12px;
}

.daily-advice-card {
  min-width: 0;
  min-height: 148px;
  padding: 12px 15px 14px;
  border: 1px solid rgba(201, 140, 57, .46);
  border-radius: 13px;
  background:
    radial-gradient(circle at 82% 20%, rgba(240, 192, 90, .08) 0 1px, transparent 1.5px),
    linear-gradient(150deg, rgba(6, 25, 46, .78), rgba(2, 13, 26, .9));
  background-size: 37px 43px, auto;
  box-shadow: inset 0 1px 0 rgba(255, 223, 160, .03), 0 8px 20px rgba(0, 0, 0, .14);
}

.daily-advice-card h2 {
  display: grid;
  width: 38px;
  height: 38px;
  margin: 0 auto 9px;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-family: "Noto Serif SC", "Songti SC", STSong, serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
}

.daily-advice-card.is-good h2 { color: #9ed684; }
.daily-advice-card.is-avoid h2 { color: #ed6259; }

.daily-advice-card ul {
  display: grid;
  margin: 0;
  padding: 0;
  gap: 7px;
  list-style: none;
}

.daily-advice-card li {
  position: relative;
  padding-left: 17px;
  color: rgba(241, 240, 236, .9);
  font-size: 14px;
  line-height: 1.7;
  white-space: nowrap;
}

.daily-advice-card li::before {
  content: "";
  position: absolute;
  top: .72em;
  left: 1px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #7abf70;
  box-shadow: 0 0 5px rgba(122, 191, 112, .35);
}

.daily-advice-card.is-avoid li::before { background: #d94740; box-shadow: 0 0 5px rgba(217, 71, 64, .35); }

.daily-save-btn {
  position: relative;
  z-index: 2;
  display: block;
  width: calc(100% - 44px);
  height: 48px;
  min-height: 48px;
  margin: 13px auto 0;
  color: var(--result-gold);
  border: 1px solid rgba(232, 175, 79, .92);
  border-radius: 999px;
  outline: 0;
  background: linear-gradient(180deg, rgba(5, 22, 39, .68), rgba(2, 11, 22, .86));
  box-shadow: inset 0 1px 0 rgba(255, 231, 177, .04), 0 6px 18px rgba(0, 0, 0, .22);
  font-family: "Noto Serif SC", "Songti SC", STSong, serif;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: .08em;
}

.daily-save-btn:active { opacity: .7; transform: translateY(1px); }
.daily-save-btn:focus-visible { outline: 2px solid rgba(241, 203, 121, .8); outline-offset: 3px; }

.daily-save-dialog {
  width: min(92vw, 430px);
  max-height: 92dvh;
  padding: 0;
  color: #f2eee4;
  border: 1px solid rgba(231, 180, 82, .72);
  border-radius: 18px;
  background: #031326;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .72), 0 0 30px rgba(36, 101, 165, .2);
}

.daily-save-dialog::backdrop { background: rgba(0, 5, 13, .88); backdrop-filter: blur(5px); }

.daily-save-dialog-card {
  position: relative;
  padding: 52px 14px 18px;
  text-align: center;
}

.daily-save-dialog-card h2 {
  margin: 0 0 12px;
  color: var(--result-gold-bright, #f8dda0);
  font-family: "Noto Serif SC", "Songti SC", STSong, serif;
  font-size: 22px;
}

.daily-save-dialog-card img {
  display: block;
  width: 100%;
  max-height: 67dvh;
  object-fit: contain;
  border: 1px solid rgba(213, 157, 63, .36);
  border-radius: 12px;
  background: #020916;
}

.daily-save-dialog-card p {
  margin: 12px 4px;
  color: rgba(243, 241, 235, .82);
  font-size: 14px;
  line-height: 1.65;
}

.daily-download-link {
  display: grid;
  min-height: 48px;
  place-items: center;
  color: #1a1204;
  border-radius: 999px;
  background: linear-gradient(110deg, #fff1ae, #d99e3d 60%, #ffec9f);
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
}

@media (max-width: 359px) {
  body.daily-result-page .app-shell { padding-right: 14px; padding-left: 14px; }
  .daily-result-title span { font-size: 28px; }
  .daily-result-title { gap: 6px; }
  .daily-astrolabe { height: 267px; }
  .daily-astrolabe-art { top: -40px; width: 325px; height: 325px; }
  .daily-date-layer { top: 61px; }
  .daily-date-layer strong { font-size: 50px; }
  .daily-date-layer small { font-size: 13px; letter-spacing: .04em; }
  .daily-keyword-section,
  .daily-focus-section,
  .daily-advice-grid,
  .daily-save-btn { width: calc(100% - 16px); }
  .daily-keyword-section h1 { font-size: 33px; }
  .daily-keyword-section > div { font-size: 15px; }
  .daily-focus-section { padding-right: 12px; padding-left: 12px; }
  .daily-focus-item { grid-template-columns: 44px minmax(0, 1fr); column-gap: 10px; }
  .daily-focus-icon { width: 42px; height: 42px; }
  .daily-focus-item p { font-size: 14px; }
  .daily-advice-grid { gap: 8px; }
  .daily-advice-card { padding-right: 10px; padding-left: 10px; }
  .daily-advice-card li { padding-left: 14px; font-size: 13px; }
}

@media (min-width: 400px) {
  .daily-astrolabe { height: 295px; }
  .daily-astrolabe-art { width: 360px; height: 360px; }
  .daily-keyword-section,
  .daily-focus-section,
  .daily-advice-grid,
  .daily-save-btn { width: calc(100% - 42px); }
}

/* 双人关系镜像展示页：独立移动端长页，不改变现有首页与生成流程。 */
body.relationship-intro-page {
  --relationship-bg-black: #010712;
  --relationship-bg-deep: #021020;
  --relationship-bg-blue: #031831;
  --relationship-gold-bright: #ffe29a;
  --relationship-gold: #edc46b;
  --relationship-gold-mid: #d39a42;
  --relationship-copy: rgba(245, 243, 238, .94);
  --relationship-copy-soft: rgba(230, 230, 227, .84);
  min-height: 100dvh;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 78% 34%, rgba(22, 88, 166, .18) 0%, rgba(2, 12, 26, 0) 36%),
    radial-gradient(circle at 22% 49%, rgba(17, 55, 104, .18) 0%, rgba(2, 12, 26, 0) 40%),
    radial-gradient(circle at 52% 82%, rgba(8, 48, 91, .14) 0%, rgba(1, 7, 18, 0) 40%),
    linear-gradient(180deg, #010712 0%, #021020 38%, #03172d 68%, #010813 100%);
}

body.relationship-intro-page::before {
  opacity: .48;
  background-image:
    radial-gradient(circle, rgba(246, 213, 131, .76) 0 1px, transparent 1.45px),
    radial-gradient(circle, rgba(95, 163, 231, .62) 0 1px, transparent 1.55px);
  background-position: 19px 31px, 83px 119px;
  background-size: 151px 177px, 213px 247px;
  mask-image: linear-gradient(to bottom, #000 0%, #000 82%, transparent 100%);
}

body.relationship-intro-page .app-shell {
  width: 100%;
  max-width: 430px;
  min-height: 100dvh;
  margin: 0 auto;
  padding: max(12px, env(safe-area-inset-top)) clamp(16px, 5.6vw, 24px) max(24px, env(safe-area-inset-bottom));
  overflow-x: hidden;
}

body.relationship-intro-page #viewRelationshipIntro.relationship-intro-view.active {
  position: relative;
  display: block;
  width: 100%;
  min-height: calc(100dvh - max(12px, env(safe-area-inset-top)) - max(24px, env(safe-area-inset-bottom)));
  margin: 0 auto;
  overflow: visible;
}

.relationship-intro-back {
  position: absolute;
  z-index: 6;
  top: 2px;
  left: -5px;
  display: grid;
  width: 48px;
  height: 48px;
  padding: 8px;
  place-items: center;
  color: #e9bd62;
  border: 0;
  outline: 0;
  background: transparent;
  -webkit-tap-highlight-color: transparent;
}

.relationship-intro-back svg {
  width: 30px;
  height: 30px;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.55;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.relationship-intro-back:active { opacity: .64; }
.relationship-intro-back:focus-visible { outline: 2px solid rgba(236, 190, 96, .82); outline-offset: 1px; }

.relationship-intro-head {
  position: relative;
  z-index: 3;
  padding-top: 7px;
  text-align: center;
}

.relationship-title-row {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 44px;
}

.relationship-title-row h1 {
  position: relative;
  z-index: 1;
  margin: 0;
  background: linear-gradient(180deg, #fff0b3 0%, #efc66c 48%, #bb762c 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-family: "Noto Serif SC", "Source Han Serif SC", "Songti SC", STSong, serif;
  font-size: clamp(28px, 7.7vw, 32px);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: .05em;
  white-space: nowrap;
  filter: drop-shadow(0 0 7px rgba(224, 165, 70, .16));
}

.relationship-intro-head > p {
  margin: 5px 0 0;
  color: #e8b85c;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: .04em;
}

.relationship-intro-hero {
  position: relative;
  z-index: 1;
  width: calc(100% + 28px);
  height: 316px;
  margin: 1px -14px 0;
  overflow: hidden;
}

.relationship-intro-hero::before,
.relationship-intro-hero::after {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
}

.relationship-intro-hero::before {
  inset: 2% 4% 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(23, 103, 192, .16), transparent 64%);
  filter: blur(12px);
}

.relationship-intro-hero::after {
  left: 4%;
  bottom: 4%;
  width: 92%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(214, 157, 63, .22), transparent);
}

.relationship-intro-hero img {
  position: absolute;
  z-index: 2;
  top: -25px;
  left: 50%;
  display: block;
  width: 365px;
  height: 365px;
  max-width: none;
  transform: translateX(-50%);
  object-fit: contain;
  filter: saturate(1.05) contrast(1.03) drop-shadow(0 0 14px rgba(32, 115, 213, .16));
  pointer-events: none;
  user-select: none;
}

.relationship-hero-glow {
  position: absolute;
  z-index: 1;
  top: 19%;
  left: 51%;
  width: 78%;
  aspect-ratio: 1;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(34, 116, 207, .13), rgba(219, 163, 66, .05) 38%, transparent 69%);
  filter: blur(8px);
}

.relationship-feature-list {
  position: relative;
  z-index: 3;
  width: 100%;
  margin: -3px auto 0;
}

.relationship-feature {
  position: relative;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  align-items: center;
  min-height: 82px;
  margin: 0;
  padding: 9px 3px 10px;
  column-gap: 14px;
}

.relationship-feature::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(204, 145, 58, .2) 20%, rgba(204, 145, 58, .14) 80%, transparent 100%);
}

.relationship-feature-icon {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  color: #edc46b;
  border: 1px solid rgba(224, 168, 76, .82);
  border-radius: 50%;
  box-shadow: 0 0 12px rgba(224, 168, 76, .1), inset 0 0 9px rgba(224, 168, 76, .05);
}

.relationship-feature-icon svg {
  width: 29px;
  height: 29px;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.45;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.relationship-feature h2 {
  margin: 0;
  color: var(--relationship-gold);
  font-family: "Noto Serif SC", "Source Han Serif SC", "Songti SC", STSong, serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .02em;
}

.relationship-feature p {
  margin: 4px 0 0;
  color: var(--relationship-copy-soft);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.55;
}

.relationship-intro-cta {
  display: flex;
  width: calc(100% - 42px);
  height: 54px;
  min-height: 54px;
  margin: 21px auto 0;
  align-items: center;
  justify-content: center;
  gap: 14px;
  color: #15110b;
  border: 0;
  border-radius: 999px;
  outline: 0;
  background: linear-gradient(100deg, #ffe49a 0%, #f3c763 48%, #e2a846 100%);
  box-shadow: 0 8px 24px rgba(222, 163, 61, .24), 0 0 16px rgba(244, 201, 104, .16), inset 0 1px 0 rgba(255, 248, 212, .48);
  font-size: 21px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .08em;
  -webkit-tap-highlight-color: transparent;
}

.relationship-intro-cta svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.relationship-intro-cta:active { transform: translateY(1px); filter: brightness(.93); }
.relationship-intro-cta:focus-visible { outline: 2px solid #fff1b6; outline-offset: 3px; }

.relationship-privacy {
  position: relative;
  z-index: 2;
  padding-bottom: 3px;
  text-align: center;
}

.relationship-privacy h2 {
  display: inline-flex;
  margin: 17px 0 0;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #e7b85b;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
}

.relationship-privacy h2 svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.35;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.relationship-privacy p {
  margin: 7px 0 0;
  color: rgba(226, 225, 222, .78);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.65;
}

@media (max-width: 359px) {
  body.relationship-intro-page .app-shell { padding-right: 14px; padding-left: 14px; }
  .relationship-title-row h1 { font-size: 27px; }
  .relationship-intro-head > p { font-size: 14px; }
  .relationship-intro-hero { height: 286px; }
  .relationship-intro-hero img { top: -23px; width: 332px; height: 332px; }
  .relationship-feature { grid-template-columns: 46px minmax(0, 1fr); min-height: 76px; column-gap: 10px; }
  .relationship-feature-icon { width: 40px; height: 40px; }
  .relationship-feature-icon svg { width: 25px; height: 25px; }
  .relationship-feature h2 { font-size: 16px; }
  .relationship-feature p { font-size: 13px; }
  .relationship-intro-cta { width: calc(100% - 24px); font-size: 20px; }
}

@media (min-width: 400px) {
  .relationship-intro-hero { height: 326px; }
  .relationship-intro-hero img { top: -27px; width: 382px; height: 382px; }
  .relationship-feature { padding-right: 7px; padding-left: 7px; }
}

/* 深度生成报告展示页：只负责产品介绍，按钮继续进入既有生辰填写与解锁链路。 */
body.deep-intro-page {
  --deep-gold-light: #ffe6a0;
  --deep-gold: #efc46b;
  --deep-gold-dark: #b8792f;
  --deep-copy: rgba(238, 239, 241, .88);
  min-height: 100dvh;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 50% 31%, rgba(23, 89, 165, .22), transparent 31%),
    radial-gradient(circle at 82% 66%, rgba(13, 59, 112, .17), transparent 34%),
    radial-gradient(circle at 10% 83%, rgba(30, 65, 117, .15), transparent 31%),
    linear-gradient(180deg, #020814 0%, #031426 48%, #020814 100%);
}

body.deep-intro-page::before {
  opacity: .48;
  background-image:
    radial-gradient(circle, rgba(248, 211, 119, .82) 0 1px, transparent 1.45px),
    radial-gradient(circle, rgba(98, 163, 229, .68) 0 1px, transparent 1.5px);
  background-position: 22px 37px, 91px 126px;
  background-size: 157px 183px, 219px 251px;
  mask-image: linear-gradient(to bottom, #000 0%, #000 88%, transparent 100%);
}

body.deep-intro-page .app-shell {
  width: 100%;
  max-width: 430px;
  min-height: 100dvh;
  margin: 0 auto;
  padding: max(12px, env(safe-area-inset-top)) clamp(16px, 5.4vw, 23px) max(28px, env(safe-area-inset-bottom));
  overflow-x: hidden;
}

body.deep-intro-page #viewDeepIntro.deep-intro-view.active {
  position: relative;
  display: block;
  width: 100%;
  min-height: calc(100dvh - max(12px, env(safe-area-inset-top)) - max(28px, env(safe-area-inset-bottom)));
  overflow: visible;
}

.deep-intro-back {
  position: absolute;
  z-index: 8;
  top: 2px;
  left: -6px;
  display: grid;
  width: 48px;
  height: 48px;
  padding: 8px;
  place-items: center;
  color: #e9ba5d;
  border: 0;
  outline: 0;
  background: transparent;
  -webkit-tap-highlight-color: transparent;
}

.deep-intro-back svg {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.55;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.deep-intro-back:active { opacity: .66; }
.deep-intro-back:focus-visible { outline: 2px solid rgba(239, 196, 107, .82); outline-offset: 1px; }

.deep-intro-head {
  position: relative;
  z-index: 4;
  padding-top: 51px;
  text-align: center;
}

.deep-intro-head h1 {
  margin: 0;
  background: linear-gradient(180deg, #fff1b5 0%, #efc66d 49%, #bd7b30 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-family: "Noto Serif SC", "Source Han Serif SC", "Songti SC", STSong, serif;
  font-size: clamp(30px, 8.3vw, 35px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .06em;
  filter: drop-shadow(0 0 8px rgba(229, 169, 67, .17));
}

.deep-intro-head p {
  margin: 9px 0 0;
  color: #e5b65c;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: .06em;
}

.deep-intro-hero {
  position: relative;
  z-index: 2;
  width: calc(100% + 26px);
  height: 360px;
  margin: 1px -13px 0;
  overflow: hidden;
}

.deep-intro-hero::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 23px;
  left: 50%;
  width: 332px;
  height: 332px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(42, 117, 208, .15), rgba(9, 35, 70, .08) 48%, transparent 70%);
  filter: blur(6px);
}

.deep-orbit {
  position: absolute;
  z-index: 1;
  top: 30px;
  left: 50%;
  aspect-ratio: 1;
  transform: translateX(-50%);
  border: 1px solid rgba(224, 169, 71, .46);
  border-radius: 50%;
  box-shadow: inset 0 0 24px rgba(46, 117, 200, .08), 0 0 12px rgba(223, 169, 75, .05);
}

.deep-orbit::before,
.deep-orbit::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 1px;
  transform-origin: center;
  background: linear-gradient(90deg, transparent, rgba(222, 166, 69, .23), transparent);
}

.deep-orbit::after { transform: translate(-50%, -50%) rotate(60deg); }
.deep-orbit::before { transform: translate(-50%, -50%) rotate(-60deg); }
.deep-orbit-outer { width: 330px; }
.deep-orbit-middle { top: 49px; width: 292px; border-style: dashed; border-color: rgba(239, 192, 91, .38); }
.deep-orbit-inner { top: 73px; width: 244px; border-color: rgba(103, 170, 235, .32); }

.deep-orbit-star {
  position: absolute;
  z-index: 4;
  width: 7px;
  height: 7px;
  transform: rotate(45deg);
  background: #ffe7a0;
  box-shadow: 0 0 10px #f0b94e, 0 0 18px rgba(83, 158, 231, .45);
}

.deep-orbit-star-a { top: 61px; left: 20%; }
.deep-orbit-star-b { top: 34px; right: 26%; width: 5px; height: 5px; }
.deep-orbit-star-c { top: 148px; right: 10%; width: 6px; height: 6px; }

.deep-hero-glow {
  position: absolute;
  z-index: 3;
  top: 177px;
  left: 50%;
  width: 96px;
  height: 96px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 244, 190, .98) 0%, rgba(241, 179, 57, .55) 20%, rgba(56, 137, 220, .18) 49%, transparent 72%);
  filter: blur(2px);
  box-shadow: 0 0 34px rgba(241, 182, 62, .46);
}

.deep-intro-hero img {
  position: absolute;
  z-index: 4;
  top: 55px;
  left: 50%;
  display: block;
  width: 338px;
  height: 338px;
  max-width: none;
  transform: translateX(-50%) scale(1.05);
  object-fit: contain;
  filter: saturate(1.03) contrast(1.04) drop-shadow(0 20px 18px rgba(0, 0, 0, .46));
  pointer-events: none;
  user-select: none;
}

.deep-feature-list {
  position: relative;
  z-index: 5;
  width: 100%;
  margin: -2px auto 0;
}

.deep-feature {
  position: relative;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  min-height: 86px;
  padding: 10px 7px;
  align-items: center;
  column-gap: 15px;
}

.deep-feature::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(210, 151, 58, .21) 18%, rgba(210, 151, 58, .14) 82%, transparent);
}

.deep-feature:last-child::after { opacity: .55; }

.deep-feature-icon {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  color: var(--deep-gold);
  border: 1px solid rgba(231, 180, 84, .82);
  border-radius: 50%;
  box-shadow: 0 0 13px rgba(229, 172, 72, .1), inset 0 0 8px rgba(229, 172, 72, .06);
}

.deep-feature-icon svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.45;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.deep-feature h2 {
  margin: 0;
  color: var(--deep-gold);
  font-family: "Noto Serif SC", "Source Han Serif SC", "Songti SC", STSong, serif;
  font-size: 18px;
  font-weight: 650;
  line-height: 1.35;
  letter-spacing: .03em;
}

.deep-feature p {
  margin: 5px 0 0;
  color: var(--deep-copy);
  font-size: 14px;
  line-height: 1.55;
}

.deep-intro-cta {
  display: flex;
  width: calc(100% - 30px);
  height: 54px;
  min-height: 54px;
  margin: 27px auto 0;
  align-items: center;
  justify-content: center;
  color: #17130c;
  border: 0;
  border-radius: 999px;
  outline: 0;
  background: linear-gradient(100deg, #ffe69e 0%, #f3c667 52%, #dda144 100%);
  box-shadow: 0 8px 25px rgba(222, 163, 61, .25), 0 0 18px rgba(245, 202, 103, .18), inset 0 1px 0 rgba(255, 249, 219, .56);
  font-size: 21px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .07em;
  -webkit-tap-highlight-color: transparent;
}

.deep-intro-cta:active { transform: translateY(1px); filter: brightness(.93); }
.deep-intro-cta:focus-visible { outline: 2px solid #fff2bd; outline-offset: 3px; }

@media (max-width: 359px) {
  body.deep-intro-page .app-shell { padding-right: 14px; padding-left: 14px; }
  .deep-intro-head { padding-top: 49px; }
  .deep-intro-head h1 { font-size: 29px; }
  .deep-intro-head p { font-size: 14px; }
  .deep-intro-hero { height: 325px; }
  .deep-orbit-outer { width: 296px; }
  .deep-orbit-middle { width: 263px; }
  .deep-orbit-inner { width: 220px; }
  .deep-intro-hero img { top: 45px; width: 310px; height: 310px; }
  .deep-hero-glow { top: 162px; }
  .deep-feature { grid-template-columns: 46px minmax(0, 1fr); min-height: 78px; column-gap: 11px; }
  .deep-feature-icon { width: 41px; height: 41px; }
  .deep-feature-icon svg { width: 25px; height: 25px; }
  .deep-feature h2 { font-size: 16.5px; }
  .deep-feature p { font-size: 13px; }
  .deep-intro-cta { width: calc(100% - 20px); font-size: 20px; }
}

@media (min-width: 400px) {
  .deep-intro-hero { height: 374px; }
  .deep-orbit-outer { width: 348px; }
  .deep-orbit-middle { width: 306px; }
  .deep-orbit-inner { width: 258px; }
  .deep-intro-hero img { width: 354px; height: 354px; }
  .deep-feature { padding-right: 9px; padding-left: 9px; }
}

/* 双人关系镜像结果页：只在结果视图生效，领取弹窗复用既有人工收款链路。 */
body.relationship-result-page {
  --relation-result-gold: #e7b85d;
  --relation-result-gold-light: #ffe59a;
  --relation-result-copy: rgba(241, 242, 244, .9);
  min-height: 100dvh;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 8% 58%, rgba(26, 80, 146, .28), transparent 30rem),
    radial-gradient(circle at 93% 14%, rgba(16, 70, 132, .2), transparent 24rem),
    linear-gradient(180deg, #020814 0%, #031526 48%, #020814 100%);
}

body.relationship-result-page::before {
  opacity: .5;
  background-image:
    radial-gradient(circle, rgba(244,210,122,.9) 0 1px, transparent 1.45px),
    radial-gradient(circle, rgba(105,174,235,.78) 0 1px, transparent 1.55px);
  background-position: 17px 29px, 91px 121px;
  background-size: 143px 167px, 219px 247px;
  mask-image: linear-gradient(to bottom, #000 0%, #000 86%, transparent 100%);
}

body.relationship-result-page .app-shell {
  width: 100%;
  max-width: 430px;
  min-height: 100dvh;
  margin: 0 auto;
  padding: max(12px, env(safe-area-inset-top)) 12px max(24px, env(safe-area-inset-bottom));
  overflow-x: hidden;
}

body.relationship-result-page #viewRelationshipResult.relationship-result-view.active {
  display: block;
  width: 100%;
  margin: 0 auto;
  animation: none;
}

.relationship-result-nav {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  align-items: center;
  min-height: 58px;
  margin-bottom: 12px;
}

.relationship-result-back,
.relationship-result-share {
  display: grid;
  width: 44px;
  height: 44px;
  padding: 8px;
  place-items: center;
  color: var(--relation-result-gold);
  border: 0;
  border-radius: 0;
  outline: 0;
  background: transparent;
  -webkit-tap-highlight-color: transparent;
}

.relationship-result-back svg,
.relationship-result-share svg {
  width: 29px;
  height: 29px;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.relationship-result-back:active,
.relationship-result-share:active { opacity: .62; }
.relationship-result-back:focus-visible,
.relationship-result-share:focus-visible { outline: 2px solid rgba(239,195,105,.8); outline-offset: 0; }

.relationship-result-title {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}

.relationship-result-title h1 {
  margin: 0;
  background: linear-gradient(180deg, #fff0b2 0%, #edc369 52%, #c98a34 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-family: "Noto Serif SC", "Source Han Serif SC", "Songti SC", STSong, SimSun, serif;
  font-size: clamp(25px, 7.2vw, 31px);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: .04em;
  white-space: nowrap;
  text-shadow: 0 0 22px rgba(235,185,79,.09);
}

.relationship-result-people {
  display: grid;
  grid-template-columns: minmax(92px, 116px) minmax(55px, 1fr) minmax(92px, 116px);
  align-items: center;
  gap: 2px;
  width: 100%;
  margin: 14px auto 22px;
  padding: 0 5px;
}

.relationship-person {
  display: grid;
  justify-items: center;
  gap: 9px;
  min-width: 0;
}

.relationship-avatar {
  position: relative;
  display: block;
  width: clamp(88px, 27vw, 112px);
  aspect-ratio: 1;
  overflow: hidden;
  border: 1.5px solid rgba(226,164,56,.96);
  border-radius: 50%;
  background: #061425;
  box-shadow: 0 0 24px rgba(40,113,194,.22), inset 0 0 22px rgba(233,177,68,.08);
}

.relationship-avatar img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 290%;
  height: 290%;
  max-width: none;
  object-fit: contain;
}

.relationship-avatar-self img { transform: translate(-34%, -46%); }
.relationship-avatar-other img { transform: translate(-63%, -46%); }

.relationship-person strong {
  color: var(--relation-result-gold);
  font-family: "Noto Serif SC", "Songti SC", STSong, SimSun, serif;
  font-size: 20px;
  font-weight: 700;
}

.relationship-connector {
  display: grid;
  grid-template-columns: 1fr 44px 1fr;
  align-items: center;
  margin-top: -27px;
}

.relationship-connector > i {
  display: block;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(231,180,78,.82));
}
.relationship-connector > i:last-child { transform: scaleX(-1); }
.relationship-connector > span {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  color: var(--relation-result-gold);
  border: 1px solid rgba(230,178,72,.8);
  border-radius: 50%;
  background: rgba(3,15,29,.92);
  box-shadow: 0 0 17px rgba(229,174,63,.15);
}
.relationship-connector svg {
  width: 29px;
  height: 29px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.relationship-analysis-card {
  position: relative;
  padding: 22px 18px 18px;
  overflow: hidden;
  border: 1px solid rgba(220,160,70,.48);
  border-radius: 18px;
  background:
    radial-gradient(circle at 50% 8%, rgba(32,90,151,.17), transparent 21rem),
    rgba(5,20,38,.72);
  box-shadow: inset 0 1px 0 rgba(255,232,175,.035), 0 22px 48px rgba(0,0,0,.22);
  backdrop-filter: blur(6px);
}

.relationship-mode-label {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin-bottom: 20px;
  color: var(--relation-result-gold);
  font-family: "Noto Serif SC", "Songti SC", STSong, SimSun, serif;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .06em;
}

.relationship-mode-label i {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(228,174,71,.7));
}
.relationship-mode-label i:last-child { transform: scaleX(-1); }

.relationship-analysis-card > h2 {
  margin: 0;
  background: linear-gradient(180deg, #fff1b2, #e6b34f 62%, #c98833);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-family: "Noto Serif SC", "Source Han Serif SC", "Songti SC", STSong, SimSun, serif;
  font-size: clamp(29px, 8.3vw, 36px);
  line-height: 1.3;
  letter-spacing: .02em;
  text-align: center;
}

.relationship-summary {
  margin: 14px auto 0;
  color: var(--relation-result-copy);
  font-size: 16px;
  line-height: 1.78;
  text-align: center;
}

.relationship-hour-notice {
  margin: 10px auto 0;
  padding: 8px 10px;
  color: rgba(245,207,124,.92);
  border-radius: 8px;
  background: rgba(220,160,70,.08);
  font-size: 12px;
  line-height: 1.55;
  text-align: center;
}
.relationship-hour-notice:empty { display: none; }

.relationship-score-list {
  display: grid;
  gap: 15px;
  margin: 25px 0 24px;
}

.relationship-score {
  display: grid;
  grid-template-columns: minmax(92px, 114px) minmax(60px, 1fr) 45px;
  align-items: center;
  gap: 9px;
}

.relationship-score > span {
  color: #efc875;
  font-family: "Noto Serif SC", "Songti SC", STSong, SimSun, serif;
  font-size: 16px;
  font-weight: 700;
  white-space: nowrap;
}

.relationship-score > i {
  position: relative;
  display: block;
  height: 7px;
  overflow: visible;
  border-radius: 999px;
  background: rgba(141,152,162,.2);
}

.relationship-score > i > b {
  position: relative;
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #ca8b37, #f3ca6e 72%, #fff1a8);
  box-shadow: 0 0 10px rgba(242,196,92,.38);
  transition: width .65s ease-out;
}
.relationship-score > i > b::after {
  content: "";
  position: absolute;
  right: -3px;
  top: 50%;
  width: 7px;
  height: 7px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: #fff2b1;
  box-shadow: 0 0 10px #f5ca6b;
}

.relationship-score > strong {
  color: #f3cd78;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 20px;
  font-weight: 500;
  text-align: right;
}

.relationship-point-section {
  padding: 19px 5px 17px;
  border-top: 1px solid rgba(226,170,70,.22);
}
.relationship-point-section h3 {
  margin: 0 0 10px;
  color: var(--relation-result-gold-light);
  font-family: "Noto Serif SC", "Songti SC", STSong, SimSun, serif;
  font-size: 21px;
  font-weight: 700;
}
.relationship-point-section ul {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.relationship-point-section li {
  position: relative;
  padding-left: 18px;
  color: var(--relation-result-copy);
  font-size: 15px;
  line-height: 1.72;
}
.relationship-point-section li::before {
  content: "";
  position: absolute;
  top: .7em;
  left: 1px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #dfa844;
  box-shadow: 0 0 7px rgba(231,181,78,.5);
}

.relationship-report-cta {
  width: 100%;
  min-height: 58px;
  margin-top: 7px;
  padding: 12px 18px;
  color: #1d1608;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(100deg, #fff0a7 0%, #e1a841 56%, #ffe597 100%);
  box-shadow: 0 8px 26px rgba(225,168,65,.23), inset 0 1px 0 rgba(255,255,255,.55);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: .04em;
}
.relationship-report-cta:active { transform: translateY(1px); filter: brightness(.94); }
.relationship-report-cta:focus-visible { outline: 2px solid #fff0ac; outline-offset: 3px; }

.relationship-unlock-dialog {
  width: min(92vw, 410px);
  max-height: min(92dvh, 760px);
  padding: 0;
  overflow: auto;
  color: var(--text);
  border: 1px solid rgba(226,176,78,.55);
  border-radius: 22px;
  background: #061426;
  box-shadow: 0 28px 80px rgba(0,0,0,.62), 0 0 35px rgba(222,165,63,.1);
}
.relationship-unlock-dialog::backdrop { background: rgba(0, 4, 10, .87); backdrop-filter: blur(4px); }
.relationship-unlock-card { position: relative; padding: 30px 22px 24px; text-align: center; }
.relationship-unlock-card h2 {
  margin: 3px 42px 9px;
  color: #ffe397;
  font-family: "Noto Serif SC", "Songti SC", STSong, SimSun, serif;
  font-size: 25px;
}
.relationship-unlock-card > p { margin: 0 auto 16px; color: rgba(231,234,239,.82); font-size: 14px; line-height: 1.7; }
.relationship-code-card {
  margin: 15px 0 13px;
  padding: 15px;
  border: 1px solid rgba(225,177,78,.28);
  border-radius: 15px;
  background: rgba(1,8,17,.55);
}
.relationship-code-card span { display: block; color: rgba(232,235,240,.7); font-size: 13px; }
.relationship-code-card strong { display: block; margin-top: 7px; color: #ffe5a0; font-size: clamp(27px, 8vw, 36px); letter-spacing: .07em; }
.relationship-unlock-card .primary-btn { min-height: 54px; font-size: 17px; }
.relationship-unlock-card .qr-box { width: min(58vw, 220px); margin-top: 17px; }
.relationship-unlock-card small { display: block; color: rgba(224,228,235,.68); font-size: 12px; line-height: 1.55; }
.relationship-unlock-card .relationship-unlock-note { margin-top: 14px; color: rgba(237,203,128,.77); font-size: 12px; }
.relationship-member-price { display: block; margin-top: 5px; color: #ffe29a; font-family: Georgia,"Songti SC",serif; font-size: 30px; }
.relationship-member-benefits { margin: 0 auto 16px; padding: 12px 14px; border: 1px solid rgba(237,203,128,.2); border-radius: 12px; color: rgba(231,234,239,.78); background: rgba(237,203,128,.06); font-size: 13px; line-height: 1.65; text-align: left; }

@media (max-width: 359px) {
  body.relationship-result-page .app-shell { padding-right: 9px; padding-left: 9px; }
  .relationship-result-title h1 { font-size: 24px; }
  .relationship-result-people { grid-template-columns: 88px minmax(48px, 1fr) 88px; padding: 0 2px; }
  .relationship-avatar { width: 84px; }
  .relationship-connector { grid-template-columns: 1fr 38px 1fr; }
  .relationship-connector > span { width: 38px; height: 38px; }
  .relationship-analysis-card { padding-right: 14px; padding-left: 14px; }
  .relationship-analysis-card > h2 { font-size: 28px; }
  .relationship-summary { font-size: 14px; }
  .relationship-score { grid-template-columns: 88px minmax(50px, 1fr) 40px; gap: 7px; }
  .relationship-score > span { font-size: 14px; }
  .relationship-score > strong { font-size: 18px; }
  .relationship-point-section li { font-size: 14px; }
}