/* Mixed calculators reuse Typically You tokens; layout follows each source feature instead of the generic calculator grid. */
.mixed-provider-risk { margin: 24px 0; }
.mixed-provider-text { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.8; }
.mixed-provider-risk-item { border-top: 1px solid var(--rule); padding: 12px 0; }
.mixed-qa-button[data-loading='true'] { opacity: .65; }
.mixed-qa-loading { color: var(--muted); }
.mixed-intro { max-width: 720px; font-size: 16px; line-height: 1.8; }
.mixed-marriage-head { display: flex; align-items: center; gap: 18px; margin-top: 24px; }
.mixed-marriage-head > div { min-width: 0; flex: 1; }
.mixed-tool-icon { width: 84px; height: 84px; flex: 0 0 84px; object-fit: contain; border-radius: 16px; background: var(--card); }
.mixed-risk-hero { margin: 24px 0 38px; padding: clamp(22px, 4vw, 38px); border: 1px solid var(--rule); border-radius: 14px; background: linear-gradient(135deg, var(--surface), var(--card)); box-shadow: var(--shadow); }
.mixed-risk-hero.stale { border-style: dashed; box-shadow: none; opacity: .82; }
.mixed-risk-hero > div { display: flex; align-items: baseline; flex-wrap: wrap; gap: 12px 18px; }
.mixed-kicker { color: var(--muted); font-size: 15px; }
.mixed-risk-number { color: var(--accent); font-size: clamp(42px, 8vw, 70px); line-height: 1; letter-spacing: -.05em; }
.mixed-risk-level { padding: 5px 11px; border: 1px solid var(--rule-2); border-radius: 999px; font-size: 13px; }
.mixed-risk-hero meter { display: block; width: 100%; height: 12px; margin: 22px 0 8px; accent-color: var(--accent); }
.mixed-partner-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
.mixed-partner { min-width: 0; margin: 0; padding: clamp(18px, 3vw, 28px); border: 1px solid var(--rule); border-radius: 14px; background: var(--card); }
.mixed-partner-m { background: linear-gradient(180deg, color-mix(in srgb, #6f8fba 7%, var(--card)), var(--card) 28%); }
.mixed-partner-f { background: linear-gradient(180deg, color-mix(in srgb, #bd7f91 7%, var(--card)), var(--card) 28%); }
.mixed-partner legend { padding: 0 10px; font-size: 20px; font-weight: 700; }
.mixed-subhead { margin: 26px 0 14px !important; padding-top: 18px; border-top: 1px solid var(--rule); color: var(--muted); font-size: 14px !important; letter-spacing: .08em; }
.mixed-partner .mixed-subhead:first-of-type { margin-top: 4px !important; padding-top: 0; border-top: 0; }
.mixed-field { display: grid; grid-template-columns: minmax(110px, 1fr) minmax(120px, 1.1fr) auto; align-items: center; gap: 10px; margin: 13px 0; }
.mixed-field-title { min-width: 0; font-size: 14px; }
.mixed-field input, .mixed-field select, .mixed-match-slot select { width: 100%; min-width: 0; padding: 10px 12px; border: 1px solid var(--rule-2); border-radius: 8px; background: var(--surface); color: var(--text); font: inherit; }
.mixed-field input[type='range'] { padding: 0; border: 0; accent-color: var(--accent); }
.mixed-field output { min-width: 44px; text-align: right; font-size: 13px; }
.mixed-field .zm-footnote { grid-column: 2 / -1; margin: -5px 0 0; }
.mixed-wide { grid-column: 1 / -1; }
.mixed-cloud-button { border-style: dashed; color: var(--muted); }
.zm-notice.cloud { border-left: 3px solid #9b7b3b; color: var(--text); }
.zm-notice.error { color: #9a413d; }
.zm-notice.ready { color: var(--accent); }
.mixed-report { margin-top: 38px; }
.mixed-report > h2 { margin-top: 10px; }

.mixed-zodiac { position: relative; }
.mixed-zodiac::before { content: '✦'; position: absolute; z-index: -1; right: 4%; top: 20px; color: var(--accent-soft); font-size: clamp(90px, 18vw, 180px); line-height: 1; }
.mixed-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; max-width: 660px; margin: 30px 0; padding: 5px; border: 1px solid var(--rule); border-radius: 11px; background: var(--surface); }
.mixed-tab { min-height: 44px; padding: 9px 12px; border-radius: 7px; color: var(--muted); font-size: 14px; }
.mixed-tab.active { background: var(--card); color: var(--text); box-shadow: var(--shadow); }
.mixed-zodiac-panel > h2 { margin-bottom: 8px; }
.mixed-lead { max-width: 680px; color: var(--muted); line-height: 1.8; }
.mixed-profile-empty { margin: 18px 0; padding: 12px 15px; border-left: 3px solid var(--accent); background: var(--accent-soft); }
.mixed-sign-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 24px 0 38px; }
.mixed-sign { display: flex; align-items: center; min-width: 0; gap: 11px; padding: 12px; border: 1px solid var(--rule); border-radius: 10px; background: var(--card); text-align: left; }
.mixed-sign:hover, .mixed-sign.selected { border-color: var(--accent); }
.mixed-sign.selected { background: var(--accent-soft); }
.mixed-sign img, .mixed-sign-symbol { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 50%; object-fit: cover; background: var(--surface); }
.mixed-sign-symbol { display: grid; place-items: center; color: var(--accent); font-size: 18px; }
.mixed-sign > span:last-child { display: grid; min-width: 0; }
.mixed-sign strong { font-size: 15px; }
.mixed-sign small { overflow: hidden; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.mixed-birth, .mixed-chart-structure, .mixed-qa, .mixed-match-score { margin: 30px 0; padding: clamp(19px, 3vw, 28px); border-top: 1px solid var(--rule); background: var(--surface); }
.mixed-birth-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.mixed-birth-grid .mixed-field { display: grid; grid-template-columns: 1fr; align-content: start; margin: 7px 0; }
.mixed-chart-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 22px; }
.mixed-chart-card { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; min-height: 92px; padding: 15px; border: 1px solid var(--rule); border-radius: 9px; background: var(--card); }
.mixed-chart-card > span:last-child { grid-column: 1 / -1; color: var(--muted); font-size: 14px; }
.mixed-chart-card.known { border-color: var(--accent); }
.mixed-chart-card.known > span:last-child { color: var(--accent); }
.mixed-chart-abbr { color: var(--muted); font-family: ui-monospace, monospace; font-size: 12px; }
.mixed-qa { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.mixed-qa > h2, .mixed-qa > p, .mixed-qa-clear { grid-column: 1 / -1; justify-self: start; }
.mixed-qa-card { min-width: 0; border: 1px solid var(--rule); border-radius: 10px; background: var(--card); overflow: hidden; }
.mixed-qa-button { width: 100%; padding: 16px; text-align: left; font-weight: 650; }
.mixed-qa-answer { margin: 0; padding: 0 16px 17px; color: var(--muted); white-space: pre-line; }
.mixed-match-row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: end; gap: 14px; margin: 30px 0; }
.mixed-match-slot { display: grid; gap: 8px; color: var(--muted); font-size: 13px; }
.mixed-swap { width: 44px; height: 44px; border: 1px solid var(--rule-2); border-radius: 50%; background: var(--card); font-size: 20px; }
.mixed-match-score { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 8px 20px; border: 1px solid var(--rule); border-radius: 12px; }
.mixed-match-score strong { color: var(--accent); font-size: clamp(36px, 7vw, 58px); }
.mixed-match-score h3, .mixed-match-score p { grid-column: 1 / -1; }

@media (max-width: 860px) {
  .mixed-partner-grid { grid-template-columns: 1fr; }
  .mixed-profile-empty { margin: 18px 0; padding: 12px 15px; border-left: 3px solid var(--accent); background: var(--accent-soft); }
.mixed-sign-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mixed-birth-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .mixed-risk-hero { border-radius: 10px; }
  .mixed-tool-icon { width: 58px; height: 58px; flex-basis: 58px; }
  .mixed-field { grid-template-columns: 1fr auto; }
  .mixed-field input, .mixed-field select { grid-column: 1 / -1; }
  .mixed-field output { grid-column: 2; grid-row: 1; }
  .mixed-profile-empty { margin: 18px 0; padding: 12px 15px; border-left: 3px solid var(--accent); background: var(--accent-soft); }
.mixed-sign-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mixed-sign { padding: 9px; }
  .mixed-sign img, .mixed-sign-symbol { width: 32px; height: 32px; flex-basis: 32px; }
  .mixed-birth-grid, .mixed-chart-grid, .mixed-qa { grid-template-columns: 1fr; }
  .mixed-match-row { grid-template-columns: 1fr auto 1fr; gap: 8px; }
  .mixed-match-slot { min-width: 0; }
  .mixed-tabs { position: sticky; top: 8px; z-index: 3; background: var(--surface); }
}

.mixed-digest-tags{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}.mixed-digest-tags>span{padding:4px 10px;border:1px solid currentColor;border-radius:999px;font-size:.875rem}


.mixed-zodiac-panel .zm-actions{flex-wrap:wrap}.mixed-zodiac-panel .zm-actions>button{white-space:nowrap}


.mixed-cloud-button.start{color:#fff}