.compat-section{
max-width:1200px;
margin:48px auto 24px;
padding:0 16px;
}
.compat-section h2{
font-size:28px;
font-weight:700;
text-align:center;
margin:0 0 8px;
background:linear-gradient(135deg,#e8c26a,#fff5d4);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
background-clip:text;
}
.compat-section .subtitle{
text-align:center;
color:#b8b2d0;
margin:0 0 28px;
font-size:15px;
}
.compat-grid{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
gap:10px;
}
.compat-card{
position:relative;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:6px;
padding:14px 10px;
background:linear-gradient(135deg,rgba(232,194,106,.06),rgba(124,58,237,.08));
border:1px solid rgba(232,194,106,.18);
border-radius:12px;
text-decoration:none;
color:#e8e2f4;
transition:all .25s ease;
overflow:hidden;
text-align:center;
min-height:78px;
}
.compat-card::before{
content:"";
position:absolute;
inset:0;
background:radial-gradient(circle at 20% 20%,rgba(232,194,106,.15),transparent 60%);
opacity:0;
transition:opacity .25s;
}
.compat-card:hover{
transform:translateY(-2px);
border-color:rgba(232,194,106,.5);
box-shadow:0 8px 24px rgba(232,194,106,.15);
}
.compat-card:hover::before{opacity:1}
.compat-zodiacs{
display:flex;
align-items:center;
gap:6px;
font-size:22px;
line-height:1;
position:relative;
z-index:1;
}
.compat-zodiacs .heart{
font-size:11px;
color:#e8c26a;
opacity:.7;
}
.compat-names{
font-size:12.5px;
line-height:1.3;
color:#c4bfde;
position:relative;
z-index:1;
font-weight:500;
}
.compat-names .vs{
color:#e8c26a;
margin:0 3px;
font-weight:700;
}
.compat-card:hover .compat-names{color:#fff}
@media(max-width:640px){
.compat-grid{grid-template-columns:repeat(2,1fr);gap:8px}
.compat-card{padding:12px 6px;min-height:72px}
.compat-zodiacs{font-size:20px}
.compat-names{font-size:11.5px}
.compat-section h2{font-size:22px}
}
.compat-tabs{
display:flex;
flex-wrap:wrap;
gap:6px;
justify-content:center;
margin:0 0 18px;
}
.compat-tab{
display:flex;
align-items:center;
gap:6px;
padding:7px 12px;
background:rgba(124,58,237,.08);
border:1px solid rgba(232,194,106,.18);
border-radius:20px;
color:#c4bfde;
font-size:13px;
cursor:pointer;
transition:.2s;
}
.compat-tab .ct-sym{font-size:15px}
.compat-tab:hover{
border-color:rgba(232,194,106,.5);
color:#fff;
}
.compat-tab.active{
background:linear-gradient(135deg,#e8c26a,#fbbf24);
color:#1a0b2e;
font-weight:700;
border-color:transparent;
}
.compat-panel{display:none}
.compat-panel.active{display:block}
.compat-carwrap{position:relative}
.compat-car{
display:flex;
gap:10px;
overflow-x:auto;
scroll-behavior:smooth;
scrollbar-width:none;
padding:4px 2px;
}
.compat-car::-webkit-scrollbar{display:none}
.compat-car .compat-card{
flex:0 0 168px;
max-width:168px;
min-height:86px;
}
.compat-cbtn{
position:absolute;
top:50%;
transform:translateY(-50%);
z-index:5;
width:34px;
height:34px;
border-radius:50%;
border:1px solid rgba(232,194,106,.35);
background:rgba(26,11,46,.9);
color:#e8c26a;
font-size:20px;
line-height:1;
cursor:pointer;
transition:.2s;
}
.compat-cbtn.cl{left:-14px}
.compat-cbtn.cr{right:-14px}
.compat-cbtn:hover{
background:linear-gradient(135deg,#e8c26a,#fbbf24);
color:#1a0b2e;
border-color:transparent;
}
@media(max-width:640px){
.compat-car .compat-card{flex:0 0 140px;max-width:140px}
.compat-cbtn.cl{left:-6px}
.compat-cbtn.cr{right:-6px}
}
@media(max-width:640px){
.zgrid{grid-template-columns:repeat(3,1fr);gap:6px}
.zc{padding:8px 6px}
.zc .zdate{display:none}
.zc .zname{font-size:12px}
.compat-section{margin:28px auto 12px;padding:0 12px}
.compat-section h2{font-size:20px}
.compat-section .subtitle{font-size:13px;margin:0 0 14px}
.compat-tabs{
flex-wrap:nowrap;
overflow-x:auto;
justify-content:flex-start;
scrollbar-width:none;
margin:0 -12px 14px;
padding:0 12px 4px;
}
.compat-tabs::-webkit-scrollbar{display:none}
.compat-tab{flex:0 0 auto;padding:6px 10px;font-size:12px}
.compat-car .compat-card{
flex:0 0 132px;
max-width:132px;
min-height:76px;
padding:10px 6px;
}
.compat-zodiacs{font-size:18px}
.compat-names{font-size:10.5px}
.compat-cbtn{width:28px;height:28px;font-size:16px}
.compat-cbtn.cl{left:-4px}
.compat-cbtn.cr{right:-4px}
}
@media(max-width:640px){
.zgrid{grid-template-columns:repeat(3,minmax(0,1fr))}
.zc{min-width:0;padding:8px 4px}
.zc .zname{
font-size:11px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
}
.compat-hero{
display:flex;
gap:32px;
align-items:center;
max-width:760px;
margin:0 auto 36px;
}
.compat-ring{
flex:0 0 180px;
width:180px;
height:180px;
position:relative;
}
.ring-svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring-bg{fill:none;stroke:rgba(139,92,246,.15);stroke-width:12}
.ring-fg{
fill:none;
stroke:url(#ring-grad);
stroke-width:12;
stroke-linecap:round;
stroke-dasharray:565.48;
stroke-dashoffset:calc(565.48 - 565.48 * var(--pct) / 100);
transition:stroke-dashoffset 1.5s ease;
}
.ring-text{
position:absolute;
inset:0;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
}
.ring-num{font-size:48px;font-weight:700;color:#fff;line-height:1}
.ring-label{font-size:24px;color:var(--muted);margin-top:-8px}
.compat-hero-info h2{font-size:24px;margin:0 0 8px}
.compat-hero-info p{color:var(--muted);line-height:1.6;margin:0}

.compat-axes{max-width:760px;margin:0 auto 36px}
.compat-axes h2{font-size:22px;margin:0 0 16px}
.axis{
display:grid;
grid-template-columns:160px 1fr 48px;
gap:12px;
align-items:center;
margin-bottom:12px;
}
.axis span{font-size:14px;color:var(--txt)}
.axis .bar{
height:14px;
background:rgba(139,92,246,.12);
border-radius:8px;
overflow:hidden;
}
.axis .bar-fg{
height:100%;
background:linear-gradient(90deg,#8b5cf6,#f0abfc);
border-radius:8px;
width:0;
transition:width 1.2s ease;
}
.axis b{font-size:14px;color:#fff;text-align:right}

.compat-section{max-width:760px;margin:0 auto 36px}
.compat-section h2{font-size:22px;margin:0 0 16px}
.strengths-grid,.growth-grid,.gives-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:12px;
}
.strength-card,.growth-card,.gives-card{
background:var(--panel);
border:1px solid var(--line);
border-radius:12px;
padding:16px;
line-height:1.6;
}
.strength-card{border-left:3px solid #10b981}
.growth-card{border-left:3px solid #f59e0b}
.gives-card b{display:block;font-size:16px;margin-bottom:4px}
.gives-card span{color:var(--v2);font-size:14px;display:block;margin-bottom:8px}

.compat-verdict{
max-width:760px;
margin:0 auto 36px;
background:var(--panel);
border:1px solid var(--line);
border-radius:16px;
padding:24px;
}
.compat-verdict h2{margin:0 0 12px}
.compat-verdict p{line-height:1.7;margin:0 0 12px;color:var(--muted)}

.compat-faq{max-width:760px;margin:36px auto}
.compat-faq h2{font-size:22px;margin:0 0 16px}
.faq-item{
background:var(--panel);
border:1px solid var(--line);
border-radius:12px;
margin-bottom:8px;
overflow:hidden;
}
.faq-item[open]{border-color:var(--v2)}
.faq-q{
padding:16px;
cursor:pointer;
font-weight:600;
display:flex;
align-items:center;
gap:8px;
}
.faq-q::after{content:'▼';margin-left:auto;transition:.2s}
.faq-item[open] .faq-q::after{transform:rotate(180deg)}
.faq-a{padding:0 16px 16px;line-height:1.6;color:var(--muted)}

.compat-crosslink{max-width:760px;margin:36px auto}
.compat-crosslink h2{font-size:20px;margin:0 0 12px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.compat-chip{
display:inline-flex;
align-items:center;
gap:6px;
padding:8px 14px;
background:rgba(139,92,246,.08);
border:1px solid var(--line);
border-radius:20px;
text-decoration:none;
color:var(--txt);
font-size:13px;
transition:.2s;
}
.compat-chip:hover{border-color:var(--v2);color:var(--v2)}
.compat-chip .chip-sym{font-size:16px}

@media(max-width:640px){
.compat-hero{flex-direction:column;text-align:center}
.compat-ring{flex:0 0 140px;width:140px;height:140px}
.ring-num{font-size:36px}
.axis{grid-template-columns:120px 1fr 40px;gap:8px}
.axis span{font-size:12px}
.axis b{font-size:12px}
}
.ring-text{
flex-direction:row;
align-items:baseline;
justify-content:center;
gap:3px;
}
.ring-label{
margin-top:0;
font-size:24px;
}
.ring-text{
flex-direction:row;
align-items:center;
justify-content:center;
gap:2px;
}
.ring-label{
margin-top:10px;
font-size:24px;
}
.compat-verdict p,
.faq-a p,
.compat-hero-info p,
.strength-card,
.growth-card,
.gives-card p,
.pagehead p{
text-align:justify;
hyphens:auto;
-webkit-hyphens:auto;
}
.pagehead p{
text-align:center;
hyphens:none;
-webkit-hyphens:none;
}
.strength-card,
.growth-card,
.gives-card p{
text-align:left;
hyphens:none;
-webkit-hyphens:none;
}
.compat-crosslink{
display:grid;
grid-template-columns:1fr 1fr;
gap:16px;
max-width:1000px;
margin:36px auto;
}
.cross-col{
background:var(--panel);
border:1px solid var(--line);
border-radius:16px;
padding:20px;
transition:.2s;
}
.cross-col:hover{
border-color:rgba(232,194,106,.4);
box-shadow:0 8px 24px rgba(139,92,246,.12);
}
.cross-col h2{
font-size:18px;
margin:0 0 14px;
}
@media(max-width:760px){
.compat-crosslink{grid-template-columns:1fr}
}
.compat-crosslink{
max-width:760px;
}
.compat-share{
display:flex;
flex-wrap:wrap;
gap:10px;
align-items:center;
justify-content:center;
max-width:760px;
margin:0 auto 28px;
}
.share-label{color:var(--muted);font-size:14px}
.share-btn{
padding:8px 14px;
border:1px solid var(--line);
border-radius:20px;
background:rgba(139,92,246,.08);
color:var(--txt);
font-size:13px;
text-decoration:none;
cursor:pointer;
transition:.2s;
}
.share-btn:hover{border-color:var(--v2);color:var(--v2)}
.paircard{
max-width:420px;
margin:0 auto;
background:linear-gradient(135deg,rgba(232,194,106,.08),rgba(124,58,237,.12));
border:1px solid rgba(232,194,106,.35);
border-radius:16px;
padding:22px;
text-align:center;
}
.paircard-sym{font-size:44px;line-height:1;margin-bottom:10px}
.paircard-name{font-size:20px;font-weight:700;color:#fff;margin-bottom:8px}
.paircard-advice{color:var(--muted);line-height:1.6}
.compat-note{text-align:center;color:var(--muted);font-size:13px;margin:12px 0 0}
.compat-note a{color:var(--v2)}
.days-row{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.day-chip{
width:44px;
height:44px;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
background:linear-gradient(135deg,#e8c26a,#fbbf24);
color:#1a0b2e;
font-weight:700;
font-size:16px;
box-shadow:0 4px 14px rgba(232,194,106,.35);
}
.scenario-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.scenario-card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px}
.scenario-card b{display:block;margin-bottom:10px}
.scenario-card .bar{height:10px;background:rgba(139,92,246,.12);border-radius:6px;overflow:hidden;margin-bottom:6px}
.scenario-card .bar-fg{height:100%;background:linear-gradient(90deg,#8b5cf6,#f0abfc);border-radius:6px}
.sc-pct{font-size:13px;color:var(--v2);font-weight:700}
.scenario-card p{color:var(--muted);font-size:13px;line-height:1.55;margin:6px 0 0}
.pcm-img{
flex:0 0 132px;
width:132px;
height:198px;
object-fit:cover;
border-radius:10px;
border:2px solid rgba(232,194,106,.65);
box-shadow:0 6px 20px rgba(0,0,0,.55);
}
.pcm-fallback{
flex:0 0 132px;
width:132px;
height:198px;
border-radius:10px;
background:linear-gradient(160deg,#2b2153,#171226);
border:2px solid rgba(232,194,106,.65);
display:flex;
align-items:center;
justify-content:center;
}
.pcm-fallback .pcm-name{
font-size:14px;
font-weight:700;
color:#fff;
text-align:center;
padding:8px;
}
.pcm-name-mobile{
display:none;
font-size:16px;
font-weight:700;
color:#fff;
margin:0 0 8px;
}
@media(max-width:760px){
.paircard-row{flex-direction:row;align-items:flex-start;gap:12px}
.pcm-img,.pcm-fallback{flex:0 0 110px;width:110px;height:165px}
.pcm-name-mobile{display:block}
}
.compat-duo{
display:grid;
grid-template-columns:1fr 1fr;
gap:16px;
max-width:760px;
margin:0 auto 36px;
align-items:stretch;
}
.duo-col{
background:var(--panel);
border:1px solid var(--line);
border-radius:16px;
padding:20px;
display:flex;
flex-direction:column;
}
.duo-col:last-child{justify-content:center}
.duo-col h2{
font-size:18px;
margin:0 0 16px;
text-align:center;
}
.paircard-row{
display:flex;
gap:14px;
align-items:center;
flex:1;
}
.pcm-img{
flex:0 0 124px;
width:124px;
height:186px;
object-fit:cover;
border-radius:10px;
border:2px solid rgba(232,194,106,.65);
box-shadow:0 6px 20px rgba(0,0,0,.55);
}
.pcm-side{
flex:1;
min-width:0;
display:flex;
flex-direction:column;
gap:8px;
}
.pcm-name-mobile{
display:block;
font-size:15px;
font-weight:700;
color:#f0d9a0;
margin:0;
}
.pcm-advice{
color:var(--txt);
font-size:13.5px;
line-height:1.55;
margin:0;
}
.pcm-side .compat-note{
margin-top:auto;
text-align:left;
}
.duo-col .compat-note{text-align:center}
.days-row{
display:flex;
flex-wrap:wrap;
gap:10px;
justify-content:center;
margin:4px 0 12px;
}
@media(max-width:760px){
.compat-duo{grid-template-columns:1fr}
.pcm-img{flex:0 0 110px;width:110px;height:165px}
}
.pcm-link{
flex:0 0 124px;
width:124px;
display:block;
border-radius:10px;
transition:.2s;
}
.pcm-link:hover{
transform:translateY(-3px);
box-shadow:0 10px 26px rgba(232,194,106,.28);
}
.pcm-link .pcm-img{
width:124px;
height:186px;
flex:none;
}
.pcm-advice,
.scenario-card p,
.strength-card,
.growth-card,
.gives-card p{
text-align:justify;
hyphens:auto;
-webkit-hyphens:auto;
}
@media(max-width:760px){
.pcm-link{flex:0 0 108px;width:108px}
.pcm-link .pcm-img{width:108px;height:162px}
}
@media(max-width:760px){
.paircard-row{display:flex;gap:12px;align-items:flex-start}
.pcm-img{flex:0 0 110px;width:110px;height:165px}
.pcm-link{
float:left;
margin:0 12px 10px 0;
flex:none;
width:108px;
}
.pcm-link .pcm-img{
width:108px;
height:162px;
max-width:none;
}
.pcm-side{display:block}
.pcm-side .compat-note{
clear:both;
margin-top:10px;
text-align:center;
}
}
.compat-quiz{
max-width:760px;
margin:0 auto 36px;
background:var(--panel);
border:1px solid var(--line);
border-radius:16px;
padding:24px;
}
.quiz-intro{
text-align:center;
color:var(--muted);
margin:0 0 18px;
}
.quiz-form{display:flex;flex-direction:column;gap:14px}
.quiz-q{
display:grid;
grid-template-columns:1fr auto auto;
gap:12px;
align-items:center;
padding:12px 14px;
background:rgba(139,92,246,.05);
border:1px solid var(--line);
border-radius:10px;
}
.quiz-q span{font-size:14px;line-height:1.4;color:var(--txt)}
.quiz-q label{
display:inline-flex;
align-items:center;
gap:5px;
font-size:13px;
color:var(--muted);
cursor:pointer;
white-space:nowrap;
}
.quiz-q input{accent-color:var(--v2);cursor:pointer}
.quiz-btn{align-self:center;margin-top:8px;padding:10px 28px}
.quiz-result{
text-align:center;
padding:12px 8px 4px;
}
.qr-score{
display:inline-flex;
align-items:baseline;
justify-content:center;
gap:4px;
margin-bottom:12px;
}
.qr-num{
font-size:56px;
font-weight:700;
background:linear-gradient(135deg,#e8c26a,#fff5d4);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
background-clip:text;
line-height:1;
}
.qr-pct{font-size:28px;color:var(--muted)}
.qr-verdict{
font-size:15px;
line-height:1.6;
color:var(--txt);
margin:0 0 12px;
text-align:justify;
hyphens:auto;
-webkit-hyphens:auto;
}
.qr-compare{
color:var(--muted);
font-size:13.5px;
margin:0 0 16px;
}
.qr-compare b{color:#fff}
@media(max-width:640px){
.quiz-q{grid-template-columns:1fr;gap:8px}
.quiz-q label{justify-self:start}
}
.compat-ring-wrap{position:relative;width:150px;height:150px;margin:6px auto 18px}
.compat-ring{width:150px;height:150px;transform:rotate(-90deg)}
.ring-bg{fill:none;stroke:rgba(139,92,246,.15);stroke-width:10}
.ring-fg{fill:none;stroke:#c084fc;stroke-width:10;stroke-linecap:round}
.ring-label{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.ring-label b{font-size:30px;color:#fff}
.ring-label span{font-size:11px;color:var(--muted)}
.verdict-block{max-width:760px;margin:0 auto 26px;background:linear-gradient(135deg,rgba(139,92,246,.14),rgba(240,171,252,.06));border:1px solid var(--line);border-radius:16px;padding:22px 26px}
.verdict-block h2{font-size:20px;margin:0 0 10px}
.verdict-block p{font-size:16.5px;line-height:1.75;color:var(--txt);margin:0}
.trio-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;max-width:760px;margin:0 auto 26px}
.trio-card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px}
.trio-card h3{font-size:15px;margin:0 0 8px}
.trio-card b{display:block;font-size:14px;color:#f0d9a0;margin-bottom:6px}
.trio-card p{color:var(--muted);font-size:13px;line-height:1.6;margin:0}
@media(max-width:820px){.trio-grid{grid-template-columns:1fr}}
.compat-top-row{display:flex;gap:22px;max-width:980px;margin:0 auto 26px;align-items:center}
.compat-top-row .compat-ring-wrap{margin:0;flex:0 0 170px}
@media(max-width:820px){
.compat-top-row{flex-direction:column}
.compat-top-row .compat-ring-wrap{margin:0 auto}
}
.verdict-block,.trio-grid,.compat-duo,.compat-section,.compat-crosslink,.final-cta,.faq{
max-width:980px;
margin-left:auto;
margin-right:auto;
}
.verdict-block p,.trio-card p,.compat-duo p,.compat-section p,.faq-a p,.compat-crosslink p,.compat-note{
text-align:justify;
hyphens:auto;
-webkit-hyphens:auto;
}
@media(max-width:820px){
.compat-top-row{
flex-direction:column;
align-items:center;
}
.compat-top-row .compat-ring-wrap{
margin:0 auto 14px;
align-self:center;
}
.compat-top-row .formcard{
width:100%;
}
.paircard-row{
flex-direction:row !important;
align-items:flex-start !important;
gap:12px !important;
}
.paircard-row .pcm-img{
flex:0 0 110px !important;
width:110px !important;
height:165px !important;
}
.pcm-side{
flex:1 1 auto;
min-width:0;
}
.pcm-name-mobile{
display:block;
}
}
.faq-item .faq-a{
display:none !important;
}
.faq-item.open .faq-a{
display:block !important;
}
.faq-q{cursor:pointer}
.compat-crumbs{max-width:980px;margin:0 auto 14px;display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:12.5px;color:var(--muted);justify-content:flex-start}
.compat-crumbs a{color:var(--muted);text-decoration:none}
.compat-crumbs a:hover{color:var(--v2)}
.compat-crumbs span{opacity:.5}
.compat-crumbs b{color:var(--txt)}
.ring-label{text-align:center}
.ring-label b,.ring-label span{display:block;width:100%;text-align:center;margin:0 auto}
.compat-top-row{width:100%}
.compat-top-row .formcard{width:auto;min-width:0;flex:1 1 0}
.compat-crumbs{
margin:26px auto 14px;
}
.ring-label{
position:absolute;
inset:0;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
text-align:center;
}
.ring-label b{
display:block;
width:100%;
text-align:center;
font-size:30px;
line-height:1.1;
margin:0;
}
.ring-label span{
display:block;
width:100%;
text-align:center;
white-space:nowrap;
font-size:10.5px;
line-height:1.3;
letter-spacing:.2px;
margin:2px 0 0;
}
.ring-label span{
position:absolute;
top:calc(100% + 8px);
left:50%;
transform:translateX(-50%);
width:auto;
max-width:none;
white-space:nowrap;
margin:0;
text-align:center;
font-size:11px;
color:var(--muted);
}
.compat-top-row .compat-ring-wrap{
margin:0 0 30px;
}
@media(max-width:820px){
.compat-top-row .compat-ring-wrap{
margin:0 auto 30px;
}
}
.ring-label{
position:absolute;
inset:0;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
text-align:center;
padding:0 10px 16px;
}
.ring-label b{
position:static;
transform:none;
display:block;
width:100%;
text-align:center;
margin:0;
}
.ring-label span{
position:static;
transform:none;
top:auto;
left:auto;
display:block;
width:100%;
max-width:none;
white-space:nowrap;
text-align:center;
font-size:9.5px;
letter-spacing:0;
color:var(--muted);
margin:3px 0 0;
}
.compat-top-row .compat-ring-wrap{
margin:0;
}
.horo-grid{max-width:980px;margin:0 auto 36px;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:22px}
.horo-grid h2{font-size:20px;margin:0 0 8px;text-align:center}
.horo-intro{text-align:center;color:var(--muted);font-size:14px;margin:0 auto 16px;max-width:620px}
.horo-tabs{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-bottom:16px}
.horo-tab{background:rgba(139,92,246,.08);border:1px solid var(--line);border-radius:10px;padding:8px 12px;font-size:13px;color:var(--txt);cursor:pointer;transition:.15s;display:flex;flex-direction:column;align-items:center;gap:2px;min-width:60px}
.horo-tab:hover{border-color:var(--v2);color:var(--v2)}
.horo-tab.active{background:var(--v2);color:#fff;border-color:var(--v2)}
.ht-sym{font-size:18px;line-height:1}
.horo-panel{display:none}
.horo-panel.active{display:block}
.horo-carwrap{position:relative}
.horo-car{display:flex;gap:12px;overflow-x:auto;scroll-behavior:smooth;padding:4px 36px 8px}
.horo-car::-webkit-scrollbar{height:6px}
.horo-car::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
.horo-cbtn{position:absolute;top:50%;transform:translateY(-50%);background:var(--panel);border:1px solid var(--line);border-radius:50%;width:36px;height:36px;font-size:20px;color:var(--v2);cursor:pointer;z-index:2;display:flex;align-items:center;justify-content:center}
.horo-cbtn:hover{background:var(--v2);color:#fff}
.horo-cbtn.cl{left:0}
.horo-cbtn.cr{right:0}
.horo-card{flex:0 0 180px;display:flex;flex-direction:column;gap:4px;background:rgba(139,92,246,.05);border:1px solid var(--line);border-radius:12px;padding:12px;text-decoration:none;color:var(--txt);transition:.15s}
.horo-card:hover{border-color:var(--v2);transform:translateY(-2px)}
.horo-card.horo-compat{border-left:3px solid var(--v2)}
.horo-zodiacs{font-size:20px;text-align:center}
.horo-zodiacs .heart{color:var(--v2);font-size:14px}
.horo-names{font-size:13px;text-align:center;color:var(--muted)}
.horo-names .period{color:var(--v2);font-weight:600}
.horo-names .vs{color:var(--v2)}
@media(max-width:640px){
.horo-tab{padding:6px 10px;min-width:50px}
.ht-sym{font-size:16px}
.horo-card{flex:0 0 150px}
}