/* Shared visual rules. Layout and data visualizations remain in their page styles. */
:root {
  --font-ui: Inter, "Segoe UI", sans-serif;
  --font-editorial: "TooReal Report Serif", "Songti SC", "STSong", "Noto Serif CJK SC", Georgia, serif;
  --action: #5d49e5;
  --action-hover: #4a3fd0;
  --action-soft: #eee9fc;
  --ui-ink: #171d2b;
  --ui-muted: #515969;
  --ui-caption: #626876;
  --ui-line: #dedbd7;
  --ui-surface: #fffdfa;
  --control-radius: 999px;
  --card-radius: 16px;
  --overlay-shadow: 0 12px 36px rgba(23, 29, 43, .12);
}
html[lang="zh-Hans"] { --font-ui: Inter, "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif; }

/* Keep each page's original background. Purple marks an action or a state. */
/* On the homepage, one continuous warm background leads to the lighter final CTA. */
body[data-page="home"] > main > :is(.home-comparison-section, .cost-section, .faq-section),
body[data-page="home"] > .site-footer {
  background: transparent;
}

body[data-page] :is(.report-kicker, .eyebrow, .tests-kicker, .tests-section-label, .why-kicker, .auth-eyebrow, .cta-eyebrow, .showcase-kicker, .report-label, .report-primary-pattern > span, .report-section-kicker, .checkout-eyebrow, .insight-preview-index, .full-report-number, .full-report-kicker) {
  color: var(--ui-caption);
}
body[data-page] :is(.pricing-card-price, .report-price, .report-identity h1, .strength-combination-title) { color: var(--ui-ink); }
body[data-page] :is(.pricing-check, .why-refrain span, .tests-classic-arrow, .report-value-questions li > span, .report-contents li > span) { color: var(--ui-caption); }
.report-page .report-identity h1,
.account-report h3,
.archetype-cell strong,
.archetype-selection h2 { font-family: var(--font-editorial); font-weight: 500; }

body[data-page] :is(.tests-intro h1, .tests-flagship-title h2, .tests-classics-heading h2, .why-hero h1, .why-origin h2, .pricing-intro h1, .auth-shell h1) { font-weight: 600; }

/* Three action styles; labels and size variants retain their existing placement. */
html body[data-page] :is(.primary-btn, .tests-primary-action, .home-mirror-hero .plain-text-start, .report-page .result-mobile-bar button, .report-page .result-mobile-bar a, .report-unlock, .full-report-share-save) {
  border-color: var(--action);
  border-radius: var(--control-radius);
  background: var(--action);
  color: #fff;
  font-family: var(--font-ui);
  font-weight: 600;
  box-shadow: none;
  text-shadow: none;
  transition: background-color .16s ease, border-color .16s ease;
}
html body[data-page] :is(.primary-btn, .tests-primary-action, .home-mirror-hero .plain-text-start, .report-page .result-mobile-bar button, .report-page .result-mobile-bar a, .report-unlock, .full-report-share-save):hover {
  background: var(--action-hover);
  border-color: var(--action-hover);
  color: #fff;
  box-shadow: none;
  transform: none;
}
html body[data-page] :is(.secondary-btn, .restart-dialog .secondary-btn, [data-export-report], .full-report-share-native) {
  border: 1px solid var(--ui-line);
  border-radius: var(--control-radius);
  background: var(--ui-surface);
  color: var(--ui-ink);
  font-family: var(--font-ui);
  font-weight: 600;
  box-shadow: none;
  transition: background-color .16s ease, border-color .16s ease;
}
html body[data-page] :is(.secondary-btn, .restart-dialog .secondary-btn, [data-export-report], .full-report-share-native):hover {
  background: #f1eeea;
  border-color: #a6a19a;
  color: var(--ui-ink);
  box-shadow: none;
  transform: none;
}
html body .site-header :is(.signin-btn, .report-account-link) {
  background: transparent;
  color: var(--ui-muted);
  border: 0;
  box-shadow: none;
  text-shadow: none;
  border-radius: 0;
  transform: none;
}
html body .site-header :is(.signin-btn, .report-account-link):hover,
html body .site-header .signin-btn[aria-current="page"] {
  color: var(--ui-ink);
  text-decoration: underline;
  text-underline-offset: 5px;
}
html body[data-page] :is(.account-text-link, .share-signin, .checkout-signin a, .inline-links a, .text-link) {
  color: var(--ui-muted);
  font-family: var(--font-ui);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
html body[data-page] :is(.account-text-link, .share-signin, .checkout-signin a, .inline-links a, .text-link):hover { color: var(--ui-ink); }
html body[data-page] :is(.primary-btn, .secondary-btn, .signin-btn, .plain-text-start, .tests-primary-action, .report-account-link, .account-text-link, [data-export-report], [data-scroll-checkout], .full-report-share-save, .full-report-share-native):focus-visible {
  outline: 2px solid var(--action);
  outline-offset: 4px;
  box-shadow: none;
}
html body[data-page] :is(.primary-btn, .secondary-btn, [data-export-report]):disabled {
  cursor: not-allowed;
  opacity: .55;
  transform: none;
}
/* Keep the homepage's copy and arrow, without another decorative container. */
.home-mirror-hero .plain-text-start-arrow, .tests-action-arrow { background: transparent; }
/* A check accompanies the selected answer; colour is an additional cue. */
body[data-page="test"] .response-option.is-selected::after {
  content: "✓";
  position: absolute;
  top: 8px;
  right: 10px;
  color: var(--action-hover);
  font-size: .875rem;
  font-weight: 700;
  line-height: 1;
  transform: none;
}

/* One quiet card surface. Elevation belongs to dialogs and menus. */
html body[data-page] :is(.pricing-card, .auth-shell, .account-report, .account-empty, .account-draft, .unlock-plan-card, .report-page .free-report, .quiz-card) {
  border-color: var(--ui-line);
  border-radius: var(--card-radius);
  box-shadow: none;
}
html body[data-page] :is(.pricing-card, .auth-shell, .account-report, .account-empty, .account-draft, .unlock-plan-card) { background: var(--ui-surface); }
.home-mirror-hero .plain-text-shell { box-shadow: none; }
html body .unlock-sku-option.is-fixed-plan { border-color: transparent; background: transparent; box-shadow: none; }
html body[data-page] :is(.language-menu, .restart-dialog) { box-shadow: var(--overlay-shadow); }

/* Interface copy has a readable floor. Chart labels and graph styles are excluded. */
html body[data-page] :is(.report-summary-label, .result-save-state, .report-primary-pattern > span, .result-offer-price small, .report-contents li strong, .account-eyebrow, .account-access, .account-purchase, .account-identity, .account-history-note, .account-reference, .pricing-card-note, .payment-region-route, .checkout-signin, .checkout-signin span, .unlock-trust-note, .unlock-refund-note, .unlock-legal, .result-offer-trust, .result-offer-refund, .result-offer-policy, .auth-legal, .assessment-local-note, .keyboard-tip, .core-poetry-source, .core-evidence) {
  font-size: .875rem;
}
html body[data-page] :is(.core-evidence summary, .core-archetype-details summary, .core-deep-insight-more summary, .result-method-details summary) {
  min-height: 44px;
  font-family: var(--font-ui);
  font-size: .875rem;
}
html body[data-page] :is(.report-contents li p, .insight-preview-copy, .result-offer-refund, .unlock-refund-note, .auth-legal) { line-height: 1.65; }

@media (max-width: 760px) {
  body[data-page="test"] .response-option.is-selected::after { top: 50%; transform: translateY(-50%); }
  html body[data-page] :is(.primary-btn, .tests-primary-action, .secondary-btn, .signin-btn, .report-account-link, [data-export-report], [data-close-checkout], .full-report-share-save, .full-report-share-native, .auth-code-actions button) { min-height: 44px; }
  html body[data-page] :is(.primary-btn, .secondary-btn, [data-export-report], .account-page .account-section-heading button, .result-offer-summary > .primary-btn) { font-size: .9375rem; }
  html body[data-page] .site-header :is(.signin-btn, .report-account-link) { font-size: .875rem; }
  html body[data-page] :is(.report-account-link, .account-text-link, .plain-text-slogan, .cta-eyebrow, .why-kicker, .report-summary-label, .checkout-eyebrow, .report-section-kicker, .showcase-kicker, .tests-kicker, .tests-section-label, .tests-facts span, .tests-classic-meta, .auth-eyebrow, .report-kicker, .report-archetype-tags li, .result-checkout-back, .showcase-rotation-status, .core-report-hero-kicker, .full-report-navigation a, .full-report-share-note, .core-archetype-story-label, .full-report-share-zoom-hint, .full-report-share-copy .full-report-kicker, .full-report-footer, .auth-footer, .account-footer, .footer-grid a, .footer-grid strong, .footer-note p) { font-size: .875rem; }
  html body[data-page] :is(.home-mirror-hero .plain-text-start-copy small, .cta-note) { font-size: .875rem; }
  html body[data-page] :is(.pricing-features li, .payment-region p, .pricing-intro > p:last-child, .pricing-refund p, .report-archetype-copy, .insight-preview-copy, .report-contents li p, .result-offer-summary > ul li, .result-offer-summary > p:not(.result-offer-trust):not(.result-offer-refund), .unlock-identity p, .unlock-sku-copy small, .checkout-intro, .account-draft p:last-child, .account-empty p, .auth-heading > p:last-child, .methodology-page > p, .core-match-note, .full-report-two-column p, .full-report-context-grid p, .full-report-strength-lead, .core-deep-insight-more > p, .core-archetype-details > p, .core-archetype-reading p, .full-report-share-copy > p:not(.full-report-share-status)) {
    font-size: 1rem;
    line-height: 1.7;
  }
}
@media (prefers-reduced-motion: reduce) {
  html body[data-page] :is(.primary-btn, .secondary-btn, .plain-text-start, .signin-btn) { transition: none; }
}