/* ============================================================
   compat.css — Compatibility tab, matched to Seektra tokens.
   Uses the same CSS variables index.html defines (--accent etc).
   ============================================================ */
/* ensure the compat pane is always full-width block flow, never split into
   the chart two-column grid some tabs use */
.tabpane[data-pane="compat"] { display: none; }
.tabpane[data-pane="compat"].active { display: block; }
.tabpane[data-pane="compat"] .cx-wrap { display: block; width: 100%; }

.cx-wrap { max-width: 820px; }
/* result takes more horizontal room than the input form */
.cx-result { max-width: 1000px; margin: 0; }

/* whole summary row is the click target, and looks it */
.cx-dim summary { user-select: none; }
.cx-dim summary:hover { opacity: 0.92; }
.cx-dim > summary { padding: 2px 0; }

/* essence line — the featured, memorable hook at the top of each dimension */
.cx-essence { font-size: 1.02rem; line-height: 1.5; color: var(--text-primary);
  font-weight: 500; margin: 12px 0 10px; padding-left: 12px;
  border-left: 2px solid var(--accent); }

/* dos & donts */
.cx-dd { display: grid; gap: 7px; margin-top: 12px; }
.cx-do, .cx-dont { font-size: 0.85rem; line-height: 1.5; color: var(--text-secondary);
  padding: 9px 12px; border-radius: 10px; }
.cx-do { background: rgba(74,222,159,0.08); border: 1px solid rgba(74,222,159,0.2); }
.cx-dont { background: rgba(242,148,58,0.08); border: 1px solid rgba(242,148,58,0.2); }
.cx-dd-l { font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; margin-right: 6px; }
.cx-do .cx-dd-l { color: #7fe7b6; } .cx-dont .cx-dd-l { color: #f2b877; }

.cx-dates-h { font-size: 0.62rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-muted); margin: 13px 0 7px; }

/* spicy structured rows */
.cx-organ { font-size: 0.85rem; color: var(--text-secondary); background: rgba(214,127,240,0.07);
  border: 1px solid rgba(214,127,240,0.18); border-radius: 10px; padding: 9px 12px; margin-top: 10px; }
.cx-organ-l { font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #e0a9f2; margin-right: 6px; }
.cx-spice-row { margin-top: 12px; }
.cx-spice-l { font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #e0a9f2; margin-bottom: 4px; }
.cx-spice-row p { margin: 0; font-size: 0.87rem; line-height: 1.6; color: var(--text-secondary); }
.cx-intro h3 { font-family: Georgia, serif; font-weight: 400; font-size: 1.6rem; margin: 0; }
.cx-intro p { color: var(--text-muted); font-size: 0.9rem; margin: 6px 0 16px; max-width: 54ch; }

.cx-people { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 620px) { .cx-people { grid-template-columns: 1fr; } }
.cx-card { background: var(--bg-card); border: 1px solid var(--border-color);
  border-radius: 16px; padding: 1rem 1.1rem; }
.cx-lab { font-size: 0.66rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 10px; }
.cx-field { margin-bottom: 10px; }
.cx-field label { display: block; font-size: 0.7rem; font-weight: 600; color: var(--text-secondary); margin-bottom: 4px; }
.cx-field label span { color: var(--text-muted); font-weight: 400; text-transform: none; }
.cx-sel, .cx-in { width: 100%; padding: 0.55rem 0.8rem; background: var(--input-bg);
  border: 1.5px solid var(--border-color); border-radius: 10px; font-size: 0.86rem;
  color: var(--text-primary); font-family: inherit; -webkit-appearance: none; appearance: none; }
.cx-born-line { font-size: 0.78rem; color: var(--text-muted); margin-top: 2px; }
.cx-pos { position: relative; }
.cx-ac { position: absolute; top: 100%; left: 0; right: 0; z-index: 150; margin-top: 4px;
  background: var(--bg-tertiary); border: 1px solid var(--border-color); border-radius: 12px;
  overflow: hidden; box-shadow: var(--card-shadow); display: none; }
.cx-ac.show { display: block; }
.cx-ac-item { padding: 0.55rem 0.8rem; font-size: 0.84rem; cursor: pointer; color: var(--text-primary); }
.cx-ac-item:hover { background: var(--accent-soft); }
.cx-ac-sub { color: var(--text-muted); font-size: 0.78rem; }
.cx-gender { display: flex; gap: 6px; }
.cx-gender button { flex: 1; padding: 0.45rem; border-radius: 9px; border: 1.5px solid var(--border-color);
  background: var(--input-bg); color: var(--text-secondary); font-family: inherit; font-size: 0.78rem; cursor: pointer; }
.cx-gender button.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); font-weight: 600; }

.cx-edu { font-size: 0.78rem; color: var(--text-muted); line-height: 1.5; margin: 14px 0 10px; }
.cx-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cx-choice-card { text-align: left; padding: 11px 12px; border-radius: 12px;
  border: 1.5px solid var(--border-color); background: var(--input-bg); cursor: pointer;
  font-family: inherit; transition: .15s; }
