/* ============================================================
   25-horoscope.css —— 主页星座运势卡片
   与天气/新闻卡片同规格（margin/padding/圆角/边距变量一致），
   配色取紫罗兰星象色，与「问候语与 Logo」设置项图标同族（#5e5ce6）。
   逻辑见 25-horoscope.js。默认隐藏，取到数据后显示。
   ============================================================ */

.home-horoscope-card {
  margin: 10px var(--edge-pad) 2px var(--edge-pad);
  padding: 12px 14px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(94, 92, 230, 0.10), rgba(175, 82, 222, 0.03));
  border: 1px solid rgba(94, 92, 230, 0.16);
}
.home-horoscope-card.is-hidden { display: none; }

/* ── 顶部：大符号 + 名称/区间 + 综合分 + 今日/明日 ── */
.ho-top { display: flex; align-items: center; gap: 12px; }

.ho-glyph {
  flex-shrink: 0;
  width: 46px; height: 46px;
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; line-height: 1;
  color: #5e5ce6;
  background: rgba(94, 92, 230, 0.12);
  border-radius: 50%;
}

.ho-meta { flex: 1; min-width: 0; }
.ho-sign-name {
  font-size: 16px; font-weight: 700; color: var(--text-dark);
  line-height: 1.15;
}
.ho-range {
  margin-top: 2px; font-size: 12px; font-weight: 500;
  color: var(--tab-inactive);
}

.ho-score-wrap {
  flex-shrink: 0; display: flex; align-items: baseline; gap: 1px;
  color: #5e5ce6;
}
.ho-score {
  font-size: 30px; font-weight: 800; letter-spacing: -1px;
  line-height: 1;
}
.ho-score-unit { font-size: 13px; font-weight: 700; opacity: 0.7; }

/* 今日 / 明日 小切换 */
.ho-tabs {
  display: inline-flex; gap: 2px; margin-left: 4px;
  background: rgba(120, 120, 128, 0.12);
  border-radius: 8px; padding: 2px;
  flex-shrink: 0;
}
.ho-tab {
  border: none; background: transparent; cursor: pointer;
  font-size: 12px; font-weight: 600; color: var(--tab-inactive);
  padding: 4px 9px; border-radius: 6px;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.18s ease, color 0.18s ease;
}
.ho-tab.is-active { background: var(--card-bg, #fff); color: #5e5ce6; box-shadow: 0 1px 2px rgba(0,0,0,0.1); }

/* ── 星座符号选择条（横向滚动）── */
.ho-signs {
  display: flex; gap: 4px; margin-top: 12px;
  overflow-x: auto; overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.ho-signs::-webkit-scrollbar { display: none; }
.ho-sign {
  flex: 0 0 auto;
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; line-height: 1;
  color: var(--tab-inactive);
  background: transparent; border: none; border-radius: 9px;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background-color 0.18s ease, color 0.18s ease, transform 0.1s ease;
}
.ho-sign:active { transform: scale(0.9); }
.ho-sign.is-active {
  color: #fff;
  background: linear-gradient(160deg, #8f8df2, #5e5ce6);
  box-shadow: 0 3px 10px -3px rgba(94, 92, 230, 0.6);
}

/* ── 分项指数（爱情/事业/财运/健康）── */
.ho-detail {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 6px; margin-top: 12px;
}
.ho-det {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 7px 4px; border-radius: 10px;
  background: rgba(120, 120, 128, 0.06);
}
.ho-det-name { font-size: 11px; color: var(--tab-inactive); }
.ho-det-val {
  font-size: 15px; font-weight: 700; color: var(--text-dark);
}

/* ── 幸运物 chips ── */
.ho-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.ho-chip {
  font-size: 11.5px; color: var(--text-dark);
  background: rgba(120, 120, 128, 0.08);
  border-radius: 8px; padding: 4px 9px;
}
.ho-chip b { color: #5e5ce6; font-weight: 600; margin-left: 5px; }

/* ── 宜 / 忌 ── */
.ho-yiji { display: flex; gap: 8px; margin-top: 10px; }
.ho-yiji.is-hidden { display: none; }
.ho-yiji > div {
  flex: 1; min-width: 0;
  font-size: 12.5px; color: var(--text-dark);
  background: rgba(120, 120, 128, 0.06);
  border-radius: 10px; padding: 8px 10px;
  display: flex; align-items: center; gap: 6px;
}
.ho-yiji .ho-tag { font-weight: 700; flex-shrink: 0; }
.ho-yiji .ho-yi .ho-tag { color: #34c759; }
.ho-yiji .ho-ji .ho-tag { color: #ff3b30; }
.ho-yiji span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── 概述 ── */
.ho-summary {
  margin-top: 12px; font-size: 13px; line-height: 1.7;
  color: var(--text-dark); opacity: 0.82;
}

@media (prefers-color-scheme: dark) {
  .ho-det, .ho-chip, .ho-yiji > div { background: rgba(255, 255, 255, 0.06); }
  .ho-tabs { background: rgba(255, 255, 255, 0.10); }
}

@media (prefers-reduced-motion: reduce) {
  .ho-sign, .ho-tab { transition: none; }
}