/* ==========================================
 * 星枢 API · 星盘 v2 专属样式 v2
 * ========================================== */

/* ── Layout ── */
.main {
  display: flex;
  gap: 28px
}

.side {
  width: 400px;
  flex-shrink: 0
}

.content {
  flex: 1;
  min-width: 0
}

@media(max-width:750px) {
  .main {
    flex-direction: column
  }

  .side {
    width: 100%
  }
}

/* ── Tab Row (盘型选择) ── */
.tab-row {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  border-bottom: 2px solid var(--c-border-light);
  margin-bottom: 16px
}

.tab-row button {
  padding: 8px 13px;
  background: none;
  border: none;
  font-size: .72rem;
  font-weight: 700;
  color: #78909c;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: all var(--transition);
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}

.tab-row button:hover {
  color: #546e7a
}

.tab-row button.active {
  color: var(--c-primary);
  border-bottom-color: var(--c-primary)
}

.tab-row button:active {
  transform: scale(.94)
}

.tab-panel {
  display: none
}

.tab-panel.active {
  display: block
}

.sep {
  border-top: 1.5px solid var(--c-border-light);
  margin: 12px 0;
  padding-top: 12px;
  font-size: .74rem;
  font-weight: 700;
  color: #546e7a;
}

/* ── Results ── */
#results {
  display: none
}

#results.show {
  display: block
}

.result-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  margin-bottom: 18px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.res-hd {
  padding: 11px 18px;
  background: var(--c-bg-alt);
  border-bottom: 1px solid var(--c-border-light);
  font-size: .76rem;
  font-weight: 700;
  color: #34495e;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}

.res-hd .ver {
  font-size: .64rem;
  background: var(--c-primary-light);
  color: var(--c-primary);
  padding: 2px 8px;
  border-radius: 10px;
  margin-left: 8px
}

.res-hd .interchart {
  font-size: .64rem;
  background: #fff3e0;
  color: var(--c-warning);
  padding: 2px 8px;
  border-radius: 10px;
  margin-left: 4px
}

.res-hd .meta {
  font-size: .66rem;
  color: #94a3b8;
  margin-left: auto;
  white-space: nowrap
}

/* ── Tags ── */
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 18px
}

.tags .tag {
  font-size: .68rem;
  padding: 3px 10px;
  border-radius: 20px;
  font-weight: 600
}

.tag.day {
  background: #e3f2fd;
  color: #1565c0
}

.tag.night {
  background: #ede7f6;
  color: #4527a0
}

.tag.neutral {
  background: #f5f5f5;
  color: #546e7a
}

.tag.fire {
  background: #fff3e0;
  color: #e65100
}

.tag.earth {
  background: #f1f8e9;
  color: #33691e
}

.tag.air {
  background: #e3f2fd;
  color: #0d47a1
}

.tag.water {
  background: #e8eaf6;
  color: #283593
}

/* ── Info extra ── */
.chart-extra {
  padding: 8px 18px 12px;
  font-size: .72rem;
  color: #546e7a;
  line-height: 1.7
}

.chart-extra strong {
  color: var(--c-heading)
}

/* ── Planet Tabs (星座/落宫/相位) ── */
.tabs-l1 {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--c-border-light);
  margin: 0 4px;
  justify-content: flex-start
}

.tabs-l1 button {
  padding: 9px 18px;
  background: none;
  border: none;
  color: #78909c;
  font-size: .8rem;
  font-weight: 700;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: all var(--transition);
  -webkit-tap-highlight-color: transparent;
}

.tabs-l1 button:hover {
  color: #546e7a
}

.tabs-l1 button.active {
  color: var(--c-heading);
  border-bottom-color: var(--c-primary)
}

.tabs-l1 button:active {
  transform: scale(.94)
}

/* ── Planet Item ── */
.planet-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 16px;
  border-bottom: 1px solid #f5f6fa;
  font-size: .76rem;
}

.planet-item:last-child {
  border-bottom: none
}

.p-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap
}

.p-name {
  font-weight: 700;
  color: var(--c-heading);
  width: 60px;
  flex-shrink: 0
}

.p-sign {
  flex: 1;
  color: var(--c-text);
  min-width: 120px
}

.p-deg {
  color: var(--c-text-muted);
  width: 60px;
  text-align: right;
  flex-shrink: 0;
  font-size: .7rem
}

.p-retro {
  color: #e74c3c;
  font-weight: 700;
  font-size: .64rem;
  width: 20px
}

/* Planet meta row */
.p-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  font-size: .68rem;
  color: var(--c-text-dim);
  padding: 2px 0
}

.p-meta span {
  white-space: nowrap
}

.p-type {
  color: var(--c-text-muted);
  font-weight: 500
}

.p-dignity {
  color: var(--c-success);
  font-weight: 600;
  font-size: .66rem;
  padding: 1px 6px;
  border-radius: 4px;
  background: #e8f5e9
}

.p-dignity.fall {
  color: var(--c-danger);
  background: #ffebee
}

