:root {
  --bg: #f4f7fb;
  --bg-page: #eef3f8;
  --surface: #ffffff;
  --surface-warm: #fffdf7;
  --soft: #eef3f8;
  --soft-rose: #fff1f5;
  --soft-blue: #eaf1ff;
  --line: #d8e1ec;
  --ink: #253040;
  --muted: #667085;
  --primary: #be123c;
  --primary-2: #e11d48;
  --primary-dark: #7f1d1d;
  --accent: #2563eb;
  --gold: #f59e0b;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --shadow-card: 0 16px 36px rgba(37, 48, 64, .08);
  --shadow-action: 0 16px 32px rgba(190, 18, 60, .24);
  --font: "Microsoft JhengHei", "PingFang TC", Arial, sans-serif;
  --menu-panel-top: 82px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-size: 18px;
  background: linear-gradient(180deg, #f7faff 0%, var(--bg-page) 100%);
  color: var(--ink);
  font-family: var(--font);
  letter-spacing: 0;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

button,
input,
textarea,
select {
  font: inherit;
}

button {
  cursor: pointer;
}

img {
  max-width: 100%;
}

[hidden] {
  display: none !important;
}

.visually-hidden {
  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;
}

.phone-shell {
  width: min(100%, 390px);
  min-height: 100vh;
  margin: 0 auto;
  background: var(--bg);
  box-shadow: 0 0 0 1px rgba(37, 48, 64, .08);
}

@media (min-width: 760px) {
  .phone-shell {
    width: min(calc(100% - 48px), 1180px);
  }
}

/* Header */
.topbar {
  position: relative;
  z-index: 40;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
  min-height: 71px;
  padding: 10px 14px 12px;
  background: rgba(255, 255, 255, .96);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(14px);
}

.brand-card {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 6px 10px 6px 6px;
  border: 1px solid rgba(49, 95, 77, .18);
  border-radius: 999px;
  background: var(--surface-warm);
  text-decoration: none;
  box-shadow: 0 10px 24px rgba(36, 79, 99, .08);
}

.logo {
  display: grid;
  place-items: center;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  color: #fff;
  font-weight: 900;
  overflow: hidden;
}

.logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: inherit;
}

.brand-title {
  display: grid;
  gap: 1px;
  min-width: 0;
  line-height: 1.1;
}

.brand-title strong {
  color: var(--ink);
  font-size: 14px;
  white-space: nowrap;
}

.brand-title small {
  color: var(--muted);
  font-size: 11px;
  white-space: nowrap;
}

.top-actions {
  position: relative;
  z-index: 58;
  display: flex;
  align-items: center;
  gap: 8px;
}

.login {
  display: grid;
  place-items: center;
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--soft-rose);
  color: var(--primary);
  font-size: 13px;
  font-weight: 900;
}

.menu {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  width: 40px;
  min-width: 40px;
  height: 40px;
  overflow: hidden;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  box-shadow: 0 10px 22px rgba(37, 48, 64, .08);
  transform-origin: right center;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
  will-change: width, transform;
}

.menu-label {
  display: block;
  width: 0;
  overflow: hidden;
  color: currentColor;
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
  opacity: 0;
  white-space: nowrap;
  will-change: width, opacity, transform;
}

.menu-icon {
  position: relative;
  flex: 0 0 18px;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  color: var(--primary);
}

.menu-icon svg {
  display: block;
  width: 18px;
  height: 18px;
  overflow: visible;
}

.menu-bar {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  transform-box: fill-box;
  transform-origin: center;
  will-change: transform, opacity;
}

.menu:hover,
.menu:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 14px 26px rgba(37, 48, 64, .16);
}

.menu:focus-visible,
.hero-cta:focus-visible,
.free-btn:focus-visible,
.price-btn:focus-visible,
.submit-btn:focus-visible,
.footer-action:focus-visible,
.bottom-cta button:focus-visible {
  outline: 3px solid rgba(190, 18, 60, .28);
  outline-offset: 2px;
}

.menu[aria-expanded="true"] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 22px;
  gap: 6px;
  justify-content: stretch;
  padding: 0 10px 0 14px;
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
  box-shadow: 0 14px 26px rgba(190, 18, 60, .22);
}

.menu[aria-expanded="true"] .menu-label {
  width: auto !important;
  min-width: 0;
  color: #fff;
  text-align: center;
  text-shadow: 0 1px 2px rgba(108, 15, 45, .22);
  opacity: 1;
}

.menu[aria-expanded="true"] .menu-icon {
  justify-self: end;
  width: 22px;
  color: #fff;
}

.menu-backdrop {
  position: fixed;
  inset: 0;
  z-index: 32;
  background: rgba(15, 23, 42, .28);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
}

.menu-panel {
  position: fixed;
  top: var(--menu-panel-top);
  left: 50%;
  right: auto;
  z-index: 56;
  display: grid;
  gap: 12px;
  width: min(296px, calc(100vw - 32px));
  max-height: min(620px, calc(100vh - var(--menu-panel-top) - 18px));
  overflow: auto;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 22px 44px rgba(37, 48, 64, .18);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  overscroll-behavior: contain;
  translate: -50% 0;
  transform-origin: top center;
  will-change: transform, opacity;
}

.menu-group {
  display: grid;
  gap: 6px;
  padding: 10px;
  border: 1px solid rgba(210, 220, 232, .78);
  border-radius: 16px;
  background: rgba(248, 251, 255, .78);
}

.menu-group-title {
  padding: 0 4px 4px;
  color: var(--primary);
  font-size: 12px;
  font-weight: 900;
}

.menu-panel a,
.menu-panel button {
  position: relative;
  min-height: 52px;
  display: grid;
  gap: 3px;
  align-content: center;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-radius: 12px;
  background: rgba(255, 255, 255, .82);
  color: var(--ink);
  font: inherit;
  text-decoration: none;
  text-align: left;
  font-weight: 900;
}

.menu-panel a small,
.menu-panel button small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
}

.menu-panel a::before,
.menu-panel button::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 12px;
  bottom: 12px;
  width: 4px;
  border-radius: 99px;
  background: var(--primary);
  opacity: 0;
  transition: opacity .18s ease;
}

.menu-panel a:hover,
.menu-panel a:focus-visible,
.menu-panel button:hover,
.menu-panel button:focus-visible {
  background: var(--soft-rose);
  color: var(--primary);
  outline: 0;
}

.menu-panel a:hover small,
.menu-panel a:focus-visible small,
.menu-panel button:hover small,
.menu-panel button:focus-visible small {
  color: var(--ink);
}

.menu-panel a:hover::before,
.menu-panel a:focus-visible::before,
.menu-panel button:hover::before,
.menu-panel button:focus-visible::before {
  opacity: 1;
}

@media (min-width: 760px) {
  .topbar {
    grid-template-columns: auto 1fr auto;
    min-height: 73px;
    padding: 12px 28px;
  }

  .top-actions {
    grid-column: 3;
  }
}

/* Layout */
.panel {
  position: relative;
  overflow: hidden;
}

main {
  display: flex;
  flex-direction: column;
}

.hero { order: 1; }
.form-section { order: 2; }
.value-section { order: 3; }
.booking-section { order: 4; }
.stats-section { order: 5; }
.stories-section { order: 6; }
.pain-section { order: 7; }
.scenario-section { order: 8; }
.faq-section { order: 9; }
.teacher-section { order: 10; }
.result-section { order: 11; }

.section {
  padding: 22px 16px;
}

.section h2 {
  margin: 0 0 10px;
  color: var(--ink);
  font-size: 24px;
  line-height: 1.35;
}

.section h2.compact-title {
  font-size: 22px;
  line-height: 1.25;
  white-space: nowrap;
}

.eyebrow {
  margin: 0 0 6px;
  color: var(--primary);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .14em;
}

.lead {
  margin: 0 0 12px;
  color: var(--muted);
  font-weight: 700;
  line-height: 1.65;
}

@media (min-width: 760px) {
  .section {
    padding: 34px 56px;
  }

  .section h2 {
    font-size: 28px;
  }
}

/* Hero */
.hero {
  background: var(--bg);
  padding-bottom: 12px;
}

.hero-art {
  position: relative;
  margin: 10px 12px 0;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(37, 48, 64, .1);
}

.hero-art img {
  display: block;
  width: 100%;
  height: min(120vw, 460px);
  object-fit: cover;
  object-position: center top;
}

.petals {
  display: none;
}

.hero-content {
  position: relative;
  z-index: 3;
  width: calc(100% - 24px);
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: -54px auto 0;
  padding: 12px;
  border: 1px solid rgba(216, 225, 236, .9);
  border-radius: var(--radius-sm);
  background: linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(255, 241, 245, .93));
  box-shadow: 0 12px 28px rgba(37, 48, 64, .12);
  color: var(--ink);
}

.badge {
  justify-self: start;
  width: max-content;
  max-width: 100%;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--soft-blue);
  color: var(--accent);
  font-size: 11px;
  font-weight: 900;
}

.divination-note {
  padding: 8px 0 9px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.divination-note b {
  display: block;
  color: var(--primary);
  font-size: 20px;
  line-height: 1.25;
}

.divination-note p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.45;
}

.trust {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin: 0;
}

.trust span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 8px 6px;
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  font-size: 12px;
  font-weight: 900;
  line-height: 1.25;
  text-align: center;
  box-shadow: inset 0 0 0 1px var(--line);
}

.hero-cta,
.free-btn,
.price-btn {
  display: grid;
  place-items: center;
  min-height: 42px;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  color: #fff;
  font-weight: 900;
  text-decoration: none;
  box-shadow: var(--shadow-action);
}

.hero-cta {
  margin-top: 0;
}

.hero-tail {
  display: grid;
  gap: 4px;
  margin: 8px 12px 0;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--primary);
  border-radius: 12px;
  background: rgba(255, 255, 255, .86);
  box-shadow: 0 10px 24px rgba(37, 48, 64, .06);
}

.hero-tail h2 {
  margin: 0;
  color: var(--ink);
  font-size: 16px;
  line-height: 1.35;
}

.hero-tail p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.hero-tail a {
  display: none;
}

.hero-tail .hero-pay-cta {
  display: grid;
  place-items: center;
  min-height: 40px;
  margin-top: 4px;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  color: #fff;
  font-size: 14px;
  font-weight: 900;
  text-decoration: none;
  box-shadow: 0 12px 24px rgba(190, 18, 60, .2);
}

@media (min-width: 760px) {
  .hero-art img {
    height: min(46vw, 560px);
  }

  .hero-content {
    width: min(560px, calc(100% - 96px));
    min-height: 0;
    margin: -74px 48px 0;
    padding: 16px;
  }

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

  .trust span {
    min-height: 40px;
  }

  .hero-tail {
    grid-template-columns: minmax(220px, .75fr) 1fr auto;
    align-items: center;
    gap: 10px;
    margin: 10px 48px 0;
    padding: 11px 14px;
  }

  .hero-tail .hero-pay-cta {
    min-width: 160px;
    margin-top: 0;
    padding: 0 16px;
  }

  .hero-tail h2 {
    font-size: 18px;
  }
}

/* Shared cards and actions */
.free-booking-card,
.booking-card,
.review-summary,
.story-card,
.card-form,
.teacher-card,
.credential-grid button,
.faq-list details,
.result-head,
.question-card,
.free-report,
.unlock-panel,
.app-report-card,
.paid-list .app-section-card,
.hexagram-card,
.insight-card,
.stats-grid article {
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.offer,
.teacher-section,
.stories-section,
.pain-section,
.value-section,
.scenario-section {
  background: var(--surface);
}

.stats-section,
.form-section,
.faq-section,
.site-footer {
  background: var(--soft);
}

.pain-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 9px;
}

.scenario-grid,
.value-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 9px;
}

.preview-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 10px;
}

.preview-tabs button {
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font-size: 14px;
  font-weight: 900;
}

.preview-tabs button.active {
  border-color: var(--primary);
  background: var(--primary);
  color: #fff;
}

.pain-grid article,
.scenario-grid article,
.value-grid article {
  display: grid;
  gap: 5px;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: linear-gradient(135deg, #fff, #f8fbff);
  box-shadow: var(--shadow-soft);
}

.pain-grid article {
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 9px 11px;
}

.pain-grid b,
.scenario-grid small,
.value-grid b {
  color: var(--primary);
  font-size: 15px;
  font-weight: 900;
}

.value-grid small {
  width: fit-content;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(190, 18, 60, .08);
  color: var(--primary);
  font-size: 12px;
  font-weight: 800;
}

.scenario-grid small {
  justify-self: end;
  font-size: 0;
}

.scenario-grid small::after {
  color: var(--primary);
  font-size: 15px;
  font-weight: 900;
}

.scenario-grid article:nth-child(1) small::after {
  content: "感情";
}

.scenario-grid article:nth-child(2) small::after {
  content: "工作";
}

.scenario-grid article:nth-child(3) small::after {
  content: "財務";
}

.value-grid em {
  width: fit-content;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
}

.pain-grid span,
.scenario-grid p,
.value-grid span {
  color: var(--ink);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.5;
}

.pain-grid span {
  line-height: 1.35;
}

.report-preview-grid article {
  position: relative;
  overflow: hidden;
  border-color: rgba(190, 18, 60, .24);
  background: linear-gradient(180deg, #fff 0%, #fff7f9 100%);
}

.report-preview-grid .featured-preview {
  border-width: 2px;
  background: linear-gradient(180deg, #fff 0%, #fff0f4 100%);
}

.report-preview-grid article:not(:first-child)::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 44%;
  background: linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,.9));
  pointer-events: none;
}

.report-preview-list {
  position: relative;
  display: grid;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: var(--surface);
}

.report-preview-list article {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
  min-height: 0;
  padding: 11px 12px;
  border-bottom: 1px solid var(--line);
}

.report-preview-list article:last-child {
  border-bottom: 0;
}

.report-preview-list small {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: rgba(190, 18, 60, .08);
  color: var(--primary);
  font-size: 12px;
  font-weight: 900;
}

.report-preview-list b {
  display: block;
  color: var(--ink);
  font-size: 15px;
  font-weight: 900;
  line-height: 1.35;
}

.report-preview-list span {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.45;
}

.report-preview-list em {
  position: relative;
  z-index: 1;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  white-space: nowrap;
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
}

.report-preview-list .featured-preview {
  background: #fff7f9;
}

.report-preview-list article:nth-of-type(n+4)::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 46%;
  background: linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,.94));
  pointer-events: none;
}

.report-preview-list article:nth-of-type(4) {
  opacity: .88;
}

.report-preview-list article:nth-of-type(5) {
  opacity: .7;
}

.report-preview-list article:nth-of-type(6) {
  opacity: .52;
}

.preview-lock-hint {
  position: sticky;
  bottom: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 12px 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .72), #fff 38%);
  color: var(--ink);
  font-size: 14px;
  font-weight: 900;
  pointer-events: none;
}

.preview-lock-hint b {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  font-size: 13px;
}

.preview-lock-hint span {
  color: var(--ink);
}

@media (max-width: 420px) {
  .report-preview-list article {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .report-preview-list em {
    grid-column: 2;
    justify-self: start;
  }
}

.scenario-grid h3 {
  margin: 0;
  color: var(--ink);
  font-size: 18px;
  line-height: 1.3;
}

.scenario-grid p {
  margin: 0;
  color: var(--muted);
}

.scenario-grid button {
  justify-self: start;
  min-height: 36px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  font-weight: 900;
  box-shadow: 0 12px 24px rgba(190, 18, 60, .18);
}

.value-grid article {
  min-height: 96px;
}

.booking-stack {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.free-booking-card,
.booking-card {
  display: grid;
  gap: 10px;
  padding: 14px;
  border-radius: var(--radius-md);
}

.free-booking-card {
  position: relative;
}

.free-booking-card::before {
  content: "FREE";
  position: absolute;
  top: 14px;
  right: 14px;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
}

.free-booking-card span,
.booking-card span {
  color: var(--primary);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .1em;
}

.free-booking-card h3 {
  margin: 0;
  color: var(--ink);
  font-size: 21px;
  line-height: 1.25;
}

.free-booking-card p,
.booking-card small {
  margin: 0;
  color: var(--muted);
  font-weight: 700;
  line-height: 1.65;
}

.booking-main {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 5px 12px;
  align-items: center;
}

.booking-card b {
  grid-column: 2;
  grid-row: 1 / 3;
  color: var(--primary);
  font-size: 28px;
  line-height: 1;
  white-space: nowrap;
}

.booking-card small {
  grid-column: 1;
  text-align: left;
}

.service-product-card ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.service-product-card li {
  position: relative;
  padding-left: 18px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 800;
}

.service-product-card li::before {
  content: "";
  position: absolute;
  top: .62em;
  left: 2px;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--primary);
}

.price-btn {
  min-height: 46px;
  box-shadow: 0 14px 28px rgba(190, 18, 60, .22);
}

@media (min-width: 900px) {
  .booking-stack {
    grid-template-columns: .95fr 1.05fr;
  }

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

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

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

  .price-btn {
    min-height: 54px;
  }
}

/* Stats */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.stats-grid article {
  display: grid;
  place-items: center;
  min-height: 126px;
  padding: 18px;
  border-radius: 20px;
  text-align: center;
}

.stats-grid b {
  color: var(--primary);
  font-size: 36px;
  line-height: 1;
  font-weight: 900;
}

.stats-grid span {
  margin-top: 8px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 900;
}

.helped-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 16px;
  padding: 18px;
  border-radius: var(--radius-xl);
  background: var(--soft-blue);
  color: var(--accent);
  text-align: center;
}

.helped-banner b {
  color: var(--ink);
  font-size: 16px;
  line-height: 1.45;
}

@media (min-width: 760px) {
  .stats-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .stats-grid article {
    min-height: 150px;
  }

  .stats-grid b {
    font-size: 46px;
  }
}

/* Reviews */
.stories-section {
  color: #202124;
  font-family: Arial, "Microsoft JhengHei", sans-serif;
}

.review-summary {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px 14px;
  align-items: center;
  margin-top: 18px;
  padding: 16px;
  border-radius: var(--radius-md);
}

.review-summary strong {
  color: #202124;
  font-size: 44px;
  line-height: 1;
  font-weight: 500;
}

.review-summary small {
  display: block;
  color: #5f6368;
  font-size: 13px;
  line-height: 1.4;
  text-align: left;
}

.review-summary ul {
  grid-column: 1 / -1;
  display: grid;
  gap: 6px;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}

.review-summary li {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 8px;
  align-items: center;
  color: #5f6368;
  font-size: 12px;
}

.review-summary li span {
  height: 8px;
  border-radius: 999px;
  background: #f1f3f4;
  overflow: hidden;
}

.review-summary li i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--gold);
}

.review-stars {
  color: var(--gold);
  font-size: 16px;
  letter-spacing: 0;
  line-height: 1;
}

.review-carousel {
  margin-top: 14px;
}

.review-carousel.is-stacked {
  --review-stack-height: 188px;
  display: grid;
  gap: 10px;
}

.review-flip-stack {
  position: relative;
  min-height: var(--review-stack-height);
  perspective: 900px;
  isolation: isolate;
  cursor: pointer;
  touch-action: manipulation;
}

.review-flip-stack .story-card {
  position: absolute;
  top: 0;
  right: 34px;
  left: 0;
  width: auto;
  margin: 0;
  animation: none;
  transform-origin: top left;
  backface-visibility: hidden;
  will-change: transform, opacity;
  border-color: #c9d5e2;
  box-shadow: 0 6px 18px rgba(60, 64, 67, .08);
}

.review-flip-stack .story-card.is-active {
  pointer-events: auto;
  border-color: #b9c8d8;
  box-shadow: 0 8px 18px rgba(60, 64, 67, .1);
}

.review-flip-stack .story-card:not(.is-active) {
  pointer-events: none;
  user-select: none;
}

.review-flip-stack .story-card[data-stack-slot="1"] {
  border-color: #9fb3c8;
  outline: 1px solid rgba(96, 125, 153, .18);
  background: #fbfdff;
  box-shadow: 0 9px 18px rgba(60, 64, 67, .14);
}

.review-flip-stack .story-card[data-stack-slot="2"] {
  border-color: #b2c3d4;
  outline: 1px solid rgba(96, 125, 153, .14);
  background: #f8fbff;
  box-shadow: 0 7px 14px rgba(60, 64, 67, .12);
}

.review-flip-stack .story-card[data-stack-slot="3"] {
  border-color: #c0cedc;
  outline: 1px solid rgba(96, 125, 153, .1);
  background: #f6f9fd;
  box-shadow: 0 5px 10px rgba(60, 64, 67, .1);
}

.review-carousel.is-stacked .story-controls {
  margin-top: 2px;
}

@media (hover: hover) and (pointer: fine) {
  .review-flip-stack:hover .story-card.is-active {
    box-shadow: 0 18px 44px rgba(33, 43, 54, .14);
  }
}

.review-panel-block {
  color: #202124;
  font-family: Arial, "Microsoft JhengHei", sans-serif;
}

.review-list {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.story-card {
  display: grid;
  gap: 7px;
  min-height: 144px;
  padding: 14px 16px 12px;
  border: 1px solid #dadce0;
  border-radius: 8px;
  background: #fff;
  box-shadow: none;
}

.story-profile {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}

.story-avatar {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  background: #f4edf0;
  box-shadow: 0 0 0 2px #fff, 0 8px 18px rgba(30, 45, 64, .12);
  flex: 0 0 auto;
}

.story-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

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

.story-profile b {
  display: block;
  color: #202124;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
}

.story-meta,
.review-time {
  color: #5f6368;
  font-size: 12px;
  line-height: 1.35;
}

.story-menu {
  align-self: start;
  color: #5f6368;
  font-size: 20px;
  line-height: 1;
}

.review-topline {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-left: 52px;
  font-size: 12px;
}

.story-card blockquote {
  margin: 0;
  color: #202124;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.story-like-button {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  margin-top: 2px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 17px;
  background: var(--surface);
  color: #3c4043;
  font-size: 13px;
  font-weight: 500;
}

.story-like-button[aria-pressed="true"] {
  border-color: var(--primary);
  background: var(--soft-rose);
  color: var(--primary);
}

.story-controls {
  display: grid;
  grid-template-columns: 38px 1fr 38px;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}

.story-controls > button {
  width: 38px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface);
  color: #3c4043;
  font-size: 22px;
  line-height: 1;
}

.story-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
}

.story-dots button {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: #cbd5e1;
}

.story-dots button.active {
  width: 22px;
  background: var(--primary);
}

@media (min-width: 760px) {
  .review-summary {
    grid-template-columns: auto minmax(150px, 1fr) 1.2fr;
  }

  .review-summary ul {
    grid-column: auto;
  }

  .story-card {
    min-height: 150px;
    padding: 16px 18px 14px;
  }

  .story-card blockquote {
    font-size: 15px;
  }
}

/* Google-style review density */
.stories-section,
.review-panel-block,
.app-result-reviews {
  color: #202124;
  font-family: Arial, "Microsoft JhengHei", sans-serif;
}

.review-panel-block {
  display: grid;
  gap: 12px;
}

.review-panel-block .compact-title {
  margin: 0;
}

.review-summary,
.app-result-review-summary {
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr);
  align-items: center;
  gap: 8px 14px;
  margin: 10px 0 0;
  padding: 16px;
  border: 1px solid #dadce0;
  border-radius: 8px;
  background: #fff;
  box-shadow: none;
}

.review-summary strong {
  color: #202124;
  font-size: 52px;
  line-height: .95;
  font-weight: 400;
}

.review-summary small {
  display: block;
  margin-top: 3px;
  color: #5f6368;
  font-size: 13px;
  line-height: 1.3;
  text-align: left;
}

.review-summary ul {
  grid-column: 1 / -1;
  display: grid;
  gap: 5px;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}

.review-summary li {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  color: #5f6368;
  font-size: 12px;
  line-height: 1;
}

.review-summary li span {
  height: 8px;
  border-radius: 999px;
  background: #edf0f2;
  overflow: hidden;
}

.review-summary li i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #f9ab00;
}

.review-stars {
  color: #f9ab00;
  font-size: 15px;
  letter-spacing: 0;
  line-height: 1;
  white-space: nowrap;
}

.review-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 252px), 1fr));
  gap: 10px;
  margin-top: 2px;
}

.story-card,
.app-result-review-card {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 7px;
  min-height: 166px;
  height: 166px;
  margin: 0;
  padding: 14px 16px 12px;
  border: 1px solid #dadce0;
  border-radius: 8px;
  background: #fff;
  box-shadow: none;
  overflow: hidden;
}

.story-profile {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 22px;
  align-items: center;
  gap: 12px;
}

.story-avatar,
.app-result-review-card .story-avatar {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  background: #f1f3f4;
  box-shadow: none;
  flex: 0 0 auto;
}

.story-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.story-identity {
  min-width: 0;
}

.story-profile b {
  display: block;
  overflow: hidden;
  color: #202124;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.story-menu {
  align-self: start;
  color: #5f6368;
  font-size: 20px;
  line-height: 1;
  text-align: right;
}

.review-topline {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 8px;
  padding-left: 52px;
  font-size: 12px;
  line-height: 1.2;
}

.review-time {
  min-width: 0;
  overflow: hidden;
  color: #5f6368;
  font-size: 12px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.review-user-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-left: 52px;
  margin-top: -2px;
}

.review-user-metrics span {
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(225, 29, 72, .08);
  color: #9f1239;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.4;
}

.story-card blockquote,
.app-result-review-card blockquote {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
  margin: 0;
  color: #202124;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.45;
}

.review-carousel:not(.review-carousel-compact),
.review-carousel:not(.review-carousel-compact) .review-flip-stack,
.story-controls {
  display: none;
}

.review-compact-stack-list {
  align-items: start;
}

.review-carousel-compact {
  display: block;
  min-width: 0;
  margin: 0;
}

.review-carousel-compact .review-flip-stack {
  --review-stack-height: 166px;
  display: block;
  min-height: 166px;
  height: 166px;
  overflow: hidden;
  cursor: pointer;
}

.review-carousel-compact .review-flip-stack .story-card {
  right: 12px;
  left: 0;
  width: 100%;
  min-height: 166px;
  height: 166px;
  box-shadow: none;
}

.app-result-reviews {
  display: grid;
  gap: 12px;
  padding: 2px 0;
}

@media (min-width: 760px) {
  .review-summary,
  .app-result-review-summary {
    grid-template-columns: 92px 136px minmax(180px, 1fr);
    gap: 10px 16px;
    padding: 18px 20px;
  }

  .review-summary ul {
    grid-column: auto;
    margin-top: 0;
  }

  .review-summary strong {
    font-size: 54px;
  }
}

@media (max-width: 420px) {
  .review-summary,
  .app-result-review-summary {
    grid-template-columns: 76px minmax(0, 1fr);
    padding: 14px;
  }

  .review-summary strong {
    font-size: 48px;
  }

  .review-list {
    gap: 8px;
  }

  .story-card,
  .app-result-review-card {
    min-height: 160px;
    height: 160px;
    padding: 13px 14px 11px;
  }
}

/* Form */
.stage-switcher {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 16px;
}

.stage-step {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
}

.stage-step b {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--soft);
  color: var(--primary);
  font-size: 11px;
}

.stage-step.is-active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

.stage-step.is-active b {
  background: #fff;
  color: var(--primary);
}

.stage-step.is-complete {
  background: var(--soft-blue);
  color: var(--accent);
  border-color: rgba(37, 99, 235, .25);
}

.stage-step.is-complete b {
  background: var(--accent);
  color: #fff;
}

.card-form {
  position: relative;
  display: grid;
  gap: 9px;
  padding: 12px;
  border: 1px solid rgba(37, 48, 64, .12);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 18px 42px rgba(37, 48, 64, .08);
}

.card-form::before {
  content: "單一事件起卦";
  display: inline-grid;
  justify-self: start;
  margin: 0 0 2px;
  padding: 5px 9px;
  border: 1px solid rgba(190, 18, 60, .18);
  border-radius: 999px;
  background: var(--soft-rose);
  color: var(--primary);
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  letter-spacing: 0;
}

.form-block {
  position: relative;
  display: grid;
  gap: 7px;
  padding: 0 0 10px 34px;
  border-bottom: 1px solid var(--line);
}

.form-block-final {
  border-bottom: 0;
  padding-bottom: 0;
}

.form-step {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  margin-left: -34px;
  gap: 8px;
}

.form-step b {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid rgba(190, 18, 60, .14);
  border-radius: 999px;
  background: var(--soft-rose);
  color: var(--primary);
  font-size: 13px;
  font-weight: 900;
}

.form-step span {
  color: var(--ink);
  font-size: 16px;
  font-weight: 900;
  line-height: 1.35;
}

.form-block p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

label,
fieldset {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--primary);
  font-size: 14px;
  font-weight: 900;
}

input,
textarea,
select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  color: var(--ink);
  padding: 12px;
  font-size: 16px;
  line-height: 1.55;
}

textarea {
  min-height: 132px;
  resize: vertical;
}

input:focus,
textarea:focus,
select:focus {
  outline: 3px solid rgba(190, 18, 60, .16);
  border-color: var(--primary);
}

small {
  color: var(--muted);
  text-align: right;
}

.prompt-helper {
  display: grid;
  gap: 8px;
  padding: 11px;
  border: 2px solid rgba(190, 18, 60, .18);
  border-radius: 12px;
  background: linear-gradient(135deg, #fff, #fff1f4);
  box-shadow: 0 12px 24px rgba(190, 18, 60, .08);
}

.prompt-helper-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.prompt-helper-head b {
  color: var(--primary);
  font-size: 16px;
}

.prompt-helper-head button,
.prompt-group-tabs button,
.prompt-chip-list button,
.unlock-panel button {
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  font-weight: 900;
}

.prompt-helper-head button {
  min-width: 56px;
  height: 32px;
  border-color: rgba(190, 18, 60, .24);
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  font-size: 13px;
}

.prompt-helper > p {
  margin: 0;
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.45;
}

.prompt-group-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.prompt-group-tabs button {
  min-height: 36px;
  border-radius: 10px;
  font-size: 13px;
}

.prompt-group-tabs button[aria-selected="true"],
.prompt-chip-list button:hover,
.prompt-chip-list button:focus-visible {
  border-color: var(--primary);
  background: var(--soft-rose);
  color: var(--primary);
}

.prompt-chip-list {
  display: grid;
  gap: 8px;
}

.prompt-chip-list button {
  min-height: 48px;
  padding: 11px 13px;
  border-radius: 12px;
  background: #fff;
  font-size: 14px;
  line-height: 1.45;
  text-align: left;
}

.number-cast-fields > p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.number-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.number-row label {
  color: var(--primary);
  font-size: 13px;
  text-align: center;
}

.number-row input {
  padding: 11px 6px;
  text-align: center;
  color: var(--primary);
  font-size: 20px;
  font-weight: 900;
}

.casting-stage {
  position: relative;
  display: none;
  gap: 12px;
  overflow: hidden;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .95), rgba(234, 241, 255, .92)),
    radial-gradient(circle at 50% 20%, rgba(190, 18, 60, .1), transparent 38%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .82), 0 12px 28px rgba(36, 79, 99, .08);
}

.casting-stage::before,
.casting-stage::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.casting-stage::before {
  inset: -38% -18%;
  background:
    radial-gradient(circle at 18% 28%, rgba(37, 99, 235, .14), transparent 28%),
    radial-gradient(circle at 82% 18%, rgba(190, 18, 60, .16), transparent 24%),
    radial-gradient(circle at 50% 88%, rgba(245, 158, 11, .12), transparent 30%);
  opacity: 0;
  transform: scale(.86) rotate(-8deg);
}

