/* horoscope.css */
.horo-hero { background: radial-gradient(ellipse at 50% 0%, rgba(192,0,255,.13), transparent 60%); }
.horo-hero h1 { font-family: var(--f-display); font-size: clamp(2rem,5vw,4rem); }
.horo-date { font-size: .85rem; color: rgba(192,0,255,.7); letter-spacing: .1em; margin: .5rem 0; font-weight: 600; }

.sign-selector-section { background: rgba(10,0,22,.5); }
.sign-tabs { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-bottom: 2rem; }
.stab {
  width: 52px; height: 52px; border-radius: 50%; background: rgba(40,0,80,.4);
  border: 1px solid var(--c-border); font-size: 1.4rem; cursor: pointer;
  color: var(--c-muted); transition: all var(--t); display: flex; align-items: center; justify-content: center;
}
.stab:hover,.stab.active { background: rgba(192,0,255,.2); border-color: var(--c-neon); color: #fff; box-shadow: var(--glow-sm); transform: scale(1.12); }

.horo-panel {
  background: var(--c-card); border: 1px solid var(--c-border); border-radius: var(--r-xl);
  padding: 2rem; display: grid; grid-template-columns: 1fr; gap: 2rem;
  box-shadow: 0 0 50px rgba(192,0,255,.07);
}
@media(min-width:768px) { .horo-panel { grid-template-columns: 200px 1fr; } }
.hp-left { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .5rem; }
.hp-sym { font-size: 4.5rem; filter: drop-shadow(0 0 16px rgba(192,0,255,.6)); animation: float-sym 3s ease-in-out infinite; }
@keyframes float-sym { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
.hp-name { font-family: var(--f-display); font-size: 1.4rem; }
.hp-dates, .hp-el, .hp-ruler { font-size: .78rem; color: var(--c-muted); }
.hp-el { color: var(--c-pur-300); }

.hp-reading { font-family: var(--f-serif); font-style: italic; font-size: .95rem; color: var(--c-sub); line-height: 1.9; margin-bottom: 1.5rem; min-height: 80px; }
.hp-meters { display: flex; flex-direction: column; gap: .7rem; margin-bottom: 1.5rem; }
.hp-lucky { display: flex; flex-wrap: wrap; gap: 1.25rem; font-size: .78rem; color: var(--c-muted); }
.hp-lucky strong { color: var(--c-text); }

.all-signs-section { background: rgba(5,0,12,.4); }