/* Mahalohana Tests — accepted site-wide wireframe system */
:root {
  --product-canvas: linear-gradient(135deg, #eaf6ff 0%, #f3fbf9 48%, #fffbed 100%);
  --product-surface: #ffffff;
  --product-surface-soft: #f7fbfa;
  --product-text: #0f172a;
  --product-text-soft: #475569;
  --product-primary: #0f766e;
  --product-primary-hover: #115e59;
  --product-focus: #2dd4bf;
  --product-border: rgba(15, 23, 42, 0.12);
  --product-shadow: 0 16px 42px rgba(15, 23, 42, 0.1);
  --product-radius-control: 8px;
  --product-radius-surface: 12px;
  --product-content: 1120px;
  --product-task: 920px;
  --service-accent: #0f766e;
  --service-tint: #e7f7f3;
}

html[data-theme="dark"] {
  --product-canvas: linear-gradient(135deg, #0b1626 0%, #101b29 48%, #172033 100%);
  --product-surface: #111c2d;
  --product-surface-soft: #172337;
  --product-text: #f8fafc;
  --product-text-soft: #cbd5e1;
  --product-primary: #2dd4bf;
  --product-primary-hover: #5eead4;
  --product-focus: #5eead4;
  --product-border: rgba(255, 255, 255, 0.16);
  --product-shadow: 0 18px 44px rgba(0, 0, 0, 0.3);
}

html[data-tests-service="age-vibe"] { --service-accent: #0f766e; --service-tint: #dff7f1; }
html[data-tests-service="anime-personality"] { --service-accent: #6d4fd2; --service-tint: #f0ebff; }
html[data-tests-service="compat-pick"] { --service-accent: #b24060; --service-tint: #fff0f4; }
html[data-tests-service="egen-teto"] { --service-accent: #126f7c; --service-tint: #e4f7f8; }
html[data-tests-service="food-compat"] { --service-accent: #a85d05; --service-tint: #fff3d9; }
html[data-tests-service="kfood-romance"] { --service-accent: #b24a20; --service-tint: #fff0e8; }
html[data-tests-service="kpop-egen-teto"] { --service-accent: #2769a7; --service-tint: #e9f4ff; }
html[data-tests-service="kpop-idol-romance"] { --service-accent: #9b3f82; --service-tint: #fcecf8; }
html[data-tests-service="kpop-position"] { --service-accent: #6046b6; --service-tint: #f0edff; }
html[data-tests-service="money-style"] { --service-accent: #35743f; --service-tint: #edf8ec; }
html[data-tests-service="phone-style"] { --service-accent: #2d64a3; --service-tint: #eaf3ff; }
html[data-tests-service="romance-test"] { --service-accent: #ac435e; --service-tint: #fff0f3; }

html[data-tests-page-family] {
  color-scheme: light;
  background: #edf8f6;
  scroll-behavior: smooth;
}

html[data-theme="dark"][data-tests-page-family] {
  color-scheme: dark;
}

html[data-tests-page-family] *,
html[data-tests-page-family] *::before,
html[data-tests-page-family] *::after {
  box-sizing: border-box;
}

html[data-tests-page-family] body {
  min-height: 100vh;
  margin: 0;
  color: var(--product-text) !important;
  background: var(--product-canvas) !important;
  font-family: "Noto Sans KR", "Noto Sans JP", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  line-height: 1.65;
  overflow-x: clip;
  transition: background-color 180ms ease, color 180ms ease;
}

/* These localized explainers keep their legacy readable body width. The
   shared margin reset must not pin that entire content/ad column to the left. */
html[data-tests-service="egen-teto"] body:has(> main > .container > .og-img) {
  margin-inline: auto;
}

html[data-tests-page-family] :where(h1, h2, h3, .title, .question-title, .result-title) {
  color: var(--product-text) !important;
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: currentColor !important;
  text-shadow: none !important;
  letter-spacing: -0.025em;
  overflow-wrap: normal !important;
  word-break: keep-all;
}

html[lang="en"][data-tests-page-family] :where(h1, h2, h3, .title, .question-title, .result-title) {
  word-break: normal;
}

/* Japanese needs native line breaking; keep-all turns an entire sentence into
   a grid minimum width, which overflow-x:clip would silently crop. */
html[lang="ja"][data-tests-page-family] :where(h1, h2, h3, .title, .question-title, .result-title) {
  word-break: normal;
  line-break: strict;
  overflow-wrap: anywhere !important;
}

html[data-tests-page-family] :where(h1, h2, h3) span {
  -webkit-text-fill-color: currentColor !important;
}

html[data-tests-page-family="home"] :where(.hero-copy, .section-heading, .hero-layout > *) {
  min-width: 0;
}

html[data-tests-page-family] :where(p, li, .subtitle, .muted, .result-description, .result-subtitle) {
  color: var(--product-text-soft);
}

html[lang="ko"][data-tests-page-family] :where(p, li, label, .subtitle, .muted) {
  word-break: keep-all;
  overflow-wrap: anywhere;
}

html[data-tests-page-family] .ad-placement-label {
  color: var(--product-text-soft) !important;
  text-shadow: none !important;
}

@media (max-width: 640px) {
  html[data-tests-page-family] .ad-placement.ad-placement--viewport-responsive,
  html[data-tests-page-family] .monetization-section.ad-placement--viewport-responsive {
    width: 100vw !important;
    max-width: 100vw !important;
    margin: 16px calc(50% - 50vw) !important;
    padding: 10px 0 !important;
    overflow: visible !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-radius: 0 !important;
  }

  html[data-tests-page-family] .ad-placement.ad-placement--viewport-responsive .adsbygoogle,
  html[data-tests-page-family] .monetization-section.ad-placement--viewport-responsive .adsbygoogle {
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
  }

  html[data-tests-page-family] .monetization-section.ad-placement--viewport-responsive .home-ad-shell {
    padding: 10px 0 !important;
    overflow: visible !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-radius: 0 !important;
  }

  html[data-tests-page-family] .monetization-section.ad-placement--viewport-responsive .ad-label {
    padding-inline: 16px;
  }
}

html[data-tests-page-family] :where(.info-shell > div, .faq-section, .faq-shell .faq-item) {
  color: var(--product-text) !important;
  background: var(--product-surface) !important;
  border-color: var(--product-border) !important;
}

html[data-tests-page-family] :where(.info-shell, .faq-section, .faq-shell, .guide-shell) :where(p, li, .faq-answer) {
  color: var(--product-text-soft) !important;
}

html[data-tests-page-family] :where(.faq-question, .faq-shell summary) {
  color: var(--product-text) !important;
  background: var(--product-surface-soft) !important;
}

html[data-tests-page-family] .result-next-card > span {
  color: var(--product-text-soft) !important;
}

html[data-tests-page-family] :where(a, button, input, select, textarea, [role="button"], summary) {
  font: inherit;
}

html[data-tests-page-family] :where(a, button, input, select, [role="button"], summary) {
  min-height: 44px;
}

html[data-tests-page-family] summary {
  padding-block: 8px;
  cursor: pointer;
}

html[data-tests-page-family] :where(a, button, input, select, textarea, [role="button"], summary):focus-visible {
  outline: 3px solid color-mix(in srgb, var(--product-focus) 78%, white);
  outline-offset: 3px;
}

html[data-tests-page-family] :where(button, .btn, .start-button, .nav-btn, .share-btn, .result-button, .category-button) {
  border-radius: var(--product-radius-control) !important;
}

html[data-tests-page-family]:not([data-tests-page-family="home"]) main {
  width: min(var(--product-content), calc(100% - 32px));
  margin-inline: auto;
}

html[data-tests-page-family="quiz"] main {
  padding-block: clamp(20px, 4vw, 44px) 30px;
}

html[data-tests-page-family="quiz"] .quiz-exit-link {
  width: fit-content;
  margin: 0 0 14px !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--product-primary) !important;
  box-shadow: none !important;
  padding-inline: 0 !important;
}

html[data-tests-page-family="quiz"] .quiz-exit-link::before {
  content: "←";
  margin-right: 8px;
}

/* Hide only duplicated decoration, never a custom quiz's start controls. */
html[data-tests-page-family="quiz"] :where(.hero, .brand-header):not(:has(button, input, select, textarea, a[href])) {
  display: none !important;
}

.product-static-title {
  width: min(var(--product-task), 100%);
  margin: 0 auto 12px;
  font-size: clamp(1rem, 2vw, 1.15rem) !important;
  font-weight: 900;
  line-height: 1.35;
  text-align: left !important;
  color: var(--product-text) !important;
}

.product-static-title::after {
  content: "";
  display: block;
  width: 52px;
  height: 3px;
  margin-top: 10px;
  border-radius: 999px;
  background: var(--service-accent);
}

html[data-tests-page-family="quiz"] :where(.container, .wrap) {
  width: min(var(--product-task), 100%) !important;
  max-width: var(--product-task) !important;
  min-height: 0 !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

html[data-tests-page-family="quiz"] :where(.panel, .card, .main-card) {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: clamp(22px, 4vw, 42px) !important;
  border: 1px solid var(--product-border) !important;
  border-radius: var(--product-radius-surface) !important;
  background: color-mix(in srgb, var(--product-surface) 96%, transparent) !important;
  box-shadow: var(--product-shadow) !important;
  backdrop-filter: none !important;
  overflow: hidden;
}

html[data-tests-page-family="quiz"] .header-controls {
  position: fixed !important;
  z-index: 20;
  top: max(10px, env(safe-area-inset-top)) !important;
  right: 12px !important;
  left: auto !important;
  width: auto !important;
  margin: 0 !important;
}

html[data-tests-page-family="quiz"] .theme-toggle {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 44px !important;
  min-width: 44px;
  height: 44px !important;
  padding: 0 !important;
  border: 1px solid var(--product-border) !important;
  border-radius: 50% !important;
  background: var(--product-surface) !important;
  color: var(--product-text) !important;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.1) !important;
}

html[data-tests-page-family="quiz"] #quiz {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: clamp(22px, 4vw, 38px) !important;
  border: 1px solid var(--product-border) !important;
  border-radius: var(--product-radius-surface) !important;
  background: color-mix(in srgb, var(--product-surface) 96%, transparent) !important;
  box-shadow: var(--product-shadow) !important;
}

html[data-tests-page-family="quiz"] #quiz:has(.q-result) {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html[data-tests-page-family="quiz"] #quiz .q-header {
  margin: 0 0 18px !important;
  padding: 0 0 16px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--product-border) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  text-align: left !important;
}

html[data-tests-page-family="quiz"] #quiz .q-header .q-service-name {
  color: var(--service-accent);
  font-size: 0.82rem;
  font-weight: 900;
}

html[data-tests-page-family="quiz"] #quiz .q-header .muted {
  margin: 6px 0 0;
  font-size: 0.95rem;
}

html[data-tests-page-family="quiz"] #quiz .q-progress,
html[data-tests-page-family="quiz"] .progress-bar {
  height: 8px !important;
  margin: 0 0 26px !important;
  border-radius: 999px !important;
  background: #d8e0e7 !important;
  overflow: hidden;
}

html[data-tests-page-family="quiz"] #quiz .q-progress .bar,
html[data-tests-page-family="quiz"] .progress-fill {
  height: 100% !important;
  border-radius: inherit !important;
  background: var(--service-accent) !important;
}

html[data-tests-page-family="quiz"] #quiz .q-card,
html[data-tests-page-family="quiz"] :where(.question-section, .result-section) {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

html[data-tests-page-family="quiz"] :where(.q-num, .question-number, .progress-label) {
  color: var(--service-accent) !important;
  font-size: 0.86rem;
  font-weight: 900;
}

html[data-tests-page-family="quiz"] :where(.q-card h2, .question-title, .qhead) {
  margin: 8px 0 20px !important;
  font-size: clamp(1.35rem, 3.2vw, 1.85rem) !important;
  line-height: 1.3 !important;
  text-align: left !important;
}

html[data-tests-page-family="quiz"] :where(.q-options, .answer-options, .yn-options, .gender-options, .options) {
  display: grid !important;
  gap: 10px !important;
  margin: 0 0 18px !important;
}

html[data-tests-page-family="quiz"] :where(.q-option, .answer-option, .yn-option, .gender-option, .opt) {
  position: relative;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: 100% !important;
  min-height: 54px !important;
  margin: 0 !important;
  padding: 13px 16px !important;
  border: 1px solid var(--product-border) !important;
  border-radius: var(--product-radius-control) !important;
  background: var(--product-surface) !important;
  color: var(--product-text) !important;
  box-shadow: 0 2px 0 rgba(15, 23, 42, 0.05) !important;
  text-align: left !important;
  line-height: 1.45;
  transform: none !important;
}

html[data-tests-page-family="quiz"] :where(.q-option, .answer-option, .yn-option, .gender-option, .opt):hover,
html[data-tests-page-family="quiz"] :where(.q-option, .answer-option, .yn-option, .gender-option, .opt):focus-visible {
  border-color: var(--product-primary) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--product-primary) 15%, transparent) !important;
}

html[data-tests-page-family="quiz"] :where(.q-option.selected, .answer-option.selected, .yn-option.selected, .gender-option.selected, .opt:has(input:checked)) {
  border-color: var(--product-primary) !important;
  background: color-mix(in srgb, var(--product-primary) 10%, var(--product-surface)) !important;
  color: var(--product-text) !important;
  box-shadow: inset 4px 0 0 var(--product-primary) !important;
}

html[data-tests-page-family="quiz"] :where(.q-option, .opt) input[type="radio"] {
  flex: 0 0 20px;
  width: 20px;
  min-width: 20px;
  height: 20px;
  min-height: 20px;
  margin: 0 12px 0 0;
  accent-color: var(--product-primary);
}

html[data-tests-page-family="quiz"] :where(.q-option, .opt):focus-within {
  outline: 3px solid var(--product-focus);
  outline-offset: 3px;
}

html[data-tests-service="age-vibe"] :where(.opt-hint, .emotion-feedback, #emotionIndicator) {
  display: none !important;
}

html[data-tests-service="age-vibe"] :where(.quiz-progress, .pill) {
  color: var(--product-text-soft) !important;
}

html[data-tests-service="age-vibe"] .hero h1 span {
  color: var(--service-accent) !important;
  background: none !important;
}

html[data-tests-service="age-vibe"] #prevBtn {
  min-height: 48px;
  border: 1px solid var(--product-border) !important;
  color: var(--product-text) !important;
  background: var(--product-surface) !important;
}

html[data-tests-service="age-vibe"] #prevBtn:disabled {
  color: #718096 !important;
  background: var(--product-surface-soft) !important;
}

html[data-tests-service="age-vibe"] :where(.card, .panel):has(> #quiz) {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible;
}

html[data-tests-service="age-vibe"] body > header,
html[data-tests-service="compat-pick"] body > header {
  background: var(--product-surface) !important;
  color: var(--product-text) !important;
  border-bottom: 1px solid var(--product-border);
  box-shadow: none !important;
  backdrop-filter: none !important;
}

html[data-tests-service="age-vibe"] header .top,
html[data-tests-service="compat-pick"] header .top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  padding: 10px 16px !important;
}

html[data-tests-service="age-vibe"] header nav,
html[data-tests-service="compat-pick"] header nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

html[data-tests-service="age-vibe"] header :where(a, button),
html[data-tests-service="compat-pick"] header a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 8px 10px;
  border: 1px solid var(--product-border);
  border-radius: var(--product-radius-control);
  background: var(--product-surface) !important;
  color: var(--product-text-soft) !important;
  text-decoration: none;
}

html[data-tests-service="compat-pick"] header .title {
  color: var(--product-text) !important;
  -webkit-text-fill-color: currentColor !important;
  background: none !important;
}

@media (max-width: 640px) {
  /* Preserve the Korean age-vibe header's authored mobile language policy
     after the shared link treatment above has been applied. */
  html[data-tests-service="age-vibe"][lang="ko"] header nav a[aria-current="page"] {
    display: none;
  }
}

html[data-tests-service="compat-pick"] :where(.form label, label[for="a"], label[for="b"]) {
  color: var(--product-text) !important;
}

html[data-tests-service="compat-pick"] #go {
  border: 1px solid transparent;
  border-radius: var(--product-radius-control) !important;
  background: var(--product-primary) !important;
  color: #fff !important;
  box-shadow: none !important;
}

html[data-tests-service="compat-pick"] .name-privacy-note {
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid var(--product-border);
  border-radius: var(--product-radius-control);
  background: var(--product-surface-soft);
  color: var(--product-text-soft);
  font-size: 0.85rem;
  line-height: 1.6;
}

html[data-tests-page-family="quiz"] .question-actions {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  margin-top: 20px;
}

html[data-tests-page-family="quiz"] .question-actions :where(#previousBtn, #nextBtn) {
  margin: 0 !important;
  min-height: 48px;
}

html[data-tests-page-family="quiz"] #previousBtn {
  padding: 12px 18px;
  border: 1px solid var(--product-border);
  border-radius: var(--product-radius-control);
  color: var(--product-text);
  background: var(--product-surface);
  font: inherit;
  font-weight: 700;
}

html[data-tests-page-family="quiz"] #previousBtn:disabled {
  opacity: 0.45;
  cursor: default;
}