.casting-stage::after {
  top: 0;
  bottom: 0;
  left: -45%;
  width: 38%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .72), transparent);
  transform: skewX(-16deg);
  opacity: 0;
}

.card-form.is-casting .casting-stage {
  display: grid;
}

.card-form.is-casting .casting-stage::before {
  animation: castingAura 4.8s ease-in-out infinite;
}

.card-form.is-casting .casting-stage::after {
  animation: castingSweep 2.7s ease-in-out infinite;
}

.casting-numbers {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.casting-numbers span {
  position: relative;
  display: grid;
  place-items: center;
  gap: 2px;
  min-height: 58px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--primary);
  overflow: hidden;
}

.casting-numbers span::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 20%, rgba(37, 99, 235, .14), transparent 78%);
  opacity: 0;
  transform: translateX(-80%);
}

.casting-numbers span.is-lit::after {
  animation: castingNumberSweep 1.15s ease-out both;
}

.casting-numbers small {
  font-size: 11px;
  text-align: center;
}

.casting-numbers b {
  font-size: 23px;
  line-height: 1;
}

.casting-lines {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 7px;
  width: min(196px, 100%);
  margin: 0 auto;
  padding: 4px 12px;
}

.casting-lines::before {
  content: "";
  position: absolute;
  inset: 3px auto 3px 50%;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(36, 79, 99, .18), transparent);
  transform: translateX(-50%);
}

.casting-lines i {
  position: relative;
  display: block;
  height: 8px;
  border-radius: 999px;
  background: transparent;
  transform: scaleX(.16);
  transform-origin: center;
  opacity: .28;
  will-change: transform, opacity, filter;
}

.casting-lines i::before,
.casting-lines i::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #fecdd3, var(--primary), #fecdd3);
  box-shadow: 0 0 12px rgba(190, 18, 60, .16);
}

.casting-lines i.is-yang::before {
  left: 0;
  width: 100%;
}

.casting-lines i.is-yang::after {
  display: none;
}

.casting-lines i.is-yin::before {
  left: 0;
  width: 42%;
}

.casting-lines i.is-yin::after {
  right: 0;
  width: 42%;
}

.casting-lines i.is-moving {
  box-shadow: 0 0 0 1px rgba(245, 158, 11, .35), 0 0 14px rgba(245, 158, 11, .22);
}

.casting-lines i.is-moving::before,
.casting-lines i.is-moving::after {
  background: linear-gradient(90deg, #fde68a, var(--primary), #fde68a);
}

.casting-progress {
  position: relative;
  z-index: 1;
  overflow: hidden;
  height: 7px;
  border-radius: 999px;
  background: rgba(36, 79, 99, .1);
  transform-origin: center;
}

.casting-progress i {
  display: block;
  width: 8%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), var(--primary), var(--accent));
  box-shadow: 0 0 18px rgba(36, 79, 99, .24);
  transition: width .72s ease;
}

.casting-steps {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 5px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.casting-steps li {
  min-height: 30px;
  display: grid;
  place-items: center;
  padding: 4px 3px;
  border: 1px solid rgba(36, 79, 99, .12);
  border-radius: 8px;
  background: rgba(255, 255, 255, .72);
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-align: center;
  line-height: 1.2;
}

.casting-steps li.is-active {
  border-color: rgba(36, 79, 99, .34);
  background: #fff;
  color: var(--primary);
  box-shadow: 0 8px 18px rgba(36, 79, 99, .12);
}

.casting-steps li.is-complete {
  color: var(--primary);
}

.casting-stage p {
  position: relative;
  z-index: 1;
  margin: 0;
  color: var(--primary);
  text-align: center;
  font-size: 13px;
  font-weight: 900;
}

.submit-btn {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  justify-items: center;
  gap: 10px;
  min-height: 54px;
  padding: 0 18px;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  color: #fff;
  text-align: center;
  font-weight: 900;
  box-shadow: var(--shadow-action);
}

.submit-btn::after {
  content: none;
}

.message {
  min-height: 22px;
  margin: 0;
  color: var(--primary);
  text-align: center;
  font-size: 13px;
}

@media (min-width: 760px) {
  .card-form {
    grid-template-columns: minmax(230px, .72fr) 1fr;
    align-items: start;
    gap: 12px;
    padding: 14px;
  }

  .card-form::before,
  .message {
    grid-column: 1 / -1;
  }

  .form-block {
    border-bottom: 0;
    padding-bottom: 0;
  }

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

@media (max-width: 360px) {
  .prompt-group-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .number-row {
    gap: 6px;
  }
}

@media (max-width: 759px) {
  .form-section {
    padding: 24px 14px 112px;
  }

  .stage-switcher {
    gap: 4px;
    margin-bottom: 14px;
    padding: 4px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: rgba(255, 255, 255, .72);
  }

  .stage-step {
    min-height: 36px;
    border: 0;
    background: transparent;
    font-size: 13px;
  }

  .stage-step.is-active {
    box-shadow: 0 10px 22px rgba(190, 18, 60, .16);
  }

  .card-form {
    gap: 0;
    padding: 0;
    border-color: rgba(216, 225, 236, .95);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 16px 34px rgba(37, 48, 64, .1);
    overflow: hidden;
  }

  .card-form::before {
    margin: 14px 14px 4px;
  }

  .form-block {
    gap: 10px;
    padding: 14px 14px 16px;
    border-bottom-color: rgba(216, 225, 236, .95);
  }

  .form-block-final {
    padding-top: 12px;
    border-bottom: 0;
  }

  .form-step {
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 10px;
    margin-left: 0;
  }

  .form-step b {
    width: 32px;
    height: 32px;
    font-size: 12px;
  }

  .form-step span {
    font-size: 18px;
  }

  .form-block p {
    color: var(--muted);
    font-size: 14px;
    line-height: 1.65;
  }

  .card-form label,
  .number-cast-fields {
    gap: 8px;
  }

  .card-form input,
  .card-form textarea {
    min-height: 48px;
    border-radius: 12px;
    background: #fff;
  }

  .card-form textarea {
    min-height: 136px;
  }

  .prompt-helper {
    gap: 10px;
    margin-top: 4px;
    padding: 12px;
    border-width: 1px;
    border-radius: 14px;
    background: #fff;
    box-shadow: none;
  }

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

  .prompt-helper-head b {
    color: var(--ink);
    font-size: 15px;
    line-height: 1.35;
  }

  .prompt-helper-head button {
    height: 34px;
  }

  .prompt-helper > p {
    color: var(--muted);
    font-weight: 700;
    line-height: 1.55;
  }

  .prompt-group-tabs {
    gap: 7px;
  }

  .prompt-group-tabs button {
    min-height: 38px;
  }

  .prompt-chip-list {
    gap: 7px;
  }

  .prompt-chip-list button {
    min-height: 46px;
    padding: 10px 11px;
    border-radius: 10px;
  }

  .number-cast-fields {
    padding: 12px;
    border: 1px solid rgba(216, 225, 236, .95);
    border-radius: 14px;
    background: #f8fafc;
  }

  .number-cast-fields legend {
    padding: 0 2px;
    color: var(--ink);
    font-size: 16px;
    font-weight: 900;
  }

  .number-cast-fields > p {
    font-weight: 700;
    line-height: 1.55;
  }

  .number-row label {
    gap: 6px;
    color: var(--ink);
    font-size: 12px;
  }

  .number-row input {
    min-height: 46px;
    border-radius: 10px;
    background: #fff;
    font-size: 18px;
  }

  .confirm-details {
    border-radius: 12px;
    background: #fff;
  }

  .submit-btn {
    min-height: 56px;
    border-radius: 12px;
  }

  .message {
    padding: 0 14px 14px;
  }
}

@media (min-width: 760px) {
  .card-form {
    gap: 0;
    padding: 0;
    overflow: hidden;
  }

  .card-form::before {
    margin: 16px 18px 0;
  }

  .form-block {
    padding: 18px;
    border-bottom: 0;
  }

  .form-block:first-of-type {
    border-right: 1px solid rgba(216, 225, 236, .95);
  }

  .form-block-final {
    padding-bottom: 18px;
  }
}

@media (max-width: 340px) {
  .form-section {
    padding-inline: 12px;
  }

  .form-step span {
    font-size: 17px;
  }

  .prompt-helper-head {
    grid-template-columns: 1fr;
  }

  .prompt-helper-head button {
    justify-self: start;
  }

  .number-row {
    gap: 6px;
  }

  .number-row input {
    padding-inline: 4px;
    font-size: 17px;
  }
}

/* FAQ and teacher */
.faq-list {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.faq-list details {
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.faq-list summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  color: var(--ink);
  font-weight: 900;
  cursor: pointer;
  list-style: none;
}

.faq-list summary::-webkit-details-marker {
  display: none;
}

.faq-list summary::after {
  content: "+";
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--soft-rose);
  color: var(--primary);
  flex: 0 0 auto;
}

.faq-list details[open] summary::after {
  content: "-";
  background: var(--primary);
  color: #fff;
}

.faq-list p {
  margin: 0;
  padding: 0 18px 18px;
  color: var(--muted);
  line-height: 1.8;
}

.faq-block h2.compact-title {
  margin: 0;
}

.app-result-faq {
  display: grid;
  padding: 2px 0;
}

.app-result-faq h2.compact-title {
  white-space: normal;
}

.teacher-card {
  display: grid;
  gap: 16px;
  margin-top: 18px;
  padding: 14px;
  border-radius: var(--radius-xl);
}

.teacher-profile-block h2.compact-title {
  margin: 0;
  color: var(--ink);
  font-size: 22px;
  line-height: 1.25;
}

.app-result-teacher {
  display: grid;
  gap: 0;
  padding: 2px 0;
}

.app-result-teacher .teacher-card {
  margin-top: 12px;
  border-radius: 14px;
}

.app-result-teacher .credential-grid {
  margin-top: 12px;
}

.teacher-main {
  display: block;
  width: 100%;
  border-radius: 18px;
  background: var(--soft);
}

.teacher-copy {
  display: grid;
  gap: 12px;
  padding: 4px 4px 8px;
}

.teacher-copy h3 {
  margin: 0;
  color: var(--ink);
  font-size: 22px;
  line-height: 1.35;
}

.teacher-copy p {
  margin: 0;
  color: var(--muted);
  line-height: 1.85;
}

.teacher-highlight {
  display: inline-block;
  padding: 0 4px;
  border-radius: 7px;
  background: rgba(200, 16, 70, .08);
  color: var(--primary);
  font-weight: 950;
  white-space: nowrap;
  word-break: keep-all;
  overflow-wrap: normal;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  text-wrap: nowrap;
}

.nowrap-text {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: nowrap;
  white-space: nowrap;
  word-break: keep-all;
  overflow-wrap: normal;
  text-wrap: nowrap;
}

.teacher-copy ul {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.teacher-copy li {
  position: relative;
  padding: 10px 12px 10px 38px;
  border-radius: 14px;
  background: var(--surface-warm);
  color: var(--ink);
  font-weight: 900;
  line-height: 1.55;
}

.teacher-copy li::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 18px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--primary);
}

.credential-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.credential-grid button {
  display: grid;
  gap: 8px;
  padding: 0 0 10px;
  border-radius: var(--radius-lg);
  color: var(--primary);
  font-weight: 900;
  overflow: hidden;
  text-align: center;
}

.credential-grid img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center;
  background: var(--soft);
}

.credential-grid span {
  padding: 0 8px;
  font-size: 13px;
  line-height: 1.35;
}

.teacher-note {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.7;
}

@media (min-width: 860px) {
  .teacher-card {
    grid-template-columns: .85fr 1fr;
    align-items: center;
    padding: 22px;
  }
}

/* Report */
body.report-mode main > section:not(#result) {
  display: none !important;
}

body.report-mode #result {
  display: grid !important;
  gap: 14px;
  min-height: calc(100vh - 80px);
  padding-top: 28px;
  background: linear-gradient(180deg, #fff, var(--bg));
}

.result-section {
  display: grid;
  gap: 14px;
}

.report-cover {
  display: grid;
  gap: 12px;
  padding: 0 0 18px;
  border-bottom: 1px solid var(--line);
}

.report-cover h2 {
  margin: 0;
  color: var(--ink);
  font-size: 29px;
  line-height: 1.2;
}

.report-cover p {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.8;
}

.report-lock-note {
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink) !important;
  font-weight: 800;
}

.result-head {
  position: relative;
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: 10px;
  padding: 14px;
  border-radius: 12px;
  overflow: hidden;
}

.result-head::before {
  content: "免費重點";
  grid-column: 1 / -1;
  width: max-content;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--soft-rose);
  color: var(--primary);
  font-size: 11px;
  font-weight: 900;
}

.result-head > div {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 14px;
  background: var(--soft-rose);
  color: var(--primary);
  font-size: 30px;
  font-weight: 900;
}

.result-head h2 {
  margin: 0;
  color: var(--primary);
  font-size: 22px;
  line-height: 1.38;
}

.result-head p {
  grid-column: 2;
  margin: 0;
  color: var(--muted);
}

.result-head .ok {
  grid-column: 1 / -1;
  padding: 9px;
  border-radius: var(--radius-md);
  background: var(--soft-blue);
  color: var(--accent);
}

.question-card,
.free-report,
.unlock-panel {
  display: grid;
  gap: 10px;
  padding: 16px;
  border-radius: 12px;
}

.question-card b {
  color: var(--primary);
}

.question-card p,
.free-report p,
.unlock-panel p {
  margin: 0;
  color: var(--muted);
  line-height: 1.8;
}

.free-report h3,
.unlock-panel h3 {
  margin: 0;
  color: var(--ink);
  font-size: 20px;
}

.free-report h3 span {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-right: 8px;
  border-radius: 12px;
  background: var(--soft-rose);
  color: var(--primary);
}

.hexagram-reveal {
  display: block;
  perspective: 900px;
}

.chart-details {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.chart-details summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
  padding: 0 14px;
  color: var(--accent);
  font-weight: 900;
  cursor: pointer;
  list-style: none;
}

.chart-details summary::-webkit-details-marker {
  display: none;
}

.chart-details summary::after {
  content: "⌄";
  color: var(--primary);
  font-size: 18px;
  transition: transform .2s ease;
}

.chart-details[open] summary::after {
  transform: rotate(180deg);
}

.chart-details .hexagram-reveal,
.chart-details .cast-lines {
  margin: 0 12px 12px;
}

.app-report-card,
.paid-list .app-section-card {
  border-radius: 12px;
  padding: 14px;
}

.app-card-header,
.paid-list .app-section-card header {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 12px;
}

.app-card-header span,
.section-mark {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 12px;
  background: var(--soft-rose);
  color: var(--primary);
  font-weight: 900;
}

.app-card-header b,
.paid-list .app-section-card header b {
  color: var(--ink);
  font-size: 19px;
  line-height: 1.35;
}

.app-hexagram-flow {
  display: grid;
  gap: 10px;
}

.app-hexagram-step {
  display: grid;
  gap: 6px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
}

.app-hexagram-step small,
.app-hexagram-step em,
.paid-list .app-section-card header small {
  color: var(--primary);
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
  text-align: left;
}

.app-hexagram-step strong {
  color: var(--primary);
  font-size: 18px;
}

.app-hexagram-step p,
.paid-list .app-section-card p,
.app-guide-box p {
  margin: 0;
  color: var(--muted);
  line-height: 1.75;
}

.app-flow-arrow {
  display: none;
}

.mini-hexagram {
  display: grid;
  gap: 4px;
  width: 70px;
}

.mini-hexagram i {
  display: block;
  height: 5px;
  border-radius: 99px;
  background: var(--primary);
}

.mini-hexagram .yin {
  background: linear-gradient(90deg, var(--primary) 0 42%, transparent 42% 58%, var(--primary) 58% 100%);
}

.app-guide-box {
  display: grid;
  gap: 5px;
  margin-top: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--soft-blue);
}

.app-guide-box b {
  color: var(--accent);
}

.cast-lines {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  list-style: none;
}

.cast-lines li {
  min-width: 0;
}

.liuyao-title {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 8px;
  align-items: center;
}

.liuyao-title span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 12px;
  background: var(--soft-rose);
  color: var(--primary);
  font-weight: 900;
}

.liuyao-title b {
  color: var(--ink);
  font-size: 18px;
}

.liuyao-title small {
  grid-column: 2;
  text-align: left;
}

.liuyao-header,
.liuyao-row {
  display: grid;
  grid-template-columns: 48px 76px 1fr 1fr minmax(48px, auto);
  gap: 7px;
  align-items: center;
  min-height: 46px;
  padding: 8px;
  border-radius: 10px;
}

.liuyao-header {
  background: var(--soft);
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.liuyao-row {
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink);
  font-size: 13px;
}

.liuyao-row.is-focus {
  background: var(--soft-blue);
  border-color: rgba(37, 99, 235, .35);
}

.line-label {
  color: var(--primary);
  font-size: 12px;
  font-weight: 900;
}

.yao-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 18px;
}

.yao-line i {
  display: block;
  height: 7px;
  border-radius: 999px;
  background: var(--primary);
}

.yao-line.is-yang i:first-child {
  width: 72px;
}

.yao-line.is-yang i:nth-child(2) {
  display: none;
}

.yao-line.is-yin i {
  width: 31px;
}

.yao-line.is-moving i {
  background: var(--gold);
  box-shadow: 0 0 0 3px rgba(245, 158, 11, .16);
}

.liuyao-row em {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  font-style: normal;
}

.liuyao-row em i {
  display: inline-flex;
  padding: 2px 5px;
  border-radius: 999px;
  background: var(--soft-rose);
  color: var(--primary);
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}

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

.key-chip {
  position: relative;
  display: grid;
  gap: 3px;
  min-height: 74px;
  padding: 12px;
  border: 1px solid rgba(37, 99, 235, .16);
  border-radius: 12px;
  background: var(--soft-blue);
  color: var(--accent);
}

.key-chip span {
  color: var(--primary);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
}

.key-chip b {
  color: var(--primary);
  font-size: 16px;
  line-height: 1.25;
}

.key-chip small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
  text-align: left;
}

.locked-insights,
.paid-list {
  display: grid;
  gap: 14px;
}

.insight-card {
  position: relative;
  display: grid;
  gap: 12px;
  min-height: 190px;
  padding: 18px;
  border-radius: 18px;
  overflow: hidden;
}

.insight-card h3 {
  margin: 0;
  color: var(--ink);
  font-size: 21px;
  line-height: 1.35;
}

.insight-card p {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.8;
}

.insight-card.is-locked p {
  max-height: 74px;
  overflow: hidden;
  filter: blur(3px);
  opacity: .42;
  user-select: none;
}

.paid-mask {
  display: none;
}

.insight-card.is-locked .paid-mask {
  position: absolute;
  inset: auto 18px 18px;
  display: grid;
  place-items: center;
  gap: 4px;
  padding: 12px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .72), #fff);
  color: var(--primary);
  font-weight: 900;
  text-align: center;
}

.paid-mask b {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--soft-rose);
  color: var(--primary);
  font-size: 0;
}

.paid-mask b::before {
  content: "鎖";
  font-size: 17px;
}

.paid-list .app-section-card {
  display: grid;
  gap: 10px;
}

.paid-list .app-section-card.is-locked p {
  color: var(--muted);
  opacity: .78;
}

.unlock-panel button {
  min-height: 48px;
  border-radius: 14px;
}

#paymentButton {
  border: 0;
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  color: #fff;
  box-shadow: var(--shadow-action);
}

#lineButton {
  border: 0;
  background: #06c755;
  color: #fff;
  box-shadow: 0 16px 32px rgba(0, 124, 57, .22);
}

#lineButton:hover,
#lineButton:focus-visible {
  background: #05b84f;
}

.unlocked {
  padding: 14px;
  border-radius: 10px;
  background: var(--soft-blue);
  color: var(--accent);
  font-weight: 900;
  text-align: center;
}

@media (min-width: 760px) {
  .app-hexagram-flow {
    grid-template-columns: 1fr auto 1fr auto 1fr;
    align-items: stretch;
  }

  .app-flow-arrow {
    display: grid;
    place-items: center;
    color: var(--primary);
    font-size: 22px;
    font-style: normal;
    font-weight: 900;
  }

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

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

  .insight-card {
    min-height: 250px;
  }
}

@media (max-width: 420px) {
  .liuyao-header {
    display: none;
  }

  .liuyao-row {
    grid-template-columns: 44px 78px 1fr;
  }

  .liuyao-row small,
  .liuyao-row em {
    grid-column: 3;
  }
}

/* Footer and fixed action */
.site-footer {
  display: grid;
  gap: 14px;
  padding: 20px 16px 72px;
  border-top: 1px solid var(--line);
  color: var(--muted);
}

.footer-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  width: 100%;
}

.service-proof {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.footer-service-card {
  display: grid;
  gap: 9px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: linear-gradient(180deg, #fff 0%, #f7fbff 100%);
  box-shadow: 0 10px 24px rgba(37, 48, 64, .06);
}

.service-proof span {
  display: grid;
  gap: 4px;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.service-proof b {
  color: var(--primary);
  font-size: 12px;
}

.footer-lookup-card {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid rgba(198, 17, 68, .22);
  border-radius: 12px;
  background: #fff;
}

.footer-lookup-card > b {
  color: var(--ink);
  font-size: 18px;
}

.footer-lookup-card p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}

.footer-lookup-note {
  display: grid;
  gap: 3px;
}

.footer-lookup-note span {
  display: block;
}

.footer-lookup-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.footer-lookup-row input {
  width: 100%;
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 15px;
}

@media (max-width: 460px) {
  .footer-lookup-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .footer-lookup-row button {
    min-height: 46px;
  }
}

.footer-lookup-row button {
  min-width: 72px;
  padding: 0 16px;
  border: 0;
  border-radius: 10px;
  background: var(--primary);
  color: #fff;
  font: inherit;
  font-weight: 900;
}

.footer-lookup-card small {
  min-height: 18px;
  color: var(--primary);
  font-size: 13px;
  font-weight: 800;
}

.footer-action {
  position: relative;
  display: grid;
  gap: 4px;
  width: 100%;
  min-height: 70px;
  padding: 11px 13px 11px 42px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  text-align: left;
  box-shadow: 0 9px 20px rgba(37, 48, 64, .06);
}

.footer-action::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 15px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--primary);
  box-shadow: inset 0 0 0 5px var(--soft-rose);
}

.footer-action.primary {
  border-color: transparent;
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  color: #fff;
  box-shadow: var(--shadow-action);
}

.footer-action.primary::before {
  background: #fff;
  box-shadow: inset 0 0 0 5px rgba(255, 255, 255, .34);
}

.footer-action.consult {
  min-height: 104px;
  overflow: hidden;
  padding: 15px 15px 15px 50px;
  border-color: transparent;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #fff;
  box-shadow: 0 14px 30px rgba(190, 18, 60, .22);
}

.footer-action.consult::before {
  left: 16px;
  top: 20px;
  width: 20px;
  height: 20px;
  background: #fff;
  box-shadow: inset 0 0 0 6px rgba(190, 18, 60, .2);
}

