/* Shared reading theme for the Xinghuidao document pages. */
:root {
  --ice: #f4f8fb;
  --white: #ffffff;
  --ink: #102940;
  --text: #3c5163;
  --muted: #627585;
  --blue: #147cbd;
  --aqua: #d7f1eb;
  --line: #dde8ee;
  --yellow: #ffd572;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}
* { box-sizing: border-box; min-width: 0; }
html { background: var(--ice); scroll-behavior: smooth; scroll-padding-top: 28px; }
body { margin: 0; color: var(--text); font: 1rem/1.85 var(--sans); overflow-wrap: anywhere; -webkit-font-smoothing: antialiased; }
a { color: #086da9; text-underline-offset: .22em; }
a:hover { color: var(--ink); }
button, summary, a { -webkit-tap-highlight-color: transparent; }
a:focus-visible, summary:focus-visible { outline: 3px solid #147cbd; outline-offset: 4px; border-radius: 6px; }
img, svg { max-width: 100%; }
img { display: block; flex-shrink: 0; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
h1, h2, h3, strong { color: var(--ink); }
.skip-link { position: absolute; z-index: 50; left: 16px; top: -100px; padding: 12px 20px; background: white; }
.skip-link:focus { top: 10px; }
.legal-header { display: flex; align-items: center; gap: 22px; padding: 18px max(24px, calc((100% - 1240px) / 2)); background: white; border-bottom: 1px solid var(--line); }
.island-brand { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-size: 1.25rem; font-weight: 780; letter-spacing: .06em; flex-shrink: 0; min-height: 44px; }
.header-divider { height: 22px; width: 1px; background: var(--line); }
.header-label { color: var(--muted); font-size: .875rem; }
.home-link { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 44px; margin-left: auto; padding: 8px 16px; background: var(--ice); border-radius: 12px; color: var(--ink); text-decoration: none; font-size: .875rem; font-weight: 600; }
.home-link:hover { background: var(--aqua); }
.legal-shell { width: min(1240px, calc(100% - 64px)); margin: 0 auto; padding: 34px 0 88px; }
.breadcrumb { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; font-size: .8rem; color: var(--muted); }
.breadcrumb a { color: var(--muted); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.breadcrumb > span:nth-child(2) { color: #aebfc9; }
.document-intro { padding: 25px 0 39px; }
.intro-label { display: flex; align-items: center; gap: 8px; font-size: .8rem; font-weight: 700; letter-spacing: .06em; color: #177f7a; }
.intro-label > span { width: 7px; height: 7px; border-radius: 50%; background: #2da99c; }
.document-intro h1 { margin: 11px 0 13px; font-size: clamp(2rem, 4.4vw, 3.25rem); line-height: 1.3; font-weight: 780; letter-spacing: -.045em; }
.document-intro > p { margin: 0 0 17px; color: var(--muted); max-width: 720px; }
.document-meta { color: var(--muted); font-size: .78rem; line-height: 1.9; }
.reader-layout { display: grid; grid-template-columns: 244px minmax(0, 1fr); gap: 32px; align-items: start; }
.reader-sidebar { display: grid; gap: 16px; }
.reader-sidebar details { padding: 14px; border: 1px solid var(--line); border-radius: 20px; background: white; }
.reader-sidebar summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 10px; min-height: 44px; font-size: .875rem; color: var(--ink); font-weight: 700; cursor: pointer; list-style: none; }
summary::-webkit-details-marker { display: none; }
summary > span { color: var(--muted); transition: transform .2s; }
details[open] > summary > span { transform: rotate(180deg); }
.reader-sidebar nav { margin-top: 6px; }
.doc-switcher nav { display: grid; gap: 4px; }
.doc-switcher nav a { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 12px; min-height: 46px; font-size: .875rem; line-height: 1.7; color: var(--text); border-radius: 11px; text-decoration: none; }
.doc-switcher nav a > span:last-child { flex-shrink: 0; color: #8ca2b3; }
.doc-switcher nav a[aria-current], .doc-switcher nav a:hover { background: var(--aqua); color: var(--ink); }
.doc-switcher nav a[aria-current] { font-weight: 700; }
.toc ol { margin: 0; padding: 0; list-style: none; counter-reset: contents; }
.toc li { counter-increment: contents; }
.toc a { display: grid; grid-template-columns: 20px minmax(0,1fr); gap: 8px; padding: 10px 8px; min-height: 44px; color: var(--muted); font-size: .875rem; line-height: 1.8; text-decoration: none; border-radius: 8px; }
.toc a::before { content: counter(contents, decimal-leading-zero); font-size: .65rem; padding-top: 2px; color: #6e899d; }
.toc a:hover, .toc a[aria-current] { color: #086da9; background: #f0f8fd; }
.side-help { display: grid; padding: 22px 24px; border-radius: 20px; background: var(--aqua); color: var(--ink); font-size: .95rem; font-weight: 700; text-decoration: none; }
.side-help span { padding-top: 4px; font-size: .78rem; font-weight: 400; color: #386962; }
.document-body { padding: clamp(24px, 3.6vw, 48px); background: white; border: 1px solid var(--line); border-radius: 28px; }
.document-body > * + * { margin-top: 34px; }
.document-body h2 { font-size: clamp(1.3rem, 2.4vw, 1.55rem); line-height: 1.55; margin: 0 0 22px; padding-top: 9px; letter-spacing: -.02em; scroll-margin-top: 28px; }
.document-body h2::before { content: ""; display: block; width: 28px; height: 4px; margin-bottom: 17px; border-radius: 4px; background: #62b4d0; }
.document-body h3 { margin: 28px 0 12px; font-size: 1.07rem; line-height: 1.65; }
.document-body ul, .document-body ol { padding-left: 1.4em; margin: 12px 0 20px; }
.document-body li { padding-left: .1em; margin-bottom: 9px; }
.document-body strong { font-weight: 650; }
.prose-section + .prose-section, .agreement-section + .agreement-section, .clause-section + .clause-section, .section + .section { padding-top: 30px; border-top: 1px solid var(--line); }
.description, .intro-section, .company-info { color: var(--text); }
.document-body > .description:first-child, .document-body > .intro-section:first-child, .document-body > .company-info:first-child { padding-bottom: 28px; border-bottom: 1px solid var(--line); }
.highlight { color: var(--ink); font-weight: 600; background: #eff8fd; border-radius: 3px; }
.warning-box, .important-notice, .important-note, .guardian-box, .agreement-notice, .acceptance-box, .footnote, .contact-info, .step-box { margin: 24px 0; padding: 22px 24px; border-radius: 18px; background: #f4f8fb; border: 1px solid #e4edf2; }
.warning-box, .important-notice, .agreement-notice, .acceptance-box { background: #fff9e9; border-color: #f5e8bc; }
.guardian-box, .contact-info { background: #edf9f6; border-color: #d5ede6; }
.warning-title, .important-title, .guardian-title, .contact-title, .footnote-title, .step-title { color: var(--ink); font-size: 1.08rem; font-weight: 700; margin-bottom: 14px; line-height: 1.6; }
.agreement-text, .acceptance-text { font-weight: 650; color: var(--ink); }
.term-title { color: var(--ink); font-weight: 650; }
.step-number { display: inline-flex; justify-content: center; align-items: center; min-width: 28px; min-height: 28px; padding: 1px 6px; margin-right: 9px; border-radius: 8px; background: #d4ecfa; color: #0a679e; font-size: .8rem; vertical-align: top; }
.table-container { margin: 20px 0 30px; }
.records { display: grid; gap: 18px; }
.record { border: 1px solid var(--line); border-radius: 20px; padding: 24px; }
.record-title { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 13px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.record-number { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; background: #e3f3fc; border-radius: 10px; color: #1071ae; font-size: .7rem; font-weight: 700; }
.record-type { display: block; margin-bottom: 5px; color: var(--muted); font-size: .7rem; letter-spacing: .05em; }
.record-title h3 { margin: 0; color: var(--ink); font-size: 1.1rem; line-height: 1.65; font-weight: 700; }
.record-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 26px; row-gap: 21px; padding-top: 21px; margin: 0; }
.record-fields dt { font-size: .875rem; font-weight: 600; color: #557084; margin-bottom: 7px; }
.record-fields dd { margin: 0; font-size: 1rem; line-height: 1.85; }
.record-fields p { margin-bottom: .65em; }
.record-fields .legal-basis { display: block; margin-top: 9px; font-size: .78rem; color: var(--muted); padding-top: 9px; border-top: 1px dashed var(--line); }
.receiver-category, .info-type, .purpose-title, .method-title { display: block; color: var(--ink); font-weight: 650; }
.receiver-example, .info-detail, .purpose-detail, .method-detail { display: block; margin-top: 5px; color: var(--text); }
.receiver-example { font-size: .9rem; font-weight: 400; }
.required, .optional, .location-china { display: inline-block; max-width: 100%; padding: 3px 11px; border-radius: 8px; font-size: .8rem; font-weight: 600; white-space: normal; }
.required { color: #876018; background: #fff2d0; }
.optional, .location-china { color: #24645a; background: #e0f3ed; }
.age-chart { display: grid; gap: 12px; margin: 22px 0; }
.age-item { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 18px; border: 1px solid var(--line); border-radius: 16px; padding: 20px; }
.age-range { font-size: .87rem; color: var(--ink); font-weight: 700; }
.age-description { font-size: .92rem; }
.age-restricted { background: #fff9ea; border-color: #f4e7ba; }
.age-limited { background: #f0f8fd; border-color: #d5eaf5; }
.age-allowed { background: #edf9f6; border-color: #d5ede6; }
.legal-footer { display: grid; grid-template-columns: 244px minmax(0, 1fr); gap: 32px; padding: 44px max(32px, calc((100% - 1240px) / 2)) 60px; border-top: 1px solid var(--line); background: white; }
.footer-name { display: flex; gap: 12px; align-items: flex-start; color: var(--ink); font-weight: 750; font-size: 1.2rem; }
.footer-name small { display: block; margin-top: 4px; color: var(--muted); font-size: .75rem; font-weight: 400; }
.footer-info { font-size: .8rem; color: var(--muted); }
.footer-info p { margin: 0 0 8px; }
.footer-info > p:first-child { color: var(--ink); font-weight: 600; }
.filings { display: flex; flex-wrap: wrap; gap: 2px 24px; margin: 12px 0 8px; }
.filings a { display: inline-flex; align-items: center; min-height: 44px; color: #4e6c80; text-decoration: none; }
.filings a:hover { text-decoration: underline; }
.copyright { font-size: .72rem; }
.to-top { width: 44px; height: 44px; display: grid; place-items: center; position: fixed; bottom: max(18px, env(safe-area-inset-bottom)); right: 18px; color: var(--ink); background: white; border: 1px solid var(--line); box-shadow: 0 3px 15px #10294010; border-radius: 14px; font-size: 1.25rem; text-decoration: none; }
@media (max-width: 980px) {
  .legal-shell { width: calc(100% - 40px); }
  .reader-layout { grid-template-columns: 208px minmax(0, 1fr); gap: 22px; }
  .reader-sidebar details { padding: 10px; }
  .document-body { padding: 28px; }
  .record-fields { grid-template-columns: 1fr; }
  .legal-footer { grid-template-columns: 208px minmax(0, 1fr); padding-left: 20px; padding-right: 20px; gap: 22px; }
}
@media (max-width: 760px) {
  .legal-header { padding: 13px 20px; gap: 12px; flex-wrap: wrap; }
  .header-divider, .header-label { display: none; }
  .island-brand { font-size: 1.1rem; gap: 9px; }
  .home-link { font-size: .78rem; padding: 8px 12px; }
  .legal-shell { padding-top: 18px; padding-bottom: 42px; }
  .document-intro { padding: 18px 0 28px; }
  .document-intro h1 { margin: 10px 0 14px; font-size: clamp(1.85rem, 6vw, 2.75rem); letter-spacing: -.035em; }
  .document-intro > p { font-size: .9rem; }
  .document-meta { font-size: .72rem; }
  .reader-layout { grid-template-columns: 1fr; gap: 20px; }
  .reader-sidebar { gap: 10px; }
  .reader-sidebar details { border-radius: 16px; padding: 7px 12px; }
  .reader-sidebar nav { padding-bottom: 7px; }
  .doc-switcher nav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .doc-switcher nav a { padding: 10px; font-size: .875rem; background: #f6f9fb; }
  .toc ol { columns: 2; column-gap: 10px; }
  .toc li { break-inside: avoid; }
  .side-help { display: none; }
  .document-body { padding: 24px; border-radius: 22px; font-size: 1rem; }
  .document-body > * + * { margin-top: 30px; }
  .document-body h2 { font-size: 1.25rem; }
  .record { padding: 20px; border-radius: 16px; }
  .record-fields { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 19px; }
  .warning-box, .important-notice, .important-note, .guardian-box, .agreement-notice, .acceptance-box, .footnote, .contact-info, .step-box { padding: 20px; }
  .legal-footer { grid-template-columns: 1fr; gap: 24px; padding: 34px 24px 72px; }
  .to-top { right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); }
}
@media (max-width: 480px) {
  .legal-shell { width: calc(100% - 28px); }
  .legal-header { padding: 12px 16px; }
  .document-intro { padding-left: 6px; padding-right: 6px; }
  .breadcrumb { padding-left: 6px; }
  .document-body { padding: 23px 18px; border-radius: 20px; }
  .record { padding: 18px 15px; }
  .record-title { gap: 10px; grid-template-columns: 30px minmax(0, 1fr); padding-bottom: 17px; }
  .record-number { width: 30px; height: 30px; }
  .record-title h3 { font-size: 1.02rem; }
  .record-fields { grid-template-columns: 1fr; gap: 18px; padding-top: 18px; }
  .field + .field { padding-top: 15px; border-top: 1px solid #eef3f6; }
  .record-fields dd { font-size: 1rem; }
  .doc-switcher nav, .toc ol { display: block; columns: auto; }
  .doc-switcher nav a + a { margin-top: 4px; }
  .warning-box, .important-notice, .important-note, .guardian-box, .agreement-notice, .acceptance-box, .footnote, .contact-info, .step-box { padding: 18px 15px; }
  .age-item { grid-template-columns: 1fr; gap: 8px; padding: 16px; }
  .filings { display: grid; gap: 0; }
  .legal-footer { padding-left: 20px; padding-right: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}
@media print {
  html, body { background: white; font-size: 11pt; }
  .legal-header, .reader-sidebar, .breadcrumb, .to-top, .skip-link { display: none; }
  .legal-shell { width: 100%; padding: 0; }
  .reader-layout { display: block; }
  .document-intro { padding: 0 0 20px; }
  .document-body { border: 0; padding: 0; }
  .record, .age-item { break-inside: avoid; }
  .record-fields { grid-template-columns: 1fr 1fr; }
  .legal-footer { padding: 20px 0 0; display: block; }
  .footer-name { display: none; }
  .filings a { min-height: 0; }
}