html[data-tests-page-family="quiz"] :where(.q-actions, .question-section > .btn, #nextBtn) {
  margin-top: 20px !important;
}

html[data-tests-page-family="quiz"] :where(.q-actions button, #nextBtn, #startBtn, .start-button, .btn-primary) {
  min-height: 48px !important;
  border: 1px solid transparent !important;
  background: var(--product-primary) !important;
  color: #fff !important;
  box-shadow: none !important;
  transform: none !important;
}

html[data-tests-page-family="quiz"] :where(.q-actions button, #nextBtn, #startBtn, .start-button, .btn-primary):disabled {
  background: #d7e7e4 !important;
  color: #718096 !important;
  opacity: 1 !important;
  cursor: not-allowed;
}

html[data-tests-page-family="quiz"] #startScreen .header {
  margin-bottom: 24px !important;
  text-align: left !important;
}

html[data-tests-page-family="quiz"] #startScreen .title {
  margin: 0 0 10px !important;
  font-size: clamp(2rem, 5vw, 3.3rem) !important;
  line-height: 1.05 !important;
  text-align: left !important;
}

html[data-tests-page-family="quiz"] #startScreen .subtitle {
  max-width: 660px;
  margin: 0 0 14px !important;
  font-size: 1rem !important;
  text-align: left !important;
}