.footer-action.consult em {
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 1;
  padding: 3px 8px;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 999px;
  background: rgba(255, 255, 255, .14);
  color: #fff;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}

.footer-action.consult b {
  padding-right: 78px;
}

.footer-action b {
  color: inherit;
  font-size: 15px;
  line-height: 1.25;
}

.footer-action span,
.footer-action small {
  color: inherit;
  font-size: 12px;
  line-height: 1.4;
  opacity: .82;
}

.footer-action.consult span,
.footer-action.consult small {
  color: #ffe4ec;
  opacity: 1;
}

.footer-action.consult small {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: max-content;
  margin-top: 3px;
  padding: 7px 12px 7px 8px;
  border: 0;
  border-radius: 999px;
  background: #06c755;
  box-shadow: 0 8px 18px rgba(0, 124, 57, .28);
  color: #fff;
  font-weight: 900;
}

.footer-action.consult small::before {
  content: "LINE";
  display: inline-grid;
  place-items: center;
  min-width: 32px;
  height: 20px;
  padding: 0 5px;
  border-radius: 7px;
  background: #fff;
  color: #06c755;
  font-size: 10px;
  line-height: 1;
  font-weight: 900;
}

.footer-legal {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

.footer-legal button {
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, .65);
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.site-footer p {
  margin: 0;
  color: var(--muted);
  text-align: center;
  font-size: 12px;
}

.footer-service-title {
  margin: 0;
  color: var(--ink);
  font-size: 20px;
  text-align: center;
}

@media (min-width: 640px) {
  .service-proof {
    grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  }

  .footer-actions {
    grid-template-columns: 1fr 1fr;
  }

  .footer-action.consult {
    grid-column: 1 / -1;
  }
}

.submit-checklist {
  display: grid;
  gap: 6px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.submit-checklist span {
  display: grid;
  place-items: center;
  min-height: 34px;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--soft);
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}

.confirm-details {
  border: 1px solid rgba(190, 18, 60, .22);
  border-radius: 14px;
  background: #fff7f9;
  overflow: hidden;
}

.confirm-details summary {
  min-height: 42px;
  padding: 10px 12px;
  color: var(--ink);
  font-weight: 900;
  cursor: pointer;
}

.submit-btn:disabled {
  cursor: progress;
  opacity: .78;
}

.confirm-details div {
  display: grid;
  gap: 6px;
  padding: 0 12px 12px;
}

.confirm-details p,
.confirm-details ul {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.7;
}

.confirm-details ul {
  padding-left: 18px;
}

@media (max-width: 420px) {
  .submit-checklist {
    grid-template-columns: 1fr;
  }
}

/* Floating CTA is controlled by JS with [hidden] and .is-visible. */
.bottom-cta {
  position: fixed;
  left: 50%;
  bottom: 0;
  z-index: 45;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  width: min(560px, calc(100vw - 20px));
  min-height: 76px;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  border: 1px solid var(--line);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 16px 42px rgba(37, 48, 64, .14);
  transform: translateX(-50%) translateY(14px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}

.bottom-cta.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

.bottom-cta-copy {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.bottom-cta-copy span {
  color: var(--primary);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
}

.bottom-cta-copy b {
  color: var(--ink);
  font-size: 16px;
  line-height: 1.3;
}

.bottom-cta-copy small {
  color: var(--muted);
  font-size: 12px;
  text-align: left;
}

.bottom-cta button {
  position: relative;
  display: grid;
  grid-template-columns: auto auto;
  grid-template-areas: "note note" "label price";
  align-items: center;
  justify-content: center;
  column-gap: 8px;
  row-gap: 1px;
  min-width: 170px;
  min-height: 52px;
  padding: 7px 14px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  color: #fff;
  box-shadow: var(--shadow-action);
  white-space: nowrap;
}

.bottom-cta button:has(.offer-badge-bounce) {
  padding: 15px 14px 7px;
}

.offer-badge-bounce {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  background: #fff;
  color: var(--primary);
  font-style: normal;
  font-size: 12px;
  font-weight: 950;
  line-height: 1;
  box-shadow: 0 8px 18px rgba(190, 18, 60, .18);
  animation: offerBadgeBounce 1.2s ease-in-out infinite;
  transform-origin: center;
}

.bottom-cta button .offer-badge-bounce {
  position: absolute;
  top: -9px;
  right: 12px;
}

.bottom-cta button small {
  grid-area: note;
  color: #ffe4ec;
  font-size: 11px;
  font-weight: 900;
  text-align: left;
}

.bottom-cta button del {
  text-decoration-thickness: 2px;
}

.bottom-cta button span {
  grid-area: label;
  color: #fff;
  font-size: 15px;
  font-weight: 950;
}

.bottom-cta button b {
  grid-area: price;
  color: #fff;
  font-size: 19px;
  line-height: 1;
}

@media (max-width: 520px) {
  .bottom-cta {
    gap: 8px;
    min-height: 60px;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
    border-radius: 14px 14px 0 0;
  }

  .bottom-cta-copy span {
    font-size: 10px;
  }

  .bottom-cta-copy b {
    font-size: 14px;
  }

  .bottom-cta-copy small {
    display: none;
  }

  .bottom-cta button {
    grid-template-areas: "note note" "label price";
    min-width: 138px;
    min-height: 48px;
    padding: 7px 10px;
    column-gap: 6px;
  }

  .bottom-cta button:has(.offer-badge-bounce) {
    padding: 15px 10px 7px;
  }

  .bottom-cta button .offer-badge-bounce {
    top: -9px;
    right: 8px;
    min-height: 22px;
    padding: 0 8px;
    font-size: 11px;
  }

  .bottom-cta button small {
    display: block;
    font-size: 10px;
    line-height: 1.05;
    text-align: center;
  }

  .bottom-cta button span {
    font-size: 13px;
  }

  .bottom-cta button b {
    font-size: 16px;
  }
}

/* 價格區覆蓋：保留舊版結構並統一顯示層級。 */
.unlock-price-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  margin: 4px 0 2px;
  padding: 16px;
  border: 1px solid rgba(190, 18, 60, .14);
  border-radius: 20px;
  background:
    radial-gradient(circle at 92% 18%, rgba(255, 228, 235, .95), transparent 38%),
    linear-gradient(135deg, #fff, #fff7fa);
}

.unlock-price-card small,
.app-result-offer-price small {
  display: inline-flex;
  width: fit-content;
  padding: 5px 9px;
  border-radius: 999px;
  background: #fff;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  box-shadow: inset 0 0 0 1px rgba(205, 213, 224, .82);
}

.unlock-price-card b {
  color: var(--primary);
  font-size: 38px;
  line-height: 1;
  letter-spacing: 0;
}

.app-result-unlock-cta {
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  padding: 18px;
  border-color: rgba(190, 18, 60, .14);
  border-radius: 22px;
  background:
    radial-gradient(circle at 100% 0%, rgba(255, 228, 235, .9), transparent 35%),
    #fff;
}

.app-result-offer-copy > span {
  width: fit-content;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--soft-rose);
  color: var(--primary);
}

.app-result-offer-price {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "badge old"
    "price price";
  align-items: center;
  gap: 8px 12px;
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(190, 18, 60, .14);
  border-radius: 18px;
  background: #fff7fa;
}

.app-result-offer-badge {
  position: static;
  grid-area: badge;
  justify-self: start;
  background: var(--primary);
  color: #fff;
}

.app-result-offer-price small {
  grid-area: old;
  justify-self: end;
}

.app-result-offer-price b {
  grid-area: price;
  color: var(--primary);
  font-size: 36px;
  line-height: 1;
  letter-spacing: 0;
}

.app-result-unlock-cta button {
  min-height: 52px;
  border-radius: 16px;
}

.bottom-cta {
  grid-template-columns: minmax(0, 1fr) 156px;
  gap: 10px;
}

.bottom-cta button {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "badge"
    "label"
    "price"
    "old";
  row-gap: 1px;
  min-height: 58px;
  padding: 9px 10px 8px;
  border-radius: 18px;
}

.bottom-cta button:has(.offer-badge-bounce) {
  padding-top: 9px;
}

.bottom-cta button .offer-badge-bounce {
  position: static;
  grid-area: badge;
  justify-self: center;
  min-height: 18px;
  padding: 0 7px;
  background: #fff;
  color: var(--primary);
  font-size: 10px;
  box-shadow: none;
}

.bottom-cta button span {
  grid-area: label;
}

.bottom-cta button b {
  grid-area: price;
  font-size: 20px;
}

.bottom-cta button small {
  grid-area: old;
}

@media (max-width: 420px) {
  .app-result-offer-price {
    padding: 12px;
  }

  .app-result-offer-price b,
  .unlock-price-card b {
    font-size: 32px;
  }

  .bottom-cta {
    grid-template-columns: minmax(0, 1fr) 144px;
  }

  .bottom-cta button b {
    font-size: 18px;
  }
}

/* 統一價格區卡片與優惠顯示。 */
.unlock-price-card {
  position: relative;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  margin: 4px 0 2px;
  padding: 16px;
  border: 1px solid rgba(190, 18, 60, .14);
  border-radius: 20px;
  background:
    radial-gradient(circle at 92% 18%, rgba(255, 228, 235, .95), transparent 38%),
    linear-gradient(135deg, #fff, #fff7fa);
}

.unlock-price-card small {
  display: inline-flex;
  width: fit-content;
  padding: 5px 9px;
  border-radius: 999px;
  background: #fff;
  color: var(--muted);
  font-size: 12px;
  box-shadow: inset 0 0 0 1px rgba(205, 213, 224, .82);
}

.unlock-price-card b {
  color: var(--primary);
  font-size: 38px;
  letter-spacing: 0;
}

.app-result-unlock-cta {
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  padding: 18px;
  border-color: rgba(190, 18, 60, .14);
  border-radius: 22px;
  background:
    radial-gradient(circle at 100% 0%, rgba(255, 228, 235, .9), transparent 35%),
    #fff;
}

.app-result-offer-copy {
  gap: 6px;
}

.app-result-offer-copy > span {
  width: fit-content;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--soft-rose);
}

.app-result-offer-price {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "badge old"
    "price price";
  align-items: center;
  gap: 8px 12px;
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(190, 18, 60, .14);
  border-radius: 18px;
  background: #fff7fa;
}

.app-result-offer-badge {
  position: static;
  grid-area: badge;
  justify-self: start;
  background: var(--primary);
}

.app-result-offer-price small {
  grid-area: old;
  justify-self: end;
  padding: 4px 8px;
  border-radius: 999px;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(205, 213, 224, .82);
}

.app-result-offer-price b {
  grid-area: price;
  font-size: 36px;
  letter-spacing: 0;
}

.app-result-unlock-cta button {
  min-height: 52px;
  border-radius: 16px;
}

.bottom-cta {
  grid-template-columns: minmax(0, 1fr) 156px;
  gap: 10px;
}

.bottom-cta button {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "badge"
    "label"
    "price"
    "old";
  row-gap: 1px;
  min-height: 58px;
  padding: 9px 10px 8px;
  border-radius: 18px;
}

.bottom-cta button:has(.offer-badge-bounce) {
  padding-top: 9px;
}

.bottom-cta button .offer-badge-bounce {
  position: static;
  grid-area: badge;
  justify-self: center;
  min-height: 18px;
  padding: 0 7px;
  background: #fff;
  color: var(--primary);
  font-size: 10px;
  box-shadow: none;
}

.bottom-cta button span {
  grid-area: label;
}

.bottom-cta button b {
  grid-area: price;
  font-size: 20px;
}

.bottom-cta button small {
  grid-area: old;
}

@media (max-width: 420px) {
  .app-result-offer-price {
    padding: 12px;
  }

  .app-result-offer-price b,
  .unlock-price-card b {
    font-size: 32px;
  }

  .bottom-cta {
    grid-template-columns: minmax(0, 1fr) 144px;
  }

  .bottom-cta button b {
    font-size: 18px;
  }
}

/* Footer service center refresh. */
.site-footer {
  gap: 16px;
  padding: 24px 18px 92px;
  border-top: 1px solid rgba(205, 213, 224, .72);
  background:
    linear-gradient(180deg, rgba(248, 251, 255, .72), rgba(241, 247, 254, .98)),
    radial-gradient(circle at 18% 0%, rgba(190, 18, 60, .08), transparent 34%);
}

.footer-service-card {
  gap: 14px;
  padding: 18px;
  border: 1px solid rgba(205, 213, 224, .88);
  border-radius: 18px;
  background: rgba(255, 255, 255, .88);
  box-shadow: 0 18px 36px rgba(37, 48, 64, .08);
}

.footer-service-title {
  position: relative;
  display: inline-grid;
  justify-self: center;
  margin: 0;
  padding-bottom: 9px;
  color: var(--ink);
  font-size: 20px;
  font-weight: 950;
  text-align: center;
}

.footer-service-title::after {
  content: "";
  justify-self: center;
  width: 36px;
  height: 3px;
  margin-top: 7px;
  border-radius: 999px;
  background: var(--primary);
}

.service-proof {
  gap: 0;
}

.service-proof span {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border: 1px solid rgba(205, 213, 224, .82);
  border-radius: 14px;
  background: linear-gradient(180deg, #fff, #f8fbff);
  color: var(--ink);
  font-size: 15px;
  font-weight: 950;
}

.service-proof b {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--soft-rose);
  color: var(--primary);
  font-size: 12px;
  font-weight: 950;
}

.footer-lookup-card {
  gap: 10px;
  padding: 16px;
  border: 1px solid rgba(190, 18, 60, .18);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(255, 250, 252, .96));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9);
}

.footer-lookup-card > b {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  font-size: 18px;
  font-weight: 950;
}

.footer-lookup-card > b::before {
  content: "";
  width: 9px;
  height: 22px;
  border-radius: 999px;
  background: var(--primary);
}

.footer-lookup-card p {
  color: #64748b;
  font-size: 13px;
  line-height: 1.55;
}

.footer-lookup-row {
  grid-template-columns: minmax(0, 1fr) 94px;
  gap: 10px;
  align-items: stretch;
}

.footer-lookup-row input {
  min-height: 50px;
  padding: 0 14px;
  border-color: rgba(205, 213, 224, .94);
  border-radius: 14px;
  background: #fff;
  font-size: 15px;
  box-shadow: 0 8px 20px rgba(37, 48, 64, .04);
}

.footer-lookup-row button {
  min-height: 50px;
  min-width: 0;
  padding: 0 16px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  box-shadow: 0 12px 22px rgba(190, 18, 60, .18);
  font-size: 15px;
}

.footer-actions {
  gap: 12px;
}

.footer-action {
  min-height: 86px;
  gap: 6px;
  padding: 16px 16px 16px 56px;
  border: 1px solid rgba(205, 213, 224, .86);
  border-radius: 18px;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 14px 30px rgba(37, 48, 64, .08);
}

.footer-action::before {
  left: 17px;
  top: 18px;
  width: 24px;
  height: 24px;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(135deg, var(--primary), #f59e0b) border-box;
  border: 6px solid transparent;
  box-shadow: none;
}

.footer-action b {
  font-size: 17px;
  font-weight: 950;
}

.footer-action span,
.footer-action small {
  color: #64748b;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.55;
  opacity: 1;
}

.footer-action.consult {
  min-height: 140px;
  padding: 18px 18px 18px 18px;
  border: 0;
  border-radius: 20px;
  background:
    linear-gradient(135deg, #9f1239 0%, #be123c 52%, #db2777 100%);
  box-shadow: 0 20px 38px rgba(190, 18, 60, .26);
}

.footer-action.consult::before {
  display: none;
}

.footer-action.consult em {
  position: static;
  justify-self: start;
  min-height: 26px;
  padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, .28);
  background: rgba(255, 255, 255, .14);
  font-size: 12px;
}

.footer-action.consult b {
  padding-right: 0;
  color: #fff;
  font-size: 21px;
  line-height: 1.25;
}

.footer-action.consult span {
  max-width: 310px;
  color: #ffe4ec;
  font-size: 14px;
}

.footer-action.consult small {
  justify-content: flex-start;
  width: fit-content;
  margin-top: 5px;
  padding: 8px 14px 8px 8px;
  background: #06c755;
  color: #fff;
  font-size: 14px;
  box-shadow: 0 12px 24px rgba(0, 124, 57, .28);
}

.footer-legal {
  gap: 9px;
}

.footer-legal button {
  min-height: 36px;
  padding: 0 14px;
  border-color: rgba(205, 213, 224, .9);
  background: rgba(255, 255, 255, .86);
  color: #64748b;
  font-size: 13px;
}

.site-footer > p {
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
}

@media (max-width: 460px) {
  .site-footer {
    padding-inline: 14px;
  }

  .footer-service-card {
    padding: 16px;
  }

  .footer-lookup-row {
    grid-template-columns: minmax(0, 1fr) 88px;
  }

  .footer-lookup-row button {
    min-height: 50px;
  }

  .footer-action.consult {
    min-height: 132px;
  }

  .footer-action.consult b {
    font-size: 20px;
  }
}

/* Dialogs */
.login-dialog,
.info-dialog,
.credential-dialog {
  width: min(440px, calc(100vw - 32px));
  border: 0;
  border-radius: var(--radius-xl);
  padding: 0;
  background: transparent;
  color: var(--ink);
}

.login-dialog::backdrop,
.info-dialog::backdrop,
.credential-dialog::backdrop {
  background: rgba(18, 28, 28, .52);
  backdrop-filter: blur(6px);
}

.login-dialog form,
.info-dialog form {
  position: relative;
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 46px 24px 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: var(--surface);
  box-shadow: 0 24px 70px rgba(24, 38, 35, .28);
}

.login-dialog h2,
.info-dialog h2 {
  margin: 0;
  color: var(--primary);
  font-size: 26px;
  line-height: 1.2;
}

.login-dialog p,
.info-dialog-body {
  margin: 0;
  color: var(--muted);
  line-height: 1.75;
}

.login-mode-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(248, 250, 252, .95);
}

.login-mode-tabs button {
  min-height: 40px;
  padding: 0 6px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--ink);
  font-size: 15px;
  font-weight: 900;
}

.login-mode-tabs button.active {
  background: var(--primary);
  color: #fff;
  box-shadow: 0 10px 22px rgba(200, 16, 70, .18);
}

.login-panel {
  display: grid;
  gap: 12px;
}

.login-panel[hidden] {
  display: none;
}

.login-panel label[hidden] {
  display: none;
}

@media (max-width: 390px) {
  .login-mode-tabs {
    gap: 6px;
  }

  .login-mode-tabs button {
    min-height: 38px;
    padding: 0 4px;
    font-size: 14px;
  }
}

.dialog-close {
  position: absolute;
  top: 12px;
  right: 16px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  color: var(--muted);
  font-size: 30px;
  line-height: 1;
}

.login-dialog button[type="submit"],
.info-dialog-action {
  min-height: 48px;
  border: 0;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  color: #fff;
  font-weight: 900;
  box-shadow: var(--shadow-action);
}

.info-dialog-action:disabled {
  cursor: progress;
  opacity: .72;
}

.history-order-list {
  display: grid;
  gap: 10px;
  max-height: min(56vh, 460px);
  overflow: auto;
  padding-right: 4px;
}

.history-order-item {
  display: grid;
  gap: 6px;
  width: 100%;
  padding: 14px;
  border: 1px solid rgba(63, 93, 82, .18);
  border-radius: 14px;
  background: rgba(255, 255, 255, .88);
  color: var(--ink);
  text-align: left;
}

.history-order-item b {
  font-size: 15px;
  line-height: 1.45;
}

.history-order-item span,
.history-empty {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

.history-dialog button#historyRefreshButton {
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 255, 255, .88);
  color: var(--primary);
  font-weight: 900;
}

.member-save-notice {
  margin: 2px 0 0;
  padding: 12px 14px;
  border: 1px solid rgba(201, 123, 34, .28);
  border-radius: 14px;
  background: rgba(255, 248, 232, .9);
  color: #7a4b12;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.65;
}

.member-save-notice.is-member {
  border-color: rgba(63, 93, 82, .24);
  background: rgba(236, 247, 242, .92);
  color: var(--primary);
}

.pre-report-order-box {
  display: grid;
  gap: 6px;
  padding: 14px;
  border: 1px dashed rgba(63, 93, 82, .34);
  border-radius: 14px;
  background: rgba(255, 255, 255, .9);
}

.pre-report-order-box small {
  color: var(--muted);
  font-weight: 800;
}

.pre-report-order-box b {
  color: var(--primary);
  font-size: 20px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.pre-report-order-dialog button#preReportCopyOrderButton,
.pre-report-order-dialog button#preReportContinueButton {
  min-height: 46px;
  border-radius: 14px;
  font-weight: 900;
}

.pre-report-order-dialog button#preReportCopyOrderButton {
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .92);
  color: var(--primary);
}

.pre-report-order-dialog button#preReportContinueButton {
  border: 0;
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  color: #fff;
  box-shadow: var(--shadow-action);
}

.info-dialog small {
  position: absolute;
  left: 24px;
  top: 18px;
  right: 64px;
  display: block;
  color: var(--primary);
  font-weight: 900;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.info-dialog-body {
  display: grid;
  gap: 10px;
}

.info-dialog-body p {
  margin: 0;
}

.info-dialog-body ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 20px;
}

.collaboration-form {
  display: grid;
  gap: 12px;
  padding-top: 2px;
}

.collaboration-form label {
  display: grid;
  gap: 6px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 900;
}

.collaboration-form input,
.collaboration-form textarea {
  background: #fff;
  font: inherit;
  font-weight: 700;
}

.collaboration-form textarea {
  min-height: 118px;
}

.collaboration-form small {
  min-height: 18px;
  color: var(--primary);
  font-weight: 900;
  text-align: left;
}

.bug-report-form input[type="file"] {
  padding: 12px;
  color: var(--muted);
  cursor: pointer;
}

.bug-report-form .bug-report-note {
  min-height: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.bug-report-form .bug-report-file-list {
  min-height: 0;
  color: var(--ink);
}

.credential-dialog {
  width: min(92vw, 760px);
  max-height: 92vh;
  background: var(--surface);
  box-shadow: 0 24px 70px rgba(24, 38, 35, .28);
}

.credential-dialog img {
  display: block;
  width: 100%;
  max-height: 92vh;
  object-fit: contain;
  background: var(--surface);
}

/* Motion */
@keyframes floatSoft {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}

@keyframes pulseSoft {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.035); }
}

