/* «توافقكما العميق» — /synastry/ only (on top of chart.css). */
.sy-form { margin-block: var(--s4) var(--s6); }
.sy-two { display: grid; gap: 16px; }
.sy-person { border: 1px solid var(--rule); border-radius: 14px; padding: 16px; margin: 0; min-width: 0; background: var(--night-2); }
.sy-person legend { padding: 0 6px; font: 700 20px/30px var(--f-display); color: var(--gold-hi); }
.sy-hint { margin: 0 0 10px; color: var(--ink-3); font-size: 14px; }
.sy-name { margin-bottom: 10px; }
.sy-opt { display: grid; gap: 10px; margin-top: 10px; }
.sy-person .field span small { color: var(--ink-3); font-weight: 400; }
.sy-person input, .sy-person select { width: 100%; min-height: 46px; padding: 0 12px; border: 1px solid var(--rule-strong); border-radius: 10px; background: var(--night); color: var(--ink); font: 500 16px/1 var(--f-body); box-sizing: border-box; }
.sy-person .combo__list li b { color: var(--ink); } .sy-person .combo__list li small { color: var(--ink-3); }
.sy-saved { margin: 0 0 24px; }
.sy-saved h2 { font: 700 20px/30px var(--f-display); margin: 0 0 8px; }
.sy-saved ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.sy-saved li { display: flex; gap: 6px; align-items: stretch; }
.sy-saved li > button:first-child { flex: 1; display: grid; text-align: start; gap: 2px; padding: 10px 14px; background: var(--night-2); border: 1px solid var(--rule); border-radius: 12px; color: var(--ink); font: inherit; cursor: pointer; }
.sy-saved li > button:first-child small { color: var(--ink-3); }
.sy-del { width: 44px; border: 1px solid var(--rule); background: none; color: var(--ink-3); border-radius: 12px; font-size: 20px; cursor: pointer; }
.sy-out { margin: 0 0 var(--s7); }
.sy-res__h h2 { font: 700 28px/38px var(--f-display); margin: 0 0 10px; }
.sy-whos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.sy-who { display: grid; gap: 2px; padding: 10px 12px; background: var(--night-2); border: 1px solid var(--rule); border-radius: 12px; font-size: 14px; color: var(--ink-2); }
.sy-who b { color: var(--ink); font-size: 16px; }
.sy-note { margin: 8px 0 0; color: var(--ink-3); font-size: 13px; }
.sy-gauges { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 18px 0 12px; }
.sy-gauge { display: grid; justify-items: center; gap: 2px; padding: 10px 6px; background: var(--night-2); border: 1px solid var(--rule); border-radius: 14px; text-align: center; }
.sy-gauge svg { width: 100%; max-width: 120px; height: auto; }
.sy-gauge .bg { fill: none; stroke: rgba(255, 255, 255, .08); stroke-width: 9; stroke-linecap: round; }
.sy-gauge .fg { fill: none; stroke: var(--gold); stroke-width: 9; stroke-linecap: round; }
.sy-gauge b { font: 700 24px/1 var(--f-display); color: var(--gold-hi); margin-top: -14px; }
.sy-gauge span { font-size: 13px; color: var(--ink-2); }
.sy-gauge small { font-size: 11px; color: var(--ink-3); }
.sy-verdict { margin: 0 0 20px; padding: 14px 16px; background: var(--night-2); border-inline-start: 3px solid var(--gold); border-radius: 0 12px 12px 0; color: var(--ink); line-height: 1.9; }
.sy-sec h3 { font: 700 22px/32px var(--f-display); margin: 0 0 10px; }
.sy-item { padding: 14px 16px; margin: 0 0 10px; background: var(--night-2); border: 1px solid var(--rule); border-inline-start: 3px solid var(--gold); border-radius: 14px; }
.sy-item.is-tense { border-inline-start-color: var(--rubric); } .sy-item.is-harm { border-inline-start-color: #9EC9E8; }
.sy-item header { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 6px; }
.sy-item h4 { font: 600 16px/26px var(--f-display); margin: 0; flex: 1; min-width: 0; color: var(--ink); }
.sy-item__g { color: var(--gold-hi); font-size: 18px; white-space: nowrap; }
.sy-item__g i { font-style: normal; color: var(--ink-2); font-size: 14px; }
.sy-item__orb { color: var(--ink-3); font-size: 12px; }
.sy-item p { margin: 0; color: var(--ink-2); line-height: 1.95; }
.sy-item p b { color: var(--ink); font-weight: 600; }
.sy-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0; }
.md-honest { margin: 8px 0 0; padding: 12px 14px; border-inline-start: 3px solid var(--gold); background: var(--night-2); color: var(--ink-2); font-size: 14px; line-height: 1.9; border-radius: 0 10px 10px 0; }
@media (min-width: 720px) { .sy-two { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sy-opt { grid-template-columns: 1fr 1.4fr; } }

.sy-person select{padding-inline-start:38px}