html[data-tests-page-family="quiz"] .info-badge {
  display: inline-flex !important;
  align-items: center;
  width: fit-content !important;
  min-height: 44px;
  padding: 9px 12px !important;
  border: 1px solid var(--product-border) !important;
  border-radius: var(--product-radius-control) !important;
  background: var(--service-tint) !important;
  color: var(--service-accent) !important;
  box-shadow: none !important;
  text-decoration: none;
}

html[data-tests-service="compat-pick"] .brand-tagline {
  color: var(--product-text-soft) !important;
  font-size: 13px;
  font-weight: 600;
}

html[data-tests-page-family="quiz"] .gender-section {
  margin: 0 !important;
  padding: 20px !important;
  border: 1px solid var(--product-border);
  border-radius: var(--product-radius-surface);
  background: var(--product-surface-soft);
}

html[data-tests-page-family="quiz"] .gender-section h3 {
  margin: 0 0 8px !important;
  font-size: 1.15rem !important;
  text-align: left !important;
}

.egen-neutral-intro {
  margin: 0 0 16px !important;
  color: var(--product-text-soft) !important;
}

/* Shared result wireframe */
html[data-tests-page-family="quiz"] .q-result {
  width: 100% !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html[data-tests-page-family="quiz"] .q-hero {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(150px, 0.42fr) !important;
  gap: 22px !important;
  align-items: center !important;
  margin: 0 0 18px !important;
  padding: clamp(22px, 4vw, 36px) !important;
  border: 1px solid var(--product-border) !important;
  border-top: 4px solid var(--service-accent) !important;
  border-radius: var(--product-radius-surface) !important;
  background: var(--product-surface) !important;
  color: var(--product-text) !important;
  box-shadow: var(--product-shadow) !important;
}

html[data-tests-page-family="quiz"] .q-hero::after {
  content: none !important;
}

html[data-tests-page-family="quiz"] .q-hero-text {
  grid-column: 1;
  grid-row: 1;
  text-align: left !important;
}

html[data-tests-page-family="quiz"] :where(.q-emoji-container, .q-result-visual) {
  grid-column: 2;
  grid-row: 1;
}

html[data-tests-page-family="quiz"] .q-emoji-container {
  display: grid !important;
  place-items: center;
  width: min(180px, 100%);
  aspect-ratio: 1;
  margin-inline: auto;
  border-radius: 50%;
  background: var(--service-tint);
}

html[data-tests-page-family="quiz"] .q-emoji {
  font-size: clamp(3.5rem, 8vw, 6.5rem) !important;
  animation: none !important;
  transform: none !important;
}

html[data-tests-page-family="quiz"] .q-emoji-shadow {
  display: none !important;
}

html[data-tests-page-family="quiz"] .q-hero .badge {
  display: inline-flex;
  width: fit-content;
  padding: 5px 9px;
  border-radius: var(--product-radius-control) !important;
  background: var(--service-tint) !important;
  color: var(--service-accent) !important;
  box-shadow: none !important;
}

html[data-tests-page-family="quiz"] .q-hero h2 {
  margin: 10px 0 8px !important;
  color: var(--product-text) !important;
  font-size: clamp(2rem, 5vw, 3.4rem) !important;
  line-height: 1.05 !important;
}

html[data-tests-page-family="quiz"] .q-hero .muted,
html[data-tests-page-family="quiz"] .q-result .q-hero .muted {
  color: var(--product-text-soft) !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

html[data-tests-page-family="quiz"] .q-insight-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
  margin: 0 0 18px !important;
}

html[data-tests-page-family="quiz"] .q-insight-grid article {
  min-height: 154px;
  padding: 18px !important;
  border: 1px solid var(--product-border) !important;
  border-radius: var(--product-radius-surface) !important;
  background: var(--product-surface) !important;
  box-shadow: none !important;
}

html[data-tests-page-family="quiz"] .q-insight-grid article > span {
  color: var(--service-accent) !important;
}

html[data-tests-page-family="quiz"] .result-continuation {
  width: 100% !important;
  margin: 0 0 18px !important;
  padding: clamp(18px, 3vw, 24px) !important;
  border: 1px solid color-mix(in srgb, var(--service-accent) 30%, var(--product-border)) !important;
  border-radius: var(--product-radius-surface) !important;
  background: color-mix(in srgb, var(--service-tint) 66%, var(--product-surface)) !important;
  color: var(--product-text) !important;
  box-shadow: none !important;
}

html[data-tests-page-family="quiz"] .result-next-one {
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr) !important;
}