@keyframes slideUp {
  0% { opacity: 0; transform: translateY(26px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes popIn {
  0% { opacity: 0; transform: scale(.72) rotate(-5deg); }
  70% { opacity: 1; transform: scale(1.06) rotate(1deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}

@keyframes flipIn {
  0% { opacity: 0; transform: perspective(600px) rotateX(78deg) translateY(16px); }
  100% { opacity: 1; transform: perspective(600px) rotateX(0) translateY(0); }
}

@keyframes lineDraw {
  0% { transform: scaleX(0); opacity: .4; }
  100% { transform: scaleX(1); opacity: 1; }
}

@keyframes tapFeedback {
  0% { transform: scale(1); }
  45% { transform: scale(.965); }
  100% { transform: scale(1); }
}

@keyframes stageNumberPop {
  0% { opacity: .3; transform: translateY(10px) scale(.9); }
  70% { opacity: 1; transform: translateY(-2px) scale(1.05); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes castingNumberSweep {
  0% { opacity: 0; transform: translateX(-82%); }
  28% { opacity: .85; }
  100% { opacity: 0; transform: translateX(86%); }
}

@keyframes stageLineGlow {
  0% { filter: brightness(1); }
  70% { filter: brightness(1.2); }
  100% { filter: brightness(1); }
}

@keyframes castingStepPulse {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}

@keyframes castingAura {
  0%, 100% { opacity: .58; transform: scale(.86) rotate(-8deg); }
  50% { opacity: 1; transform: scale(1.05) rotate(4deg); }
}

@keyframes castingSweep {
  0% { left: -48%; opacity: 0; }
  22% { opacity: .68; }
  54% { opacity: .34; }
  100% { left: 112%; opacity: 0; }
}

.gsap-text-split {
  display: inline;
}

.gsap-text-split .text-reveal-char {
  display: inline-block;
  transform-origin: 50% 100%;
  will-change: transform, opacity;
}

.global-line-text-reveal {
  opacity: 1;
}

.global-text-line {
  display: block;
  overflow: hidden;
  padding-bottom: .03em;
  margin-bottom: -.03em;
}

.global-text-line-inner {
  display: inline-block;
  will-change: transform, opacity;
}

.global-text-token {
  display: inline-block;
  white-space: pre-wrap;
}

.app-report-reveal-ready {
  will-change: transform, opacity, filter;
}

.app-result-entering .app-report-card,
.app-result-entering .app-section-card,
.app-result-entering .app-hexagram-card,
.app-result-entering .app-result-unlock-cta,
.app-result-entering .unlock-panel {
  will-change: transform, opacity;
}

.brand-card .logo {
  animation: floatSoft 3.8s ease-in-out infinite;
}

.hero-cta,
.free-btn {
  animation: pulseSoft 2.2s ease-in-out infinite;
}

.free-booking-card,
.teacher-card,
.review-summary,
.story-card,
.app-result-reviews {
  animation: slideUp .58s ease-out both;
}

.tap-feedback {
  animation: tapFeedback .24s ease-out both;
}

.login-dialog[open],
.info-dialog[open],
.credential-dialog[open] {
  animation: popIn .34s cubic-bezier(.2, .8, .2, 1) both;
}

.form-block.motion-ready,
.hero-content.motion-ready .divination-note,
.hero-content.motion-ready .trust,
.hero-content.motion-ready .hero-cta {
  animation: slideUp .52s ease-out both;
}

.card-form.is-casting .casting-numbers span {
  animation: stageNumberPop .46s ease-out both;
}

.card-form.is-casting .casting-numbers span:nth-child(2) {
  animation-delay: .08s;
}

.card-form.is-casting .casting-numbers span:nth-child(3) {
  animation-delay: .16s;
}

.card-form.is-casting .casting-lines i {
  animation: stageLineGlow 1.45s ease-in-out infinite alternate;
}

.card-form.is-casting .casting-lines i:nth-child(2) {
  animation-delay: .08s;
}

.card-form.is-casting .casting-lines i:nth-child(3) {
  animation-delay: .16s;
}

.card-form.is-casting .casting-lines i:nth-child(4) {
  animation-delay: .24s;
}

.card-form.is-casting .casting-lines i:nth-child(5) {
  animation-delay: .32s;
}

.card-form.is-casting .casting-lines i:nth-child(6) {
  animation-delay: .4s;
}

.card-form.is-casting .casting-steps li.is-active {
  animation: castingStepPulse 1.05s ease-in-out infinite;
}

.cast-lines.motion-ready li,
.hexagram-reveal.motion-ready .app-hexagram-step {
  animation: flipIn .56s ease-out both;
}

.key-insights.motion-ready .key-chip,
.paid-list.motion-ready .app-section-card {
  animation: slideUp .42s ease-out both;
}

.result-head::after,
.key-chip::after {
  content: "";
  display: block;
  height: 3px;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  transform-origin: left;
  animation: lineDraw .7s ease-out both;
}

.result-head::after {
  grid-column: 1 / -1;
}

.key-chip::after {
  height: 2px;
}

.submit-btn.casting {
  animation: pulseSoft .9s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

.viewport-toggle {
  display: none !important;
}

/* App-style Yijing report page */
.app-yijing-report {
  display: grid;
  gap: 12px;
}

.app-report-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 6px;
  border: 1px solid rgba(191, 161, 99, .28);
  border-radius: 14px;
  background: rgba(255, 255, 255, .82);
  box-shadow: 0 10px 24px rgba(30, 45, 64, .06);
}

.app-report-tabs button {
  min-width: 0;
  min-height: 46px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  font-size: 16px;
  font-weight: 900;
}

.app-report-tabs button.is-active {
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  color: #fff;
  box-shadow: var(--shadow-action);
}

.report-tab-panel {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.report-tab-panel[hidden] {
  display: none !important;
}

.app-report-hero,
.app-report-card,
.app-section-card,
.app-compact-consult-card,
.app-consult-card,
.app-commercial-section {
  border: 1px solid rgba(191, 161, 99, .32);
  border-radius: 12px;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 12px 30px rgba(30, 45, 64, .08);
}

.app-report-hero {
  position: relative;
  display: grid;
  gap: 13px;
  overflow: hidden;
  padding: 15px 14px;
}

.app-report-hero::after {
  content: "";
  position: absolute;
  right: -70px;
  top: -80px;
  width: 220px;
  height: 220px;
  border: 1px solid rgba(191, 161, 99, .18);
  border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(191, 161, 99, .12) 0deg 8deg, transparent 8deg 18deg);
  opacity: .42;
  pointer-events: none;
}

.app-report-hero > * {
  position: relative;
  z-index: 1;
}

.app-report-hero-top,
.app-report-title-row,
.app-card-header {
  display: flex;
  align-items: center;
  gap: 9px;
}

.app-report-hero-top {
  justify-content: space-between;
}

.app-report-hero-top span,
.app-report-hero-top time,
.app-card-header small,
.app-flow-step small,
.app-consult-card small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.app-report-hero-top span {
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(191, 161, 99, .14);
  color: #8a641e;
  font-weight: 900;
}

.app-report-title-row {
  align-items: flex-start;
}

.app-report-title-row h2 {
  flex: 1;
  margin: 0;
  color: var(--primary);
  font-size: 24px;
  line-height: 1.38;
  font-weight: 900;
  letter-spacing: 0;
}

.app-report-title-row em {
  flex: 0 0 auto;
  max-width: 86px;
  padding: 6px 8px;
  border-radius: 999px;
  background: var(--soft-rose);
  color: var(--primary);
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
  text-align: center;
}

.app-report-hero p,
.app-text-block,
.app-note-box,
.app-compact-consult-card p,
.app-consult-card p,
.app-section-card p,
.app-flow-step p,
.app-focus-tile p {
  margin: 0;
  color: var(--muted);
  line-height: 1.75;
}

.app-hexagram-triplet {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.app-hexagram-card {
  display: grid;
  gap: 7px;
  min-width: 0;
  padding: 10px 8px;
  border: 1px solid rgba(191, 161, 99, .32);
  border-radius: 10px;
  background: rgba(255, 252, 244, .82);
  text-align: center;
}

.app-hexagram-card small,
.app-hexagram-card span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.app-hexagram-card b {
  color: var(--ink);
  font-size: 15px;
  line-height: 1.25;
}

.app-hexagram-card .mini-hexagram,
.app-flow-step .mini-hexagram {
  justify-self: center;
}

.mini-hexagram {
  display: grid;
  gap: 4px;
  width: 72px;
}

.mini-yao {
  display: flex;
  justify-content: center;
  gap: 8px;
  width: 72px;
}

.mini-yao i {
  display: block;
  height: 5px;
  border-radius: 99px;
  background: var(--primary);
}

.mini-yao.is-yang i:first-child {
  width: 72px;
}

.mini-yao.is-yang i:nth-child(2) {
  display: none;
}

.mini-yao.is-yin i {
  width: 30px;
}

.app-report-card {
  display: grid;
  gap: 11px;
  padding: 13px;
}

.app-card-header {
  min-width: 0;
}

.app-report-icon,
.section-mark,
.app-flow-index {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  border-radius: 12px;
  background: var(--soft-rose);
  color: var(--primary);
  font-weight: 900;
}

.app-report-icon,
.section-mark,
.insight-icon {
  position: relative;
  overflow: hidden;
  font-size: 0;
}

.app-report-icon,
.section-mark,
.insight-icon {
  --report-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6'/%3E%3Cpath d='M16 13H8'/%3E%3Cpath d='M16 17H8'/%3E%3C/svg%3E");
}

[data-report-icon="question"],
.insight-card:nth-of-type(1) .insight-icon {
  --report-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a4 4 0 0 1-4 4H7l-4 3V7a4 4 0 0 1 4-4h10a4 4 0 0 1 4 4z'/%3E%3Cpath d='M9.5 8a2.5 2.5 0 0 1 5 0c0 2-2.5 2-2.5 4'/%3E%3Cpath d='M12 16h.01'/%3E%3C/svg%3E");
}

[data-report-icon="focus"],
.insight-card:nth-of-type(2) .insight-icon {
  --report-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M12 2v3'/%3E%3Cpath d='M12 19v3'/%3E%3Cpath d='M2 12h3'/%3E%3Cpath d='M19 12h3'/%3E%3C/svg%3E");
}

[data-report-icon="action"],
.insight-card:nth-of-type(3) .insight-icon {
  --report-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 11l3 3L22 4'/%3E%3Cpath d='M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11'/%3E%3C/svg%3E");
}

[data-report-icon="warning"] {
  --report-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
}

[data-report-icon="overview"] {
  --report-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-3'/%3E%3Cpath d='M18 2l4 4-10 10H8v-4z'/%3E%3C/svg%3E");
}

[data-report-icon="timeline"] {
  --report-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
}

[data-report-icon="plate"] {
  --report-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Cpath d='M3 9h18'/%3E%3Cpath d='M3 15h18'/%3E%3Cpath d='M9 3v18'/%3E%3Cpath d='M15 3v18'/%3E%3C/svg%3E");
}

[data-report-icon="compass"] {
  --report-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m16.2 7.8-2.1 6.3-6.3 2.1 2.1-6.3z'/%3E%3C/svg%3E");
}

[data-report-icon="teacher"] {
  --report-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 21a6 6 0 0 0-12 0'/%3E%3Ccircle cx='12' cy='8' r='5'/%3E%3Cpath d='M20 8v5'/%3E%3Cpath d='M22 10h-4'/%3E%3C/svg%3E");
}

[data-report-icon="star"] {
  --report-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 2 3.1 6.4 6.9 1-5 4.9 1.2 6.9L12 17.9 5.8 21.2 7 14.3 2 9.4l6.9-1z'/%3E%3C/svg%3E");
}

.app-report-card:not(.app-professional-locked) .app-report-icon::before,
.section-mark::before,
.insight-icon::before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  background: currentColor;
  -webkit-mask: var(--report-icon) center / contain no-repeat;
  mask: var(--report-icon) center / contain no-repeat;
}

.insight-icon {
  position: absolute;
  top: 18px;
  right: 18px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--soft-rose);
  color: var(--primary);
}

.app-card-header b {
  flex: 1;
  min-width: 0;
  color: var(--ink);
  font-size: 19px;
  line-height: 1.28;
  font-weight: 900;
}

.app-focus-list,
.app-section-list,
.app-flow-list {
  display: grid;
  gap: 9px;
}

.app-focus-tile {
  display: grid;
  gap: 6px;
  padding: 10px 11px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(246, 251, 247, .72);
}

.app-focus-tile.is-primary {
  border-color: rgba(196, 17, 70, .26);
  background: rgba(255, 241, 245, .86);
}

.app-focus-tile div {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.app-focus-tile b {
  color: var(--ink);
  font-weight: 900;
}

.app-focus-tile span {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--muted);
  font-size: 14px;
  font-weight: 800;
}

.app-action-grid {
  display: grid;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
}

.app-action-column {
  display: grid;
  gap: 8px;
  padding: 11px;
}

.app-action-column.is-good {
  background: #f4fbf6;
}

.app-action-column.is-stop {
  border-top: 1px solid var(--line);
  background: #fff7f6;
}

.app-action-column b {
  color: var(--ink);
  font-weight: 900;
}

.app-action-column ul {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.app-action-column li {
  position: relative;
  padding-left: 17px;
  color: var(--muted);
  line-height: 1.55;
}

.app-action-column li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .68em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: .56;
}

.app-note-box {
  padding: 10px 11px;
  border: 1px solid rgba(191, 161, 99, .38);
  border-radius: 10px;
  background: rgba(255, 252, 244, .86);
  font-size: 14px;
  font-weight: 700;
}

.app-warning-card {
  border-color: rgba(154, 59, 50, .22);
  background: #fffafa;
}

.app-flow-step {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 12px;
  align-items: stretch;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
}

.app-flow-visual {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 8px;
  min-width: 0;
  padding: 10px 6px;
  border-radius: 10px;
  background: rgba(191, 161, 99, .1);
}

.app-flow-step .app-flow-index {
  width: 34px;
  height: 34px;
  border-radius: 999px;
}

.app-flow-step .mini-hexagram {
  width: 58px;
  justify-self: center;
}

.app-flow-step .mini-yao {
  width: 58px;
  gap: 7px;
}

.app-flow-step .mini-yao.is-yang i:first-child {
  width: 58px;
}

.app-flow-step .mini-yao.is-yin i {
  width: 23px;
}

.app-flow-copy {
  min-width: 0;
  align-self: center;
}

.app-flow-step b {
  display: block;
  margin: 2px 0 4px;
  color: var(--primary);
  font-size: 17px;
  line-height: 1.3;
}

.app-section-card {
  position: relative;
  display: grid;
  gap: 10px;
  padding: 13px;
  overflow: hidden;
}

.app-section-card header {
  display: flex;
  gap: 9px;
  align-items: center;
}

.app-section-card header div {
  min-width: 0;
}

.app-section-card header small {
  display: block;
  color: var(--primary);
  font-size: 12px;
  font-weight: 900;
}

.app-section-card header b {
  display: block;
  color: var(--ink);
  font-size: 18px;
  line-height: 1.35;
  font-weight: 900;
}

.app-section-card.is-locked p {
  max-height: 76px;
  overflow: hidden;
  opacity: .38;
  filter: blur(2px);
  user-select: none;
}

.app-section-card.is-locked.is-placeholder p {
  max-height: none;
  overflow: visible;
  opacity: 1;
  filter: none;
  user-select: text;
}

.app-section-lock {
  position: absolute;
  inset: auto 12px 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .78), #fff);
  color: var(--primary);
  font-weight: 900;
}

.app-section-lock b {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--soft-rose);
}

.app-commercial-list {
  display: grid;
  gap: 8px;
}

.app-commercial-paywall {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 11px;
  align-items: center;
  min-width: 0;
  padding: 13px;
  border: 1px solid rgba(196, 17, 70, .18);
  border-radius: 16px;
  background: rgba(255, 248, 250, .96);
}

.app-commercial-paywall b {
  color: var(--primary);
  font-size: 18px;
  line-height: 1.35;
  font-weight: 900;
}

.app-commercial-paywall p {
  grid-column: 2;
  margin: -4px 0 0;
  color: var(--muted);
  line-height: 1.6;
}

.app-flow-locked .app-text-block {
  margin-top: 12px;
}

.app-paid-inline-lock {
  display: inline-grid;
  grid-template-columns: 38px auto;
  gap: 10px;
  align-items: center;
  min-height: 44px;
  color: var(--primary);
  font-weight: 900;
}

.app-paid-inline-lock b {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  box-shadow: 0 10px 20px rgba(196, 17, 70, .16);
}

.app-commercial-section {
  position: relative;
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 11px;
  align-items: start;
  min-width: 0;
  padding: 13px;
  overflow: hidden;
}

.app-commercial-section:first-child {
  border-color: rgba(196, 17, 70, .28);
  background: rgba(255, 248, 250, .96);
}

.app-commercial-number {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--soft-rose);
  color: var(--primary);
  font-weight: 900;
}

.app-commercial-body {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.app-commercial-body b {
  color: var(--ink);
  font-size: 18px;
  line-height: 1.35;
  font-weight: 900;
}

.app-commercial-body p {
  margin: 0;
  color: var(--muted);
  line-height: 1.78;
  overflow-wrap: anywhere;
}

.app-commercial-section.is-locked .app-commercial-body p {
  max-height: 58px;
  overflow: hidden;
  opacity: .44;
  filter: blur(1.2px);
  user-select: none;
}

.app-commercial-section.is-locked.is-placeholder .app-commercial-body p {
  max-height: none;
  overflow: visible;
  opacity: 1;
  filter: none;
  user-select: text;
}

.app-commercial-lock {
  position: absolute;
  left: auto;
  right: 16px;
  bottom: 16px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-size: 14px;
  font-weight: 900;
  box-shadow: 0 10px 20px rgba(196, 17, 70, .18);
}

.preview-lock-hint b,
.paid-mask b,
.app-section-lock b,
.app-commercial-lock,
.app-paid-inline-lock b,
.app-professional-locked .app-report-icon {
  position: relative;
  overflow: hidden;
  font-size: 0;
}

.preview-lock-hint b::before,
.paid-mask b::before,
.app-section-lock b::before,
.app-commercial-lock::before,
.app-paid-inline-lock b::before,
.app-professional-locked .app-report-icon::before {
  content: "";
  position: absolute;
  top: 22%;
  left: 50%;
  width: 36%;
  height: 31%;
  border: 2px solid currentColor;
  border-bottom: 0;
  border-radius: 999px 999px 0 0;
  transform: translateX(-50%);
}

.preview-lock-hint b::after,
.paid-mask b::after,
.app-section-lock b::after,
.app-commercial-lock::after,
.app-paid-inline-lock b::after,
.app-professional-locked .app-report-icon::after {
  content: "";
  position: absolute;
  top: 47%;
  left: 50%;
  width: 48%;
  height: 34%;
  border-radius: 3px;
  background: currentColor;
  transform: translateX(-50%);
}

.app-locked-preview-card,
.app-section-card.is-locked,
.app-commercial-section.is-locked {
  position: relative;
  padding-right: 56px;
}

.app-lock-corner {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  box-shadow: 0 10px 20px rgba(196, 17, 70, .18);
  font-size: 0;
  overflow: hidden;
  pointer-events: none;
}

.app-lock-corner::before {
  content: "";
  position: absolute;
  top: 22%;
  left: 50%;
  width: 36%;
  height: 31%;
  border: 2px solid currentColor;
  border-bottom: 0;
  border-radius: 999px 999px 0 0;
  transform: translateX(-50%);
}

.app-lock-corner::after {
  content: "";
  position: absolute;
  top: 47%;
  left: 50%;
  width: 48%;
  height: 34%;
  border-radius: 3px;
  background: currentColor;
  transform: translateX(-50%);
}

.app-commercial-paywall {
  position: relative;
  align-items: start;
  grid-template-columns: 1fr;
  padding-right: 58px;
}

.app-commercial-paywall > p {
  grid-column: auto;
}

.app-commercial-unlock-details {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  margin-top: 2px;
  padding-top: 10px;
  border-top: 1px solid rgba(196, 17, 70, .12);
  color: var(--muted);
  line-height: 1.65;
}

.app-commercial-unlock-details > * {
  grid-column: 1 / -1;
}

.app-commercial-unlock-details strong {
  display: block;
  color: var(--ink);
  font-size: 15px;
  font-weight: 900;
}

.app-commercial-unlock-details ol {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.app-commercial-unlock-details li {
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid rgba(196, 17, 70, .12);
  border-radius: 12px;
  background: rgba(255, 255, 255, .72);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.45;
  font-weight: 900;
  overflow-wrap: break-word;
}

@media (max-width: 360px) {
  .app-commercial-unlock-details ol {
    grid-template-columns: 1fr;
  }
}

.app-professional-locked button {
  min-height: 44px;
  border: 1px solid rgba(196, 17, 70, .22);
  border-radius: 12px;
  background: var(--soft-rose);
  color: var(--primary);
  font-weight: 900;
}

.app-compact-consult-card {
  display: grid;
  gap: 5px;
  padding: 13px;
  background: rgba(245, 248, 255, .92);
}

.app-compact-consult-card b {
  color: var(--ink);
  font-size: 17px;
}

.app-fact-table {
  display: grid;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(247, 248, 240, .82);
}

.app-fact-row {
  display: grid;
  grid-template-columns: 82px 1fr;
  gap: 10px;
  padding: 10px;
  border-bottom: 1px solid rgba(208, 220, 232, .75);
}

.app-fact-row:last-child {
  border-bottom: 0;
}

.app-fact-row b {
  color: var(--ink);
  font-size: 13px;
  font-weight: 900;
}

.app-fact-row span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
  font-weight: 700;
}

.app-liuyao-table {
  display: block;
  overflow-x: auto;
  overflow-y: hidden;
  border: 1px solid rgba(214, 181, 107, .8);
  border-radius: 9px;
  background: #f7f8f0;
  -webkit-overflow-scrolling: touch;
}

.app-liuyao-header,
.app-liuyao-row {
  display: grid;
  grid-template-columns: 48px 74px 68px 44px 44px 44px 44px 86px;
  gap: 0;
  align-items: center;
  min-width: 452px;
  padding: 8px 7px;
}

.app-liuyao-header {
  background: #eff3e9;
  color: #536253;
  font-size: 10px;
  font-weight: 900;
}

.app-liuyao-row {
  border-top: 1px solid rgba(214, 181, 107, .62);
  color: var(--ink);
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.15;
}

.app-liuyao-row.is-focus {
  background: rgba(208, 224, 245, .72);
}

.app-liuyao-header span,
.app-liuyao-row > span,
.app-liuyao-row > b {
  min-width: 0;
  padding: 0 2px;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-liuyao-row > span,
.app-liuyao-row > b {
  white-space: nowrap;
}

.app-liuyao-row > b {
  color: var(--ink);
  font-size: 10.5px;
  font-weight: 700;
  font-style: normal;
}

.app-liuyao-row > b.is-hard {
  color: var(--primary);
  font-weight: 900;
}

.app-liuyao-row > b.is-world {
  color: #2f6a4b;
}

.app-liuyao-row > b.is-moving-mark {
  color: #9a3b32;
}

.app-liuyao-symbol {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 3px;
  overflow: visible;
}

.app-liuyao-row .yao-line {
  gap: 3px;
}

.app-liuyao-row .yao-line.is-yang i:first-child {
  width: 28px;
}

.app-liuyao-row .yao-line.is-yin i {
  width: 12px;
}

.app-liuyao-row .yao-line i {
  height: 4px;
}

.app-liuyao-row .yao-line.is-compact.is-yang i:first-child {
  width: 18px;
}

.app-liuyao-row .yao-line.is-compact.is-yin i {
  width: 8px;
}

.app-change-arrow {
  color: #b8862d;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
}

.app-plate-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 10px;
  align-items: center;
}

.app-plate-chip {
  --chip-accent: #7a5a16;
  --chip-accent-soft: rgba(122, 90, 22, .12);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 9px 6px 8px;
  border: 1px solid rgba(47, 93, 62, .2);
  border-radius: 7px;
  background: #f7f8f0;
  color: #1b2e24;
  font-size: 12px;
  line-height: 1.2;
  font-weight: 800;
  white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .72);
}

.app-plate-chip i {
  display: grid;
  place-items: center;
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  border-radius: 5px;
  background: var(--chip-accent-soft);
  color: var(--chip-accent);
  font-size: 10px;
  line-height: 1;
  font-style: normal;
  font-weight: 900;
}

.app-plate-chip b {
  color: var(--chip-accent);
  font-weight: 900;
}

.app-plate-chip em {
  color: #1b2e24;
  font-style: normal;
  font-weight: 900;
}

.app-plate-chip--void {
  --chip-accent: #4f5f94;
  --chip-accent-soft: rgba(79, 95, 148, .12);
}

.app-plate-chip--break {
  --chip-accent: #9a3b32;
  --chip-accent-soft: rgba(154, 59, 50, .12);
}

.app-empty-text {
  margin: 0;
  padding: 12px;
  color: var(--muted);
  line-height: 1.6;
}

.app-consult-card {
  display: grid;
  gap: 12px;
  padding: 15px;
  background: linear-gradient(135deg, var(--primary), #9f1239);
  color: #fff;
}

.app-result-reviews {
  display: grid;
  gap: 12px;
  padding: 2px 0;
}

.app-result-review-summary {
  margin-top: 0;
  background: linear-gradient(135deg, rgba(255, 246, 248, .95), rgba(255, 255, 255, .96));
}

.app-result-review-card {
  padding: 16px;
  box-shadow: none;
}

.app-result-review-card .story-avatar {
  width: 40px;
  height: 40px;
}

.app-result-unlock-cta {
  display: grid;
  gap: 13px;
  padding: 16px;
  border: 1px solid rgba(225, 29, 72, .18);
  border-radius: 14px;
  background: linear-gradient(135deg, #fff7f9, #fff);
  box-shadow: 0 16px 34px rgba(190, 18, 60, .09);
}

.app-result-offer-copy {
  display: grid;
  gap: 7px;
}

.app-result-offer-badge {
  position: absolute;
  top: -12px;
  right: 12px;
  background: var(--primary);
  color: #fff;
  box-shadow: 0 10px 22px rgba(190, 18, 60, .2);
}

.app-result-offer-copy h3 {
  margin: 0;
  color: var(--ink);
  font-size: 21px;
  line-height: 1.3;
}

.app-result-offer-copy p {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.7;
}

.app-result-offer-price {
  position: relative;
  display: grid;
  gap: 4px;
  padding: 20px 14px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .82);
  border: 1px solid rgba(225, 29, 72, .14);
}

@keyframes offerBadgeBounce {
  0%, 100% {
    transform: translateY(0) scale(1);
  }
  35% {
    transform: translateY(-4px) scale(1.04);
  }
  60% {
    transform: translateY(1px) scale(.98);
  }
}

@media (prefers-reduced-motion: reduce) {
  .offer-badge-bounce {
    animation: none;
  }
}

.app-result-offer-price small {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.app-result-offer-price del {
  color: #8a93a3;
  text-decoration-thickness: 2px;
}

.app-result-offer-price b {
  color: var(--primary);
  font-size: 28px;
  line-height: 1.1;
}

.app-result-unlock-cta button {
  min-height: 50px;
  border: 0;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--primary), #e11d48);
  color: #fff;
  font-size: 17px;
  font-weight: 900;
  box-shadow: 0 14px 28px rgba(225, 29, 72, .22);
}

.app-result-unlock-cta button:hover,
.app-result-unlock-cta button:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 18px 32px rgba(225, 29, 72, .28);
}

.app-consult-card small,
.app-consult-card b,
.app-consult-card p {
  color: #fff;
}

.app-consult-card b {
  display: block;
  margin-top: 4px;
  font-size: 20px;
  line-height: 1.35;
}

.app-consult-card button {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 0;
  border-radius: 12px;
  background: #06c755;
  color: #fff;
  font-weight: 900;
  box-shadow: 0 12px 24px rgba(0, 124, 57, .24);
}

.app-consult-card button::before {
  content: "LINE";
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 22px;
  border-radius: 8px;
  background: #fff;
  color: #06c755;
  font-size: 10px;
  line-height: 1;
  font-weight: 900;
}

.app-consult-card button:hover,
.app-consult-card button:focus-visible {
  background: #05b84f;
}

.app-report-disclaimer {
  margin: 2px 4px 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.7;
  text-align: center;
}

@media (min-width: 560px) {
  .app-action-grid {
    grid-template-columns: 1fr 1fr;
  }

  .app-action-column.is-stop {
    border-top: 0;
    border-left: 1px solid var(--line);
  }

  .app-result-unlock-cta {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }

  .app-result-unlock-cta button {
    grid-column: 1 / -1;
  }

  .app-consult-card {
    grid-template-columns: 1fr auto;
    align-items: center;
  }

  .app-consult-card button {
    padding: 0 20px 0 14px;
  }
}

@media (max-width: 420px) {
  .app-report-tabs button {
    min-height: 42px;
    font-size: 15px;
  }

  .app-commercial-section {
    grid-template-columns: 36px 1fr;
    gap: 9px;
    padding: 12px 11px;
  }

  .app-commercial-number {
    width: 34px;
    height: 34px;
    font-size: 14px;
  }

  .app-commercial-body b {
    font-size: 17px;
  }

  .app-report-title-row {
    display: grid;
  }

  .app-report-title-row em {
    max-width: none;
    justify-self: start;
  }

  .app-hexagram-triplet {
    gap: 6px;
  }

  .app-hexagram-card {
    padding: 9px 5px;
  }

  .app-hexagram-card b {
    font-size: 13px;
  }

  .app-flow-step {
    grid-template-columns: 84px minmax(0, 1fr);
    gap: 9px;
    padding: 9px;
  }

  .app-flow-visual {
    padding: 9px 4px;
  }

  .app-flow-step .mini-hexagram,
  .app-flow-step .mini-yao {
    width: 50px;
  }

  .app-flow-step .mini-yao.is-yang i:first-child {
    width: 50px;
  }

  .app-flow-step .mini-yao.is-yin i {
    width: 20px;
  }

  .app-liuyao-header {
    display: none;
  }

  .app-liuyao-row {
    grid-template-columns: 32px 54px minmax(68px, .9fr) 42px minmax(62px, .7fr);
    gap: 4px;
    padding: 7px 5px;
  }

  .app-liuyao-row small,
  .app-liuyao-row em {
    grid-column: auto;
  }

  .app-liuyao-row .yao-line {
    gap: 4px;
  }

  .app-liuyao-row .yao-line.is-yang i:first-child {
    width: 52px;
  }

  .app-liuyao-row .yao-line.is-yin i {
    width: 23px;
  }

  .app-liuyao-row em i {
    padding: 1px 2px;
  }

  .app-fact-row {
    grid-template-columns: 74px 1fr;
  }
}

@media (max-width: 340px) {
  .app-liuyao-row {
    grid-template-columns: 29px 43px minmax(56px, .85fr) 36px minmax(50px, .65fr);
    gap: 3px;
    padding: 7px 4px;
    font-size: 11px;
  }

  .app-liuyao-row b,
  .app-liuyao-row small {
    font-size: 11px;
  }

  .app-liuyao-row .yao-line {
    gap: 3px;
  }

  .app-liuyao-row .yao-line i {
    height: 6px;
  }

  .app-liuyao-row .yao-line.is-yang i:first-child {
    width: 42px;
  }

  .app-liuyao-row .yao-line.is-yin i {
    width: 19px;
  }

  .app-liuyao-row em {
    gap: 1px;
  }

  .app-liuyao-row em i {
    padding: 1px 2px;
    font-size: 9px;
    line-height: 1.25;
  }
}

@media (max-width: 759px) {
  .app-liuyao-table {
    gap: 8px;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  .app-liuyao-header {
    display: none;
  }

  .app-liuyao-row {
    grid-template-columns: 48px minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    gap: 6px 10px;
    align-items: center;
    min-width: 0;
    padding: 10px;
    border: 1px solid rgba(208, 220, 232, .9);
    border-radius: 12px;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 8px 18px rgba(30, 45, 64, .06);
    font-size: 13px;
  }

  .app-liuyao-row.is-focus {
    border-color: rgba(37, 99, 235, .24);
    background: linear-gradient(135deg, rgba(219, 234, 254, .86), rgba(255, 248, 250, .94));
  }

  .app-liuyao-row b {
    grid-column: 1;
    grid-row: 1 / 3;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--soft-rose);
    font-size: 12px;
    line-height: 1;
  }

  .app-liuyao-row .yao-line {
    grid-column: 2;
    grid-row: 1;
    justify-content: flex-start;
    gap: 7px;
    min-width: 0;
  }

  .app-liuyao-row .yao-line.is-yang i:first-child {
    width: 70px;
  }

  .app-liuyao-row .yao-line.is-yin i {
    width: 30px;
  }

  .app-liuyao-row > span:not(.yao-line) {
    grid-column: 2;
    grid-row: 2;
    min-width: 0;
    color: var(--ink);
    font-size: 14px;
    font-weight: 900;
    line-height: 1.25;
    white-space: nowrap;
  }

  .app-liuyao-row small {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    min-width: max-content;
    padding: 3px 7px;
    border-radius: 999px;
    background: #eef3e8;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.3;
    white-space: nowrap;
  }

  .app-liuyao-row em {
    grid-column: 3;
    grid-row: 2;
    justify-self: end;
    justify-content: flex-end;
    flex-wrap: nowrap;
    gap: 3px;
    min-width: max-content;
  }

  .app-liuyao-row em i {
    padding: 1px 4px;
    font-size: 10px;
    line-height: 1.35;
    white-space: nowrap;
  }
}

@media (max-width: 340px) {
  .app-liuyao-row {
    grid-template-columns: 42px minmax(0, 1fr) auto;
    gap: 5px 8px;
    padding: 9px;
  }

  .app-liuyao-row b {
    width: 34px;
    height: 34px;
    font-size: 11px;
  }

  .app-liuyao-row .yao-line {
    gap: 5px;
  }

  .app-liuyao-row .yao-line i {
    height: 6px;
  }

  .app-liuyao-row .yao-line.is-yang i:first-child {
    width: 60px;
  }

  .app-liuyao-row .yao-line.is-yin i {
    width: 26px;
  }

  .app-liuyao-row > span:not(.yao-line) {
    font-size: 13px;
  }

  .app-liuyao-row small {
    padding: 3px 6px;
    font-size: 11px;
  }

  .app-liuyao-row em {
    gap: 2px;
  }

  .app-liuyao-row em i {
    padding: 1px 3px;
    font-size: 9px;
  }
}

.app-liuyao-plate {
  position: relative;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding-bottom: 0;
}

/* 保留 App 式六爻表格，避免被舊手機卡片規則覆蓋。 */
.app-liuyao-scroll-hint {
  display: flex;
  align-items: stretch;
  justify-content: center;
  width: 100%;
  height: 24px;
  max-width: 100%;
  margin: 0 auto 8px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: #253a50;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: 0;
  perspective: 800px;
  position: relative;
  right: auto;
  bottom: auto;
  z-index: 2;
  overflow: hidden;
}

.app-scroll-copy {
  position: relative;
  right: auto;
  bottom: auto;
  display: inline-flex;
  align-items: flex-end;
  justify-content: center;
  gap: 0;
  width: auto;
  max-width: 100%;
  padding: 0;
  white-space: nowrap;
  transform-style: preserve-3d;
  z-index: 2;
}

.home-intro__highlight,
.home-intro__highlight span {
  display: inline-block;
  position: relative;
}

.home-intro__highlight-word {
  white-space: nowrap;
}

.app-scroll-gap {
  display: inline-block;
  width: .22em;
}

.app-scroll-letter {
  display: inline-block;
  min-width: 0;
  font-style: normal;
  color: #253a50;
  transform-origin: 50% 50%;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  will-change: transform, color, text-shadow;
}

.app-liuyao-scroll-hint.is-scrollable {
  color: #40566c;
}

.app-liuyao-scroll-hint.is-motion-active .app-scroll-copy {
  color: #253a50;
}

.app-liuyao-scroll-hint.is-motion-active .app-scroll-letter {
  animation: app-scroll-letter-flip 2.42s ease-in-out infinite !important;
  animation-delay: calc(var(--flip-index, 0) * .075s) !important;
}

.app-liuyao-scroll-hint[data-gsap-active="1"] .app-scroll-letter {
  animation: none !important;
}

@keyframes app-scroll-letter-flip {
  0%,
  100% {
    color: #253a50;
    opacity: 1;
    transform: rotateX(0deg) translateY(0);
    text-shadow: 0 0 0 rgba(10, 228, 72, 0);
  }
  18%,
  48% {
    color: #0ae448;
    opacity: 1;
    transform: rotateX(180deg) translateY(0);
    text-shadow: 0 0 10px rgba(10, 228, 72, .3);
  }
  72% {
    color: #253a50;
    transform: rotateX(360deg) translateY(0);
    text-shadow: 0 0 0 rgba(10, 228, 72, 0);
  }
}

.app-liuyao-table {
  display: block;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  box-shadow: inset -22px 0 18px -24px rgba(37, 48, 64, .55);
}

.app-liuyao-table .app-liuyao-header,
.app-liuyao-table .app-liuyao-row {
  display: grid;
  grid-template-columns: 52px 86px 74px 52px 52px 52px 52px 96px;
  grid-template-rows: auto;
  gap: 0;
  align-items: center;
  width: 100%;
  min-width: 516px;
  padding: 8px 7px;
}

.app-liuyao-table .app-liuyao-row > span,
.app-liuyao-table .app-liuyao-row > b {
  grid-column: auto;
  grid-row: auto;
  display: block;
  width: auto;
  height: auto;
  min-width: 0;
  padding: 0 2px;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--ink);
  font-size: 10px;
  line-height: 1.15;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-liuyao-table .app-liuyao-row > b.is-hard {
  color: var(--primary);
  font-weight: 900;
}

.app-liuyao-table .app-liuyao-row > b.is-world {
  color: #2f6a4b;
}

.app-liuyao-table .app-liuyao-row > b.is-moving-mark {
  color: #9a3b32;
}

.app-liuyao-table .app-liuyao-symbol {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 3px;
  overflow: visible;
}

.app-liuyao-table .app-liuyao-symbol.has-change {
  flex-direction: column;
  gap: 2px;
}

.app-liuyao-table .app-liuyao-row .yao-line {
  grid-column: auto;
  grid-row: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 3px;
  min-width: 0;
  min-height: 14px;
}

.app-liuyao-table .app-liuyao-row .yao-line i {
  display: block;
  height: 4px;
  border-radius: 999px;
  background: var(--primary);
}

.app-liuyao-table .app-liuyao-row .yao-line.is-yang i:first-child {
  width: 32px;
}

.app-liuyao-table .app-liuyao-row .yao-line.is-yang i:nth-child(2) {
  display: none;
}

.app-liuyao-table .app-liuyao-row .yao-line.is-yin i {
  width: 14px;
}

.app-liuyao-table .app-liuyao-row .yao-line.is-moving i {
  background: var(--gold);
  box-shadow: 0 0 0 2px rgba(245, 158, 11, .16);
}

.app-liuyao-table .app-liuyao-row .yao-line.is-compact.is-yang i:first-child {
  width: 20px;
}

.app-liuyao-table .app-liuyao-row .yao-line.is-compact.is-yin i {
  width: 9px;
}

.app-liuyao-table .app-change-arrow {
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 10px;
  margin: -1px 0;
  color: #b8862d;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
}

.app-liuyao-table .app-change-arrow::before {
  content: "↓";
}

@media (min-width: 760px) {
  .app-liuyao-table .app-liuyao-symbol.has-change {
    flex-direction: row;
    gap: 3px;
  }

  .app-liuyao-table .app-liuyao-symbol.has-change .app-change-arrow {
    width: 10px;
    height: 14px;
    margin: 0;
  }

  .app-liuyao-table .app-liuyao-symbol.has-change .app-change-arrow::before {
    content: "→";
  }

  body.report-mode .report-stage-switcher,
  body.report-mode .app-yijing-report,
  #result > article,
  #result > section,
  #result > header,
  #result > details,
  #result > .unlock-panel {
    max-width: 720px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }
}

/* Refined unlock surfaces */
.unlock-panel {
  display: grid;
  gap: 12px;
  padding: 18px;
  border: 1px solid rgba(205, 213, 224, .88);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 14px 30px rgba(30, 45, 64, .08);
}

.unlock-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.unlock-panel-head span,
.app-result-offer-copy > span {
  color: var(--primary);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .08em;
}

.unlock-panel h3 {
  margin: 0;
  color: var(--ink);
  font-size: 24px;
  line-height: 1.22;
}

.unlock-order {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.unlock-price-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.unlock-price-card small {
  color: var(--muted);
  font-size: 13px;
  font-weight: 850;
  text-align: left;
}

.unlock-price-card del,
.app-result-offer-price del {
  color: #8a93a3;
  text-decoration-thickness: 2px;
}

.unlock-price-card b {
  color: var(--primary);
  font-size: 34px;
  line-height: .98;
}

.unlock-feature-list {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.unlock-feature-list li {
  position: relative;
  padding-left: 20px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 850;
  line-height: 1.45;
}

.unlock-feature-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .45em;
  width: 10px;
  height: 10px;
  border: 2px solid var(--primary);
  border-top: 0;
  border-left: 0;
  transform: rotate(45deg);
}

.unlock-action-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.unlock-panel button {
  min-height: 46px;
  border-radius: 12px;
  font-weight: 950;
}

#paymentButton {
  border: 0;
  background: var(--primary);
  color: #fff;
  box-shadow: 0 12px 24px rgba(190, 18, 60, .18);
}

#copyOrderButton {
  padding: 0 14px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
}

.unlock-order-box {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px 10px;
  margin: 14px 0 16px;
  padding: 12px 14px;
  border: 1px solid rgba(190, 18, 60, .22);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(255, 247, 250, .92), rgba(255, 255, 255, .98));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .72);
}

.unlock-order-box span {
  color: var(--muted);
  font-size: 14px;
  font-weight: 850;
  white-space: nowrap;
}

.unlock-order-box b {
  min-width: 0;
  color: var(--ink);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 16px;
  font-weight: 950;
  letter-spacing: .01em;
  overflow-wrap: anywhere;
  user-select: all;
  -webkit-user-select: all;
}

.unlock-order-box small {
  grid-column: 1 / -1;
  color: #a16207;
  font-size: 13px;
  font-weight: 800;
}

.unlock-panel #lineButton {
  border: 1px solid rgba(6, 199, 85, .32);
  background: #f3fff7;
  color: #057a37;
  box-shadow: none;
}

.app-result-unlock-cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border: 1px solid rgba(205, 213, 224, .9);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 14px 30px rgba(30, 45, 64, .08);
}

.app-result-offer-copy {
  display: grid;
  gap: 5px;
}

.app-result-offer-copy h3 {
  margin: 0;
  color: var(--ink);
  font-size: 20px;
  line-height: 1.28;
}

.app-result-offer-copy p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}

.app-result-offer-price {
  position: relative;
  display: grid;
  gap: 3px;
  min-width: 112px;
  padding: 10px 0 4px 14px;
  border: 0;
  border-left: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
}

.app-result-offer-badge {
  position: absolute;
  top: -9px;
  right: 0;
  background: var(--primary);
  color: #fff;
  box-shadow: 0 8px 18px rgba(190, 18, 60, .16);
}

.app-result-offer-price small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.app-result-offer-price b {
  color: var(--primary);
  font-size: 26px;
  line-height: 1.05;
}

.app-result-unlock-cta button {
  grid-column: 1 / -1;
  min-height: 46px;
  border: 0;
  border-radius: 12px;
  background: var(--primary);
  color: #fff;
  font-size: 16px;
  font-weight: 950;
  box-shadow: 0 12px 24px rgba(190, 18, 60, .18);
}

.bottom-cta {
  gap: 10px;
  min-height: 68px;
  padding: 9px 10px calc(9px + env(safe-area-inset-bottom));
  border-color: rgba(205, 213, 224, .96);
  background: rgba(255, 255, 255, .98);
  box-shadow: 0 12px 34px rgba(30, 45, 64, .16);
}

.bottom-cta-copy span {
  color: var(--primary);
  letter-spacing: .06em;
}

.bottom-cta-copy b {
  font-size: 15px;
}

.bottom-cta button {
  min-width: 146px;
  min-height: 48px;
  border-radius: 14px;
  background: var(--primary);
  box-shadow: 0 12px 24px rgba(190, 18, 60, .18);
}

.bottom-cta button small {
  color: #ffdbe5;
}

.service-proof span {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}

.scenario-grid article {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px 10px;
}

.scenario-grid h3 {
  grid-column: 1;
  grid-row: 1;
}

.scenario-grid small {
  grid-column: 2;
  grid-row: 1;
  align-self: start;
  justify-self: end;
  min-width: 44px;
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(190, 18, 60, .08);
  color: var(--primary);
  font-size: 13px;
  line-height: 1;
  text-align: center;
}

.scenario-grid small::after,
.scenario-grid article:nth-child(1) small::after,
.scenario-grid article:nth-child(2) small::after,
.scenario-grid article:nth-child(3) small::after {
  content: none;
}

.scenario-grid p,
.scenario-grid button {
  grid-column: 1 / -1;
}

.report-flow-preview {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 16px;
}

.flow-card {
  position: relative;
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid rgba(37, 48, 64, .12);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 16px 34px rgba(37, 48, 64, .08);
}

.free-flow-card {
  border-color: rgba(49, 95, 77, .18);
  background: linear-gradient(180deg, #fff 0%, #f4fbf7 100%);
}

.paid-flow-card {
  border-color: rgba(190, 18, 60, .18);
  background: linear-gradient(180deg, #fff 0%, #fff6f8 100%);
}

.flow-label {
  justify-self: start;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
}

.free-flow-card .flow-label {
  background: var(--accent);
}

.paid-flow-card .flow-label {
  background: var(--primary);
}

.flow-card h3 {
  margin: 0;
  color: var(--ink);
  font-size: 21px;
  line-height: 1.25;
}

.flow-card ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.flow-card li {
  display: grid;
  gap: 3px;
  padding: 11px 12px;
  border: 1px solid rgba(37, 48, 64, .08);
  border-radius: 12px;
  background: rgba(255, 255, 255, .74);
}

.flow-card li b {
  color: var(--ink);
  font-size: 15px;
  line-height: 1.35;
}

.flow-card li span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.55;
}

@media (min-width: 760px) {
  .report-flow-preview {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 460px) {
  .unlock-action-row,
  .app-result-unlock-cta {
    grid-template-columns: minmax(0, 1fr);
  }

  .app-result-offer-price {
    min-width: 0;
    padding: 12px 0;
    border-left: 0;
    border-top: 1px solid var(--line);
  }

  .unlock-price-card b {
    font-size: 30px;
  }
}

.form-section,
.faq-section {
  padding-top: 18px;
  padding-bottom: 18px;
}

.form-section .compact-title,
.faq-block h2.compact-title {
  margin-bottom: 8px;
}

.card-form {
  gap: 6px;
}

.card-form::before {
  margin-bottom: 0;
}

.form-block {
  gap: 6px;
  padding-bottom: 8px;
}

.form-block-final {
  padding-bottom: 0;
}

.form-step {
  gap: 7px;
  margin-left: 0;
}

.form-step b {
  width: 27px;
  height: 27px;
}

.form-step span {
  font-size: 15px;
}

.card-form label,
.number-cast-fields {
  gap: 6px;
}

.card-form input {
  min-height: 44px;
}

.card-form textarea {
  min-height: 112px;
}

.prompt-helper {
  gap: 8px;
  margin-top: 2px;
  padding: 10px;
}

.prompt-helper-head {
  gap: 6px;
}

.prompt-helper > p {
  margin: 0;
  line-height: 1.45;
}

.prompt-group-tabs {
  gap: 6px;
}

.prompt-group-tabs button {
  min-height: 34px;
}

.prompt-chip-list {
  gap: 6px;
}

.prompt-chip-list button {
  min-height: 40px;
  padding: 8px 10px;
}

.number-cast-fields {
  padding: 10px;
}

.number-cast-fields > p {
  margin: 0;
  line-height: 1.45;
}

.confirm-details summary {
  min-height: 40px;
  padding: 0 12px;
}

.faq-list {
  gap: 7px;
  margin-top: 10px;
}

.faq-list details {
  border-radius: 14px;
}

.faq-list summary {
  min-height: 46px;
  padding: 12px 14px;
  line-height: 1.35;
}

.faq-list summary::after {
  width: 24px;
  height: 24px;
}

.faq-list p {
  padding: 0 14px 13px;
  font-size: 14px;
  line-height: 1.65;
}

@media (max-width: 759px) {
  .form-section {
    padding: 18px 14px 18px;
  }

  .faq-section {
    padding: 14px 14px 18px;
  }

  .stage-switcher {
    margin-bottom: 9px;
  }

  .card-form::before {
    margin: 10px 12px 2px;
  }

  .form-block {
    gap: 8px;
    padding: 11px 12px 12px;
  }

  .form-block-final {
    padding-top: 10px;
  }

  .form-step {
    grid-template-columns: 29px minmax(0, 1fr);
    gap: 8px;
  }

  .form-step b {
    width: 29px;
    height: 29px;
  }

  .form-step span {
    font-size: 16px;
  }

  .card-form input {
    min-height: 44px;
  }

  .card-form textarea {
    min-height: 110px;
  }

  .number-cast-fields {
    padding: 10px;
  }

  .submit-btn {
    min-height: 50px;
  }
}

/* Section rhythm */
@media (max-width: 759px) {
  .section {
    padding-top: 18px;
    padding-bottom: 18px;
  }

  .form-section + .faq-section {
    padding-top: 12px;
  }

  .form-section .card-form {
    margin-bottom: 0;
  }

  .faq-section .compact-title {
    margin-top: 0;
  }
}

@media (min-width: 760px) {
  .section {
    padding-top: 30px;
    padding-bottom: 30px;
  }

  .form-section,
  .faq-section {
    padding-top: 28px;
    padding-bottom: 28px;
  }
}

.lookup-order-form {
  display: grid;
  gap: 12px;
  margin: 16px 0 12px;
  padding: 14px;
  border: 1px solid rgba(205, 213, 224, .9);
  border-radius: 18px;
  background: linear-gradient(180deg, #fff, #f8fbff);
}

.lookup-order-form label {
  color: var(--ink);
  font-size: 13px;
  font-weight: 900;
}

.lookup-order-form > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  align-items: stretch;
}

/* Refined input form layout */
.form-block-final {
  gap: 12px;
}

.form-block-final .submit-demo-report-button {
  align-self: center;
  justify-self: center;
  margin-left: auto;
  margin-right: auto;
}

.form-block-final > label {
  color: var(--ink);
}

.form-block-final textarea {
  border-radius: 16px;
  background: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9);
}

.prompt-helper {
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(216, 225, 236, .95);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 14px 32px rgba(36, 79, 99, .08);
}

.prompt-helper-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.prompt-helper-head b {
  color: var(--ink);
  font-size: 17px;
  line-height: 1.35;
}

.prompt-helper-head button {
  min-width: 0;
  height: 36px;
  padding: 0 15px;
  border: 0;
  border-radius: 999px;
  background: #f2f6fb;
  color: var(--primary);
  box-shadow: inset 0 0 0 1px rgba(190, 18, 60, .18);
}

.prompt-helper > p {
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
}

.prompt-group-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: none;
}