.cx-choice-card:hover { border-color: var(--accent); }
.cx-choice-card.on { background: var(--accent-soft); border-color: var(--accent); }
.cx-choice-t { font-size: 0.82rem; font-weight: 600; color: var(--text-primary); margin-bottom: 3px; }
.cx-choice-card.on .cx-choice-t { color: var(--accent); }
.cx-choice-d { font-size: 0.72rem; color: var(--text-muted); line-height: 1.45; }
.cx-tp { margin-top: 4px; }
.cx-route { font-size: 0.82rem; border-radius: 12px; padding: 0.7rem 0.95rem; margin: 4px 0 14px; }
.cx-route.full { background: linear-gradient(120deg, var(--accent-soft), transparent); border: 1px solid var(--border-color); color: var(--text-secondary); }
.cx-route.lite { background: rgba(232,148,58,0.12); border: 1px solid rgba(232,148,58,0.35); color: #f2c791; }
.cx-route b { color: var(--text-primary); }
.cx-rel { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.cx-rel-btn { flex: 1 1 0; min-width: 120px; text-align: center; padding: 0.6rem 0.4rem; border-radius: 11px; font-weight: 600;
  font-size: 0.82rem; cursor: pointer; font-family: inherit; background: var(--input-bg);
  border: 1.5px solid var(--border-color); color: var(--text-secondary); transition: all .15s; }
.cx-rel-btn:hover { border-color: rgba(192,132,252,0.4); color: var(--text-primary); }
.cx-rel-btn.on { background: rgba(192,132,252,0.12); border-color: rgba(192,132,252,0.5); color: #d9b8ff; }
.cx-rel-on, .cx-rel-soon { flex: 1; text-align: center; padding: 0.6rem; border-radius: 11px; font-weight: 600; font-size: 0.82rem; }
.cx-rel-on { background: rgba(74,222,159,0.1); border: 1.5px solid rgba(74,222,159,0.4); color: #7fe7b6; }
.cx-rel-soon { background: var(--input-bg); border: 1.5px solid var(--border-color); color: var(--text-muted); }
.cx-rel-soon b { font-size: 0.5rem; background: rgba(232,148,58,0.18); color: var(--accent-gold); padding: 1px 5px; border-radius: 999px; margin-left: 4px; }
.cx-reveal { width: 100%; padding: 0.8rem; font-size: 1rem; font-weight: 600; background: #8b3ff0; color: #fff;
  border: 0; border-radius: 999px; cursor: pointer; box-shadow: 0 8px 24px rgba(139,63,240,0.45); font-family: inherit; }
.cx-reveal:hover { background: #7c3aed; }

.cx-loading { display: flex; align-items: center; gap: 10px; color: var(--text-secondary); font-size: 0.9rem; padding: 2rem 0; }

/* result header — two rows, love badge, no repeated names.
   Forced block so it never gets torn into a two-column chart layout. */
.cx-head { margin: 4px 0 18px; display: block; width: 100%; }
.cx-head-top { display: flex; align-items: center; gap: 12px; flex-wrap: nowrap; }
.cx-head-top .cx-ava, .cx-head-top .cx-arrow { flex: 0 0 auto; }
.cx-newtop { margin-left: auto; flex: none; font-family: inherit; font-size: 0.82rem; font-weight: 700;
  color: var(--accent); background: rgba(192,132,252,0.1); border: 1px solid rgba(192,132,252,0.35);
  padding: 8px 15px; border-radius: 999px; cursor: pointer; transition: all .15s; white-space: nowrap; }
.cx-newtop:hover { background: rgba(192,132,252,0.2); border-color: rgba(192,132,252,0.6); transform: translateY(-1px); }
@media (max-width: 560px) { .cx-newtop { padding: 6px 12px; font-size: 0.76rem; } }
.cx-head-names { flex: 1 1 auto; min-width: 0; margin-left: 4px; }
.cx-ava { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 18px; flex: none; }
.cx-ava-a { background: rgba(192,132,252,0.16); color: #e6ccff; border: 1.5px solid rgba(192,132,252,0.5); }
.cx-ava-b { background: rgba(232,148,58,0.14); color: #f7cf9c; border: 1.5px solid rgba(232,148,58,0.5); }
.cx-arrow { color: var(--text-muted); font-size: 18px; margin: 0 -4px; flex: none; }
.cx-head-names h3 { margin: 0; font-family: Georgia, serif; font-weight: 400; font-size: 1.7rem; line-height: 1.1; }
.cx-amp { color: var(--text-muted); font-weight: 400; }
.cx-love-badge { display: inline-flex; align-items: center; gap: 5px; margin-top: 6px;
  font-size: 0.72rem; font-weight: 700; letter-spacing: .03em;
  color: #ff9db0; background: rgba(255,107,138,0.12); border: 1px solid rgba(255,107,138,0.3);
  border-radius: 999px; padding: 3px 11px; }
.cx-head-sub { font-size: 0.85rem; color: var(--text-muted); line-height: 1.5; margin-top: 12px; }
.cx-head-sub b { color: var(--text-secondary); font-weight: 600; }

.cx-eye { display: inline-block; font-size: 0.66rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-secondary); padding: 4px 11px; border-radius: 999px; background: var(--accent-soft);
  border: 1px solid var(--border-soft); margin: 18px 0 8px; }

.cx-guna { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 16px; padding: 1.1rem; }
.cx-score { display: flex; flex-direction: column; }
.cx-num { font-family: Georgia, serif; font-size: 2.6rem; line-height: .9; }
.cx-num small { font-size: 1rem; color: var(--text-muted); }
.cx-verdict { align-self: flex-start; margin-top: 10px; background: rgba(74,222,159,0.12); color: #7fe7b6;
  border: 1px solid rgba(74,222,159,0.35); border-radius: 999px; padding: 3px 11px; font-size: 0.72rem; font-weight: 700; }
.cx-sys { font-size: 0.64rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; margin-top: 8px; }
.cx-cap { color: var(--text-secondary); font-size: 0.78rem; margin: 14px 0 8px; }
.cx-kbar { display: flex; gap: 3px; height: 22px; border-radius: 7px; overflow: hidden; }
.cx-kbar > div { border-radius: 3px; }

.cx-disc { margin-top: 14px; }
.cx-disc-btn { border: 0; background: none; color: var(--text-primary); font: inherit; font-weight: 600;
  font-size: 0.88rem; cursor: pointer; display: flex; align-items: center; gap: 8px; }
.cx-disc-btn .cx-chev { color: var(--text-muted); font-size: 0.7rem; transition: .2s; }
.cx-disc.open .cx-disc-btn .cx-chev { transform: rotate(180deg); }
.cx-kgrid { grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 10px; }
@media (max-width: 620px) { .cx-kgrid { grid-template-columns: 1fr; } }
.cx-kcard { background: rgba(255,255,255,0.035); border: 0.5px solid rgba(192,132,252,0.22);
  border-left-width: 3px; border-radius: 10px; padding: 10px 12px; }
.cx-kcard.s { border-left-color: #4ade9f; } .cx-kcard.p { border-left-color: #e8943a; } .cx-kcard.c { border-left-color: #f2b877; }
.cx-krow { display: flex; justify-content: space-between; font-weight: 600; font-size: 0.86rem; }
.cx-ksc { font-variant-numeric: tabular-nums; }
.cx-kcard.s .cx-ksc { color: #4ade9f; } .cx-kcard.p .cx-ksc { color: #e8943a; } .cx-kcard.c .cx-ksc { color: #f2b877; }
.cx-kmn { color: var(--accent); font-size: 0.66rem; text-transform: uppercase; letter-spacing: .04em; margin-top: 3px; }
.cx-kdesc { color: var(--text-secondary); font-size: 0.79rem; line-height: 1.5; margin: 7px 0 0; }
.cx-kfacts { grid-column: 1 / -1; color: var(--text-muted); font-size: 0.74rem; margin-top: 6px; }
.cx-kfacts b { color: var(--text-secondary); }

.cx-movehead { background: linear-gradient(120deg, rgba(192,132,252,0.14), transparent);
  border: 1px solid var(--border-color); border-radius: 14px; padding: 13px 15px; margin-top: 14px; }
.cx-move-l { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--accent); margin-bottom: 5px; }
.cx-movehead p { margin: 0; font-size: 0.92rem; }

.cx-dim { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 16px; padding: 1rem 1.1rem; margin-top: 12px; }
.cx-dim summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; }
.cx-dim summary::-webkit-details-marker { display: none; }
.cx-dim-ic { font-size: 1rem; }
.cx-dim-nm { font-size: 1.02rem; font-weight: 600; }
.cx-dim-sc { margin-left: auto; font-size: 1.3rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.cx-chev { margin-left: 8px; color: var(--text-muted); font-size: 0.72rem; transition: .2s; }
.cx-dim[open] .cx-chev { transform: rotate(180deg); }
.cx-track { height: 5px; border-radius: 999px; background: rgba(255,255,255,0.08); margin: 11px 0; overflow: hidden; }
.cx-fill { height: 100%; border-radius: 999px; }
.cx-read { color: var(--text-secondary); font-size: 0.87rem; line-height: 1.6; margin: 8px 0 0; }
.cx-read em { color: #e6ccff; font-style: normal; }
.cx-approach { background: rgba(192,132,252,0.09); border-radius: 10px; padding: 10px 12px; margin-top: 11px; }
.cx-who { font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #d8b4fe; margin-bottom: 4px; }
.cx-approach p { margin: 0; font-size: 0.84rem; color: var(--text-secondary); }
.cx-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 11px; }
.cx-chip { background: rgba(255,255,255,0.05); border: 1px solid var(--border-soft); border-radius: 999px; padding: 4px 11px; font-size: 0.78rem; color: var(--text-secondary); }
.cx-timing { background: rgba(124,58,237,0.10); border: 1px solid var(--border-soft); border-radius: 10px; padding: 8px 12px; margin-top: 11px; font-size: 0.82rem; color: var(--text-secondary); }
.cx-move { background: var(--accent-soft); border: 1px solid var(--border-soft); border-radius: 10px; padding: 9px 12px; margin-top: 11px; }
.cx-move .cx-move-l { margin-bottom: 3px; }
.cx-move p { margin: 0; font-size: 0.83rem; }

.cx-lock { text-align: center; border: 1px dashed rgba(214,127,240,0.4); border-radius: 12px; padding: 16px; margin-top: 8px; background: rgba(214,127,240,0.05); }
.cx-lock-ic { font-size: 1.3rem; }
.cx-lock h4 { margin: 6px 0 3px; font-size: 0.92rem; font-weight: 600; }
.cx-lock p { margin: 0 0 10px; color: var(--text-muted); font-size: 0.8rem; }
.cx-18 { font-size: 0.8rem; font-weight: 700; color: #ecc6f7; background: rgba(214,127,240,0.14);
  border: 1px solid rgba(214,127,240,0.4); border-radius: 9px; padding: 7px 14px; cursor: pointer; font-family: inherit; }

.cx-synth { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 16px; padding: 1.1rem; margin-top: 18px; }
.cx-synth h4 { margin: 0 0 8px; font-family: Georgia, serif; font-weight: 400; font-size: 1.1rem; }
.cx-nudge { width: 100%; margin-top: 16px; padding: 0.8rem; border-radius: 13px; font-weight: 600; font-size: 0.92rem;
  background: rgba(232,148,58,0.12); border: 1.5px solid rgba(232,148,58,0.4); color: #f2c791; cursor: pointer; font-family: inherit; }
.cx-back { margin-top: 14px; background: none; border: 0; color: var(--text-muted); font: inherit; font-size: 0.82rem; cursor: pointer; }

/* ===== Recent matches (DB-backed) ===== */
.cx-recent { margin-top: 28px; }
.cx-recent-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 11px; }
.cx-recent-head h4 { font-size: 0.72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); margin: 0; font-weight: 700; }
.cx-recent-clear { font-size: 0.72rem; color: var(--text-muted); cursor: pointer; background: none; border: none; font-family: inherit; }
.cx-recent-clear:hover { color: var(--text-primary); }
.cx-rtable { border: 1px solid var(--border-soft); border-radius: 14px; overflow: hidden; background: var(--input-bg); }
.cx-rrow { display: grid; grid-template-columns: auto 1fr auto auto auto; gap: 13px; align-items: center;
  padding: 12px 15px; cursor: pointer; transition: background .13s; border-bottom: 1px solid var(--border-soft); }
.cx-rrow:last-child { border-bottom: none; }
.cx-rrow:hover { background: var(--card2, rgba(168,140,255,0.06)); }
.cx-ravs { display: flex; align-items: center; gap: 4px; flex: none; }
.cx-rav { width: 29px; height: 29px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 0.76rem; border: 1.5px solid; }
.cx-rav-a { background: rgba(192,132,252,0.16); border-color: rgba(192,132,252,0.5); color: #d9b8ff; }
.cx-rav-b { background: rgba(232,148,58,0.14); border-color: rgba(232,148,58,0.45); color: #f0b45a; }
.cx-rarrow { color: var(--text-muted); font-size: 0.78rem; }
.cx-rnames { min-width: 0; }
.cx-rnm { font-weight: 600; font-size: 0.92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-rdob { font-size: 0.73rem; color: var(--text-muted); margin-top: 1px; }
.cx-rtype { flex: none; font-size: 0.7rem; font-weight: 700; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.cx-rtype.love { background: rgba(255,143,174,.14); color: #ff9fb5; }
.cx-rtype.friend { background: rgba(104,224,200,.14); color: #7fe7c8; }
.cx-rtype.work { background: rgba(240,180,90,.14); color: #f0b45a; }
.cx-rtype.boss { background: rgba(192,132,252,.16); color: #d9b8ff; }
.cx-rwhen { flex: none; font-size: 0.73rem; color: var(--text-muted); text-align: right; white-space: nowrap; min-width: 68px; }
.cx-rgo { flex: none; color: var(--accent); font-size: 1.02rem; }
@media (max-width: 560px) {
  .cx-rrow { grid-template-columns: auto 1fr auto auto; gap: 9px; }
  .cx-rwhen { display: none; }
}

/* ===== Celebrity match (person B) ===== */
.cx-brow { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 8px; }
.cx-brow-sel { width: 100%; min-width: 0; }
.cx-brow-or { font-size: 0.66rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .08em; }
.cx-brow-celeb { white-space: nowrap; display: flex; align-items: center; gap: 6px; padding: 0 14px; height: 100%;
  border-radius: 9px; font-family: inherit; font-size: 0.82rem; font-weight: 700; cursor: pointer;
  color: #f0b45a; background: rgba(240,180,90,0.09); border: 1.5px solid rgba(240,180,90,0.4); }
.cx-brow-celeb:hover { background: rgba(240,180,90,0.16); }
@media (max-width: 560px) { .cx-brow { grid-template-columns: 1fr; } .cx-brow-or { display: none; } .cx-brow-celeb { justify-content: center; padding: 9px; } }

.cx-ac-in { display: block; width: 100%; box-sizing: border-box; margin-top: 0;
  padding: 0.55rem 0.8rem; border: 1.5px solid var(--border-color); border-radius: 10px; background: var(--input-bg);
  font-family: inherit; font-size: 0.86rem; color: var(--text-primary); outline: none; }
.cx-ac-in:focus { border-color: rgba(240,180,90,0.5); }
.cx-ac-in::placeholder { color: var(--text-muted); }
.cx-ac-list:not(:empty) { border: 1px solid var(--border-color); }
.cx-ac-row { padding: 9px 12px; cursor: pointer; border-bottom: 1px solid var(--border-soft); background: #171026; }
.cx-ac-row:last-child { border-bottom: none; }
.cx-ac-row:hover { background: #221838; }
.cx-ac-nm { font-weight: 600; font-size: 0.9rem; }
.cx-ac-meta { font-size: 0.73rem; color: var(--text-muted); margin-top: 1px; }
.cx-ac-empty { padding: 10px 12px; font-size: 0.82rem; color: var(--text-muted); }
.cx-celeb-note { font-size: 0.72rem; color: var(--text-muted); margin-top: 7px; font-style: italic; }

.cx-celeb-picked { display: flex; align-items: center; gap: 11px; margin-top: 8px; padding: 11px 13px;
  border-radius: 12px; background: rgba(240,180,90,0.08); border: 1px solid rgba(240,180,90,0.35); }
.cx-celeb-star { font-size: 1.1rem; flex: none; }
.cx-celeb-info { flex: 1; min-width: 0; }
.cx-celeb-info b { display: block; font-size: 0.92rem; }
.cx-celeb-info small { font-size: 0.74rem; color: var(--text-muted); }
.cx-celeb-change { background: rgba(192,132,252,0.12); border: 1px solid rgba(192,132,252,0.4); color: #d9b8ff;
  font-family: inherit; font-size: 0.72rem; padding: 5px 11px; border-radius: 999px; cursor: pointer; flex: none; }
.cx-celeb-change:hover { color: var(--text-primary); border-color: var(--border-color); }

/* celebrity slot (full-width, below the person cards) */
.cx-celeb-slot:not(:empty) { margin: 4px 0 14px; padding: 14px 16px; border-radius: 14px;
  background: rgba(240,180,90,0.05); border: 1px solid rgba(240,180,90,0.3); }
.cx-celeb-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; }
.cx-celeb-foot .cx-celeb-note { margin: 0; }
.cx-celeb-labrow { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; min-height: 1.1rem; }
.cx-celeb-labrow label { font-size: 0.7rem; font-weight: 600; color: var(--text-secondary); margin: 0; }
.cx-celeb-hd { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.cx-celeb-hd label, .cx-celeb-hd span { font-size: 0.7rem; font-weight: 700; color: #f0b45a; letter-spacing: .02em; }
#cxChartField_b { position: relative; }
.cx-ac-wrap { position: relative; }
.cx-ac-list { position: absolute; left: 0; right: 0; top: 100%; z-index: 50; margin-top: 4px; background: #171026;
  border-radius: 10px; overflow: hidden; box-shadow: 0 12px 32px rgba(0,0,0,0.5); }
.cx-ac-list:not(:empty) { border: 1px solid var(--border-color); }
.cx-celeb-back { background: rgba(192,132,252,0.12); border: 1px solid rgba(192,132,252,0.4);
  color: #d9b8ff; font-family: inherit; font-size: 0.68rem; font-weight: 600; cursor: pointer;
  padding: 2px 10px; border-radius: 999px; line-height: 1.3; }
.cx-celeb-back:hover { background: rgba(192,132,252,0.2); color: #fff; }
.cx-ac-nm b { color: #f0b45a; font-weight: 700; }
/* ============================================================
   Compatibility HERO — the "sexy" real-match header.
   Palette shifts by tier class; content comes from DeepSeek.
   ============================================================ */
.cx-topbar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; }
.cx-sectitle { font-family:Georgia, 'Playfair Display', serif; font-size:1.5rem; color:var(--text-primary); font-weight:600; }
.cx-sectitle span { color:var(--accent); }
.cx-topbar .cx-newtop { flex:none; }

.cx-hero { position:relative; overflow:hidden; border:1px solid rgba(192,132,252,0.22);
  border-radius:22px; padding:30px 32px 24px; margin-bottom:22px;
  background:linear-gradient(135deg, rgba(192,132,252,0.08), rgba(232,148,58,0.05)); }
.cx-hero-stars { position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; }
.cx-hero-glowa, .cx-hero-glowb { position:absolute; border-radius:50%; filter:blur(72px); z-index:0; }
.cx-hero-glowa { width:360px; height:360px; top:-130px; left:-70px; opacity:0.40;
  background:radial-gradient(circle, #8b3ff0, transparent 70%); }
.cx-hero-glowb { width:300px; height:300px; bottom:-130px; right:-50px; opacity:0.34;
  background:radial-gradient(circle, #e8943a, transparent 70%); }
.cx-hero-inner { position:relative; z-index:2; }

.cx-hero-eb { font-size:0.85rem; letter-spacing:2.5px; text-transform:uppercase; font-weight:700;
  margin-bottom:14px; color:transparent; background:linear-gradient(120deg,#c084fc,#e8943a);
  -webkit-background-clip:text; background-clip:text; }
.cx-hero-amp { color:var(--text-muted); -webkit-text-fill-color:var(--text-muted); }
.cx-hero-type { display:inline-block; vertical-align:middle; background:rgba(255,255,255,0.08);
  -webkit-text-fill-color:#c084fc; color:#c084fc; font-size:0.72rem; font-weight:600;
  padding:3px 11px; border-radius:100px; margin-left:6px; letter-spacing:0.5px; }
.cx-hero-tier { display:inline-block; vertical-align:middle; margin-left:6px; font-size:0.68rem; font-weight:800;
  letter-spacing:1px; padding:3px 10px; border-radius:100px; color:#1a0b2e;
  -webkit-text-fill-color:#1a0b2e; background:linear-gradient(120deg,#ffd9a8,#ff7eb0); }

.cx-hero-titlerow { display:flex; align-items:flex-start; justify-content:space-between; gap:22px; }
.cx-hero-title { font-family:Georgia,'Playfair Display',serif; font-weight:700; font-size:2.5rem; line-height:1.04;
  background:linear-gradient(120deg,#c084fc,#e8943a); -webkit-background-clip:text; background-clip:text; color:transparent; }
.cx-hero-chip { flex:none; text-align:center; }
.cx-hero-num { font-family:Georgia,'Playfair Display',serif; font-weight:800; font-size:3rem; line-height:0.9;
  background:linear-gradient(120deg,#c084fc,#e8943a); -webkit-background-clip:text; background-clip:text; color:transparent; }
.cx-hero-num span { font-size:1.3rem; vertical-align:top; }
.cx-hero-cap { font-size:0.66rem; letter-spacing:1.5px; text-transform:uppercase; color:var(--text-muted); font-weight:700; margin-top:2px; }

.cx-hero-one { font-family:Georgia,'Playfair Display',serif; font-style:italic; font-size:1.15rem;
  color:rgba(245,233,255,0.82); margin-top:12px; line-height:1.4; max-width:640px; }
.cx-hero-verdict { display:flex; align-items:center; gap:13px; margin-top:16px; flex-wrap:wrap; }
.cx-hero-vpill { background:rgba(192,132,252,0.16); color:#c084fc; font-weight:600; font-size:0.88rem;
  padding:8px 16px; border-radius:100px; white-space:nowrap; }
.cx-hero-vmeta { font-size:0.8rem; color:var(--text-muted); font-weight:500; }
.cx-hero-acc { font-size:0.72rem; color:rgba(245,233,255,0.4); margin-top:14px; font-style:italic; }
.cx-hero-acc.full { color:#6ee7b7; opacity:0.75; font-style:normal; }

.cx-readfrom { margin:-8px 0 22px 4px !important; }

/* ---- tier palettes (6 tiers): color warms + intensifies as score climbs ----
   gentle(<65) cool violet-blue -> warm(65) soft violet -> strong(75) purple-gold
   -> radiant(85) magenta-gold -> rare(90) hot pink-gold -> ultimate(95) rose-gold */

/* ULTIMATE 95+ : rose-gold + cream, richest */
.cx-hero-ultimate { border-color:rgba(255,126,176,0.32); }
.cx-hero-ultimate .cx-hero-eb, .cx-hero-ultimate .cx-hero-title, .cx-hero-ultimate .cx-hero-num
  { background:linear-gradient(120deg,#ffd9a8,#ff7eb0); -webkit-background-clip:text; background-clip:text; }
.cx-hero-ultimate .cx-hero-glowa { background:radial-gradient(circle,#ff3d7f,transparent 70%); opacity:0.55; }
.cx-hero-ultimate .cx-hero-glowb { background:radial-gradient(circle,#ffd9a8,transparent 70%); opacity:0.4; }
.cx-hero-ultimate .cx-hero-vpill { background:rgba(255,217,168,0.20); color:#ffd9a8; }
.cx-hero-ultimate .cx-hero-type { -webkit-text-fill-color:#ffd9a8; color:#ffd9a8; }

/* RARE 90-94 : hot pink + gold */
.cx-hero-rare .cx-hero-eb, .cx-hero-rare .cx-hero-title, .cx-hero-rare .cx-hero-num
  { background:linear-gradient(120deg,#ff7eb0,#e8943a); -webkit-background-clip:text; background-clip:text; }
.cx-hero-rare .cx-hero-glowa { background:radial-gradient(circle,#ff3d7f,transparent 70%); opacity:0.48; }
.cx-hero-rare .cx-hero-glowb { background:radial-gradient(circle,#e8943a,transparent 70%); opacity:0.36; }
.cx-hero-rare .cx-hero-vpill { background:rgba(255,126,176,0.16); color:#ff7eb0; }
.cx-hero-rare .cx-hero-type { -webkit-text-fill-color:#ff7eb0; color:#ff7eb0; }

/* RADIANT 85-89 : magenta + gold */
.cx-hero-radiant .cx-hero-eb, .cx-hero-radiant .cx-hero-title, .cx-hero-radiant .cx-hero-num
  { background:linear-gradient(120deg,#e879f9,#e8943a); -webkit-background-clip:text; background-clip:text; }
.cx-hero-radiant .cx-hero-glowa { background:radial-gradient(circle,#c026d3,transparent 70%); opacity:0.44; }
.cx-hero-radiant .cx-hero-glowb { background:radial-gradient(circle,#e8943a,transparent 70%); opacity:0.34; }
.cx-hero-radiant .cx-hero-vpill { background:rgba(232,121,249,0.16); color:#f0abfc; }
.cx-hero-radiant .cx-hero-type { -webkit-text-fill-color:#f0abfc; color:#f0abfc; }

/* STRONG 75-84 : purple + gold (core brand) */
.cx-hero-strong .cx-hero-eb, .cx-hero-strong .cx-hero-title, .cx-hero-strong .cx-hero-num
  { background:linear-gradient(120deg,#c084fc,#e8943a); -webkit-background-clip:text; background-clip:text; }
.cx-hero-strong .cx-hero-glowa { background:radial-gradient(circle,#8b3ff0,transparent 70%); opacity:0.40; }
.cx-hero-strong .cx-hero-glowb { background:radial-gradient(circle,#e8943a,transparent 70%); opacity:0.32; }
.cx-hero-strong .cx-hero-vpill { background:rgba(232,148,58,0.16); color:#f0b45a; }
.cx-hero-strong .cx-hero-type { -webkit-text-fill-color:#c084fc; color:#c084fc; }

/* WARM 65-74 : soft violet + rose */
.cx-hero-warm .cx-hero-eb, .cx-hero-warm .cx-hero-title, .cx-hero-warm .cx-hero-num
  { background:linear-gradient(120deg,#c9a0ff,#ff9ec4); -webkit-background-clip:text; background-clip:text; }
.cx-hero-warm .cx-hero-glowa { background:radial-gradient(circle,#8b3ff0,transparent 70%); opacity:0.36; }
.cx-hero-warm .cx-hero-glowb { background:radial-gradient(circle,#ff6ba8,transparent 70%); opacity:0.28; }
.cx-hero-warm .cx-hero-vpill { background:rgba(201,160,255,0.16); color:#c9a0ff; }
.cx-hero-warm .cx-hero-type { -webkit-text-fill-color:#c9a0ff; color:#c9a0ff; }

/* GENTLE <65 : cool violet + blue (honest, still pretty) */
.cx-hero-gentle .cx-hero-eb, .cx-hero-gentle .cx-hero-title, .cx-hero-gentle .cx-hero-num
  { background:linear-gradient(120deg,#a78bfa,#7dd3fc); -webkit-background-clip:text; background-clip:text; }
.cx-hero-gentle .cx-hero-glowa { background:radial-gradient(circle,#6d28d9,transparent 70%); }
.cx-hero-gentle .cx-hero-glowb { background:radial-gradient(circle,#0ea5e9,transparent 70%); }
.cx-hero-gentle .cx-hero-vpill { background:rgba(167,139,250,0.14); color:#a78bfa; }
.cx-hero-gentle .cx-hero-type { -webkit-text-fill-color:#a78bfa; color:#a78bfa; }

/* FRIEND (non-love) : teal + violet */
.cx-hero-friend .cx-hero-eb, .cx-hero-friend .cx-hero-title, .cx-hero-friend .cx-hero-num
  { background:linear-gradient(120deg,#7dd3fc,#c084fc); -webkit-background-clip:text; background-clip:text; }
.cx-hero-friend .cx-hero-glowa { background:radial-gradient(circle,#3b82f6,transparent 70%); }
.cx-hero-friend .cx-hero-vpill { background:rgba(125,211,252,0.14); color:#7dd3fc; }
.cx-hero-friend .cx-hero-type { -webkit-text-fill-color:#7dd3fc; color:#7dd3fc; }
/* ---- MOBILE ---- */
@media (max-width: 560px) {
  .cx-sectitle { font-size:1.2rem; }
  .cx-hero { padding:22px 20px 20px; border-radius:18px; }
  .cx-hero-titlerow { flex-direction:column; align-items:flex-start; gap:10px; }
  .cx-hero-title { font-size:1.8rem; }
  .cx-hero-chip { text-align:left; display:flex; align-items:baseline; gap:8px; }
  .cx-hero-num { font-size:2.2rem; }
  .cx-hero-cap { margin-top:0; }
  .cx-hero-one { font-size:1.02rem; }
  .cx-hero-eb { font-size:0.75rem; letter-spacing:1.5px; }
  .cx-topbar .cx-newtop { padding:7px 12px; font-size:0.78rem; }
}

/* ---- "moves with the sky" freshness (full/timed readings only) ---- */
.cx-live { display:inline-flex; align-items:center; gap:6px; font-size:0.76rem; font-weight:600;
  color:var(--text-muted); background:rgba(192,132,252,0.08); border:1px solid rgba(192,132,252,0.16);
  padding:6px 13px; border-radius:100px; margin-bottom:14px; }
.cx-live-star { color:#e8943a; }
.cx-live-sky { color:#c084fc; }
.cx-hero-asof { font-size:0.62rem; letter-spacing:1px; text-transform:uppercase; color:var(--text-muted);
  opacity:0.7; margin-top:3px; }

.cx-stale { display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  background:linear-gradient(120deg, rgba(232,148,58,0.10), rgba(192,132,252,0.08));
  border:1px solid rgba(232,148,58,0.28); border-radius:16px; padding:16px 20px; margin-bottom:18px; }
.cx-stale-txt { flex:1; min-width:220px; font-size:0.9rem; color:var(--text-secondary); line-height:1.5; }
.cx-stale-txt b { color:var(--text-primary); }
.cx-stale-btn { flex:none; background:linear-gradient(120deg,#c084fc,#e8943a); color:#1a0b2e;
  font-family:inherit; font-weight:700; font-size:0.88rem; border:none; padding:11px 20px;
  border-radius:100px; cursor:pointer; }
.cx-stale-btn:hover { filter:brightness(1.08); }

.cx-skyfoot { margin-top:8px; padding:16px 20px; border-radius:14px; text-align:center;
  background:rgba(192,132,252,0.05); border:1px solid rgba(192,132,252,0.12);
  font-size:0.86rem; color:var(--text-muted); font-style:italic; line-height:1.5; }

@media (max-width: 560px) {
  .cx-stale { flex-direction:column; align-items:stretch; }
  .cx-stale-btn { width:100%; }
}

/* ---- "Ask an astrologer" handoff, at the end of a reading ----------------
   Styled to match the deck's handoff card (.handoff/.ho-*) so the two feel
   like the same product moment: one big clickable card, purple->gold wash,
   gold border, lift + glow on hover, arrow pinned right.
   Seeded by reading.ask_question — the model writes the question in the
   driver's own voice. Tapping it opens the Ask drawer on the main app. */
.cx-askbox{ margin:26px 0 8px; animation:cxfade .5s ease both }
@keyframes cxfade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.cx-askbox-h{
  font-family:Georgia,'Playfair Display',serif; font-size:1.14rem;
  color:var(--text-primary); text-align:center; line-height:1.5;
  margin-bottom:15px; font-style:italic;
}
.cx-askbox-h em{ color:var(--accent-gold); font-style:italic }
.cx-askbox-go{
  width:100%; display:flex; flex-direction:column; align-items:flex-start; gap:7px;
  background:linear-gradient(120deg, rgba(192,132,252,.16), rgba(232,148,58,.12));
  border:1px solid rgba(232,148,58,.45); border-radius:16px;
  padding:20px 52px 20px 22px; cursor:pointer; font-family:inherit; text-align:left;
  transition:.2s; position:relative;
}
.cx-askbox-go:hover{
  border-color:var(--accent-gold);
  background:linear-gradient(120deg, rgba(192,132,252,.24), rgba(232,148,58,.2));
  transform:translateY(-2px);
  box-shadow:0 16px 40px rgba(0,0,0,.4), 0 0 30px rgba(232,148,58,.14);
}
.cx-askbox-t{ font-size:1.05rem; color:var(--text-primary); font-weight:600 }
.cx-askbox-free{ color:var(--accent-gold); font-weight:400; font-size:.9rem }
.cx-askbox-q{
  font-family:Georgia,'Playfair Display',serif; font-style:italic;
  font-size:1.02rem; color:var(--text-secondary); line-height:1.4;
}
.cx-askbox-arrow{
  position:absolute; right:22px; top:50%; transform:translateY(-50%);
  color:var(--accent-gold); font-size:1.5rem;
}
.cx-askbox-sub{ text-align:center; font-size:.72rem; color:var(--text-muted); margin-top:11px }
@media(max-width:640px){
  .cx-askbox{ margin:20px 0 6px }
  .cx-askbox-h{ font-size:1.04rem }
  .cx-askbox-go{ padding:17px 44px 17px 17px }
  .cx-askbox-t{ font-size:.98rem }
  .cx-askbox-q{ font-size:.95rem }
}