html[data-tests-page-family="quiz"] .result-next-card {
  min-height: 112px;
  border-color: color-mix(in srgb, var(--service-accent) 26%, var(--product-border)) !important;
  background: var(--product-surface) !important;
  color: var(--product-text) !important;
}

html[data-tests-page-family="quiz"] .result-next-card b,
html[data-tests-page-family="quiz"] .result-guide-link,
html[data-tests-page-family="quiz"] .result-next-one > div > span {
  color: var(--service-accent) !important;
}

html[data-theme="dark"][data-tests-page-family] :where(.result-next-card b, .result-guide-link, .result-next-one > div > span) {
  color: var(--product-primary) !important;
}

html[data-tests-page-family="quiz"] .result-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 16px;
  padding: 14px;
  border: 1px solid var(--product-border);
  border-radius: var(--product-radius-surface);
  background: var(--product-surface);
}

html[data-tests-page-family="quiz"] .q-result > .result-reaction {
  margin: 0 0 18px;
  padding: clamp(18px, 3vw, 24px);
  border: 1px solid var(--product-border);
  border-radius: var(--product-radius-surface);
  background: var(--product-surface);
}

html[data-tests-page-family="quiz"] .q-result > .result-reaction h3 {
  margin-top: 0;
}

html[data-tests-page-family="quiz"] .result-actions > :where(button, a) {
  display: inline-flex;
  flex: 1 1 180px;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 10px 14px;
  border: 1px solid var(--product-border) !important;
  border-radius: var(--product-radius-control) !important;
  background: var(--product-surface) !important;
  color: var(--product-text) !important;
  text-decoration: none;
  font-weight: 900;
}