.prompt-group-tabs::-webkit-scrollbar {
  display: none;
}

.prompt-group-tabs button {
  flex: 0 0 auto;
  min-width: 78px;
  min-height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  background: #f8fafc;
}

.prompt-group-tabs button[aria-selected="true"] {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

.prompt-chip-list {
  gap: 8px;
}

.prompt-chip-list button {
  min-height: 46px;
  padding: 11px 13px;
  border-color: rgba(216, 225, 236, .95);
  border-radius: 14px;
  background: #f8fafc;
  color: var(--ink);
}

.number-cast-fields {
  gap: 10px;
  padding: 14px;
  border: 1px solid rgba(216, 225, 236, .95);
  border-radius: 18px;
  background: linear-gradient(180deg, #fff, #f8fbff);
}

.number-cast-fields legend {
  padding: 0 2px;
  color: var(--ink);
  font-size: 17px;
  font-weight: 900;
}

.number-cast-fields > p {
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
}

.number-row {
  gap: 10px;
}

.number-row label {
  gap: 7px;
  color: var(--ink);
  font-size: 12px;
}

.number-row input {
  min-height: 54px;
  border-radius: 14px;
  background: #fff;
}

.confirm-details {
  border: 1px solid rgba(216, 225, 236, .95);
  border-radius: 16px;
  background: #fff;
}

.confirm-details summary {
  min-height: 48px;
  padding: 0 14px;
  color: var(--ink);
}

/* Refine the pre-submit confirmation row. */
.confirm-details {
  overflow: hidden;
  border-color: rgba(190, 18, 60, .16);
  background: linear-gradient(180deg, #fff, #fff7fa);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9);
}

.confirm-details summary {
  display: grid;
  grid-template-columns: auto minmax(0, auto);
  justify-content: center;
  align-items: center;
  gap: 8px;
  min-height: 50px;
  padding: 0 16px;
  color: var(--ink);
  font-size: 15px;
  font-weight: 900;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
}

.confirm-details summary::-webkit-details-marker {
  display: none;
}

.confirm-details summary::marker {
  content: "";
}

.confirm-details summary::before {
  content: "▶";
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: var(--soft-rose);
  color: var(--primary);
  font-size: 10px;
  line-height: 1;
  box-shadow: inset 0 0 0 1px rgba(190, 18, 60, .16);
  transition: transform .18s ease;
}

.confirm-details[open] summary::before {
  transform: rotate(90deg);
}

.confirm-details > div {
  display: grid;
  gap: 8px;
  padding: 0 16px 14px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.confirm-details p {
  margin: 0;
}

.confirm-details ul {
  display: grid;
  gap: 6px;
  margin: 0;
  padding-left: 18px;
}

.submit-btn {
  min-height: 58px;
  border-radius: 16px;
  padding: 0 20px;
  font-size: 17px;
}

@media (max-width: 430px) {
  .prompt-helper,
  .number-cast-fields {
    padding: 12px;
  }

  .prompt-helper-head {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .number-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  .number-row input {
    min-height: 50px;
    font-size: 17px;
  }
}

#lookupOrderInput {
  min-height: 52px;
  border: 1px solid rgba(205, 213, 224, .95);
  border-radius: 14px;
  background: #fff;
  font-size: 16px;
}

#lookupOrderButton {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 52px;
  padding: 0 18px;
  border: 0;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--primary) 0%, #e11d48 100%);
  color: #fff;
  font-size: 16px;
  font-weight: 950;
  box-shadow: 0 12px 22px rgba(190, 18, 60, .2);
}

#lookupOrderButton::before {
  content: none;
}

#lookupOrderButton:hover,
#lookupOrderButton:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 15px 28px rgba(190, 18, 60, .24);
}

#lookupOrderButton:active {
  transform: translateY(0);
  box-shadow: 0 8px 16px rgba(190, 18, 60, .18);
}

#lookupOrderMessage {
  min-height: 18px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.lookup-help {
  display: grid;
  gap: 8px;
  margin: 2px 0 4px;
  padding: 12px;
  border: 1px solid rgba(216, 225, 236, .9);
  border-radius: 16px;
  background: #fff;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}

.lookup-help b {
  color: var(--ink);
  font-size: 15px;
}

.lookup-help span {
  position: relative;
  padding-left: 18px;
}

.lookup-help span::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .65em;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--primary);
}

/* App-style Yijing report hero. */
.app-yijing-report .app-report-title-row {
  display: flex;
  align-items: flex-start;
}

.app-yijing-report .app-report-title-row h2 {
  text-align: center;
}

.app-yijing-report .app-hero-hexagram-flow {
  grid-template-columns: minmax(0, 1fr) 18px minmax(0, 1fr) 18px minmax(0, 1fr);
  align-items: stretch;
  gap: 5px;
  margin-top: 14px;
}

.app-yijing-report .app-hero-flow-arrow {
  display: grid;
  min-height: 164px;
  place-items: center;
  color: rgba(138, 100, 30, .55);
}

.app-yijing-report .app-report-hero .app-hexagram-card {
  --hexagram-role-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='13 2 3 14 12 14 11 22 21 10 12 10 13 2'/%3E%3C/svg%3E");
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "icon"
    "note"
    "name"
    "role"
    "lines";
  align-items: center;
  justify-items: center;
  min-height: 164px;
  padding: 10px 7px 12px;
  border-radius: 18px;
  background: rgba(255, 252, 244, .82);
  text-align: center;
}

.app-yijing-report .app-report-hero .app-hexagram-card[data-hexagram-role="mutual"] {
  --hexagram-role-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.5 14.5A4.5 4.5 0 0 0 13 19a4.5 4.5 0 0 0 4.5-4.5c0-3.5-2.5-4.8-4-7.5-.8 2.2-2 3.6-3.5 4.5.4-2.1-.2-4.2-2-6C6.5 8.5 4 11 4 14.5A7 7 0 0 0 18 15'/%3E%3C/svg%3E");
}

.app-yijing-report .app-report-hero .app-hexagram-card[data-hexagram-role="changed"] {
  --hexagram-role-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 20 6-10 4 6 3-5 5 9H3z'/%3E%3Cpath d='M9 10 7 7l-4 13'/%3E%3C/svg%3E");
}

.app-yijing-report .app-hero-flow-arrow::before {
  content: "\203A";
  display: block;
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
}

.app-yijing-report .app-report-hero .app-hexagram-role-icon {
  grid-area: icon;
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 999px;
  background: rgba(191, 161, 99, .18);
  color: #8a641e;
}

.app-yijing-report .app-report-hero .app-hexagram-role-icon::before {
  content: "";
  width: 17px;
  height: 17px;
  background: currentColor;
  -webkit-mask: var(--hexagram-role-icon) center / contain no-repeat;
  mask: var(--hexagram-role-icon) center / contain no-repeat;
}

.app-yijing-report .app-report-hero .app-hexagram-card small {
  grid-area: role;
  display: block;
  min-height: 24px;
  margin-top: 3px;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.app-yijing-report .app-report-hero .app-hexagram-card b {
  grid-area: name;
  max-width: 100%;
  min-height: 40px;
  margin-top: 7px;
  color: var(--ink);
  font-size: 15px;
  font-weight: 950;
  line-height: 1.32;
  white-space: normal;
}

.app-yijing-report .app-report-hero .app-hexagram-stage {
  grid-area: note;
  display: block;
  width: auto;
  height: auto;
  margin-top: 5px;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: var(--parchment);
  font-size: 13px;
  font-weight: 900;
}

.app-yijing-report .app-report-hero .mini-hexagram {
  grid-area: lines;
  justify-self: center;
  width: 44px;
  margin-top: 7px;
  gap: 3px;
}

.app-yijing-report .app-report-hero .mini-yao {
  width: 44px;
  gap: 8px;
}

.app-yijing-report .app-report-hero .mini-yao i {
  height: 4px;
}

.app-yijing-report .app-report-hero .mini-yao.is-yang i:first-child {
  width: 44px;
}

.app-yijing-report .app-report-hero .mini-yao.is-yin i {
  width: 18px;
}

.app-yijing-report .app-hero-meta-pills {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
}

.app-yijing-report .app-hero-meta-pill {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 12px;
  border: 1px solid rgba(191, 161, 99, .24);
  border-radius: 999px;
  background: rgba(191, 161, 99, .1);
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
}

@media (max-width: 420px) {
  .app-yijing-report .app-report-title-row {
    display: flex;
  }

  .app-yijing-report .app-report-title-row em {
    max-width: 72px;
    justify-self: auto;
  }

  .app-yijing-report .app-hero-hexagram-flow {
    grid-template-columns: minmax(0, 1fr) 14px minmax(0, 1fr) 14px minmax(0, 1fr);
    gap: 4px;
  }

  .app-yijing-report .app-hero-flow-arrow {
    min-height: 150px;
  }

  .app-yijing-report .app-hero-flow-arrow::before {
    font-size: 18px;
  }

  .app-yijing-report .app-report-hero .app-hexagram-card {
    min-height: 150px;
    padding: 9px 5px 11px;
  }

  .app-yijing-report .app-report-hero .app-hexagram-role-icon {
    width: 30px;
    height: 30px;
  }

  .app-yijing-report .app-report-hero .app-hexagram-role-icon::before {
    width: 15px;
    height: 15px;
  }

  .app-yijing-report .app-report-hero .app-hexagram-card small {
    min-height: 18px;
    margin-top: 2px;
    font-size: 11px;
  }

  .app-yijing-report .app-report-hero .app-hexagram-card b {
    min-height: 36px;
    margin-top: 5px;
    font-size: 13px;
  }

  .app-yijing-report .app-report-hero .app-hexagram-stage {
    margin-top: 4px;
    font-size: 11px;
  }

  .app-yijing-report .app-report-hero .mini-hexagram,
  .app-yijing-report .app-report-hero .mini-yao {
    width: 38px;
  }

  .app-yijing-report .app-report-hero .mini-yao.is-yang i:first-child {
    width: 38px;
  }

  .app-yijing-report .app-report-hero .mini-yao.is-yin i {
    width: 15px;
  }
}

/* 報告頁底部固定 CTA：解鎖後保持簡潔。 */
body.report-mode #result {
  padding-bottom: 110px;
}

.bottom-cta {
  left: 50%;
  bottom: 0;
  grid-template-columns: minmax(0, 1fr) 148px;
  gap: 12px;
  width: min(496px, 100vw);
  min-height: 76px;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  border: 1px solid rgba(205, 213, 224, .9);
  border-bottom: 0;
  border-radius: 18px 18px 0 0;
  background: rgba(255, 255, 255, .98);
  box-shadow: 0 -14px 34px rgba(37, 48, 64, .13);
  transform: translateX(-50%) translateY(100%);
}

.bottom-cta.is-visible {
  transform: translateX(-50%) translateY(0);
}

.bottom-cta-copy {
  gap: 3px;
  align-self: center;
}

.bottom-cta-copy span {
  color: var(--primary);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0;
}

.bottom-cta-copy b {
  color: var(--ink);
  font-size: 15px;
  line-height: 1.25;
}

.bottom-cta-copy small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.bottom-cta button {
  position: relative;
  display: grid;
  grid-template-columns: auto auto;
  grid-template-areas:
    "label price"
    "note note";
  align-items: center;
  justify-content: center;
  column-gap: 7px;
  row-gap: 2px;
  min-width: 0;
  width: 100%;
  min-height: 54px;
  padding: 10px 11px 8px;
  border-radius: 16px;
  background: var(--primary);
  box-shadow: 0 12px 26px rgba(190, 18, 60, .2);
}

.bottom-cta button:has(.offer-badge-bounce) {
  padding-top: 17px;
}

.bottom-cta button .offer-badge-bounce {
  top: -9px;
  right: 8px;
  min-height: 22px;
  padding: 0 8px;
  font-size: 11px;
}

.bottom-cta button span {
  grid-area: label;
  color: #fff;
  font-size: 13px;
  font-weight: 950;
}

.bottom-cta button b {
  grid-area: price;
  color: #fff;
  font-size: 18px;
  line-height: 1;
}

.bottom-cta button small {
  grid-area: note;
  color: #ffe4ec;
  font-size: 10px;
  font-weight: 900;
  line-height: 1.05;
  text-align: center;
}

.bottom-cta button:not(:has(.offer-badge-bounce)) {
  display: inline-grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "label";
  padding: 0 16px;
}

.bottom-cta button:not(:has(.offer-badge-bounce)) span {
  font-size: 15px;
}

@media (max-width: 420px) {
  body.report-mode #result {
    padding-bottom: 100px;
  }

  .bottom-cta {
    grid-template-columns: minmax(0, 1fr) 136px;
    gap: 9px;
    min-height: 70px;
    padding: 9px 10px calc(9px + env(safe-area-inset-bottom));
    border-radius: 16px 16px 0 0;
  }

  .bottom-cta-copy b {
    font-size: 14px;
  }

  .bottom-cta-copy small {
    font-size: 11px;
  }

  .bottom-cta button {
    min-height: 50px;
  }

  .bottom-cta button span {
    font-size: 12px;
  }

  .bottom-cta button b {
    font-size: 16px;
  }
}

/* 價格區最終版：統一首頁與報告頁的價格樣式。 */
.unlock-price-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  margin: 4px 0 2px;
  padding: 16px;
  border: 1px solid rgba(190, 18, 60, 0.14);
  border-radius: 20px;
  background:
    radial-gradient(circle at 92% 18%, rgba(255, 228, 235, 0.95), transparent 38%),
    linear-gradient(135deg, #fff, #fff7fa);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

.unlock-price-card small {
  width: fit-content;
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
}

.unlock-price-card b {
  color: var(--primary);
  font-size: 36px;
  font-weight: 950;
  line-height: 1;
  letter-spacing: 0;
}

.app-result-unlock-cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  padding: 18px;
  border: 1px solid rgba(190, 18, 60, 0.14);
  border-radius: 22px;
  background:
    radial-gradient(circle at 94% 20%, rgba(255, 228, 235, 0.95), transparent 34%),
    linear-gradient(135deg, #fff, #fff8fb);
}

.app-result-offer-copy {
  display: grid;
  gap: 6px;
}

.app-result-offer-copy > span {
  width: fit-content;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--soft-rose);
  color: var(--primary);
  font-size: 12px;
  font-weight: 950;
}

.app-result-offer-copy h3 {
  margin: 0;
  color: var(--ink);
  font-size: 24px;
  line-height: 1.25;
}

.app-result-offer-copy p {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.75;
}

.app-result-offer-price {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "badge old"
    "price price";
  align-items: center;
  gap: 8px 12px;
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(190, 18, 60, 0.14);
  border-radius: 18px;
  background: #fff7fa;
}

.app-result-offer-badge {
  position: static;
  grid-area: badge;
  justify-self: start;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  font-size: 12px;
  font-weight: 950;
  box-shadow: 0 10px 22px rgba(190, 18, 60, 0.18);
}

.app-result-offer-price small {
  grid-area: old;
  justify-self: end;
  padding: 4px 8px;
  border-radius: 999px;
  background: #fff;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  box-shadow: inset 0 0 0 1px rgba(205, 213, 224, 0.82);
}

.app-result-offer-price b {
  grid-area: price;
  color: var(--primary);
  font-size: 36px;
  font-weight: 950;
  line-height: 1;
  letter-spacing: 0;
}

.app-result-unlock-cta button {
  min-height: 52px;
  border-radius: 16px;
}

.bottom-cta {
  grid-template-columns: minmax(0, 1fr) 156px;
  gap: 10px;
}

.bottom-cta button {
  display: inline-grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "badge"
    "label"
    "price"
    "old";
  row-gap: 1px;
  min-height: 58px;
  padding: 9px 10px 8px;
  border-radius: 18px;
}

.bottom-cta button:has(.offer-badge-bounce) {
  padding-top: 9px;
}

.bottom-cta button .offer-badge-bounce {
  position: static;
  grid-area: badge;
  justify-self: center;
  min-height: 18px;
  padding: 0 7px;
  background: #fff;
  color: var(--primary);
  font-size: 10px;
  line-height: 18px;
  box-shadow: none;
}

.bottom-cta button span {
  grid-area: label;
  font-size: 12px;
  line-height: 1.05;
}

.bottom-cta button b {
  grid-area: price;
  font-size: 20px;
  line-height: 1;
}

.bottom-cta button small {
  grid-area: old;
  color: #ffe4ec;
  font-size: 10px;
  line-height: 1;
}

@media (max-width: 420px) {
  .app-result-unlock-cta {
    padding: 16px;
  }

  .app-result-offer-copy h3 {
    font-size: 22px;
  }

  .app-result-offer-price b,
  .unlock-price-card b {
    font-size: 34px;
  }

  .bottom-cta {
    grid-template-columns: minmax(0, 1fr) 150px;
    gap: 8px;
  }
}

/* 價格區置中微調。 */
.unlock-panel {
  overflow: hidden;
}

.unlock-panel .unlock-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.unlock-panel .unlock-panel-head em {
  position: static;
  flex: 0 0 auto;
}

.unlock-panel h3 {
  margin-bottom: 8px;
}

.unlock-panel > p:not(.unlock-order) {
  max-width: 30em;
}

.unlock-price-card {
  justify-items: center;
  margin: 10px 0 14px;
  padding: 18px 16px 16px;
  text-align: center;
  border-radius: 22px;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 228, 235, 0.92), transparent 42%),
    linear-gradient(180deg, #fff, #fff8fb);
}

.unlock-price-card small {
  order: 1;
  padding: 4px 10px;
  border-radius: 999px;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(205, 213, 224, 0.75);
}

.unlock-price-card b {
  order: 0;
  display: block;
  width: 100%;
  color: var(--primary);
  font-size: 40px;
  text-align: center;
}

.app-result-unlock-cta {
  gap: 16px;
  padding: 20px;
  text-align: left;
}

.app-result-offer-copy {
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(205, 213, 224, 0.72);
}

.app-result-offer-price {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "badge"
    "price"
    "old";
  justify-items: center;
  gap: 8px;
  padding: 18px 16px;
  text-align: center;
  background:
    radial-gradient(circle at 50% 2%, rgba(255, 228, 235, 0.96), transparent 44%),
    linear-gradient(180deg, #fff, #fff7fa);
}

.app-result-offer-badge {
  justify-self: center;
  padding: 6px 12px;
}

.app-result-offer-price small {
  justify-self: center;
}

.app-result-offer-price b {
  display: block;
  width: 100%;
  font-size: 40px;
  text-align: center;
}

.app-result-unlock-cta button {
  width: 100%;
}

.bottom-cta {
  align-items: center;
}

.bottom-cta button {
  justify-items: center;
  text-align: center;
}

@media (max-width: 420px) {
  .unlock-price-card b,
  .app-result-offer-price b {
    font-size: 38px;
  }

  .app-result-unlock-cta {
    padding: 18px;
  }

  .bottom-cta {
    grid-template-columns: minmax(0, 1fr) 148px;
  }
}

/* 壓縮價格區，並避免手機輸入框被瀏覽器自動放大。 */
.card-form input,
.card-form textarea,
.footer-lookup-row input,
.lookup-order-form input,
.collaboration-form input,
.collaboration-form textarea,
.login-dialog input,
.info-dialog input,
.info-dialog textarea {
  font-size: 16px;
}

.unlock-panel {
  display: grid;
  gap: 10px;
  padding: 16px;
}

.unlock-panel .unlock-panel-head {
  gap: 8px;
  min-height: 0;
}

.unlock-panel h3 {
  margin: 0;
  font-size: 22px;
  line-height: 1.2;
}

.unlock-order {
  margin: 0;
  padding: 8px 10px;
  border-radius: 12px;
  font-size: 12px;
  line-height: 1.35;
}

.unlock-price-card {
  grid-template-columns: auto auto;
  justify-content: start;
  justify-items: start;
  align-items: baseline;
  gap: 8px;
  width: fit-content;
  max-width: 100%;
  margin: 0;
  padding: 9px 12px;
  border-radius: 999px;
  text-align: left;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(190, 18, 60, .18);
}

.unlock-price-card b {
  order: 0;
  width: auto;
  color: var(--primary);
  font-size: 26px;
  line-height: .95;
}

.unlock-price-card small {
  order: 1;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  box-shadow: none;
}

.unlock-feature-list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin: 0;
}

.unlock-feature-list li {
  min-height: 0;
  padding: 8px 9px 8px 28px;
  border-radius: 12px;
  font-size: 12px;
  line-height: 1.35;
}

.unlock-feature-list li::before {
  left: 10px;
  top: 10px;
}

.unlock-action-row {
  gap: 8px;
}

.unlock-panel button {
  min-height: 46px;
  border-radius: 14px;
}

.unlock-panel #lineButton {
  min-height: 42px;
  border-radius: 14px;
}

.app-result-unlock-cta {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border-radius: 18px;
}

.app-result-offer-copy {
  gap: 4px;
  padding: 0;
  border-bottom: 0;
}

.app-result-offer-copy > span {
  padding: 4px 8px;
  font-size: 11px;
}

.app-result-offer-copy h3 {
  font-size: 19px;
  line-height: 1.2;
}

.app-result-offer-copy p {
  font-size: 13px;
  line-height: 1.45;
}

.app-result-offer-price {
  grid-template-columns: auto;
  grid-template-areas:
    "badge"
    "price"
    "old";
  justify-items: center;
  gap: 4px;
  min-width: 116px;
  padding: 9px 11px;
  border-radius: 16px;
}

.app-result-offer-badge {
  padding: 4px 8px;
  font-size: 10px;
}

.app-result-offer-price b {
  width: auto;
  font-size: 27px;
  line-height: .95;
}

.app-result-offer-price small {
  padding: 0;
  background: transparent;
  font-size: 11px;
  box-shadow: none;
}

.app-result-unlock-cta button {
  grid-column: 1 / -1;
  min-height: 46px;
  border-radius: 14px;
}

.payment-checkout-open {
  overflow: hidden;
}

.payment-checkout-backdrop[hidden] {
  display: none;
}

.payment-checkout-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(15, 23, 42, .42);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.payment-checkout {
  position: relative;
  display: grid;
  gap: 14px;
  width: min(520px, calc(100vw - 28px));
  max-height: calc(100vh - 36px);
  overflow: auto;
  padding: 20px;
  border: 1px solid rgba(226, 232, 240, .95);
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(255, 246, 249, .95), rgba(255, 255, 255, 1) 38%),
    #fff;
  box-shadow: 0 24px 70px rgba(15, 23, 42, .24);
}

.payment-checkout-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(148, 163, 184, .3);
  border-radius: 999px;
  background: rgba(255, 255, 255, .86);
  color: var(--ink);
  font-size: 24px;
  line-height: 1;
}

.payment-checkout-head {
  display: grid;
  gap: 7px;
  padding-right: 42px;
}

.payment-checkout-head span {
  color: var(--primary);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .08em;
}

.payment-checkout-head h2 {
  margin: 0;
  color: var(--ink);
  font-size: 26px;
  line-height: 1.18;
}

.payment-checkout-head p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.7;
}

.payment-checkout-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
}

.payment-checkout-field,
.payment-method-card {
  border: 1px solid rgba(203, 213, 225, .9);
  border-radius: 16px;
  background: rgba(255, 255, 255, .88);
  box-shadow: 0 10px 22px rgba(30, 45, 64, .06);
}

.payment-checkout-field {
  display: grid;
  gap: 4px;
  min-height: 74px;
  padding: 13px 14px;
}

.payment-checkout-field--wide {
  grid-column: 1 / -1;
}

.payment-checkout-field small,
.payment-method-card small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.payment-checkout-field b {
  color: var(--ink);
  font-size: 16px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.payment-method-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  padding: 14px;
}

.payment-method-card div {
  display: grid;
  gap: 3px;
  min-width: 92px;
}

.payment-method-card strong {
  color: #06c755;
  font-size: 22px;
  line-height: 1;
}

.payment-method-card p {
  margin: 0;
  color: var(--ink);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.55;
}

.payment-checkout-actions {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
}

.payment-checkout-actions button {
  min-height: 48px;
  border-radius: 14px;
  font-weight: 950;
}

.payment-checkout-actions button:not(.secondary) {
  border: 0;
  background: var(--primary);
  color: #fff;
  box-shadow: 0 14px 28px rgba(190, 18, 60, .18);
}

.payment-checkout-actions button.secondary {
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
}

.payment-checkout-actions button:disabled {
  cursor: wait;
  opacity: .72;
}

.payment-checkout-message {
  min-height: 20px;
  margin: -2px 0 0;
  color: var(--primary);
  font-size: 13px;
  font-weight: 850;
  line-height: 1.45;
}

@media (max-width: 640px) {
  .payment-checkout-backdrop {
    place-items: end center;
    padding: 10px;
  }

  .payment-checkout {
    width: 100%;
    max-height: calc(100vh - 20px);
    padding: 18px 14px 14px;
    border-radius: 22px 22px 16px 16px;
  }

  .payment-checkout-grid,
  .payment-method-card,
  .payment-checkout-actions {
    grid-template-columns: 1fr;
  }

  .payment-checkout-head h2 {
    font-size: 24px;
  }
}

.bottom-cta {
  grid-template-columns: minmax(0, 1fr) 132px;
  min-height: 64px;
}

.bottom-cta button {
  grid-template-columns: auto auto;
  grid-template-areas:
    "label price"
    "old old";
  align-content: center;
  column-gap: 6px;
  row-gap: 1px;
  min-height: 44px;
  padding: 8px 9px;
  border-radius: 14px;
}

.bottom-cta button:has(.offer-badge-bounce) {
  padding-top: 8px;
}

.bottom-cta button .offer-badge-bounce {
  display: none;
}

.bottom-cta button span {
  font-size: 12px;
}

.bottom-cta button b {
  font-size: 17px;
}

.bottom-cta button small {
  font-size: 10px;
}

.footer-action.consult {
  gap: 6px;
  padding: 12px 14px;
}

.footer-action.consult span,
.footer-action.consult small {
  line-height: 1.35;
}

@media (max-width: 520px) {
  .unlock-panel {
    padding: 14px;
  }

  .unlock-panel h3 {
    font-size: 20px;
  }

  .unlock-feature-list {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .unlock-price-card b {
    font-size: 24px;
  }

  .unlock-action-row {
    grid-template-columns: minmax(0, 1.15fr) minmax(88px, .85fr);
  }

  .app-result-unlock-cta {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    padding: 13px;
  }

  .app-result-offer-price {
    grid-template-columns: auto auto auto;
    grid-template-areas: "badge price old";
    justify-content: start;
    justify-items: start;
    width: 100%;
  }

  .app-result-offer-price b {
    font-size: 24px;
  }

  .bottom-cta {
    grid-template-columns: minmax(0, 1fr) 126px;
    min-height: 62px;
  }
}

@media (max-width: 360px) {
  .bottom-cta {
    grid-template-columns: minmax(0, 1fr) 118px;
  }

  .bottom-cta button span {
    font-size: 11px;
  }

  .bottom-cta button b {
    font-size: 16px;
  }
}

/* 頁尾 LINE 諮詢入口置中。 */
.footer-actions {
  justify-items: center;
}

.footer-action.consult {
  position: relative;
  display: grid;
  justify-items: start;
  align-content: center;
  gap: 5px;
  width: min(100%, 520px);
  min-height: 112px;
  padding: 16px 48px 16px 70px;
  border: 1px solid rgba(6, 199, 85, .24);
  border-radius: 18px;
  color: var(--ink);
  text-align: left;
  background: linear-gradient(135deg, rgba(255, 255, 255, .98), rgba(247, 255, 251, .95) 56%, rgba(255, 247, 250, .94));
  box-shadow: 0 18px 38px rgba(37, 48, 64, .1);
}

.footer-action.consult::before {
  content: "LINE";
  position: absolute;
  left: 16px;
  top: 50%;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 14px;
  background: #06c755;
  color: #fff;
  font-size: 11px;
  font-weight: 950;
  transform: translateY(-50%);
  box-shadow: 0 12px 24px rgba(0, 124, 57, .22);
}

.footer-action.consult::after {
  content: "›";
  position: absolute;
  right: 17px;
  top: 50%;
  color: #078c42;
  font-size: 28px;
  font-weight: 650;
  line-height: 1;
  transform: translateY(-50%);
}

.footer-action.consult em {
  position: static;
  justify-self: start;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #078c42;
  font-size: 12px;
  font-style: normal;
  font-weight: 950;
  line-height: 1.2;
}

.footer-action.consult b {
  padding: 0;
  color: var(--ink);
  font-size: 21px;
  line-height: 1.2;
}

.footer-action.consult span {
  max-width: none;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

.footer-action.consult small {
  display: block;
  justify-self: start;
  width: auto;
  margin: 3px 0 0;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(6, 199, 85, .12);
  color: #078c42;
  font-size: 12px;
  font-weight: 950;
  line-height: 1.25;
  box-shadow: none;
}

.footer-action.consult small::before {
  content: none;
}

@media (max-width: 460px) {
  .footer-action.consult {
    min-height: 104px;
    padding: 15px 40px 15px 64px;
    border-radius: 16px;
  }

  .footer-action.consult::before {
    left: 14px;
    width: 38px;
    height: 38px;
    border-radius: 13px;
  }

  .footer-action.consult::after {
    right: 14px;
  }

  .footer-action.consult b {
    font-size: 19px;
  }

  .footer-action.consult span {
    font-size: 12px;
  }
}

/* 避免手機鍵盤聚焦時承襲動畫位移。 */
@media (max-width: 759px), (pointer: coarse) {
  #trialForm,
  #trialForm .form-block,
  #trialForm input,
  #trialForm textarea,
  #trialForm select {
    transform: none !important;
    animation: none !important;
  }

  #trialForm {
    overflow-anchor: none;
  }

  #trialForm input,
  #trialForm textarea,
  #trialForm select {
    scroll-margin-top: 92px;
    scroll-margin-bottom: 160px;
  }
}