.p-badge {
  display: inline-block;
  font-size: .62rem;
  padding: 1px 6px;
  border-radius: 4px;
  font-weight: 600
}

.p-badge.rx {
  background: #ffebee;
  color: var(--c-danger)
}

/* House info */
.p-house {
  font-size: .7rem;
  color: #546e7a;
  padding: 6px 12px;
  background: #fafbfd;
  border-radius: 6px;
  line-height: 1.6
}

/* Interpretation */
.p-interp {
  font-size: .7rem;
  color: #546e7a;
  padding: 8px 12px;
  background: var(--c-bg-alt);
  border-radius: var(--radius);
  border-left: 3px solid #d0d7e8;
  line-height: 1.7;
  word-break: break-word
}

.p-interp-title {
  font-weight: 700;
  color: #34495e;
  margin-bottom: 2px
}

.p-interp-sub {
  color: var(--c-text-muted);
  font-size: .66rem;
  margin-bottom: 4px
}

.p-interp-desc {
  color: #546e7a;
  line-height: 1.7
}

/* ── Long Card (长解读) ── */
.long-card {
  border: 1.5px solid var(--c-border);
  border-radius: 10px;
  padding: 12px 14px;
  background: var(--c-surface);
  margin-top: 8px;
}

.long-card .lc-title {
  font-size: .78rem;
  font-weight: 700;
  color: var(--c-heading);
  margin-bottom: 2px
}

.long-card .lc-sub {
  font-size: .7rem;
  color: var(--c-primary);
  margin-bottom: 6px;
  font-weight: 600
}

.long-card .lc-desc {
  font-size: .7rem;
  color: #546e7a;
  line-height: 1.7
}

/* ── Aspect List ── */
.aspect-list {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  flex-direction: column;
  padding: 12px 16px
}

.aspect-item {
  font-size: .72rem;
  padding: 8px 12px;
  background: #fafbfd;
  border: 1px solid var(--c-border-light);
  border-radius: var(--radius);
  cursor: pointer;
  transition: all var(--transition);
  -webkit-tap-highlight-color: transparent;
}

.aspect-item:hover {
  background: #f0f2fa;
  border-color: #d0d7e8;
  transform: translateX(2px)
}

.aspect-item:active {
  transform: scale(.98)
}

.aspect-item .a-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap
}

/* Aspect type badge */
.a-type {
  font-size: .64rem;
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 700;
  flex-shrink: 0
}

.a-harmonious {
  color: var(--c-success);
  background: #e8f5e9
}

.a-tense {
  color: var(--c-danger);
  background: #ffebee
}

.a-neutral {
  color: #546e7a;
  background: #f5f5f5
}

/* Aspect names & details */
.a-planets {
  font-weight: 600;
  color: var(--c-text)
}

.a-names {
  flex: 1;
  min-width: 0
}

.a-orb {
  font-size: .68rem;
  color: var(--c-text-muted);
  flex-shrink: 0
}

.a-arrow {
  font-size: .6rem;
  color: var(--c-text-muted);
  margin-left: auto;
  transition: transform .2s
}

.aspect-item.expanded .a-arrow {
  transform: rotate(180deg)
}

.a-ic {
  font-size: .6rem;
  color: #e65100;
  font-weight: 700
}

/* Short interpretation */
.a-short {
  font-size: .66rem;
  color: #78909c;
  margin-top: 4px;
  line-height: 1.5
}

/* Expanded aspect detail */
.a-detail {
  display: none;
  margin-top: 6px;
  padding: 8px 10px;
  background: var(--c-surface);
  border-radius: 6px;
  border: 1px solid var(--c-border-light);
  font-size: .68rem;
  color: #546e7a;
  line-height: 1.65
}

.a-detail.show {
  display: block
}

.a-detail-title {
  font-weight: 700;
  color: var(--c-heading);
  margin-bottom: 2px
}

.a-detail-sub {
  color: var(--c-text-muted);
  margin-bottom: 4px
}

.a-detail-meta {
  display: flex;
  gap: 12px;
  font-size: .64rem;
  color: var(--c-text-muted);
  margin-top: 4px;
  flex-wrap: wrap
}

/* Aspect pop (in planet tab) */
.aspect-long-pop {
  display: none;
  padding: 10px 14px;
  background: #fafbfd;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  font-size: .7rem;
  color: #546e7a;
  line-height: 1.65;
  margin-top: 2px
}

.aspect-long-pop.show {
  display: block
}

.aspect-long-pop .al-title {
  font-weight: 700;
  color: var(--c-heading);
  margin-bottom: 2px
}

.aspect-long-pop .al-sub {
  color: var(--c-primary);
  font-weight: 600;
  margin-bottom: 4px
}

/* ── No data ── */
.no-data {
  padding: 16px 18px;
  font-size: .72rem;
  color: #94a3b8
}

/* ── Current panel placeholder ── */
.current-placeholder {
  font-size: .76rem;
  color: #94a3b8;
  padding: 12px 0
}

/* ── Error ── */
.error-box {
  padding: 24px;
  color: var(--c-danger);
  text-align: center;
  font-size: .82rem
}