html[data-tests-page-family="quiz"] .result-actions .result-reaction-actions button {
  flex: 0 1 auto;
  min-height: 44px;
  border-color: var(--product-border) !important;
  background: var(--product-surface) !important;
  color: var(--product-text) !important;
}

html[data-tests-page-family="quiz"] .result-actions .result-reaction-actions button[aria-pressed="true"] {
  border-color: var(--product-primary) !important;
  background: var(--product-primary) !important;
  color: #fff !important;
}

html[data-tests-page-family="quiz"] .result-actions .native {
  border-color: var(--product-primary) !important;
  background: var(--product-primary) !important;
  color: #fff !important;
}

html[data-tests-page-family="quiz"] .result-details {
  margin: 0 0 16px;
  padding: 0 16px;
  border: 1px solid var(--product-border);
  border-radius: var(--product-radius-surface);
  background: var(--product-surface);
}

html[data-tests-page-family="quiz"] .result-details > summary {
  display: flex;
  align-items: center;
  min-height: 52px;
  cursor: pointer;
  color: var(--product-text);
  font-weight: 900;
}

html[data-tests-page-family="quiz"] .result-details-content {
  padding: 0 0 18px;
}

html[data-tests-page-family="quiz"] .result-details :where(.q-detail, .q-insights, .q-tips) {
  color: var(--product-text-soft) !important;
  animation: none !important;
}

html[data-tests-page-family="quiz"] .q-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

html[data-tests-page-family="quiz"] .q-nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 9px 13px;
  border: 1px solid var(--product-border);
  border-radius: var(--product-radius-control) !important;
  background: transparent !important;
  color: var(--product-primary) !important;
  text-decoration: none;
}

/* Custom quiz result/start surfaces */
html[data-tests-page-family="quiz"] :where(#result, #resultScreen, .result-screen):not(.hidden) {
  color: var(--product-text) !important;
}

html[data-tests-page-family="quiz"] :where(.result-header, .result-section, .chart-section, .result-card, .info-card, .share-section) {
  border-color: var(--product-border) !important;
  border-radius: var(--product-radius-surface) !important;
  background: var(--product-surface) !important;
  color: var(--product-text) !important;
  box-shadow: none !important;
}

html[data-tests-page-family="quiz"] .result-header {
  margin: 0 0 18px !important;
  padding: clamp(20px, 4vw, 32px) !important;
  border: 1px solid var(--product-border) !important;
  border-top: 4px solid var(--service-accent) !important;
  text-align: left !important;
}

html[data-tests-page-family="quiz"] .result-header :where(.result-title, #result-type, #resTitle, #title) {
  margin: 8px 0 !important;
  font-size: clamp(1.8rem, 5vw, 3rem) !important;
  line-height: 1.2 !important;
}

html[data-tests-page-family="quiz"] .custom-result-insights h3 {
  margin: 0 0 8px;
  font-size: 1rem;
  line-height: 1.4;
}

html[data-tests-page-family="quiz"] .custom-result-insights p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.65;
}

html[data-tests-page-family="quiz"] .compact-result-insights :where(h3, p) {
  margin: 0 0 8px;
  line-height: 1.65;
  text-align: left;
}

html[data-tests-page-family="quiz"] .compact-result-insights h3 {
  font-size: 1rem;
}