/* 手機窄版彈窗標題可讀性。 */
#footerInfoTitle {
  white-space: pre-line;
}

/* Show prompt categories as two rows on phones instead of horizontal scrolling. */
@media (max-width: 520px) {
  .prompt-group-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    overflow: visible;
    padding-bottom: 0;
  }

  .prompt-group-tabs button {
    width: 100%;
    min-width: 0;
    min-height: 40px;
    padding: 0 10px;
    white-space: nowrap;
  }
}

@media (max-width: 340px) {
  .prompt-group-tabs {
    gap: 7px;
  }

  .prompt-group-tabs button {
    min-height: 38px;
    font-size: 13px;
  }
}

/* Tighten result metrics to footer spacing. */
body.report-mode .app-yijing-report > .stats-section {
  padding-top: 12px;
  padding-bottom: 8px;
}

body.report-mode .app-yijing-report > .stats-section .stats-grid article {
  min-height: 106px;
  padding: 14px 12px;
}

body.report-mode .app-yijing-report > .stats-section .helped-banner {
  margin-top: 12px;
  padding: 14px 12px;
}

body.report-mode .app-yijing-report > .stats-section + .site-footer,
body.report-mode #result + .site-footer {
  margin-top: 0;
}

/* Reduce the empty tail below the report footer. */
body.report-mode .site-footer {
  padding-top: 18px;
  padding-bottom: 20px;
}

body.report-mode .site-footer > p {
  margin-bottom: 0;
}

@media (max-width: 460px) {
  body.report-mode .site-footer {
    padding-inline: 14px;
    padding-bottom: max(16px, env(safe-area-inset-bottom));
  }
}

/* 首頁一般 footer 保持緊湊。 */
body:not(.report-mode) .site-footer {
  padding-bottom: 24px;
}

@media (max-width: 460px) {
  body:not(.report-mode) .site-footer {
    padding-bottom: max(18px, env(safe-area-inset-bottom));
  }
}

/* Report page: remove the oversized blank area before service info. */
body.report-mode #result {
  min-height: auto;
  padding-bottom: 18px;
}

body.report-mode .app-yijing-report > .stats-section {
  order: 0;
}

body.report-mode .site-footer {
  padding-top: 12px;
}

@media (max-width: 460px) {
  body.report-mode #result {
    padding-bottom: 14px;
  }
}

/* Report closing consultation CTA. */
body.report-mode .app-consult-card {
  position: relative;
  display: grid;
  gap: 14px;
  padding: 16px;
  overflow: hidden;
  border: 1px solid rgba(190, 18, 60, .18);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .97), rgba(255, 247, 250, .94)) padding-box,
    linear-gradient(135deg, rgba(190, 18, 60, .24), rgba(6, 199, 85, .22)) border-box;
  color: var(--ink);
  box-shadow: 0 18px 38px rgba(190, 18, 60, .1);
}

body.report-mode .app-consult-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-top: 4px solid #06c755;
  pointer-events: none;
}

body.report-mode .app-consult-card__topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--primary);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0;
}

body.report-mode .app-consult-card__topline > span,
body.report-mode .app-consult-card__topline > em {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(190, 18, 60, .08);
  font-style: normal;
}

body.report-mode .app-consult-card__topline em {
  background: rgba(6, 199, 85, .12);
  color: #078c42;
}

body.report-mode .app-consult-card__copy {
  display: grid;
  gap: 7px;
}

body.report-mode .app-consult-card small,
body.report-mode .app-consult-card b,
body.report-mode .app-consult-card p {
  color: inherit;
}

body.report-mode .app-consult-card__copy small {
  color: var(--primary);
  font-size: 12px;
  font-weight: 950;
}

body.report-mode .app-consult-card__copy b {
  margin: 0;
  color: var(--ink);
  font-size: 21px;
  line-height: 1.32;
  letter-spacing: 0;
}

body.report-mode .app-consult-card__copy p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.72;
}

body.report-mode .app-consult-card__meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

body.report-mode .app-consult-card__meta > span {
  display: grid;
  gap: 3px;
  min-height: 62px;
  padding: 10px 11px;
  border: 1px solid rgba(205, 213, 224, .74);
  border-radius: 13px;
  background: rgba(255, 255, 255, .82);
}

body.report-mode .app-consult-card__meta small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

body.report-mode .app-consult-card__meta strong {
  color: var(--ink);
  font-size: 17px;
  line-height: 1.2;
}

body.report-mode .app-consult-card__button.line-native-button {
  width: 100%;
  min-height: 50px;
  border-radius: 14px;
  box-shadow: 0 16px 30px rgba(0, 124, 57, .24) !important;
}

@media (max-width: 360px) {
  body.report-mode .app-consult-card {
    padding: 14px;
  }

  body.report-mode .app-consult-card__meta {
    grid-template-columns: 1fr;
  }
}

/* Unified form button system. */
#trialForm .prompt-group-tabs button,
#trialForm .prompt-chip-list button,
#trialForm .confirm-details summary,
#trialForm .demo-report-button {
  min-height: 46px;
  border: 1px solid rgba(148, 163, 184, .34);
  border-radius: 14px;
  background: rgba(255, 255, 255, .82);
  color: var(--ink);
  font-size: 15px;
  font-weight: 850;
  line-height: 1.35;
  box-shadow: 0 8px 20px rgba(15, 23, 42, .05);
}

#trialForm .prompt-group-tabs button,
#trialForm .prompt-chip-list button {
  display: grid;
  place-items: center;
}

#trialForm .prompt-group-tabs button[aria-selected="true"] {
  border-color: rgba(200, 16, 62, .7);
  background: var(--primary);
  color: #fff;
  box-shadow: 0 14px 28px rgba(200, 16, 62, .18);
}

#trialForm .prompt-chip-list button {
  justify-items: start;
  text-align: left;
}

#trialForm .prompt-chip-list button:hover,
#trialForm .prompt-chip-list button:focus-visible,
#trialForm .confirm-details summary:hover,
#trialForm .confirm-details summary:focus-visible,
#trialForm .demo-report-button:hover,
#trialForm .demo-report-button:focus-visible {
  border-color: rgba(200, 16, 62, .5);
  color: var(--primary);
  background: #fff;
  outline: none;
}

#trialForm .confirm-details summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  padding: 0 14px;
  text-align: center;
  list-style: none;
  cursor: pointer;
}

#trialForm .confirm-details summary::-webkit-details-marker {
  display: none;
}

#trialForm .confirm-details summary::before {
  content: "▶";
  display: inline-grid;
  place-items: center;
  width: 23px;
  height: 23px;
  border-radius: 999px;
  background: rgba(200, 16, 62, .1);
  color: var(--primary);
  font-size: 10px;
  line-height: 1;
}

#trialForm .submit-btn {
  min-height: 58px;
  border-radius: 16px;
  font-size: 18px;
  font-weight: 950;
}

#trialForm .submit-demo-report-button {
  min-width: 126px;
  height: 40px;
  min-height: 40px;
  padding: 0 16px;
  margin-top: 2px;
  justify-self: center;
  color: #475569;
}

@media (max-width: 430px) {
  #trialForm .prompt-group-tabs {
    gap: 9px;
  }

  #trialForm .prompt-group-tabs button,
  #trialForm .prompt-chip-list button,
  #trialForm .confirm-details summary {
    min-height: 44px;
    border-radius: 13px;
    font-size: 14px;
  }

  #trialForm .submit-btn {
    min-height: 56px;
  }
}

/* 壓縮手機選單，讓主要操作不用在選單內捲動。 */
.menu-panel {
  gap: 8px;
  left: 50%;
  right: auto;
  width: min(390px, calc(100vw - 24px));
  max-height: calc(100vh - var(--menu-panel-top) - 12px);
  padding: 10px;
  border-radius: 20px;
}

.menu-group {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  padding: 9px;
  border-radius: 14px;
}

.menu-group-title {
  grid-column: 1 / -1;
  padding: 0 2px;
  font-size: 11px;
  line-height: 1.2;
}

.menu-panel a,
.menu-panel button {
  min-height: 44px;
  gap: 1px;
  padding: 8px 10px;
  border: 1px solid rgba(210, 220, 232, .72);
  border-radius: 12px;
  background: rgba(255, 255, 255, .9);
}

.menu-panel a b,
.menu-panel button b {
  overflow: hidden;
  color: inherit;
  font-size: 15px;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.menu-panel a small,
.menu-panel button small {
  overflow: hidden;
  font-size: 11px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.menu-panel a::before,
.menu-panel button::before {
  display: none;
}

@media (max-width: 360px) {
  .menu-panel {
    left: 50%;
    right: auto;
    width: calc(100vw - 20px);
    padding: 8px;
  }

  .menu-group {
    gap: 6px;
    padding: 8px;
  }

  .menu-panel a,
  .menu-panel button {
    min-height: 42px;
    padding: 7px 8px;
  }

  .menu-panel a b,
  .menu-panel button b {
    font-size: 14px;
  }
}

/* LINE native action buttons */
.line-native-button {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 46px;
  border: 0 !important;
  border-radius: 12px;
  background: #06c755 !important;
  color: #fff !important;
  font-weight: 950;
  line-height: 1.1;
  text-align: center;
  box-shadow: 0 14px 28px rgba(0, 124, 57, .22) !important;
}

.line-native-button::before {
  content: "LINE";
  display: inline-grid;
  place-items: center;
  min-width: 36px;
  height: 22px;
  padding: 0 6px;
  border-radius: 8px;
  background: #fff;
  color: #06c755;
  font-size: 10px;
  font-weight: 950;
  line-height: 1;
  letter-spacing: 0;
  flex: 0 0 auto;
}

.line-native-button:hover,
.line-native-button:focus-visible {
  background: #05b84f !important;
}

.info-dialog-action.line-native-button {
  width: 100%;
}

.menu-panel a.line-native-menu-link {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "badge title"
    "badge sub";
  align-items: center;
  justify-content: start;
  background: #06c755 !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 10px 22px rgba(0, 124, 57, .18) !important;
}

.menu-panel a.line-native-menu-link::before {
  content: "LINE";
  display: inline-grid;
  grid-area: badge;
  background: #fff;
  color: #06c755;
  box-shadow: none;
}

.menu-panel a.line-native-menu-link b,
.menu-panel a.line-native-menu-link small {
  color: #fff !important;
}

.menu-panel a.line-native-menu-link b {
  grid-area: title;
}

.menu-panel a.line-native-menu-link small {
  grid-area: sub;
}

.unlock-panel #lineButton.line-native-button {
  background: #06c755 !important;
  color: #fff !important;
}

/* Footer legal links stay in one row. */
.footer-legal {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  width: min(100%, 430px);
  justify-self: center;
  align-items: stretch;
}

.footer-legal button {
  min-width: 0;
  min-height: 32px;
  padding: 0 6px;
  font-size: 12px;
  line-height: 1.1;
  white-space: nowrap;
}

@media (max-width: 380px) {
  .footer-legal {
    gap: 4px;
  }

  .footer-legal button {
    min-height: 30px;
    padding: 0 3px;
    font-size: 11px;
  }
}

@media (max-width: 340px) {
  .footer-legal button {
    font-size: 10px;
  }
}

/* 評論區正規化：維持 Google 評論式比例。 */
.stories-section .review-summary,
.app-result-reviews .review-summary,
.app-result-reviews .app-result-review-summary {
  border: 1px solid #dadce0;
  border-radius: 8px;
  background: #fff;
  box-shadow: none;
}

.stories-section .review-list,
.app-result-reviews .review-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 252px), 1fr));
  gap: 10px;
}

.stories-section .story-card,
.app-result-reviews .story-card,
.app-result-reviews .app-result-review-card {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  min-height: 166px;
  height: 166px;
  padding: 14px 16px 12px;
  border: 1px solid #dadce0;
  border-radius: 8px;
  background: #fff;
  box-shadow: none;
  overflow: hidden;
}

.stories-section .story-card blockquote,
.app-result-reviews .story-card blockquote,
.app-result-reviews .app-result-review-card blockquote {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
  margin: 0;
  color: #202124;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.45;
}

@media (max-width: 420px) {
  .stories-section .story-card,
  .app-result-reviews .story-card,
  .app-result-reviews .app-result-review-card {
    min-height: 160px;
    height: 160px;
    padding: 13px 14px 11px;
  }

  .review-carousel-compact .review-flip-stack,
  .review-carousel-compact .review-flip-stack .story-card {
    min-height: 160px;
    height: 160px;
  }
}

/* 保留緊湊評論卡，同時讓輪播堆疊效果可見。 */
.stories-section .review-compact-stack-list,
.app-result-reviews .review-compact-stack-list {
  gap: 10px;
  overflow: visible;
}

.review-carousel-compact {
  min-height: var(--review-stack-height, 188px);
  overflow: visible;
}

.review-carousel-compact .review-flip-stack {
  --review-stack-height: 182px;
  min-height: var(--review-stack-height, 188px);
  height: var(--review-stack-height, 188px);
  overflow: visible;
}

.review-carousel-compact .review-flip-stack .story-card {
  width: calc(100% - 18px);
  box-shadow: 0 8px 18px rgba(60, 64, 67, .1);
}

.review-carousel-compact .review-flip-stack .story-card[data-stack-slot="1"] {
  border-color: #b7c8db;
  background: #fbfdff;
  box-shadow: 0 7px 14px rgba(60, 64, 67, .12);
}

.review-carousel-compact .review-flip-stack .story-card[data-stack-slot="2"] {
  border-color: #c7d4e2;
  background: #f7fbff;
  box-shadow: 0 5px 10px rgba(60, 64, 67, .1);
}

.review-carousel-compact .review-flip-stack .story-card[data-stack-slot="0"] {
  transform: translate3d(0, 0, 0) scale(1) !important;
  opacity: 1 !important;
}

.review-carousel-compact .review-flip-stack .story-card[data-stack-slot="1"] {
  transform: translate3d(9px, 6px, 0) scale(.984) !important;
  opacity: .82 !important;
}

.review-carousel-compact .review-flip-stack .story-card[data-stack-slot="2"] {
  transform: translate3d(18px, 12px, 0) scale(.968) !important;
  opacity: .64 !important;
}

.review-carousel-compact .review-flip-stack .story-card[data-stack-slot="3"] {
  opacity: 0 !important;
}

@media (max-width: 420px) {
  .review-carousel-compact,
  .review-carousel-compact .review-flip-stack {
    --review-stack-height: 176px;
    min-height: var(--review-stack-height, 182px);
    height: var(--review-stack-height, 182px);
  }
}

.feedback-submit-card {
  margin: 22px 0;
  padding: clamp(18px, 4vw, 26px);
  border: 1px solid rgba(214, 184, 122, .42);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,248,242,.94));
  box-shadow: 0 18px 42px rgba(37, 48, 64, .09);
}

.feedback-submit-head {
  display: grid;
  gap: 8px;
  margin-bottom: 18px;
}

.feedback-submit-head span {
  width: fit-content;
  padding: 5px 12px;
  border-radius: 999px;
  color: #fff;
  background: #c8103e;
  font-size: 13px;
  font-weight: 800;
}

.feedback-submit-head h2 {
  margin: 0;
  color: #253040;
  font-size: clamp(24px, 4.5vw, 34px);
  line-height: 1.2;
  letter-spacing: 0;
}

.feedback-submit-head p {
  margin: 0;
  color: #64748b;
  line-height: 1.7;
  font-weight: 700;
}

.feedback-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.feedback-field {
  display: grid;
  gap: 8px;
}

.feedback-field--wide,
.feedback-actions,
.feedback-privacy-field,
.feedback-rating-field {
  grid-column: 1 / -1;
}

.feedback-field span {
  color: #253040;
  font-weight: 900;
}

.feedback-field input,
.feedback-field textarea {
  width: 100%;
  border: 1px solid rgba(146, 163, 184, .5);
  border-radius: 12px;
  background: rgba(255,255,255,.92);
  color: #253040;
  font: inherit;
  font-weight: 700;
  line-height: 1.6;
}

.feedback-field input {
  min-height: 48px;
  padding: 10px 12px;
}

.feedback-field input[type="file"] {
  padding: 10px;
}

.feedback-field textarea {
  min-height: 128px;
  padding: 12px 14px;
  resize: vertical;
}

.feedback-field small {
  color: #64748b;
  line-height: 1.5;
  font-weight: 700;
}

.feedback-privacy-field {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid rgba(146, 163, 184, .34);
  border-radius: 12px;
  background: rgba(248,250,252,.72);
}

.feedback-privacy-field legend {
  padding: 0 6px;
  color: #253040;
  font-weight: 900;
}

.feedback-privacy-field label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #475569;
  font-weight: 850;
}

.feedback-privacy-field input {
  width: 16px;
  height: 16px;
  accent-color: #c8103e;
}

.feedback-rating-field {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 12px;
  border: 1px solid rgba(146, 163, 184, .34);
  border-radius: 12px;
  background: rgba(255, 255, 255, .72);
}

.feedback-rating-field legend {
  padding: 0 6px;
  color: #253040;
  font-weight: 900;
}

.feedback-rating-options {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.feedback-rating-options label {
  cursor: pointer;
}

.feedback-rating-options input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.feedback-rating-options span {
  display: grid;
  min-height: 42px;
  place-items: center;
  border: 1px solid rgba(200, 16, 62, .18);
  border-radius: 12px;
  background: rgba(255, 246, 248, .88);
  color: #9f1239;
  font-weight: 900;
}

.feedback-rating-options input:checked + span {
  border-color: rgba(200, 16, 62, .62);
  background: linear-gradient(135deg, #c8103e, #ef2354);
  color: #fff;
  box-shadow: 0 8px 18px rgba(200, 16, 62, .18);
}

.feedback-rating-field small {
  color: #64748b;
  line-height: 1.5;
  font-weight: 700;
}

.feedback-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding-top: 4px;
}

.feedback-actions button {
  min-height: 48px;
  padding: 0 24px;
  border: 0;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, #c8103e, #ef2354);
  font: inherit;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 12px 24px rgba(200, 16, 62, .24);
}

.feedback-actions button:disabled {
  opacity: .64;
  cursor: wait;
}

.feedback-actions p {
  min-width: min(100%, 240px);
  margin: 0;
  color: #475569;
  font-weight: 800;
  line-height: 1.6;
}

.report-term-highlight {
  display: inline-block;
  padding: 0 3px 1px;
  border-radius: 3px;
  color: inherit;
  background: linear-gradient(180deg, transparent 18%, rgba(255, 241, 118, .72) 18%, rgba(255, 241, 118, .92) 88%, transparent 88%);
  white-space: nowrap;
  word-break: keep-all;
  overflow-wrap: normal;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  text-wrap: nowrap;
  font-weight: 900;
}

.demo-report-button {
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid rgba(148, 163, 184, .42);
  border-radius: 999px;
  background: rgba(255,255,255,.86);
  color: #475569;
  font: inherit;
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
  box-shadow: none;
}

.demo-report-button:hover,
.demo-report-button:focus-visible {
  border-color: rgba(200, 16, 62, .42);
  color: #c8103e;
  outline: none;
}

.demo-report-button:disabled {
  opacity: .58;
  cursor: wait;
}

.demo-return-button {
  justify-self: start;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid rgba(148, 163, 184, .38);
  border-radius: 999px;
  background: rgba(255, 255, 255, .88);
  color: var(--ink);
  font-size: 13px;
  font-weight: 900;
  box-shadow: 0 8px 18px rgba(15, 23, 42, .06);
}

.demo-return-button:hover,
.demo-return-button:focus-visible {
  border-color: rgba(200, 16, 62, .45);
  color: var(--primary);
  outline: none;
}

.submit-demo-report-button {
  display: inline-grid;
  place-items: center;
  justify-self: center;
  justify-content: center;
  justify-items: center;
  text-align: center;
  margin-top: -9px;
  margin-bottom: -2px;
  min-height: 30px;
  padding: 0 14px;
}

.unlock-action-row {
  grid-template-columns: minmax(0, 1fr) auto auto;
}

.unlock-action-row .demo-report-button {
  border-radius: 12px;
  white-space: nowrap;
}

.app-result-unlock-cta {
  position: relative;
}

.app-result-demo-button {
  position: absolute;
  right: 14px;
  bottom: 10px;
  min-height: 30px;
  padding: 0 11px;
  font-size: 12px;
}

.app-result-unlock-cta > button[data-payment-button] {
  padding-right: 24px;
}

@media (max-width: 720px) {
  .feedback-form {
    grid-template-columns: 1fr;
  }

  .feedback-actions button {
    width: 100%;
  }

  .unlock-action-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .unlock-action-row .demo-report-button {
    grid-column: 1 / -1;
    justify-self: end;
    margin-top: -4px;
  }

  .app-result-demo-button {
    right: 12px;
    bottom: 8px;
  }

  .demo-return-button {
    width: 100%;
    justify-self: stretch;
  }
}

/* 壓縮表單底部操作區，讓下一段內容更早出現。 */
#trialForm .form-block-final {
  grid-template-columns: minmax(0, 1fr) 126px;
  align-items: center;
  gap: 8px;
  padding-bottom: 0;
}

#trialForm .form-block-final > * {
  grid-column: 1 / -1;
}

#trialForm .form-block-final .submit-btn {
  grid-column: 1;
  min-height: 54px;
  padding-inline: 18px 14px;
}

#trialForm .form-block-final .submit-demo-report-button {
  grid-column: 2;
  width: 100%;
  height: 54px;
  min-height: 54px;
  min-width: 0;
  margin: 0;
  padding: 0 12px;
  border-color: rgba(200, 16, 62, .34);
  background: linear-gradient(180deg, #fff7fb 0%, #ffe8f0 100%);
  color: #9f1239;
  font-size: 13px;
  font-weight: 950;
  line-height: 1;
  box-shadow: 0 10px 22px rgba(200, 16, 62, .10);
}

#trialForm .form-block-final .message {
  grid-column: 1 / -1;
  margin: 0;
}

@media (max-width: 759px) {
  .form-section {
    padding-bottom: 8px;
  }

  .card-form {
    padding-bottom: 8px;
  }

  #trialForm .submit-btn {
    min-height: 52px;
  }

  #trialForm .form-block-final {
    grid-template-columns: minmax(0, 1fr) 116px;
    padding-top: 6px;
  }

  #trialForm .form-block-final .submit-demo-report-button {
    height: 52px;
    min-height: 52px;
    padding-inline: 8px;
    font-size: 12px;
  }
}

@media (max-width: 360px) {
  #trialForm .form-block-final {
    grid-template-columns: minmax(0, 1fr) 102px;
    gap: 7px;
  }

  #trialForm .form-block-final .submit-btn {
    padding-inline: 14px 10px;
    font-size: 16px;
  }

  #trialForm .form-block-final .submit-demo-report-button {
    font-size: 11px;
  }
}

/* ==========================================================================
   2026-06-04 前台穩定化覆寫區
   --------------------------------------------------------------------------
   目的：
   1. 保留正式版既有動畫、版面與報告功能。
   2. 集中近期手機排版、文字可讀性與固定底部列修正。
   3. 後續小修請優先放在對應段落，避免覆寫散落檔尾。
   ========================================================================== */

/* 1. 解鎖操作列：解鎖與示範報告固定同排。 */
.unlock-action-row {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
}

.unlock-action-row #paymentButton {
  grid-column: auto;
}

.unlock-action-row .demo-report-button {
  width: 100%;
  min-width: 0;
  min-height: 50px;
  margin: 0;
  padding: 0 12px;
  justify-self: stretch;
  white-space: normal;
}

.unlock-code-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(203, 213, 225, .72);
}

.unlock-code-form label {
  display: grid;
  gap: 6px;
  min-width: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 850;
}

.unlock-code-form input {
  width: 100%;
  min-height: 46px;
  box-sizing: border-box;
  border: 1px solid rgba(203, 213, 225, .95);
  border-radius: 12px;
  padding: 0 12px;
  color: var(--ink);
  background: #fff;
  font-size: 15px;
  font-weight: 800;
}

.unlock-code-form button {
  min-height: 46px;
  padding: 0 14px;
  border: 1px solid rgba(190, 18, 60, .28);
  border-radius: 12px;
  background: #fff7fa;
  color: var(--primary);
  font-weight: 950;
  white-space: nowrap;
}

.unlock-code-form button:disabled {
  opacity: .65;
}

.app-result-unlock-code-form {
  grid-column: 1 / -1;
}

@media (max-width: 720px) {
  .unlock-action-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .unlock-action-row #paymentButton {
    grid-column: auto;
  }

  .unlock-action-row .demo-report-button {
    grid-column: auto;
    justify-self: stretch;
    margin-top: 0;
  }

  .unlock-code-form {
    grid-template-columns: 1fr;
  }

  .unlock-code-form button {
    width: 100%;
  }
}

/* 2. 起卦表單：修正快速選句在手機寬度下的文字斷行與欄寬。 */
#trialForm .form-block-final,
#trialForm .prompt-helper,
#trialForm .prompt-helper-head,
#trialForm .prompt-helper > p,
#trialForm .prompt-group-tabs,
#trialForm .prompt-chip-list {
  min-width: 0;
  max-width: 100%;
}

#trialForm .form-block-final > .lead,
#trialForm .prompt-helper > p,
#trialForm .prompt-helper-head b {
  white-space: normal;
  overflow-wrap: break-word;
  word-break: normal;
  line-break: loose;
}

#trialForm .prompt-helper > p {
  width: 100%;
  margin: 0;
}

@media (max-width: 520px) {
  #trialForm .prompt-helper {
    gap: 10px;
    padding: 14px;
  }

  #trialForm .prompt-helper-head {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }

  #trialForm .prompt-group-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  #trialForm .prompt-group-tabs button {
    width: 100%;
    min-width: 0;
  }
}

/* 3. 固定底部列：避免解鎖列遮住報告頁 footer。 */
body.report-mode .site-footer {
  padding-bottom: calc(112px + env(safe-area-inset-bottom));
}

@media (max-width: 460px) {
  body.report-mode .site-footer {
    padding-bottom: calc(104px + env(safe-area-inset-bottom));
  }
}

/* 4. 表單提示：保持緊湊並與欄位對齊。 */
#trialForm .form-block-final > .lead {
  display: block;
  margin: -2px 0 0;
  padding: 9px 11px;
  border: 1px solid rgba(216, 225, 236, .95);
  border-radius: 14px;
  background: #f8fafc;
  color: #64748b;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.55;
  overflow-wrap: break-word;
  word-break: normal;
}

#trialForm .form-block-final > .lead .question-example-chip {
  white-space: nowrap;
}

#trialForm .form-block-final > .lead .question-examples {
  font-weight: 880;
}

#trialForm .now-quick-number-range {
  white-space: nowrap;
  font-weight: 900;
}

@media (max-width: 460px) {
  #trialForm .form-block-final > .lead {
    margin-top: -4px;
    padding: 8px 10px;
    font-size: 12.5px;
    line-height: 1.5;
  }
}

/* 5. 文字可讀性：提高輸入頁與報告頁對比。 */
:root {
  --ink: #172033;
  --muted: #475569;
}

body {
  color: var(--ink);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

#trialForm label,
#trialForm legend,
#trialForm .prompt-chip-list button,
#trialForm .prompt-group-tabs button,
#trialForm .confirm-details summary {
  color: #172033;
}

#trialForm .form-block-final > .lead,
#trialForm .prompt-helper > p,
#trialForm .number-cast-fields > p,
#trialForm .confirm-details p,
#trialForm .confirm-details li {
  color: #40516a;
  font-weight: 850;
}

#trialForm input,
#trialForm textarea {
  color: #172033;
}

#trialForm input::placeholder,
#trialForm textarea::placeholder {
  color: #737f90;
  opacity: 1;
}

body.report-mode #result,
body.report-mode #result p,
body.report-mode #result li,
body.report-mode #result td,
body.report-mode #result th,
.app-yijing-report,
.app-yijing-report p,
.app-yijing-report td,
.app-yijing-report th,
.app-yijing-report .app-fact-table,
.app-yijing-report .app-liuyao-table {
  color: #172033;
}

body.report-mode #result small,
.app-yijing-report small,
.app-yijing-report .app-card-header small,
.app-yijing-report .app-flow-copy small,
.app-yijing-report .app-report-card p,
.app-yijing-report .app-section-card p,
.app-yijing-report .app-fact-table td,
.app-yijing-report .app-liuyao-table .app-liuyao-row > span {
  color: #40516a;
  font-weight: 800;
}

.app-yijing-report h2,
.app-yijing-report h3,
.app-yijing-report strong,
.app-yijing-report b {
  color: #172033;
}

/* 6. 手機效能：降低觸控裝置動畫負載，保留主要進場與起卦視覺。 */
@media (max-width: 760px), (pointer: coarse) {
  .brand-card .logo,
  .hero-cta,
  .free-btn,
  .submit-btn.casting,
  .card-form.is-casting .casting-stage::before,
  .card-form.is-casting .casting-stage::after,
  .card-form.is-casting .casting-lines i,
  .card-form.is-casting .casting-steps li.is-active,
  .offer-badge-bounce,
  .app-scroll-letter {
    animation: none !important;
  }

  .text-reveal-char,
  .global-text-line-inner,
  .app-report-reveal-ready,
  .app-result-entering .app-report-card,
  .app-result-entering .app-section-card,
  .app-result-entering .app-hexagram-card,
  .app-result-entering .app-result-unlock-cta,
  .app-result-entering .unlock-panel,
  .app-liuyao-scroll-hint .app-scroll-letter {
    will-change: auto !important;
  }

  .topbar,
  .menu-backdrop,
  .menu-panel,
  .info-dialog[open],
  .login-dialog[open],
  .credential-dialog[open] {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .app-report-reveal-ready,
  .app-liuyao-table,
  .app-scroll-letter,
  #castingStage .casting-lines i {
    filter: none !important;
  }
}

/* 7. 表單底部操作：兩顆按鈕固定同排，主 CTA 文字置中。 */
#trialForm .form-block-final .submit-btn {
  grid-template-columns: 1fr;
  justify-items: center;
  min-width: 0;
  overflow: hidden;
  text-align: center;
}

#trialForm .form-block-final .submit-btn span {
  min-width: 0;
  overflow: hidden;
  text-overflow: clip;
  white-space: nowrap;
}

#trialForm .form-block-final .submit-btn::after {
  content: none;
}

@media (max-width: 360px) {
  #trialForm .form-block-final .submit-btn {
    font-size: 15px;
    padding-inline: 12px 9px;
  }
}

/* 8. 免費預覽區：壓縮重複廣告卡，讓下一段內容更早出現。 */
#offer.booking-section {
  padding-block: 20px;
}

#offer.booking-section .compact-title {
  font-size: 24px;
  line-height: 1.25;
}

