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

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

.form-panel {
  width: 380px;
  flex-shrink: 0
}

.result-panel {
  flex: 1;
  min-width: 0
}

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

  .form-panel {
    width: 100%
  }
}

/* ── Field Groups ── */
.field-group {
  display: none
}

.field-group.show {
  display: block
}

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

/* ── Result Cards ── */
#results {
  display: none
}

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

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

/* ── Status badge ── */
.status {
  font-size: .7rem;
  padding: 3px 10px;
  border-radius: 5px;
  font-weight: 700
}

.status-200 {
  background: #e8f5e9;
  color: var(--c-success)
}

.status-err {
  background: #ffebee;
  color: var(--c-danger)
}

/* ── SVG ── */
.svg-wrap.ag svg,
.svg-wrap.ag img {
  max-width: 100%
}

@media(min-width:751px) {

  .svg-wrap.ag svg,
  .svg-wrap.ag img {
    max-width: 560px
  }
}

@media(max-width:750px) {
  .svg-wrap svg {
    min-width: 100%
  }

  .svg-wrap img {
    min-width: 100%
  }
}

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

.tag {
  font-size: .7rem;
  padding: 4px 12px;
  border-radius: 20px;
  font-weight: 600
}

.tag.score {
  background: #fff8e1;
  color: var(--c-warning);
  font-weight: 700
}

/* ── Tabs (v1) ── */
.tabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--c-border-light);
  flex-wrap: wrap;
  padding: 0 4px;
  justify-content: flex-start;
  margin-bottom: 0
}

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

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

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

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

.tabs-l1 button {
  font-size: .82rem;
  padding: 10px 20px;
  font-weight: 700
}

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

.tab-panel {
  display: none
}

.tab-panel.active {
  display: block
}

/* ── Planet Item ── */
.planet-grid {
  display: block;
  padding: 16px 18px
}

.planet-item {
  background: #fafbfd;
  border: 1px solid var(--c-border-light);
  border-radius: 10px;
  padding: 16px 18px;
}

.planet-item .p-name {
  font-size: .84rem;
  font-weight: 700;
  color: var(--c-heading);
  margin-bottom: 6px
}

.planet-item .p-sign {
  font-size: .86rem;
  margin-bottom: 4px;
  color: var(--c-text)
}

.planet-item .p-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  font-size: .7rem;
  color: var(--c-text-dim);
  margin-bottom: 4px;
}

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

.planet-item .p-meta .ml {
  color: var(--c-text-muted)
}

.planet-item .p-house {
  color: #546e7a
}

.planet-item .p-type {
  color: var(--c-text-muted)
}

.planet-item .p-dignity {
  color: var(--c-success);
  font-weight: 600
}

.planet-item .p-dignity.fall {
  color: var(--c-danger)
}

.planet-item .p-retro {
  color: #e74c3c;
  font-weight: 700;
  margin-left: auto
}

.planet-item .p-interp {
  font-size: .72rem;
  color: #546e7a;
  margin-top: 10px;
  line-height: 1.6;
  padding: 8px 12px;
  background: var(--c-bg-alt);
  border-radius: var(--radius);
  border-left: 3px solid #d0d7e8;
}

.planet-item .p-badge {
  display: inline-block;
  font-size: .64rem;
  padding: 1px 7px;
  border-radius: 4px;
  font-weight: 600;
  margin-left: 4px
}

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

.planet-item .p-badge.ok {
  background: #e8f5e9;
  color: var(--c-success)
}

/* ── Long Cards ── */
.planet-long-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 12px
}

.planet-long-grid.single {
  grid-template-columns: 1fr
}

@media(max-width:750px) {
  .planet-long-grid {
    grid-template-columns: 1fr
  }
}

.long-card {
  border: 1.5px solid var(--c-border);
  border-radius: 10px;
  padding: 12px 14px;
  background: var(--c-surface);
  margin-top: 10px;
  height: 100%;
}

.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 {
  padding: 12px 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex-direction: column;
}

.aspect-item {
  font-size: .74rem;
  padding: 8px 13px;
  background: #fafbfd;
  border: 1px solid var(--c-border-light);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  gap: 7px;
  transition: all var(--transition);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.aspect-item:hover {
  border-color: #93b4f0;
  background: var(--c-bg-alt);
  transform: translateX(2px)
}

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

.aspect-item .a-type {
  font-size: .66rem;
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 700;
  flex-shrink: 0
}

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

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

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

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

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

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

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

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

.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
}

/* ── Moon Info ── */
.moon-info {
  font-size: .78rem;
  padding: 12px 18px;
  line-height: 1.7;
  color: var(--c-text)
}

/* ── Chart Type Desc ── */
.chart-type-desc {
  font-size: .7rem;
  color: var(--c-text-muted);
  margin-top: 8px;
  line-height: 1.6
}

/* ── Initial hidden (toggled by JS) ── */
#svgCard,
#aspectGridCard,
#moonCard,
#dualView {
  display: none
}

#qualTags {
  padding-top: 0
}

/* ── Resp meta row ── */
.resp-meta {
  font-size: .76rem;
  padding: 8px 18px;
  color: #64748b
}

/* ── Dual view sub card ── */
.dual-sub-card {
  margin: 0 0 6px;
  padding: 0;
  box-shadow: none
}