html[data-tests-page-family="quiz"] .compact-result-insights p {
  font-size: 0.95rem;
}

html[data-tests-page-family="quiz"] .compact-result-art {
  display: block;
  width: 100%;
  max-height: 300px;
  object-fit: cover;
  border-radius: var(--product-radius-surface);
  margin: 16px 0;
}

html[data-tests-page-family="quiz"] .compact-result-score {
  margin-block: 14px;
  color: var(--service-accent);
  font-size: clamp(2rem, 6vw, 3.5rem);
  font-weight: 900;
  line-height: 1.2;
}

html[data-tests-service="age-vibe"] #scoreBox {
  color: var(--service-accent) !important;
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  animation: none !important;
  opacity: 1 !important;
}

html[data-tests-page-family="quiz"] .result-header .badge {
  color: var(--service-accent) !important;
  background: var(--service-tint) !important;
  border: 0 !important;
  animation: none !important;
}

html[data-tests-page-family="quiz"] .share-section :where(a, button) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border: 1px solid var(--product-border) !important;
  border-radius: var(--product-radius-control) !important;
  background: var(--product-surface) !important;
  color: var(--product-text) !important;
  box-shadow: none !important;
  text-decoration: none;
}

html[data-tests-page-family="quiz"] .share-section :where(.primary, .share-btn) {
  color: white !important;
  background: var(--product-primary) !important;
}

html[data-tests-service="compat-pick"] #result :where(#score, #type) {
  color: var(--service-accent) !important;
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
}

html[data-tests-service="compat-pick"] #result #type {
  font-size: 1.25rem;
  margin-block: 8px;
}

html[data-tests-page-family="quiz"] .result-share-options {
  margin-top: 12px;
  text-align: left;
}

html[data-tests-service="compat-pick"] input[aria-invalid="true"] {
  border: 2px solid #be123c !important;
}

html[data-tests-page-family="quiz"] .result-share-options .share {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding-block: 8px;
}

html[data-tests-page-family="quiz"] .custom-result-details :where(.result-cards, .chart-section, .result-traits, #result-description) {
  margin-top: 18px;
}

html[data-tests-page-family="quiz"] .share-section {
  padding: 18px !important;
  border: 1px solid var(--product-border);
  margin-bottom: 18px;
}

html[data-theme="dark"][data-tests-page-family] {
  --service-accent: #82dcd3;
  --service-tint: #18313a;
}

html[data-theme="dark"][data-tests-page-family="quiz"] :where(#nextBtn, #startBtn, .start-button, .btn-primary, #go, .result-actions .native, .share-section .primary, .share-section .share-btn) {
  color: #062c28 !important;
}

html[lang="ja"][data-tests-page-family="quiz"] :where(.result-title, #resTitle) {
  word-break: normal !important;
  overflow-wrap: anywhere !important;
}

html[data-tests-page-family="quiz"] :where(.result-title, #resTitle) {
  word-break: keep-all !important;
  overflow-wrap: normal !important;
}

html[data-tests-page-family="quiz"] :where(.result-cards, .info-grid) {
  gap: 12px !important;
}

html[data-tests-page-family="romance-leaf"] .romance-entertainment-note {
  margin: 12px 0 24px;
  padding: 12px 14px;
  border: 1px solid var(--product-border);
  border-radius: var(--product-radius-control);
  color: var(--product-text-soft);
  background: var(--product-surface-soft);
  font-size: 0.86rem;
  line-height: 1.6;
}

html[data-tests-page-family="romance-leaf"] .romance-result-hero {
  margin-bottom: 20px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--product-border);
  text-align: left;
}

html[data-tests-page-family="romance-leaf"] .romance-result-hero .badge {
  color: var(--service-accent);
  font-size: 0.8rem;
  font-weight: 800;
}

html[data-tests-page-family="romance-leaf"] .romance-result-hero h2 {
  margin: 8px 0 0;
  font-size: clamp(1.65rem, 4vw, 2.3rem);
  line-height: 1.3;
}

html[data-tests-page-family="romance-leaf"] .romance-result-insights {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  text-align: left;
}

html[data-tests-page-family="romance-leaf"] .romance-result-insights article {
  padding: 18px;
  border: 1px solid var(--product-border);
  border-radius: var(--product-radius-surface);
  background: var(--product-surface-soft);
}

html[data-tests-page-family="romance-leaf"] .romance-result-insights article > span {
  color: var(--service-accent);
  font-size: 0.75rem;
  font-weight: 800;
}

html[data-tests-page-family="romance-leaf"] .romance-result-insights h3 {
  margin: 8px 0;
  font-size: 1rem;
  line-height: 1.4;
}

html[data-tests-page-family="romance-leaf"] .romance-result-insights p {
  margin: 0;
  color: var(--product-text-soft);
  font-size: 0.95rem;
  line-height: 1.75;
}

html[data-tests-page-family="romance-leaf"] .romance-retry {
  cursor: pointer;
  border: 1px solid var(--product-border);
  background: var(--product-primary);
  color: white;
}

@media (max-width: 700px) {
  html[data-tests-page-family="romance-leaf"] .romance-result-insights { grid-template-columns: 1fr; }
}

html[data-tests-page-family="quiz"] :where(.share-buttons, .share-section) {
  margin-top: 16px !important;
}

html[data-tests-page-family="quiz"] .animate-badge,
html[data-tests-page-family="quiz"] .animate-title,
html[data-tests-page-family="quiz"] .animate-desc,
html[data-tests-page-family="quiz"] .q-insights,
html[data-tests-page-family="quiz"] .q-tips,
html[data-tests-page-family="quiz"] .share {
  animation: none !important;
}