#offer.booking-section > .lead {
  margin-top: 6px;
  line-height: 1.55;
}

#offer .booking-stack {
  margin-top: 12px;
}

#offer .free-booking-card {
  gap: 7px;
  padding: 12px;
  border-radius: 16px;
}

#offer .free-booking-card::before {
  content: "免費";
  top: 12px;
  right: 12px;
  padding: 3px 7px;
  font-size: 10px;
}

#offer .free-booking-card h3 {
  padding-right: 62px;
  font-size: 19px;
  line-height: 1.25;
}

#offer .free-booking-card p {
  font-size: 14px;
  line-height: 1.55;
}

#offer .free-booking-card .free-btn {
  min-height: 42px;
  margin-top: 2px;
  border-radius: 12px;
  font-size: 15px;
}

@media (max-width: 460px) {
  #offer.booking-section {
    padding: 18px 16px;
  }

  #offer.booking-section .compact-title {
    font-size: 22px;
  }

  #offer.booking-section > .lead {
    font-size: 15px;
  }

  #offer .free-booking-card {
    padding: 11px;
  }

  #offer .free-booking-card h3 {
    font-size: 18px;
  }
}

/* 9. 首頁浮動列：避免底部 CTA 遮住例句卡片與一般區塊。 */
body:not(.report-mode) main {
  padding-bottom: calc(96px + env(safe-area-inset-bottom));
}

body:not(.report-mode) section[id] {
  scroll-margin-bottom: calc(112px + env(safe-area-inset-bottom));
}

@media (max-width: 460px) {
  body:not(.report-mode) main {
    padding-bottom: calc(108px + env(safe-area-inset-bottom));
  }
}

/* 10. 輸入頁 / 報告頁 / 後台對話區：統一以 18px 顯示，避免小字問題。 */
#trialForm,
#trialForm *,
#result,
#result *,
#footerInfoDialog,
#footerInfoDialog *,
#credentialDialog,
#credentialDialog *,
#loginDialog,
#loginDialog *,
#profileDialog,
#profileDialog * {
  font-size: 18px;
}

/* Report footer gap: keep teacher proof close to service info. */
body.report-mode #result {
  min-height: 0 !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

body.report-mode .app-yijing-report {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

body.report-mode .app-result-teacher {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

body.report-mode .app-result-teacher .credential-grid {
  margin-bottom: 0 !important;
}

body.report-mode .app-result-teacher-unlock-cta:empty,
body.report-mode .app-result-faq:empty,
body.report-mode .app-report-disclaimer:empty {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.report-mode #result + .site-footer {
  margin-top: 0 !important;
  padding-top: 6px !important;
  padding-bottom: calc(92px + env(safe-area-inset-bottom)) !important;
}

@media (max-width: 460px) {
  body.report-mode #result + .site-footer {
    padding-top: 6px !important;
    padding-bottom: calc(92px + env(safe-area-inset-bottom)) !important;
  }
}

/* 20260604 report UI tightening: feedback, metrics, review cards. */
body.report-mode .report-stage-switcher .stage-step {
  align-items: center;
  justify-content: center;
  gap: 8px;
}

body.report-mode .report-stage-switcher .stage-step b {
  display: inline-grid;
  place-items: center;
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  padding: 0;
  border-radius: 999px;
  line-height: 1;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

body.report-mode .feedback-submit-card {
  margin: 22px auto;
  padding: 18px;
  border: 1px solid rgba(226, 206, 171, .9);
  border-radius: 26px;
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 246, 222, .9), transparent 34%),
    linear-gradient(180deg, #fffdf8 0%, #fff 100%);
  box-shadow: 0 16px 38px rgba(92, 56, 24, .10);
  overflow: visible;
}

body.report-mode .feedback-submit-head {
  display: grid;
  gap: 7px;
  margin: 0 0 16px;
}

body.report-mode .feedback-submit-head span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: start;
  width: auto;
  min-width: 0;
  min-height: 0;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(200, 16, 62, .10);
  color: #c8103e;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: .02em;
  line-height: 1.15;
  white-space: nowrap;
}

body.report-mode .feedback-submit-head h2 {
  margin: 0;
  color: #1b2b3f;
  font-size: 24px;
  line-height: 1.25;
  letter-spacing: .01em;
}

body.report-mode .feedback-submit-head p {
  margin: 0;
  color: #526579;
  font-size: 16px;
  line-height: 1.55;
}

body.report-mode .feedback-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

body.report-mode .feedback-field,
body.report-mode .feedback-privacy-field,
body.report-mode .feedback-rating-field {
  min-width: 0;
  margin: 0;
  padding: 14px;
  border: 1px solid rgba(218, 202, 174, .9);
  border-radius: 18px;
  background: rgba(255, 255, 255, .88);
  box-shadow: none;
}

body.report-mode .feedback-field span,
body.report-mode .feedback-privacy-field legend,
body.report-mode .feedback-rating-field legend {
  color: #24364b;
  font-size: 17px;
  font-weight: 900;
}

body.report-mode .feedback-field input,
body.report-mode .feedback-field textarea {
  border-radius: 14px;
  border-color: rgba(182, 198, 216, .78);
  background: #fff;
}

body.report-mode .feedback-privacy-field--single {
  align-content: start;
  gap: 10px;
}

body.report-mode .feedback-privacy-field--single label {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  width: fit-content;
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid rgba(200, 16, 62, .22);
  border-radius: 999px;
  background: #fff6f8;
  color: #24364b;
  font-size: 17px;
  font-weight: 900;
}

body.report-mode .feedback-privacy-field--single input {
  width: 18px;
  height: 18px;
  accent-color: #c8103e;
}

body.report-mode .feedback-privacy-field--single small,
body.report-mode .feedback-rating-field small,
body.report-mode .feedback-field small {
  color: #607086;
  font-size: 14px;
  line-height: 1.45;
}

body.report-mode .feedback-rating-options {
  grid-template-columns: repeat(5, minmax(44px, 1fr));
  gap: 8px;
}

body.report-mode .feedback-rating-options span {
  min-height: 40px;
  border-radius: 13px;
  font-size: 16px;
}

body.report-mode .feedback-field--wide,
body.report-mode .feedback-actions {
  grid-column: 1 / -1;
}

body.report-mode .feedback-actions {
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

body.report-mode .feedback-actions button {
  min-height: 48px;
  padding: 0 24px;
  border-radius: 999px;
}

body.report-mode #result .story-card,
body.report-mode #result .app-result-review-card,
body.report-mode #result .review-card,
body.report-mode #result .review-flip-card {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
}

body.report-mode #result .story-card p,
body.report-mode #result .story-card blockquote,
body.report-mode #result .app-result-review-card p,
body.report-mode #result .app-result-review-card blockquote,
body.report-mode #result .review-card p,
body.report-mode #result .review-card blockquote {
  display: block !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
  -webkit-line-clamp: unset !important;
  line-clamp: unset !important;
}

body.report-mode #result .stats-section,
body.report-mode #result .app-result-metrics {
  margin: 18px auto;
  padding: 0 10px;
  background: transparent;
}

body.report-mode #result .stats-grid {
  gap: 14px;
  padding: 14px;
  border: 1px solid rgba(226, 206, 171, .9);
  border-radius: 26px;
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 246, 222, .88), transparent 36%),
    linear-gradient(180deg, #fffdf8 0%, #fff 100%);
  box-shadow: 0 16px 34px rgba(92, 56, 24, .08);
}

body.report-mode #result .stats-grid article {
  min-height: 112px;
  border: 1px solid rgba(218, 202, 174, .82);
  border-radius: 22px;
  background: #fff;
  color: #1b2b3f;
  box-shadow: none;
}

body.report-mode #result .stats-grid article b {
  color: #0f2c42;
  font-size: 24px;
  line-height: 1.1;
}

body.report-mode #result .stats-grid article span {
  color: #24364b;
  font-size: 18px;
  line-height: 1.35;
}

body.report-mode #result .helped-banner {
  width: auto;
  margin: 12px 10px 0;
  padding: 12px 14px;
  border: 1px solid rgba(218, 202, 174, .82);
  border-radius: 18px;
  background: #fff8ed;
  color: #14324a;
  font-size: 18px;
  font-weight: 900;
  line-height: 1.35;
  box-shadow: none;
}

@media (max-width: 520px) {
  body.report-mode .feedback-form {
    grid-template-columns: 1fr;
  }

  body.report-mode .feedback-submit-card {
    padding: 16px;
    border-radius: 24px;
  }

  body.report-mode .feedback-submit-head h2 {
    font-size: 22px;
  }

  body.report-mode #result .stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding: 12px;
  }

  body.report-mode #result .stats-grid article {
    min-height: 104px;
  }
}

/* 20260604 feedback system redesign: avatar upload, guide steps, cleaner form. */
body.report-mode .feedback-submit-card {
  position: relative;
  margin: 24px auto;
  padding: 20px;
  border: 1px solid rgba(223, 203, 166, .92);
  border-radius: 28px;
  background:
    linear-gradient(135deg, rgba(255, 249, 237, .96), rgba(255, 255, 255, .98) 48%, rgba(255, 248, 241, .96)),
    #fff;
  box-shadow: 0 18px 44px rgba(93, 58, 25, .12);
  overflow: hidden;
}

body.report-mode .feedback-submit-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 6px;
  background: linear-gradient(180deg, #c8103e, #e85b78, #d9a63b);
}

body.report-mode .feedback-submit-head {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 8px;
  margin: 0 0 14px;
  padding-left: 4px;
}

body.report-mode .feedback-submit-head span {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 0;
  min-height: 0;
  padding: 6px 12px;
  border: 1px solid rgba(200, 16, 62, .18);
  border-radius: 999px;
  background: #fff1f5;
  color: #c8103e;
  font-size: 15px;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: .04em;
  white-space: nowrap;
}

body.report-mode .feedback-submit-head h2 {
  margin: 0;
  color: #18283a;
  font-size: clamp(24px, 5vw, 32px);
  line-height: 1.18;
  font-weight: 950;
  letter-spacing: .01em;
}

body.report-mode .feedback-submit-head p {
  max-width: 34em;
  margin: 0;
  color: #56687d;
  font-size: 16px;
  line-height: 1.55;
  font-weight: 760;
}

body.report-mode .feedback-guide-steps {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}

body.report-mode .feedback-guide-steps li {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 2px 9px;
  align-items: center;
  min-height: 66px;
  padding: 11px;
  border: 1px solid rgba(224, 205, 171, .88);
  border-radius: 18px;
  background: rgba(255, 255, 255, .82);
}

body.report-mode .feedback-guide-steps b {
  display: grid;
  grid-row: span 2;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: #c8103e;
  color: #fff;
  font-size: 14px;
  font-weight: 950;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

body.report-mode .feedback-guide-steps span {
  color: #1e3147;
  font-size: 16px;
  font-weight: 950;
  line-height: 1.2;
}

body.report-mode .feedback-guide-steps small {
  color: #6a7d92;
  font-size: 13px;
  font-weight: 760;
  line-height: 1.25;
}

body.report-mode .feedback-form {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 12px;
}

body.report-mode .feedback-field,
body.report-mode .feedback-privacy-field,
body.report-mode .feedback-rating-field {
  min-width: 0;
  margin: 0;
  padding: 14px;
  border: 1px solid rgba(221, 202, 170, .88);
  border-radius: 20px;
  background: rgba(255, 255, 255, .92);
  box-shadow: none;
}

body.report-mode .feedback-avatar-field {
  grid-column: span 7;
}

body.report-mode .feedback-name-field,
body.report-mode .feedback-privacy-field--single {
  grid-column: span 5;
}

body.report-mode .feedback-rating-field {
  grid-column: span 4;
}

body.report-mode .feedback-field--wide,
body.report-mode .feedback-actions {
  grid-column: 1 / -1;
}

body.report-mode .feedback-field span,
body.report-mode .feedback-privacy-field legend,
body.report-mode .feedback-rating-field legend {
  padding: 0 4px;
  color: #1f3147;
  font-size: 17px;
  font-weight: 950;
  line-height: 1.25;
}

body.report-mode .feedback-avatar-row {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  margin: 10px 0;
  padding: 12px;
  border: 1px dashed rgba(200, 16, 62, .28);
  border-radius: 18px;
  background: linear-gradient(135deg, #fff8ec, #fff);
}

body.report-mode .feedback-avatar-row i {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border: 2px solid rgba(200, 16, 62, .2);
  border-radius: 22px;
  background:
    radial-gradient(circle at 50% 34%, rgba(200, 16, 62, .18) 0 14px, transparent 15px),
    radial-gradient(circle at 50% 84%, rgba(200, 16, 62, .14) 0 24px, transparent 25px),
    #fff;
  color: #c8103e;
  font-size: 13px;
  font-style: normal;
  font-weight: 950;
}

body.report-mode .feedback-avatar-row b {
  display: block;
  margin: 0 0 4px;
  color: #1f3147;
  font-size: 17px;
  line-height: 1.3;
  font-weight: 950;
}

body.report-mode .feedback-avatar-row small,
body.report-mode .feedback-field small,
body.report-mode .feedback-privacy-field--single small,
body.report-mode .feedback-rating-field small {
  display: block;
  color: #687a8f;
  font-size: 14px;
  line-height: 1.45;
  font-weight: 740;
}

body.report-mode #feedbackImageInput {
  width: 100%;
  margin: 0;
  padding: 10px;
  border: 1px solid rgba(189, 203, 219, .82);
  border-radius: 15px;
  background: #fff;
  color: #30445b;
  font-size: 15px;
  font-weight: 820;
}

body.report-mode #feedbackImageInput::file-selector-button {
  min-height: 36px;
  margin-right: 10px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: #c8103e;
  color: #fff;
  font-weight: 950;
  cursor: pointer;
}

body.report-mode .feedback-field input:not([type="file"]),
body.report-mode .feedback-field textarea {
  width: 100%;
  margin-top: 10px;
  border: 1px solid rgba(189, 203, 219, .82);
  border-radius: 15px;
  background: #fff;
  color: #1f3147;
  font-size: 17px;
  line-height: 1.5;
  box-shadow: none;
}

body.report-mode .feedback-field textarea {
  min-height: 142px;
  resize: vertical;
}

body.report-mode .feedback-privacy-field--single {
  display: grid;
  align-content: start;
  gap: 10px;
}

body.report-mode .feedback-privacy-field--single label {
  display: inline-grid;
  grid-template-columns: 22px auto;
  align-items: center;
  justify-content: start;
  gap: 8px;
  width: fit-content;
  min-height: 44px;
  padding: 0 15px;
  border: 1px solid rgba(200, 16, 62, .24);
  border-radius: 999px;
  background: #fff2f6;
  color: #1f3147;
  font-size: 17px;
  font-weight: 950;
}

body.report-mode .feedback-privacy-field--single input {
  width: 19px;
  height: 19px;
  margin: 0;
  accent-color: #c8103e;
}

body.report-mode .feedback-rating-field {
  display: grid;
  align-content: start;
  gap: 10px;
}

body.report-mode .feedback-rating-options {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 7px;
}

body.report-mode .feedback-rating-options span {
  display: grid;
  place-items: center;
  min-height: 40px;
  padding: 0 4px;
  border: 1px solid rgba(200, 16, 62, .2);
  border-radius: 14px;
  background: #fff7fa;
  color: #c8103e;
  font-size: 15px;
  font-weight: 950;
  line-height: 1;
}

body.report-mode .feedback-rating-options input:checked + span {
  border-color: rgba(200, 16, 62, .72);
  background: linear-gradient(135deg, #c8103e, #e43763);
  color: #fff;
  box-shadow: 0 10px 20px rgba(200, 16, 62, .2);
}

body.report-mode .feedback-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 0 0;
}

body.report-mode .feedback-actions button {
  min-height: 50px;
  padding: 0 26px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, #c8103e, #e43763);
  color: #fff;
  font-size: 18px;
  font-weight: 950;
  box-shadow: 0 14px 26px rgba(200, 16, 62, .22);
}

body.report-mode .feedback-actions p {
  min-width: 0;
  color: #56687d;
  font-size: 15px;
  line-height: 1.45;
  font-weight: 780;
}

body.report-mode #result .app-result-reviews,
body.report-mode #result .stories-section {
  overflow: visible !important;
}

body.report-mode #result .story-card,
body.report-mode #result .app-result-review-card {
  border-color: rgba(221, 202, 170, .9) !important;
  border-radius: 22px !important;
  background: #fff !important;
  box-shadow: 0 12px 28px rgba(42, 52, 64, .10) !important;
}

body.report-mode #result .story-card blockquote,
body.report-mode #result .app-result-review-card blockquote {
  color: #27384d !important;
  font-size: 17px !important;
  line-height: 1.55 !important;
}

@media (max-width: 620px) {
  body.report-mode .feedback-submit-card {
    padding: 17px;
    border-radius: 26px;
  }

  body.report-mode .feedback-guide-steps {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  body.report-mode .feedback-guide-steps li {
    min-height: 58px;
  }

  body.report-mode .feedback-form {
    grid-template-columns: 1fr;
  }

  body.report-mode .feedback-avatar-field,
  body.report-mode .feedback-name-field,
  body.report-mode .feedback-privacy-field--single,
  body.report-mode .feedback-rating-field,
  body.report-mode .feedback-field--wide,
  body.report-mode .feedback-actions {
    grid-column: 1 / -1;
  }

  body.report-mode .feedback-avatar-row {
    grid-template-columns: 56px minmax(0, 1fr);
  }

  body.report-mode .feedback-avatar-row i {
    width: 56px;
    height: 56px;
    border-radius: 19px;
  }

  body.report-mode .feedback-actions {
    align-items: stretch;
    flex-direction: column;
  }

  body.report-mode .feedback-actions button {
    width: 100%;
  }
}

/* 20260605 formal report feedback cleanup: compact service feedback, no demo/promo feel. */
body.report-mode .feedback-submit-card {
  margin: 20px auto;
  padding: 16px;
  border: 1px solid rgba(214, 196, 161, .88);
  border-radius: 14px;
  background: #fffdf8;
  box-shadow: 0 10px 24px rgba(49, 39, 28, .08);
}

body.report-mode .feedback-submit-card::before,
body.report-mode .feedback-guide-steps {
  display: none !important;
}

body.report-mode .feedback-submit-head {
  display: grid;
  gap: 5px;
  margin: 0;
  padding: 0 0 12px;
  border-bottom: 1px solid rgba(214, 196, 161, .7);
}

body.report-mode .feedback-submit-head span {
  justify-self: start;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #80602c;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1.35;
}

body.report-mode .feedback-submit-head h2 {
  margin: 0;
  color: #223143;
  font-size: 22px;
  line-height: 1.25;
  font-weight: 950;
  letter-spacing: 0;
}

body.report-mode .feedback-submit-head p {
  max-width: none;
  margin: 0;
  color: #647184;
  font-size: 15px;
  line-height: 1.55;
  font-weight: 720;
}

body.report-mode .feedback-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

body.report-mode .feedback-field,
body.report-mode .feedback-privacy-field,
body.report-mode .feedback-rating-field {
  padding: 12px;
  border: 1px solid rgba(214, 196, 161, .78);
  border-radius: 10px;
  background: rgba(255, 255, 255, .88);
}

body.report-mode .feedback-rating-field,
body.report-mode .feedback-field--wide,
body.report-mode .feedback-avatar-field,
body.report-mode .feedback-actions {
  grid-column: 1 / -1;
}

body.report-mode .feedback-name-field,
body.report-mode .feedback-privacy-field--single {
  grid-column: span 1;
}

body.report-mode .feedback-field span,
body.report-mode .feedback-privacy-field legend,
body.report-mode .feedback-rating-field legend {
  padding: 0;
  color: #26364a;
  font-size: 15px;
  font-weight: 900;
  line-height: 1.35;
  letter-spacing: 0;
}

body.report-mode .feedback-field small,
body.report-mode .feedback-privacy-field--single small,
body.report-mode .feedback-rating-field small {
  margin-top: 7px;
  color: #6f7b8d;
  font-size: 13px;
  line-height: 1.45;
  font-weight: 650;
}

body.report-mode .feedback-field input:not([type="file"]),
body.report-mode .feedback-field textarea {
  margin-top: 8px;
  border-color: rgba(181, 194, 209, .84);
  border-radius: 8px;
  color: #223143;
  font-size: 16px;
}

body.report-mode .feedback-field textarea {
  min-height: 124px;
}

body.report-mode .feedback-rating-options {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  max-width: 460px;
  gap: 8px;
  margin-top: 8px;
}

body.report-mode .feedback-rating-options span {
  min-height: 38px;
  border-color: rgba(190, 170, 132, .72);
  border-radius: 8px;
  background: #fff;
  color: #6f5634;
  font-size: 14px;
  font-weight: 900;
}

body.report-mode .feedback-rating-options input:checked + span {
  border-color: rgba(45, 106, 93, .82);
  background: #2d6a5d;
  color: #fff;
  box-shadow: none;
}

body.report-mode .feedback-privacy-field--single {
  display: grid;
  align-content: start;
  gap: 8px;
}

body.report-mode .feedback-privacy-field--single label {
  min-height: 38px;
  padding: 0 12px;
  border-color: rgba(45, 106, 93, .28);
  border-radius: 8px;
  background: #f4faf7;
  color: #26364a;
  font-size: 15px;
}

body.report-mode .feedback-privacy-field--single input {
  accent-color: #2d6a5d;
}

body.report-mode #feedbackImageInput {
  margin-top: 8px;
  padding: 9px;
  border-color: rgba(181, 194, 209, .84);
  border-radius: 8px;
  background: #fff;
  color: #34455a;
  font-size: 14px;
}

body.report-mode #feedbackImageInput::file-selector-button {
  min-height: 34px;
  margin-right: 9px;
  padding: 0 12px;
  border-radius: 8px;
  background: #efe5d3;
  color: #4c3b24;
}

body.report-mode .feedback-actions {
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  padding-top: 4px;
}

body.report-mode .feedback-actions button {
  min-height: 44px;
  padding: 0 20px;
  border-radius: 8px;
  background: #c8103e;
  font-size: 16px;
  box-shadow: 0 8px 18px rgba(200, 16, 62, .18);
}

body.report-mode .feedback-actions p {
  margin: 0;
  color: #5c6878;
  font-size: 14px;
  font-weight: 720;
}

@media (max-width: 620px) {
  body.report-mode .feedback-submit-card {
    padding: 14px;
    border-radius: 12px;
  }

  body.report-mode .feedback-form {
    grid-template-columns: 1fr;
  }

  body.report-mode .feedback-name-field,
  body.report-mode .feedback-privacy-field--single {
    grid-column: 1 / -1;
  }

  body.report-mode .feedback-rating-options {
    grid-template-columns: repeat(5, minmax(44px, 1fr));
    gap: 6px;
  }

  body.report-mode .feedback-rating-options span {
    font-size: 13px;
  }

  body.report-mode .feedback-actions {
    align-items: stretch;
    flex-direction: column;
  }

  body.report-mode .feedback-actions button {
    width: 100%;
  }
}

/* 20260604 center report unlock button after demo button cleanup. */
body.report-mode .app-result-unlock-cta > button[data-payment-button] {
  display: inline-grid;
  place-items: center;
  justify-content: center;
  justify-self: center;
  width: min(100%, 280px);
  padding-left: 24px !important;
  padding-right: 24px !important;
  text-align: center;
}

/* 20260604 align report metrics with input page stats UI. */
body.report-mode #result .stats-section,
body.report-mode #result .app-result-metrics {
  margin: 18px auto;
  padding: 0;
  background: transparent;
  box-shadow: none;
}

body.report-mode #result .stats-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body.report-mode #result .stats-grid article {
  display: grid;
  place-items: center;
  min-height: 126px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-card);
}

body.report-mode #result .stats-grid article b {
  color: var(--primary);
  font-size: 36px;
  font-weight: 900;
  line-height: 1;
}

body.report-mode #result .stats-grid article span {
  margin-top: 8px;
  color: var(--ink);
  font-size: 18px;
  font-weight: 900;
  line-height: 1.35;
}

body.report-mode #result .helped-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  margin: 16px 0 0;
  padding: 14px 12px;
  border: 1px solid rgba(196, 162, 84, .35);
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, rgba(255, 245, 218, .9), rgba(255, 255, 255, .95));
  color: var(--ink);
  font-size: 18px;
  font-weight: 900;
  line-height: 1.45;
  text-align: center;
  box-shadow: none;
}

body.report-mode #result .helped-banner b {
  color: var(--ink);
  font-size: 18px;
  line-height: 1.45;
}

@media (min-width: 860px) {
  body.report-mode #result .stats-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  body.report-mode #result .stats-grid article {
    min-height: 150px;
  }

  body.report-mode #result .stats-grid article b {
    font-size: 46px;
  }
}

/* 20260604 final report stats width fix: match input stats full card width. */
body.report-mode #result .app-yijing-report > .stats-section {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  justify-self: stretch !important;
  align-self: stretch !important;
  box-sizing: border-box !important;
}

body.report-mode #result .app-yijing-report > .stats-section .stats-grid,
body.report-mode #result .app-yijing-report > .stats-section .helped-banner {
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box !important;
}

/* 20260604 match report helped banner to input page exactly. */
body.report-mode #result .app-yijing-report > .stats-section .helped-banner {
  margin-top: 16px !important;
  padding: 18px !important;
  border: 0 !important;
  border-radius: var(--radius-xl) !important;
  background: var(--soft-blue) !important;
  color: var(--accent) !important;
  text-align: center !important;
  box-shadow: none !important;
}

body.report-mode #result .app-yijing-report > .stats-section .helped-banner b {
  color: var(--ink) !important;
  font-size: 16px !important;
  line-height: 1.45 !important;
}

/* 20260604 fixed review card rhythm for input and report pages. */
:root {
  --review-card-width: min(92%, 342px);
  --review-card-gap-fixed: 14px;
  --review-stack-height-fixed: 188px;
}

.stories-section .review-carousel,
.stories-section .review-list,
.app-result-reviews,
#result .app-result-reviews {
  gap: var(--review-card-gap-fixed) !important;
}

.stories-section .story-card,
.stories-section .app-result-review-card,
#result .story-card,
#result .app-result-review-card {
  width: var(--review-card-width) !important;
  max-width: var(--review-card-width) !important;
  justify-self: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

.review-flip-stack,
.review-carousel-compact .review-flip-stack,
.stories-section .review-flip-stack,
#result .review-flip-stack {
  width: var(--review-card-width) !important;
  max-width: var(--review-card-width) !important;
  height: var(--review-stack-height-fixed) !important;
  min-height: var(--review-stack-height-fixed) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}

.review-flip-stack .story-card,
.review-carousel-compact .review-flip-stack .story-card,
.stories-section .review-flip-stack .story-card,
#result .review-flip-stack .story-card {
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  min-height: 168px !important;
  height: auto !important;
  margin: 0 !important;
  padding: 14px 16px !important;
  box-sizing: border-box !important;
}

.review-flip-stack .story-card[data-stack-slot="1"],
.review-carousel-compact .review-flip-stack .story-card[data-stack-slot="1"] {
  transform: translate3d(6px, 6px, 0) scale(.988) !important;
}

.review-flip-stack .story-card[data-stack-slot="2"],
.review-carousel-compact .review-flip-stack .story-card[data-stack-slot="2"] {
  transform: translate3d(12px, 12px, 0) scale(.976) !important;
}

.review-flip-stack .story-card[data-stack-slot="3"],
.review-carousel-compact .review-flip-stack .story-card[data-stack-slot="3"] {
  transform: translate3d(18px, 18px, 0) scale(.964) !important;
  opacity: .18 !important;
}

.story-card img,
.app-result-review-card img,
.review-avatar,
.review-user-avatar {
  flex: 0 0 48px !important;
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  min-height: 48px !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
}

.stories-section .story-card blockquote,
.stories-section .app-result-review-card blockquote,
#result .story-card blockquote,
#result .app-result-review-card blockquote {
  margin-top: 4px !important;
}

@media (max-width: 430px) {
  :root {
    --review-card-width: min(94%, 326px);
    --review-stack-height-fixed: 196px;
  }
}

/* 20260604 menu overlay: keep teacher brand card fixed while menu animates. */
.topbar {
  box-sizing: border-box !important;
  padding-right: 74px !important;
  isolation: isolate !important;
}

#menuButton.menu {
  position: fixed !important;
  top: calc(env(safe-area-inset-top, 0px) + 18px) !important;
  right: calc(env(safe-area-inset-right, 0px) + max(18px, ((100vw - min(100vw, 430px)) / 2 + 22px))) !important;
  z-index: 1405 !important;
  transform-origin: right center !important;
  will-change: width, border-radius, opacity !important;
}

.menu-panel {
  z-index: 1402 !important;
}

.menu-backdrop {
  z-index: 1398 !important;
}

.topbar > :not(#menuButton),
.topbar .brand,
.topbar .brand-card,
.topbar .site-brand,
.topbar .logo-card,
.topbar .brand-pill {
  transition: filter .24s ease, opacity .24s ease !important;
}

body.menu-open .topbar > :not(#menuButton):not(.menu-panel):not(.menu-backdrop),
body.menu-open .topbar .brand,
body.menu-open .topbar .brand-card,
body.menu-open .topbar .site-brand,
body.menu-open .topbar .logo-card,
body.menu-open .topbar .brand-pill {
  filter: blur(8px) saturate(.82) !important;
  opacity: .34 !important;
  pointer-events: none !important;
}

body.menu-open .topbar::after {
  content: "";
  position: absolute;
  inset: -7px -9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .34);
  border: 1px solid rgba(255, 255, 255, .38);
  box-shadow: 0 18px 42px rgba(30, 63, 92, .12);
  backdrop-filter: blur(18px) saturate(1.1);
  -webkit-backdrop-filter: blur(18px) saturate(1.1);
  pointer-events: none;
  z-index: 0;
}

body.menu-open .topbar > * {
  position: relative;
  z-index: 1;
}

body.menu-open #menuButton.menu {
  filter: none !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  z-index: 1406 !important;
}

@media (max-width: 380px) {
  .topbar {
    padding-right: 66px !important;
  }

  #menuButton.menu {
    right: calc(env(safe-area-inset-right, 0px) + max(14px, ((100vw - min(100vw, 430px)) / 2 + 16px))) !important;
  }
}

@media (min-width: 760px) {
  #menuButton.menu {
    top: calc(env(safe-area-inset-top, 0px) + 20px) !important;
    right: calc(env(safe-area-inset-right, 0px) + max(24px, ((100vw - min(100vw, 760px)) / 2 + 24px))) !important;
  }
}

/* 20260604 restore nameology-style menu: header stays in normal flow, only panel opens. */
.topbar {
  padding-right: clamp(14px, 4vw, 20px) !important;
  isolation: auto !important;
}

#menuButton.menu {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  z-index: auto !important;
  width: 40px !important;
  min-width: 40px !important;
  height: 40px !important;
  transform-origin: center !important;
  will-change: transform !important;
}

.menu[aria-expanded="true"] {
  display: inline-flex !important;
  grid-template-columns: none !important;
  justify-content: center !important;
  width: 40px !important;
  min-width: 40px !important;
  padding: 0 10px !important;
  gap: 0 !important;
}

.menu[aria-expanded="true"] .menu-label {
  width: 0 !important;
  min-width: 0 !important;
  opacity: 0 !important;
  transform: none !important;
}

.menu[aria-expanded="true"] .menu-icon {
  justify-self: center !important;
  width: 18px !important;
}

