/* 红娘录独立品牌样式仅由本产品及协议页面加载，复用官网公共布局。 */
.hongnianglu-page {
  --color-primary: #c93456;
  --color-primary-dark: #a82443;
  --color-accent: #e8506e;
  --hml-soft: #fff5f7;
}

.hongnianglu-page :is(a, summary):focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 4px;
}
.hongnianglu-page [id] { scroll-margin-top: 90px; }
.hml-hero {
  overflow: hidden;
  background:
    radial-gradient(620px 440px at 90% 18%, rgba(232, 80, 110, 0.12), transparent 70%),
    linear-gradient(180deg, #fff7f8, #fff);
}
.hml-brand { display: flex; align-items: center; gap: 16px; margin: 16px 0 24px; }
.hml-brand img { width: 72px; height: 72px; border-radius: 20px; box-shadow: 0 10px 26px rgba(201, 52, 86, 0.18); }
.hml-brand strong { display: block; font-size: 22px; }
.hml-brand span { color: var(--color-text-soft); font-size: 14px; }
.hml-accent { color: var(--color-primary); }
.hml-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0; }
.hml-tags span { padding: 5px 12px; border: 1px solid #f2d5dd; border-radius: 999px; background: #fff; color: #97314a; font-size: 13px; }
.hml-note { color: var(--color-text-soft); font-size: 13px; line-height: 1.8; }

/* 真实截图保留原比例；手机边框用于展示，不改变 App 截图中的内容。 */
.hml-preview { margin: 0; }
.hml-phone { max-width: 320px; margin: 0 auto; padding: 12px; border-radius: 40px; background: #28212a; box-shadow: 0 30px 65px rgba(83, 28, 47, 0.2); }
.hml-phone img { width: 100%; height: auto; border-radius: 28px; }
.hml-preview figcaption { margin-top: 18px; color: var(--color-text-soft); text-align: center; font-size: 12px; }
.hml-feature-section { background: var(--hml-soft); }

/* 截图画廊使用真实图片，并在窄屏降为单列，避免详情文字与图片被挤压。 */
.hml-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.hml-gallery-item { margin: 0; padding: 24px; border: 1px solid #f2d5dd; border-radius: var(--radius-lg); background: var(--hml-soft); }
.hml-gallery-item > a { display: block; max-width: 250px; margin: 0 auto; overflow: hidden; border: 6px solid #28212a; border-radius: 24px; background: #28212a; box-shadow: 0 12px 28px rgba(83, 28, 47, 0.1); }
.hml-gallery-item img { width: 100%; height: auto; }
.hml-gallery-item h3 { margin: 22px 0 8px; font-size: 19px; }
.hml-gallery-item p { margin: 0; color: var(--color-text-soft); font-size: 14px; }
.hml-gallery-note { margin-top: 24px; text-align: center; }
.hml-workflow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.hml-step { padding: 28px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.hml-step > span { display: inline-grid; width: 40px; height: 40px; place-items: center; border-radius: 12px; background: var(--hml-soft); color: var(--color-primary); font-weight: 700; }
.hml-step h3 { margin: 18px 0 10px; font-size: 19px; }
.hml-step p { margin: 0; color: var(--color-text-soft); font-size: 14px; }
.hml-legal-section { background: var(--hml-soft); }
.hml-legal-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; max-width: 860px; margin: 0 auto; }
.hml-legal-link { display: block; padding: 30px; border: 1px solid #f2d5dd; border-radius: var(--radius-lg); background: #fff; transition: border-color var(--transition), transform var(--transition); }
.hml-legal-link:hover { transform: translateY(-3px); border-color: var(--color-primary); }
.hml-legal-link h3 { margin: 0 0 12px; font-size: 22px; }
.hml-legal-link p { margin: 0 0 20px; color: var(--color-text-soft); font-size: 14px; }
.hml-legal-link span { color: var(--color-primary); font-weight: 600; }
.hml-cta { background: linear-gradient(135deg, #9c2845, #c93456 60%, #e8506e); }
.hml-footer-copy { margin: 0 0 16px; line-height: 1.8; }

/* 两份协议共用阅读样式；宽表格在容器内横向滚动，避免撑宽手机页面。 */
.hml-legal { max-width: 960px; margin: 0 auto; padding: 40px 24px 64px; color: #333; font-size: 15px; line-height: 1.9; overflow-wrap: anywhere; }
.hml-legal h1 { margin: 8px 0; color: var(--color-text); text-align: center; font-size: 30px; }
.hml-legal .meta { margin: 0 0 30px; color: var(--color-text-soft); text-align: center; font-size: 13px; }
/* 日期作为完整文本换行，防止手机端将最后一个“日”挤到下一行。 */
.hml-legal .meta span { display: inline-block; white-space: nowrap; }
.hml-legal .meta span + span::before { content: " · "; white-space: pre; }
.hml-legal h2 { margin: 34px 0 12px; padding-bottom: 8px; border-bottom: 1px solid #f2d5dd; color: var(--color-text); font-size: 20px; }
.hml-legal h3 { margin: 22px 0 10px; color: var(--color-text); font-size: 17px; }
.hml-legal p { margin: 12px 0; }
.hml-legal ul, .hml-legal ol { padding-left: 24px; }
.hml-legal li { margin: 7px 0; }
.hml-legal a { color: var(--color-primary); text-decoration: underline; text-underline-offset: 3px; }
.hml-legal .back-link { text-decoration: none; }
.hml-legal .notice { margin: 24px 0; padding: 18px 22px; border-left: 3px solid var(--color-primary); border-radius: 6px; background: var(--hml-soft); }
.hml-legal .toc { margin: 24px 0; padding: 18px 24px; border: 1px solid #f2d5dd; border-radius: 14px; background: var(--hml-soft); }
.hml-legal .toc ol { margin: 8px 0 0; }
.hml-legal .table-wrap { max-width: 100%; overflow-x: auto; margin: 16px 0 24px; }
.hml-legal table { width: 100%; min-width: 680px; border-collapse: collapse; font-size: 13px; }
.hml-legal caption { margin-bottom: 10px; text-align: left; font-weight: 700; }
.hml-legal th, .hml-legal td { padding: 12px; border: 1px solid #eadde1; text-align: left; vertical-align: top; }
.hml-legal th { background: var(--hml-soft); color: var(--color-text); }
.hml-legal .end { margin-top: 36px; text-align: center; color: var(--color-text-soft); font-size: 13px; }

/* 兼容官网既有 ?from=app 约定，让 App 内只呈现协议正文。 */
.in-app .hongnianglu-page .nav,
.in-app .hongnianglu-page .footer,
.in-app .hongnianglu-page .back-link { display: none; }
.in-app .hml-legal { padding-top: 20px; }

@media (max-width: 960px) {
  .hml-workflow { grid-template-columns: 1fr; }
  .hml-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .hml-brand img { width: 60px; height: 60px; border-radius: 17px; }
  .hml-legal-grid { grid-template-columns: 1fr; }
  .hml-gallery { grid-template-columns: 1fr; }
  .hml-legal { padding: 28px 20px 48px; }
  .hml-legal h1 { font-size: 24px; }
  .hml-legal h2 { font-size: 18px; }
  .hml-legal .meta span { display: block; }
  .hml-legal .meta span + span::before { content: none; }
}