/* Result explainers and category/trust pages inherit the same editorial frame. */
html[data-tests-page-family="result-explainer"] :where(.result-page, body),
html[data-tests-page-family="category-entry"] :where(.category-page, body) {
  background: var(--product-canvas) !important;
  color: var(--product-text) !important;
}

html[data-tests-page-family="result-explainer"] .result-shell,
html[data-tests-page-family="category-entry"] .category-shell {
  width: min(var(--product-content), calc(100% - 32px)) !important;
}

html[data-tests-page-family="result-explainer"] .result-hero,
html[data-tests-page-family="category-entry"] .category-hero {
  min-height: auto !important;
  padding: clamp(38px, 7vw, 76px) 0 !important;
}

html[data-tests-page-family="result-explainer"] :where(.result-kicker, .result-chip),
html[data-tests-page-family="category-entry"] .category-kicker {
  border-radius: var(--product-radius-control) !important;
  background: var(--service-tint) !important;
  color: var(--service-accent) !important;
}

html[data-tests-page-family="result-explainer"] :where(.result-section, .result-card, .result-next-card),
html[data-tests-page-family="category-entry"] :where(.category-section, .category-card) {
  border-color: var(--product-border) !important;
  border-radius: var(--product-radius-surface) !important;
  background: var(--product-surface) !important;
  color: var(--product-text) !important;
  box-shadow: var(--product-shadow) !important;
}

html[data-tests-page-family="result-explainer"] .result-button,
html[data-tests-page-family="category-entry"] .category-button {
  background: var(--product-primary) !important;
  color: #fff !important;
}

html[data-tests-page-family="result-explainer"] .result-button.secondary,
html[data-tests-page-family="category-entry"] .category-button.secondary {
  border-color: color-mix(in srgb, var(--service-accent) 30%, transparent) !important;
  background: var(--product-surface) !important;
  color: var(--service-accent) !important;
}

html[data-tests-page-family="legal"] main {
  width: min(860px, calc(100% - 32px)) !important;
  padding: clamp(42px, 7vw, 82px) 0 36px !important;
}

html[data-tests-page-family="legal"] main :where(.card, section, article, .container) {
  border: 1px solid var(--product-border) !important;
  border-radius: var(--product-radius-surface) !important;
  background: var(--product-surface) !important;
  color: var(--product-text) !important;
  box-shadow: var(--product-shadow) !important;
}

html[data-theme="dark"][data-tests-page-family="legal"] main :where(p, li, .subtitle) {
  color: var(--product-text-soft) !important;
}

html[data-theme="dark"][data-tests-page-family] :where(.result-button, .category-button):not(.secondary),
html[data-theme="dark"][data-tests-page-family="romance-leaf"] .romance-retry {
  color: #062c28 !important;
}

/* Romance leaf: one shared question/result grammar and immediate continuation. */
html[data-tests-page-family="romance-leaf"] main {
  padding-block: clamp(22px, 5vw, 52px) 30px;
}

html[data-tests-page-family="romance-leaf"] .container {
  width: min(820px, 100%) !important;
  max-width: 820px !important;
  min-height: 0 !important;
  padding: 0 !important;
}

html[data-tests-page-family="romance-leaf"] :where(.question, .result, .navigation, .additional-nav, .result-next-tests) {
  margin: 0 0 14px !important;
  border: 1px solid var(--product-border) !important;
  border-radius: var(--product-radius-surface) !important;
  background: var(--product-surface) !important;
  color: var(--product-text) !important;
  box-shadow: var(--product-shadow) !important;
}

html[data-tests-page-family="romance-leaf"] .question {
  padding: clamp(22px, 4vw, 36px) !important;
  border-top: 4px solid var(--service-accent) !important;
}

html[data-tests-page-family="romance-leaf"] .question h1 {
  margin: 0 0 8px !important;
  font-size: 1rem !important;
  color: var(--service-accent) !important;
  text-align: left !important;
}

html[data-tests-page-family="romance-leaf"] .question h2 {
  margin: 0 0 20px !important;
  font-size: clamp(1.4rem, 4vw, 2rem) !important;
  line-height: 1.28;
}

html[data-tests-page-family="romance-leaf"] .choices {
  display: grid !important;
  gap: 10px !important;
}

html[data-tests-page-family="romance-leaf"] .choice {
  display: flex !important;
  align-items: center;
  min-height: 54px !important;
  padding: 13px 16px !important;
  border: 1px solid var(--product-border) !important;
  border-radius: var(--product-radius-control) !important;
  background: var(--product-surface) !important;
  color: var(--product-text) !important;
  box-shadow: none !important;
}

html[data-tests-page-family="romance-leaf"] .choice:hover,
html[data-tests-page-family="romance-leaf"] .choice:focus-visible {
  border-color: var(--service-accent) !important;
  background: var(--service-tint) !important;
}

html[data-tests-page-family="romance-leaf"] .result {
  padding: clamp(20px, 4vw, 30px) !important;
  border-top: 4px solid var(--service-accent) !important;
}

html[data-tests-page-family="romance-leaf"] .result h3 {
  font-size: clamp(1.35rem, 4vw, 1.9rem) !important;
}

html[data-tests-page-family="romance-leaf"] .result-next-tests {
  width: 100% !important;
  padding: 18px !important;
  background: color-mix(in srgb, var(--service-tint) 66%, var(--product-surface)) !important;
}

html[data-tests-page-family="romance-leaf"] .result-next-grid {
  grid-template-columns: 1fr !important;
}

html[data-tests-page-family="romance-leaf"] .result-next-card {
  min-height: 0 !important;
  box-shadow: none !important;
}