.menu-panel {
  position: fixed !important;
  top: var(--menu-panel-top) !important;
  left: 50% !important;
  right: auto !important;
  z-index: 56 !important;
  width: min(340px, calc(100vw - 24px)) !important;
  max-height: min(620px, calc(100dvh - var(--menu-panel-top) - 12px)) !important;
  translate: -50% 0 !important;
  transform-origin: top center !important;
}

.menu-backdrop {
  z-index: 32 !important;
  background: rgba(15, 23, 42, .18) !important;
  backdrop-filter: blur(3px) !important;
  -webkit-backdrop-filter: blur(3px) !important;
}

body.menu-open .topbar > :not(#menuButton):not(.menu-panel):not(.menu-backdrop),
body.menu-open .topbar .brand,
body.menu-open .topbar .brand-card,
body.menu-open .topbar .site-brand,
body.menu-open .topbar .logo-card,
body.menu-open .topbar .brand-pill {
  filter: none !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

body.menu-open .topbar::after {
  content: none !important;
  display: none !important;
}

body.menu-open #menuButton.menu {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  z-index: auto !important;
  filter: none !important;
}

@media (max-width: 380px) {
  .topbar {
    padding-right: 12px !important;
  }

  #menuButton.menu,
  .menu[aria-expanded="true"] {
    width: 40px !important;
    min-width: 40px !important;
  }
}

@media (min-width: 760px) {
  #menuButton.menu {
    position: relative !important;
    top: auto !important;
    right: auto !important;
  }
}

/* 20260604 stable centered menu panel: avoid translate property / GSAP transform conflict. */
.menu-panel {
  left: 50% !important;
  right: auto !important;
  translate: none !important;
  transform: translate3d(-50%, 0, 0) scale(1) !important;
  width: min(340px, calc(100vw - 24px)) !important;
  max-width: calc(100vw - 24px) !important;
  max-height: min(620px, calc(100dvh - var(--menu-panel-top) - 12px)) !important;
}

.menu-panel[hidden],
.menu-backdrop[hidden] {
  display: none !important;
}

body.menu-open .menu-panel {
  left: 50% !important;
  right: auto !important;
}

.menu-group-title.account-menu-group-title {
  display: flex;
  min-width: 0;
  max-width: 100%;
  align-items: baseline;
  gap: 8px;
  overflow: visible;
}

.menu-group-title .account-menu-group-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.menu-group-title .account-menu-id {
  flex: 0 1 auto;
  max-width: 118px;
  margin-left: auto;
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.1;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 360px) {
  .menu-group-title .account-menu-id {
    max-width: 96px;
    font-size: 11px;
  }
}

/* 20260604 tighten credentials-to-service spacing. */
#teacher + #support,
#teacher + .support-section,
.teacher-section + #support,
.teacher-section + .support-section,
.teacher-credentials-section + #support,
.teacher-credentials-section + .support-section,
.credentials-section + #support,
.credentials-section + .support-section,
section:has(.credential-grid) + section:has(.service-info),
section:has(.credential-card) + section:has(.service-info),
section:has(.teacher-credential) + section:has(.service-info),
section:has(.teacher-credential-card) + section:has(.service-info) {
  margin-top: 14px !important;
  padding-top: 14px !important;
}

#teacher,
.teacher-section,
.teacher-credentials-section,
.credentials-section,
section:has(.credential-grid),
section:has(.credential-card),
section:has(.teacher-credential),
section:has(.teacher-credential-card) {
  margin-bottom: 10px !important;
  padding-bottom: 10px !important;
}

#support,
.support-section,
.service-section,
.service-info-section,
section:has(.service-info) {
  margin-top: 10px !important;
}

/* 20260604 service gap v2: compact teacher-to-footer rhythm and LINE brand color. */
#teacher.teacher-section {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

#teacher .teacher-profile-block {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

#teacher .credential-grid {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

.site-footer {
  margin-top: 0 !important;
  padding-top: 8px !important;
}

.site-footer .footer-service-card {
  margin-top: 0 !important;
}

.site-footer .service-proof span {
  border-color: rgba(6, 199, 85, .24) !important;
  background: linear-gradient(180deg, #ffffff 0%, rgba(6, 199, 85, .055) 100%) !important;
}

.site-footer .service-proof b {
  background: #06c755 !important;
  color: #ffffff !important;
  box-shadow: 0 8px 18px rgba(6, 199, 85, .20) !important;
}

/* 20260604 service gap v3: the visible blank was main bottom padding below teacher photos. */
body:not(.report-mode) main {
  padding-bottom: 12px !important;
}

body:not(.report-mode) #teacher.teacher-section {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

body:not(.report-mode) .site-footer {
  padding-top: 6px !important;
}

/* 20260605 teacher profile compact: reduce tall credential bullet area. */
.teacher-copy {
  gap: 10px !important;
}

.teacher-copy ul {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px !important;
}

.teacher-copy li {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 10px 8px 26px !important;
  border-radius: 12px !important;
  font-size: clamp(14px, 3.8vw, 17px);
  line-height: 1.32 !important;
}

.teacher-copy li::before {
  left: 11px !important;
  top: 50% !important;
  width: 6px !important;
  height: 6px !important;
  transform: translateY(-50%);
}

@media (max-width: 340px) {
  .teacher-copy ul {
    grid-template-columns: 1fr;
  }
}

/* 20260604 compact bottom CTA: keep promo, reduce cramped right button. */
.bottom-cta {
  grid-template-columns: minmax(0, 1fr) minmax(150px, 43%) !important;
  gap: 10px !important;
}

.bottom-cta-copy {
  min-width: 0 !important;
}

.bottom-cta button {
  min-width: 150px !important;
  padding: 10px 12px !important;
  display: grid !important;
  grid-template-columns: auto auto !important;
  grid-template-areas:
    "badge badge"
    "label price" !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px 7px !important;
  white-space: nowrap !important;
}

.bottom-cta button .offer-badge-bounce {
  grid-area: badge !important;
  justify-self: center !important;
  padding: 3px 8px !important;
  font-size: 10px !important;
  line-height: 1 !important;
}

.bottom-cta button span {
  grid-area: label !important;
  font-size: 15px !important;
  line-height: 1.05 !important;
}

.bottom-cta button b {
  grid-area: price !important;
  font-size: 18px !important;
  line-height: 1 !important;
}

.bottom-cta button small {
  display: none !important;
}

@media (max-width: 380px) {
  .bottom-cta {
    grid-template-columns: minmax(0, .9fr) minmax(142px, 1fr) !important;
    gap: 8px !important;
  }

  .bottom-cta button {
    min-width: 142px !important;
    padding-inline: 9px !important;
  }

  .bottom-cta-copy small {
    display: none !important;
  }
}

/* Independent /yijing/ route pages. */
body.yijing-route-calculating main > section:not(#calculatingPage) {
  display: none !important;
}

body.yijing-route-calculating #calculatingPage {
  display: grid !important;
  min-height: calc(100vh - 132px);
  align-items: center;
  margin: 0 !important;
  padding: 14px 14px 28px !important;
}

.calculating-page-section {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(145deg, rgba(251, 247, 234, .98) 0%, rgba(239, 245, 241, .96) 48%, rgba(246, 249, 252, .98) 100%);
}

.calculating-page-section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(90deg, rgba(49, 95, 77, .04) 0 1px, transparent 1px 42px),
    repeating-linear-gradient(0deg, rgba(166, 124, 48, .035) 0 1px, transparent 1px 44px);
  opacity: .62;
}

.calc-page-card {
  position: relative;
  width: min(100%, 430px);
  margin: 0 auto;
  overflow: hidden;
  padding: 16px 16px 17px;
  border: 1px solid rgba(178, 144, 72, .34);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 253, 247, .95), rgba(248, 246, 238, .93));
  box-shadow: 0 18px 42px rgba(37, 48, 64, .12);
  text-align: center;
}

.calc-page-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 80px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(49, 95, 77, .08), transparent);
}

.calc-page-topline {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 34px;
}

.calc-page-kicker {
  display: inline-grid;
  place-items: center;
  min-height: 34px;
  padding: 0 13px;
  border: 1px solid rgba(190, 18, 60, .18);
  border-radius: 999px;
  background: rgba(190, 18, 60, .08);
  color: var(--primary);
  font-size: 13px;
  font-weight: 900;
}

.calc-page-method {
  display: inline-grid;
  place-items: center;
  min-height: 30px;
  padding: 0 11px;
  border: 1px solid rgba(49, 95, 77, .18);
  border-radius: 999px;
  color: #315f4d;
  background: rgba(49, 95, 77, .07);
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.calc-page-oracle {
  --progress-angle: 43deg;
  position: relative;
  z-index: 1;
  width: min(216px, 62vw);
  aspect-ratio: 1;
  margin: 14px auto 11px;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(49, 95, 77, .12) 58%, rgba(49, 95, 77, .18) 59% 100%),
    radial-gradient(circle, rgba(255, 253, 247, .96) 0 58%, rgba(234, 224, 202, .76) 59% 100%);
  box-shadow:
    inset 0 0 0 1px rgba(166, 124, 48, .36),
    inset 0 0 0 12px rgba(255, 253, 247, .72),
    0 16px 34px rgba(49, 95, 77, .15);
  animation: calcPageWheelBreath 3.2s ease-in-out infinite !important;
}

.calc-page-oracle::before {
  content: "";
  position: absolute;
  inset: 13px;
  border: 1px solid rgba(166, 124, 48, .45);
  border-radius: inherit;
  background:
    linear-gradient(90deg, transparent 49.5%, rgba(166, 124, 48, .18) 49.5% 50.5%, transparent 50.5%),
    linear-gradient(0deg, transparent 49.5%, rgba(166, 124, 48, .18) 49.5% 50.5%, transparent 50.5%);
}

.calc-page-oracle::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    conic-gradient(from -90deg, rgba(190, 18, 60, .96) 0 58deg, rgba(190, 18, 60, .18) 58deg 82deg, transparent 82deg 360deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 20px), #000 calc(100% - 19px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 20px), #000 calc(100% - 19px));
  pointer-events: none;
  animation: calcPageOrbit 1.65s linear infinite !important;
}

.calc-page-ring {
  position: absolute;
  inset: 0;
  z-index: 2;
  --ring-radius: 78px;
  animation: calcPageRingSpin 6.5s linear infinite !important;
}

.calc-page-ring span {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 31px;
  height: 31px;
  border: 1px solid rgba(166, 124, 48, .38);
  border-radius: 50%;
  background: rgba(255, 253, 247, .88);
  color: #9b6b15;
  font-size: 12px;
  font-weight: 900;
  box-shadow: 0 7px 16px rgba(49, 95, 77, .08);
  transform: translate(-50%, -50%) rotate(var(--angle)) translateY(calc(-1 * var(--ring-radius))) rotate(var(--angle-back));
}

.calc-page-ring span:nth-child(1) { --angle: 0deg; --angle-back: 0deg; }
.calc-page-ring span:nth-child(2) { --angle: 45deg; --angle-back: -45deg; }
.calc-page-ring span:nth-child(3) { --angle: 90deg; --angle-back: -90deg; }
.calc-page-ring span:nth-child(4) { --angle: 135deg; --angle-back: -135deg; }
.calc-page-ring span:nth-child(5) { --angle: 180deg; --angle-back: -180deg; }
.calc-page-ring span:nth-child(6) { --angle: 225deg; --angle-back: -225deg; }
.calc-page-ring span:nth-child(7) { --angle: 270deg; --angle-back: -270deg; }
.calc-page-ring span:nth-child(8) { --angle: 315deg; --angle-back: -315deg; }

.calc-page-core {
  position: absolute;
  inset: 54px;
  z-index: 3;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(190, 18, 60, .18);
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255, 253, 247, .98), rgba(238, 229, 208, .88));
  box-shadow: inset 0 0 0 6px rgba(255, 255, 255, .42);
  animation: calcPageCorePulse 1.8s ease-in-out infinite !important;
}

.calc-page-hexagram {
  display: grid;
  gap: 7px;
  width: 86px;
  animation: calcPageHexagramFloat 1.9s ease-in-out infinite !important;
}

.calc-page-hexagram i {
  position: relative;
  display: block;
  height: 7px;
  border-radius: 999px;
  animation: calcPageLineGlow 1.2s ease-in-out infinite !important;
  animation-delay: calc(var(--line-index, 0) * .13s);
}

.calc-page-hexagram i::before,
.calc-page-hexagram i::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: inherit;
  background: var(--primary);
}

.calc-page-hexagram .yang::before {
  left: 0;
  right: 0;
}

.calc-page-hexagram .yin::before {
  left: 0;
  width: 41%;
}

.calc-page-hexagram .yin::after {
  right: 0;
  width: 41%;
}

.calc-page-hexagram i:nth-child(1) { --line-index: 0; }
.calc-page-hexagram i:nth-child(2) { --line-index: 1; }
.calc-page-hexagram i:nth-child(3) { --line-index: 2; }
.calc-page-hexagram i:nth-child(4) { --line-index: 3; }
.calc-page-hexagram i:nth-child(5) { --line-index: 4; }
.calc-page-hexagram i:nth-child(6) { --line-index: 5; }

.calc-page-card h2 {
  position: relative;
  z-index: 1;
  margin: 0 0 7px;
  color: var(--ink);
  font-size: clamp(24px, 5.7vw, 30px);
  line-height: 1.18;
  font-weight: 950;
  letter-spacing: 0;
}

.calc-page-card p {
  position: relative;
  z-index: 1;
  margin: 0;
  color: #315f4d;
  font-weight: 800;
  line-height: 1.72;
}

.calc-page-progress-wrap {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  margin: 13px 0 13px;
}

.calc-page-progress-wrap strong {
  min-width: 47px;
  color: var(--primary);
  font-size: 20px;
  font-weight: 950;
  line-height: 1;
  text-align: left;
}

.calc-page-progress-wrap span {
  color: #9b6b15;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.calc-page-progress {
  --progress: 14%;
  height: 13px;
  border-radius: 999px;
  border: 1px solid rgba(166, 124, 48, .28);
  background: rgba(255, 253, 247, .72);
  overflow: hidden;
}

.calc-page-progress i {
  display: block;
  width: var(--progress);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #315f4d, #be123c, #d79a22);
  transition: width .45s ease;
}

.calc-page-steps {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 5px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.calc-page-steps li {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 46px;
  padding: 16px 3px 6px;
  border: 1px solid rgba(49, 95, 77, .15);
  border-radius: 8px;
  color: #667085;
  font-size: 11.5px;
  font-weight: 900;
  line-height: 1.2;
  background: rgba(255, 255, 255, .56);
}

.calc-page-steps li::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 50%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(49, 95, 77, .24);
  transform: translateX(-50%);
}

.calc-page-steps li.is-active,
.calc-page-steps li.is-done {
  border-color: rgba(190, 18, 60, .26);
  color: var(--ink);
  background: linear-gradient(180deg, rgba(190, 18, 60, .08), rgba(255, 253, 247, .84));
}

.calc-page-steps li.is-active::before {
  background: var(--primary);
  box-shadow: 0 0 0 5px rgba(190, 18, 60, .12);
}

.calc-page-steps li.is-done::before {
  background: #315f4d;
}

.calc-page-hint {
  margin-top: 12px !important;
  padding: 9px 10px;
  border: 1px solid rgba(49, 95, 77, .13);
  border-radius: 8px;
  background: rgba(49, 95, 77, .055);
  font-size: 13px !important;
  color: #314c45 !important;
  font-weight: 800 !important;
  line-height: 1.55 !important;
}

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

@keyframes calcPageWheelBreath {
  0%, 100% {
    transform: scale(.97) rotate(-1.5deg);
  }
  50% {
    transform: scale(1.04) rotate(1.5deg);
  }
}

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

@keyframes calcPageCorePulse {
  0%, 100% {
    transform: scale(.98);
    box-shadow:
      inset 0 0 0 6px rgba(255, 255, 255, .42),
      0 0 0 0 rgba(190, 18, 60, .12);
  }
  50% {
    transform: scale(1.04);
    box-shadow:
      inset 0 0 0 6px rgba(255, 255, 255, .5),
      0 0 0 10px rgba(190, 18, 60, .07);
  }
}

@keyframes calcPageHexagramFloat {
  0%, 100% { transform: translateY(3px); }
  50% { transform: translateY(-4px); }
}

@keyframes calcPageLineGlow {
  0%, 100% {
    opacity: .62;
    transform: scaleX(.9);
    filter: saturate(.85);
  }
  50% {
    opacity: 1;
    transform: scaleX(1.08);
    filter: saturate(1.25);
  }
}

@media (prefers-reduced-motion: reduce) {
  body.yijing-route-calculating .calc-page-oracle {
    animation: calcPageWheelBreath 3.2s ease-in-out infinite !important;
  }

  .calc-page-oracle::after {
    animation: calcPageOrbit 1.65s linear infinite !important;
  }

  body.yijing-route-calculating .calc-page-ring {
    animation: calcPageRingSpin 6.5s linear infinite !important;
  }

  body.yijing-route-calculating .calc-page-core {
    animation: calcPageCorePulse 1.8s ease-in-out infinite !important;
  }

  body.yijing-route-calculating .calc-page-hexagram {
    animation: calcPageHexagramFloat 1.9s ease-in-out infinite !important;
  }

  body.yijing-route-calculating .calc-page-hexagram i {
    animation: calcPageLineGlow 1.2s ease-in-out infinite !important;
  }
}

@media (max-width: 380px) {
  body.yijing-route-calculating #calculatingPage {
    padding-inline: 12px !important;
  }

  .calc-page-card {
    padding: 15px 13px 16px;
  }

  .calc-page-oracle {
    width: min(204px, 62vw);
    margin-top: 13px;
  }

  .calc-page-core {
    inset: 51px;
  }

  .calc-page-ring {
    --ring-radius: 73px;
  }

  .calc-page-hexagram {
    width: 80px;
    gap: 6px;
  }

  .calc-page-steps {
    gap: 4px;
  }

  .calc-page-steps li {
    min-height: 45px;
    padding-inline: 2px;
    font-size: 10.8px;
  }
}

body.yijing-route-calculating .bottom-cta {
  display: none !important;
}

body.yijing-route-calculating .site-footer {
  padding-top: 12px !important;
}

/* Report locked professional card: plain text, no boxed background. */
body.report-mode .app-professional-locked .app-card-header {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  width: auto;
  margin: 0 0 14px;
  padding: 0;
  border: 0;
  background: transparent;
}

body.report-mode .app-professional-locked .app-report-icon {
  display: inline-grid;
  place-items: center;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 50%;
  background: rgba(228, 0, 70, .1);
  color: #e40046;
  box-shadow: none;
  font-size: 0;
  overflow: hidden;
}

body.report-mode .app-professional-locked .app-report-icon::before {
  top: 23%;
  width: 38%;
  height: 30%;
  border-width: 2px;
}

body.report-mode .app-professional-locked .app-report-icon::after {
  top: 47%;
  width: 48%;
  height: 34%;
  border-radius: 3px;
}

body.report-mode .app-professional-locked .app-card-header b {
  display: inline;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: #e40046;
  font-size: 18px;
  font-weight: 900;
  line-height: 1.35;
  letter-spacing: .04em;
  white-space: normal;
}

/* Liuyao table: keep full text visible while scrolling horizontally. */
body.report-mode .app-liuyao-report-card {
  padding-inline: 8px;
}

body.report-mode .app-liuyao-report-card .app-card-header {
  margin-inline: 6px;
}

body.report-mode .app-liuyao-plate {
  width: calc(100% + 4px);
  max-width: calc(100% + 4px);
  margin-inline: -2px;
}

body.report-mode .app-liuyao-table .app-liuyao-header,
body.report-mode .app-liuyao-table .app-liuyao-row {
  grid-template-columns: 58px 96px 80px 58px 58px 62px 62px 210px;
  min-width: 704px;
}

body.report-mode .app-liuyao-table .app-liuyao-header span,
body.report-mode .app-liuyao-table .app-liuyao-row > span,
body.report-mode .app-liuyao-table .app-liuyao-row > b {
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
}

body.report-mode .app-liuyao-table .app-liuyao-row > b.is-hard,
body.report-mode .app-liuyao-table .app-liuyao-row > b.is-world,
body.report-mode .app-liuyao-table .app-liuyao-row > b.is-moving-mark {
  min-width: max-content;
}

body.report-mode .app-liuyao-table .app-liuyao-row > b.is-focus-label {
  min-width: 0;
}

/* 20260605 reviews global: one visible card with random carousel across all review areas. */
.stories-section .review-compact-stack-list,
.review-panel-block .review-compact-stack-list,
.app-result-reviews .review-compact-stack-list,
#result .app-result-reviews .review-compact-stack-list {
  display: grid !important;
  grid-template-columns: 1fr !important;
  justify-items: stretch !important;
  width: 100% !important;
  max-width: min(100%, 430px) !important;
  margin-inline: auto !important;
  gap: 0 !important;
  overflow: visible !important;
}

.review-carousel-compact,
.review-panel-block .review-carousel-compact,
.stories-section .review-carousel-compact,
.app-result-reviews .review-carousel-compact,
#result .app-result-reviews .review-carousel-compact {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-height: 0 !important;
  height: auto !important;
  margin: 0 !important;
  overflow: visible !important;
}

.review-carousel-compact .review-flip-stack,
.review-panel-block .review-flip-stack,
.stories-section .review-flip-stack,
.app-result-reviews .review-flip-stack,
#result .app-result-reviews .review-flip-stack {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-height: 0 !important;
  height: auto !important;
  margin: 0 !important;
  overflow: visible !important;
  perspective: none !important;
  cursor: pointer !important;
}

.review-carousel-compact .review-flip-stack .story-card,
.review-panel-block .review-flip-stack .story-card,
.stories-section .review-flip-stack .story-card,
.app-result-reviews .review-flip-stack .story-card,
#result .app-result-reviews .review-flip-stack .story-card {
  display: none !important;
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  min-height: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 18px 20px !important;
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  outline: 0 !important;
  box-shadow: 0 8px 18px rgba(44, 55, 68, .10) !important;
}

.review-carousel-compact .review-flip-stack .story-card.is-active,
.review-panel-block .review-flip-stack .story-card.is-active,
.stories-section .review-flip-stack .story-card.is-active,
.app-result-reviews .review-flip-stack .story-card.is-active,
#result .app-result-reviews .review-flip-stack .story-card.is-active {
  display: grid !important;
}

.review-carousel-compact .review-flip-stack .story-card blockquote,
.review-panel-block .review-flip-stack .story-card blockquote,
.stories-section .review-flip-stack .story-card blockquote,
.app-result-reviews .review-flip-stack .story-card blockquote,
#result .app-result-reviews .review-flip-stack .story-card blockquote {
  display: block !important;
  -webkit-line-clamp: unset !important;
  max-height: none !important;
  overflow: visible !important;
}

/* 20260605 report reviews: use clean vertical cards, not stacked carousel backs. */
body.report-mode #result .app-result-reviews .review-compact-stack-list {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 14px !important;
  overflow: visible !important;
}

body.report-mode #result .app-result-reviews .review-carousel-compact {
  display: block !important;
  width: 100% !important;
  min-height: 0 !important;
  height: auto !important;
  margin: 0 !important;
  overflow: visible !important;
}

body.report-mode #result .app-result-reviews .review-flip-stack {
  width: 100% !important;
  max-width: 100% !important;
  min-height: 0 !important;
  height: auto !important;
  margin: 0 !important;
  overflow: visible !important;
  perspective: none !important;
  cursor: default !important;
}

body.report-mode #result .app-result-reviews .review-flip-stack .story-card {
  display: none !important;
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  min-height: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 18px 20px !important;
  transform: none !important;
  opacity: 1 !important;
  outline: 0 !important;
  box-shadow: 0 8px 18px rgba(44, 55, 68, .10) !important;
}

body.report-mode #result .app-result-reviews .review-flip-stack .story-card.is-active {
  display: grid !important;
}

body.report-mode #result .app-result-reviews .story-card blockquote,
body.report-mode #result .app-result-reviews .app-result-review-card blockquote {
  display: block !important;
  -webkit-line-clamp: unset !important;
  max-height: none !important;
  overflow: visible !important;
}

/* 20260605 reviews stack restore: one readable card with animated blank backs. */
.review-carousel-compact,
.review-panel-block .review-carousel-compact,
.stories-section .review-carousel-compact,
.app-result-reviews .review-carousel-compact,
#result .app-result-reviews .review-carousel-compact,
body.report-mode #result .app-result-reviews .review-carousel-compact {
  min-height: var(--review-stack-height, 226px) !important;
  height: var(--review-stack-height, 226px) !important;
  overflow: visible !important;
}

.review-carousel-compact .review-flip-stack,
.review-panel-block .review-flip-stack,
.stories-section .review-flip-stack,
.app-result-reviews .review-flip-stack,
#result .app-result-reviews .review-flip-stack,
body.report-mode #result .app-result-reviews .review-flip-stack {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-height: var(--review-stack-height, 226px) !important;
  height: var(--review-stack-height, 226px) !important;
  margin: 0 !important;
  overflow: visible !important;
  perspective: 900px !important;
  cursor: pointer !important;
  isolation: isolate !important;
}

.review-carousel-compact .review-flip-stack .story-card,
.review-panel-block .review-flip-stack .story-card,
.stories-section .review-flip-stack .story-card,
.app-result-reviews .review-flip-stack .story-card,
#result .app-result-reviews .review-flip-stack .story-card,
body.report-mode #result .app-result-reviews .review-flip-stack .story-card {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: auto !important;
  display: grid !important;
  width: calc(100% - 20px) !important;
  max-width: calc(100% - 20px) !important;
  min-height: 176px !important;
  height: auto !important;
  margin: 0 !important;
  padding: 18px 20px !important;
  transform-origin: top left !important;
  backface-visibility: hidden !important;
  pointer-events: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  outline: 0 !important;
  transition:
    transform .56s cubic-bezier(.22, 1, .36, 1),
    opacity .42s ease,
    visibility .42s ease,
    box-shadow .22s ease,
    border-color .22s ease !important;
}

.review-carousel-compact .review-flip-stack .story-card:not(.is-active) > *,
.review-panel-block .review-flip-stack .story-card:not(.is-active) > *,
.stories-section .review-flip-stack .story-card:not(.is-active) > *,
.app-result-reviews .review-flip-stack .story-card:not(.is-active) > *,
#result .app-result-reviews .review-flip-stack .story-card:not(.is-active) > *,
body.report-mode #result .app-result-reviews .review-flip-stack .story-card:not(.is-active) > * {
  opacity: 0 !important;
}

.review-carousel-compact .review-flip-stack .story-card[data-stack-slot="0"],
.review-panel-block .review-flip-stack .story-card[data-stack-slot="0"],
.stories-section .review-flip-stack .story-card[data-stack-slot="0"],
.app-result-reviews .review-flip-stack .story-card[data-stack-slot="0"],
#result .app-result-reviews .review-flip-stack .story-card[data-stack-slot="0"],
body.report-mode #result .app-result-reviews .review-flip-stack .story-card[data-stack-slot="0"] {
  z-index: 5 !important;
  visibility: visible !important;
  opacity: 1 !important;
  transform: translate3d(0, 0, 0) scale(1) !important;
  pointer-events: auto !important;
  border-color: #b9c8d8 !important;
  box-shadow: 0 10px 22px rgba(44, 55, 68, .12) !important;
}

.review-carousel-compact .review-flip-stack .story-card[data-stack-slot="1"],
.review-panel-block .review-flip-stack .story-card[data-stack-slot="1"],
.stories-section .review-flip-stack .story-card[data-stack-slot="1"],
.app-result-reviews .review-flip-stack .story-card[data-stack-slot="1"],
#result .app-result-reviews .review-flip-stack .story-card[data-stack-slot="1"],
body.report-mode #result .app-result-reviews .review-flip-stack .story-card[data-stack-slot="1"] {
  z-index: 4 !important;
  visibility: visible !important;
  opacity: .78 !important;
  transform: translate3d(10px, 8px, 0) scale(.986) !important;
  border-color: #b7c8db !important;
  background: #fbfdff !important;
  box-shadow: 0 9px 16px rgba(44, 55, 68, .13) !important;
}

.review-carousel-compact .review-flip-stack .story-card[data-stack-slot="2"],
.review-panel-block .review-flip-stack .story-card[data-stack-slot="2"],
.stories-section .review-flip-stack .story-card[data-stack-slot="2"],
.app-result-reviews .review-flip-stack .story-card[data-stack-slot="2"],
#result .app-result-reviews .review-flip-stack .story-card[data-stack-slot="2"],
body.report-mode #result .app-result-reviews .review-flip-stack .story-card[data-stack-slot="2"] {
  z-index: 3 !important;
  visibility: visible !important;
  opacity: .52 !important;
  transform: translate3d(20px, 16px, 0) scale(.972) !important;
  border-color: #c7d4e2 !important;
  background: #f7fbff !important;
  box-shadow: 0 7px 12px rgba(44, 55, 68, .1) !important;
}

.review-carousel-compact .review-flip-stack .story-card[data-stack-slot="3"],
.review-panel-block .review-flip-stack .story-card[data-stack-slot="3"],
.stories-section .review-flip-stack .story-card[data-stack-slot="3"],
.app-result-reviews .review-flip-stack .story-card[data-stack-slot="3"],
#result .app-result-reviews .review-flip-stack .story-card[data-stack-slot="3"],
body.report-mode #result .app-result-reviews .review-flip-stack .story-card[data-stack-slot="3"] {
  z-index: 2 !important;
  visibility: visible !important;
  opacity: .24 !important;
  transform: translate3d(26px, 24px, 0) scale(.958) !important;
  border-color: #d4dee9 !important;
  background: #f4f8fc !important;
  box-shadow: 0 5px 10px rgba(44, 55, 68, .08) !important;
}

@media (max-width: 420px) {
  .review-carousel-compact,
  .review-panel-block .review-carousel-compact,
  .stories-section .review-carousel-compact,
  .app-result-reviews .review-carousel-compact,
  #result .app-result-reviews .review-carousel-compact,
  body.report-mode #result .app-result-reviews .review-carousel-compact {
    min-height: var(--review-stack-height, 232px) !important;
    height: var(--review-stack-height, 232px) !important;
  }

  .review-carousel-compact .review-flip-stack,
  .review-panel-block .review-flip-stack,
  .stories-section .review-flip-stack,
  .app-result-reviews .review-flip-stack,
  #result .app-result-reviews .review-flip-stack,
  body.report-mode #result .app-result-reviews .review-flip-stack {
    min-height: var(--review-stack-height, 232px) !important;
    height: var(--review-stack-height, 232px) !important;
  }

  .review-carousel-compact .review-flip-stack .story-card,
  .review-panel-block .review-flip-stack .story-card,
  .stories-section .review-flip-stack .story-card,
  .app-result-reviews .review-flip-stack .story-card,
  #result .app-result-reviews .review-flip-stack .story-card,
  body.report-mode #result .app-result-reviews .review-flip-stack .story-card {
    width: calc(100% - 18px) !important;
    max-width: calc(100% - 18px) !important;
  }
}

/* 20260605 bottom CTA safe edge: keep fixed bar copy away from viewport edge. */
.bottom-cta {
  box-sizing: border-box !important;
  padding-left: max(16px, env(safe-area-inset-left)) !important;
  padding-right: max(10px, env(safe-area-inset-right)) !important;
}

@media (max-width: 380px) {
  .bottom-cta {
    padding-left: max(14px, env(safe-area-inset-left)) !important;
    padding-right: max(8px, env(safe-area-inset-right)) !important;
  }
}