:root {--accent-pink:rgb(232,40,125); --accent-blue:#0ea5e9; --bg-color:#f7f8fa; --container-bg:#ffffff; --text-color:#0f172a; --border-color:#e2e8f0}
.love-compatibility-widget-container {clear:both; color:var(--text-color); padding-top:1rem; line-height:1.2; -webkit-tap-highlight-color:transparent}
.love-compatibility-widget-container * {margin:0; padding:0; box-sizing:border-box}
.love-compatibility-widget-container .container {width:100%; background:#ffffff; border-radius:.8rem; position:relative; border:1px solid #4dd2f6; transition:all 0.3s ease; overflow:hidden; padding:1rem}
.love-compatibility-widget-container .header {text-align:center; margin-bottom:20px}
.love-compatibility-widget-container .title {font-size:14px; font-weight:700; letter-spacing:0.5px; color:#475569}
.love-compatibility-widget-container .subtitle {font-size:12px; color:#94a3b8; margin-top:5px}
.mobile-radar,.love-compatibility-widget-container .desktop-grid {display:none}
.love-compatibility-widget-container .mobile-mode .mobile-radar {display:flex; justify-content:center; align-items:center}
.love-compatibility-widget-container .desktop-mode .desktop-grid {display:block}
.love-compatibility-widget-container .mobile-radar {position:relative; width:auto; max-width:100%; aspect-ratio:1/1; height:auto; margin:1rem}
.love-compatibility-widget-container .center-sign {width:70px; height:70px; border-radius:50%; background:var(--accent-pink); display:flex; justify-content:center; align-items:center; font-size:30px; color:white; box-shadow:0 0 25px rgba(232,40,125,0.4); z-index:10}
.love-compatibility-widget-container .zodiac-ring {position:absolute; inset:0; border-radius:50%; border:1px dashed rgba(2,132,199,0.2); width:100%; height:100%; pointer-events:none}
.love-compatibility-widget-container .pointer {position:absolute; height:6px; background:var(--accent-blue); transform-origin:left center; opacity:0; transition:opacity 0.4s ease,width 0.4s cubic-bezier(0.68,-0.55,0.27,1.55); z-index:1; clip-path:polygon(0 0,100% 50%,0 100%)}
.love-compatibility-widget-container .desktop-grid {position:relative; text-align:center; margin-bottom:15px; max-width:780px; margin-left:auto; margin-right:auto}
.love-compatibility-widget-container .desktop-main-sign {width:44px; height:44px; border-radius:50%; background-color:var(--accent-pink); color:white; display:inline-flex; justify-content:center; align-items:center; font-size:20px; margin-bottom:15px}
.love-compatibility-widget-container .signs-row {display:flex; flex-wrap:wrap; justify-content:space-between}
.love-compatibility-widget-container .connection-svg {position:absolute; top:0; left:0; width:100%; height:100%; pointer-events:none; z-index:1}
.love-compatibility-widget-container .connection-svg line {stroke:var(--accent-blue); stroke-width:2; opacity:0; transition:opacity 0.3s ease; stroke-linecap:round}
.love-compatibility-widget-container .sign-wrapper {display:flex; flex-direction:column; align-items:center; gap:4px}
.love-compatibility-widget-container .zodiac-card {width:40px; height:40px; border-radius:50%; background:#fff; border:1px solid var(--border-color); display:flex; justify-content:center; align-items:center; cursor:pointer; transition:all 0.2s ease; -webkit-user-select:none; user-select:none}
.love-compatibility-widget-container .zodiac-icon {font-size:18px; color:var(--text-color)}
.love-compatibility-widget-container .sign-name {display:none; font-size:9px; color:#94a3b8}
.love-compatibility-widget-container .mobile-mode .sign-wrapper {position:absolute; top:50%; left:50%; margin:-20px 0 0 -20px; z-index:2}
.love-compatibility-widget-container .desktop-mode .sign-name {display:block}
.love-compatibility-widget-container .sign-wrapper:hover .zodiac-card {border-color:var(--accent-blue); transform:scale(1.1)}
.love-compatibility-widget-container .sign-wrapper.selected .zodiac-card {background:var(--accent-blue); border-color:var(--accent-blue); box-shadow:0 0 15px var(--accent-blue); transform:scale(1.05)}
.love-compatibility-widget-container .sign-wrapper.selected .zodiac-icon {color:white}
.love-compatibility-widget-container .desktop-mode .sign-wrapper.selected .sign-name {color:var(--accent-blue); font-weight:700}
.love-compatibility-widget-container .selected-pair-display {position:absolute; top:20%; left:50%; transform:translateX(-50%); width:100%; text-align:center; font-size:13px; color:#64748b; font-weight:bold; opacity:0; transition:opacity 0.4s 0.2s ease-out; z-index:5; pointer-events:none}
.love-compatibility-widget-container .selected-pair-display.show {opacity:1}
.love-compatibility-widget-container .result-panel {min-height:70px; background:#f0f9ff; border:1px solid #bae6fd; border-radius:16px; display:flex; align-items:center; justify-content:space-between; padding:10px 20px; opacity:0; transform:translateY(10px); max-height:0; overflow:hidden; transition:max-height 0.4s ease-out,opacity 0.4s ease-out,transform 0.4s ease-out,padding 0.4s ease-out,margin-top 0.4s ease-out}
.love-compatibility-widget-container .result-panel.show {opacity:1; transform:translateY(0); max-height:100px; padding-top:10px; padding-bottom:10px; margin-top:15px}
.love-compatibility-widget-container .mobile-mode .result-panel {flex-wrap:wrap; max-height:none}
.love-compatibility-widget-container .result-info {display:flex; align-items:center; gap:12px}
.love-compatibility-widget-container .result-formula {display:flex; flex-direction:column; align-items:center; gap:2px}
.love-compatibility-widget-container .result-icon {font-size:20px; color:var(--accent-blue); line-height:1}
.love-compatibility-widget-container .result-details {display:flex; flex-direction:column; gap:5px}
.love-compatibility-widget-container .result-word {font-size:15px; font-weight:700}
.love-compatibility-widget-container .hearts-rating {display:flex; gap:3px}
.love-compatibility-widget-container .heart {font-size:12px; color:var(--accent-pink)}
.love-compatibility-widget-container .heart.empty {color:#cbd5e1}
.love-compatibility-widget-container .result-percentage {font-size:24px; font-weight:700; color:var(--accent-pink); padding:0 10px}
.love-compatibility-widget-container .mobile-mode .result-percentage {padding:0}
.love-compatibility-widget-container .result-text {padding-left:10px; border-left:1px solid #bae6fd; color:#64748b; font-size:14px}
.love-compatibility-widget-container .mobile-mode .result-text {padding-left:0; border-left:none; display:block; width:100%; flex-basis:100%; margin-top:10px}
.love-compatibility-widget-container .result-text b {display:block}
.love-compatibility-widget-container .mobile-mode .result-text b {display:none}
.love-compatibility-widget-container .loader {position:absolute; inset:0; background:rgba(255,255,255,0.85); backdrop-filter:blur(3px); border-radius:24px; display:flex; justify-content:center; align-items:center; z-index:50; opacity:0; pointer-events:none; transition:opacity 0.2s ease}
.love-compatibility-widget-container .loader.show {opacity:1; pointer-events:auto}
.love-compatibility-widget-container .loader-spinner {width:52px; height:52px; border:4px solid rgba(14,165,233,0.2); border-radius:50%; border-top-color:var(--accent-blue); animation:spin 0.8s linear infinite}
@keyframes spin {to {transform:rotate(360deg)}
}
.love-compatibility-widget-container .hidden {display:none !important}
.love-compatibility-widget-container .desktop-mode .result-panel {width:100%; margin-left:auto; margin-right:auto}
.love-compatibility-widget-container .mobile-tooltip {position:fixed; background-color:#2c3e50; color:white; padding:6px 10px; border-radius:6px; font-size:12px; font-weight:bold; opacity:0; transition:opacity 0.2s ease; pointer-events:none; z-index:100}