html[data-tests-page-family="romance-leaf"] .navigation {
  flex-direction: row !important;
  gap: 8px !important;
  padding: 12px !important;
}

html[data-tests-page-family="romance-leaf"] :where(.nav-btn, .other-tests-btn) {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 0 !important;
  min-height: 44px;
  width: auto !important;
  padding: 10px 14px !important;
  border: 1px solid var(--product-border) !important;
  border-radius: var(--product-radius-control) !important;
  background: var(--product-surface-soft) !important;
  color: var(--product-text) !important;
  box-shadow: none !important;
  transform: none !important;
}

html[data-tests-page-family="romance-leaf"] .additional-nav {
  padding: 8px !important;
}

html[data-tests-page-family="romance-leaf"] .romance-result-actions {
  display: flex;
  gap: 10px;
  margin-block: 18px 12px;
}

html[data-tests-page-family="romance-leaf"] .romance-result-actions .share-btn {
  flex: 1;
  min-width: 0;
  padding: 12px 10px;
  border: 1px solid var(--product-border);
  border-radius: var(--product-radius-control);
  color: var(--product-text) !important;
  background: var(--product-surface-soft) !important;
  box-shadow: none !important;
  font: inherit;
  font-weight: 700;
}

html[data-tests-page-family="romance-leaf"] .romance-result-actions .primary {
  background: var(--product-primary) !important;
  color: white !important;
}

html[data-theme="dark"][data-tests-page-family="romance-leaf"] .romance-result-actions .primary {
  color: #062c28 !important;
}

html[data-tests-page-family="romance-leaf"] .result-share-options {
  text-align: left;
  margin-bottom: 18px;
}

/* Romance index keeps its approved dedicated composition but shares tokens. */
html[data-tests-page-family="romance-index"] body {
  background: var(--product-canvas) !important;
}

html[data-tests-page-family="romance-index"] :where(.romance-hero, .romance-recommended, .romance-directory, .romance-group) {
  border-color: var(--product-border) !important;
  border-radius: var(--product-radius-surface) !important;
}

html[data-theme="dark"][data-tests-page-family="romance-index"] :where(.romance-hero, .romance-featured .test-card, .romance-group, .romance-group .test-card) {
  border-color: var(--product-border) !important;
  background: var(--product-surface) !important;
  color: var(--product-text) !important;
}

html[data-theme="dark"][data-tests-page-family="romance-index"] :where(.romance-hero .subtitle, .romance-filter-status, .romance-featured > p, .romance-groups-intro, .romance-group summary small, .romance-featured .test-card p, .romance-group .test-card p) {
  color: var(--product-text-soft) !important;
}

html[data-theme="dark"][data-tests-page-family="romance-index"] :where(.romance-group summary span, .romance-group .test-card h3, .romance-featured .test-card h3) {
  color: var(--product-text) !important;
}

html[data-theme="dark"][data-tests-page-family="romance-index"] .romance-hero-kicker {
  color: var(--product-primary) !important;
}

html[data-theme="dark"][data-tests-page-family="romance-index"] :where(.lang-btn, .other-tests-btn, .romance-search, [data-romance-group]) {
  border-color: var(--product-border) !important;
  background: var(--product-surface-soft) !important;
  color: var(--product-text) !important;
}

html[data-theme="dark"][data-tests-page-family="romance-index"] :where(.lang-btn[aria-current="page"], [data-romance-group][aria-pressed="true"]) {
  border-color: color-mix(in srgb, var(--product-primary) 42%, var(--product-border)) !important;
  background: color-mix(in srgb, var(--product-primary) 14%, var(--product-surface)) !important;
  color: var(--product-primary) !important;
}

html[data-theme="dark"][data-tests-page-family="romance-index"] [data-romance-random] {
  color: #062c28 !important;
}

html[data-tests-page-family] .site-footer,
html[data-tests-page-family] .category-footer {
  color: var(--product-text-soft) !important;
}

html[data-tests-page-family] .site-footer a,
html[data-tests-page-family] .category-footer a {
  color: var(--product-primary) !important;
}

@media (max-width: 720px) {
  html[data-tests-page-family]:not([data-tests-page-family="home"]) main {
    width: min(calc(100% - 24px), var(--product-content)) !important;
  }

  html[data-tests-page-family="quiz"] main {
    padding-top: 16px;
  }

  html[data-tests-page-family="quiz"] :where(.panel, .card, .main-card) {
    padding: 18px !important;
  }

  html[data-tests-page-family="quiz"] .q-hero {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  html[data-tests-page-family="quiz"] .q-hero-text,
  html[data-tests-page-family="quiz"] :where(.q-emoji-container, .q-result-visual) {
    grid-column: 1;
  }

  html[data-tests-page-family="quiz"] .q-hero-text { grid-row: 1; }
  html[data-tests-page-family="quiz"] :where(.q-emoji-container, .q-result-visual) { grid-row: 2; }

  html[data-tests-page-family="quiz"] .q-emoji-container {
    width: 128px;
  }

  html[data-tests-page-family="quiz"] .q-insight-grid,
  html[data-tests-page-family="quiz"] .result-next-one,
  html[data-tests-page-family="result-explainer"] :where(.result-grid, .result-next-grid),
  html[data-tests-page-family="category-entry"] .category-grid {
    grid-template-columns: 1fr !important;
  }

  html[data-tests-page-family="quiz"] .q-insight-grid article {
    min-height: 0;
  }

  html[data-tests-page-family="quiz"] .header-controls {
    position: absolute !important;
  }

  .product-static-title {
    padding-right: 58px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-tests-page-family] *,
  html[data-tests-page-family] *::before,
  html[data-tests-page-family] *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}