*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg-deep: #06060e;
  --bg: #0a0a16;
  --surface: rgba(18, 18, 36, 0.85);
  --surface-solid: #12122a;
  --surface-2: rgba(26, 26, 52, 0.7);
  --border: rgba(80, 70, 120, 0.25);
  --border-strong: rgba(160, 140, 80, 0.3);
  --gold: #d4a843;
  --gold-light: #f0d078;
  --gold-dim: #8a7030;
  --gold-glow: rgba(212, 168, 67, 0.15);
  --red: #8b2030;
  --red-bright: #c03040;
  --red-glow: rgba(192, 48, 64, 0.2);
  --text: #e8e0d0;
  --text-warm: #d8cbb8;
  --text-muted: #908878;
  --text-dim: #605848;
  --green: #48b878;
  --green-dim: rgba(72, 184, 120, 0.12);
  --blue: #5888d0;
  --blue-dim: rgba(88, 136, 208, 0.12);
  --purple: #9070c0;
  --purple-dim: rgba(144, 112, 192, 0.12);
  --font: "Noto Serif SC", "Songti SC", "SimSun", "STSong", serif;
  --radius: 12px;
  --radius-sm: 8px;
  --radius-lg: 16px;
  --space: 24px;
  --type: 16px;
  --motion: 250ms;
  --shadow: 0 4px 24px rgba(0,0,0,0.4);
  --shadow-gold: 0 0 30px rgba(212, 168, 67, 0.08);
}

html { scroll-behavior: smooth; }

body {
  background: var(--bg-deep);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--type);
  line-height: 1.7;
  min-height: 100vh;
  overflow-x: hidden;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 15% 10%, rgba(120, 60, 40, 0.08) 0%, transparent 60%),
    radial-gradient(ellipse 60% 80% at 85% 90%, rgba(60, 40, 100, 0.06) 0%, transparent 60%),
    radial-gradient(ellipse 100% 50% at 50% 50%, rgba(20, 15, 30, 0.5) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.page {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 var(--space);
  position: relative;
  z-index: 1;
}

/* ========== HERO ========== */
.hero {
  text-align: center;
  padding: 60px 0 40px;
  position: relative;
}

.hero::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-dim), transparent);
}

.hero-symbol {
  font-size: 72px;
  line-height: 1;
  margin-bottom: 16px;
  display: inline-block;
  animation: symbolFloat 6s ease-in-out infinite;
  filter: drop-shadow(0 0 24px rgba(212, 168, 67, 0.25));
}
.hero-logo {
  width: 68px;
  height: 68px;
  object-fit: contain;
  display: block;
}

@keyframes symbolFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

.hero-title {
  font-size: 44px;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: 0.35em;
  margin-bottom: 12px;
  text-shadow: 0 0 40px rgba(212, 168, 67, 0.2);
  position: relative;
}

.hero-title::before, .hero-title::after {
  content: '◆';
  font-size: 10px;
  vertical-align: middle;
  margin: 0 16px;
  color: var(--gold-dim);
  opacity: 0.6;
}

.hero-subtitle {
  font-size: 14px;
  color: var(--text-muted);
  letter-spacing: 0.25em;
}

/* ========== GLASS PANEL ========== */
.glass {
  background: var(--surface);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

/* ========== INPUT SECTION ========== */
.input-section {
  padding: 28px 32px;
  margin: 32px 0 24px;
}

.input-row {
  display: flex;
  gap: 16px;
  align-items: flex-end;
  flex-wrap: wrap;
}

.field {
  flex: 1;
  min-width: 180px;
}

.field label {
  display: block;
  font-size: 12px;
  color: var(--text-dim);
  margin-bottom: 8px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.field input, .field select {
  width: 100%;
  padding: 12px 16px;
  background: rgba(10, 10, 22, 0.6);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-warm);
  font-family: var(--font);
  font-size: 15px;
  outline: none;
  transition: all var(--motion);
}

.field input:focus, .field select:focus {
  border-color: var(--gold-dim);
  box-shadow: 0 0 0 3px var(--gold-glow);
  background: rgba(10, 10, 22, 0.8);
}

.btn-divine {
  padding: 12px 40px;
  background: linear-gradient(135deg, var(--red), #6a1828);
  color: var(--gold-light);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font-family: var(--font);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.2em;
  cursor: pointer;
  transition: all var(--motion);
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}

.btn-divine::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 40%, rgba(255,255,255,0.06) 50%, transparent 60%);
  transform: translateX(-100%);
  transition: transform 0.6s;
}

.btn-divine:hover {
  background: linear-gradient(135deg, #a02838, var(--red));
  border-color: var(--gold);
  box-shadow: 0 0 24px var(--red-glow), 0 4px 16px rgba(0,0,0,0.3);
  transform: translateY(-1px);
}

.btn-divine:hover::before { transform: translateX(100%); }
.btn-divine:active { transform: translateY(0); }

.input-hint {
  font-size: 13px;
  color: var(--text-dim);
  margin-top: 14px;
  text-align: center;
  letter-spacing: 0.05em;
}

/* ========== INFO BAR ========== */
.info-bar {
  display: flex;
  gap: 0;
  justify-content: center;
  padding: 0;
  margin-bottom: 32px;
  overflow: hidden;
}

.info-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 24px;
  position: relative;
  min-width: 80px;
}

.info-item:not(:last-child)::after {
  content: '';
  position: absolute;
  right: 0;
  top: 25%;
  height: 50%;
  width: 1px;
  background: var(--border);
}

.info-label {
  font-size: 11px;
  color: var(--text-dim);
  letter-spacing: 0.12em;
  margin-bottom: 4px;
}

.info-value {
  font-size: 17px;
  font-weight: 600;
  color: var(--gold);
}

/* ========== SECTION TITLES ========== */
.section-title {
  text-align: center;
  font-size: 18px;
  font-weight: 600;
  color: var(--text-warm);
  letter-spacing: 0.2em;
  margin-bottom: 28px;
  position: relative;
  text-wrap: balance;
}

.section-title::before, .section-title::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 60px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-strong));
}

.section-title::before { right: calc(50% + 80px); }
.section-title::after { left: calc(50% + 80px); background: linear-gradient(90deg, var(--border-strong), transparent); }

/* ========== NINE PALACE GRID ========== */
.chart-section { margin-bottom: 40px; }

.grid-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.grid-labels-top span, .grid-labels-bottom span {
  font-size: 12px;
  color: var(--text-dim);
  letter-spacing: 0.2em;
}

.grid-container {
  display: flex;
  align-items: center;
  gap: 16px;
}

.grid-label-left, .grid-label-right {
  writing-mode: vertical-rl;
  font-size: 12px;
  color: var(--text-dim);
  letter-spacing: 0.2em;
}

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, auto);
  gap: 2px;
  width: min(560px, 92vw);
  background: rgba(60, 50, 100, 0.15);
  border: 2px solid var(--border-strong);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-gold), inset 0 0 40px rgba(0,0,0,0.3);
}

.cell {
  background: var(--surface-solid);
  padding: 6px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  position: relative;
  transition: all var(--motion);
  overflow: visible;
}

.cell::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(212, 168, 67, 0.03) 0%, transparent 70%);
  opacity: 0;
  transition: opacity var(--motion);
}

.cell:hover {
  background: rgba(22, 22, 44, 1);
  z-index: 2;
}

.cell:hover::before { opacity: 1; }

.cell.center-cell {
  background: rgba(16, 14, 30, 0.95);
  justify-content: center;
  align-items: center;
  text-align: center;
}

.center-label {
  font-size: 13px;
  color: var(--text-muted);
  letter-spacing: 0.08em;
  line-height: 2;
}

.center-label div:first-child {
  color: var(--gold);
  font-weight: 600;
  font-size: 15px;
}

.cell-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  position: relative;
  z-index: 1;
}

.palace-num {
  font-size: 10px;
  color: var(--text-dim);
  background: rgba(0,0,0,0.3);
  padding: 2px 7px;
  border-radius: 4px;
  font-weight: 600;
}

.palace-gua {
  font-size: 14px;
  color: var(--gold-dim);
  opacity: 0.7;
}

.cell-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2px;
  position: relative;
  z-index: 1;
}

.cell-star {
  font-size: 14px;
  font-weight: 600;
  color: var(--blue);
  letter-spacing: 0.05em;
}

.cell-door {
  font-size: 15px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 6px;
  letter-spacing: 0.05em;
}

.cell-door.ji {
  color: var(--green);
  background: var(--green-dim);
  border: 1px solid rgba(72, 184, 120, 0.15);
}

.cell-door.xiong {
  color: var(--red-bright);
  background: var(--red-glow);
  border: 1px solid rgba(192, 48, 64, 0.15);
}

.cell-door.zhong {
  color: var(--gold-dim);
  background: var(--gold-glow);
  border: 1px solid rgba(212, 168, 67, 0.1);
}

.cell-door small {
  font-size: 11px;
  font-weight: 400;
  margin-left: 2px;
  opacity: 0.8;
}

.cell-deity {
  font-size: 12px;
  color: var(--purple);
  letter-spacing: 0.05em;
}

.cell-footer {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding-top: 6px;
  border-top: 1px solid rgba(212, 168, 67, 0.1);
  position: relative;
  z-index: 1;
}

.cell-stems-area {
  width: 100%;
  padding: 4px 4px;
  margin-top: 4px;
  background: linear-gradient(135deg, rgba(212, 168, 67, 0.08) 0%, rgba(160, 136, 96, 0.05) 100%);
  border: 1px solid rgba(212, 168, 67, 0.2);
  border-radius: 6px;
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}

.cell-stem-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 2px 0;
}

.cell-stem-row + .cell-stem-row {
  border-top: 1px dashed rgba(212, 168, 67, 0.15);
  margin-top: 2px;
  padding-top: 4px;
}

.stem-label {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  letter-spacing: 0.1em;
  min-width: 32px;
  text-align: center;
}

.stem-label-tian {
  color: #ffd700;
  background: rgba(255, 215, 0, 0.12);
  border: 1px solid rgba(255, 215, 0, 0.25);
}

.stem-label-di {
  color: #c0a070;
  background: rgba(192, 160, 112, 0.1);
  border: 1px solid rgba(192, 160, 112, 0.2);
}

.cell-stem-tian {
  font-size: 22px;
  color: #ffd700;
  font-weight: 800;
  line-height: 1;
  text-shadow: 0 0 8px rgba(255, 215, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.3);
  font-family: "KaiTi", "STKaiti", "楷体", serif;
}

.cell-stem-di {
  font-size: 18px;
  color: #c0a070;
  font-weight: 700;
  line-height: 1;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  font-family: "KaiTi", "STKaiti", "楷体", serif;
}

.cell-wonder {
  position: absolute;
  top: 6px;
  right: 6px;
  font-size: 9px;
  padding: 1px 5px;
  border-radius: 3px;
  font-weight: 600;
  letter-spacing: 0.05em;
  z-index: 3;
}

.cell-wonder.qi {
  color: var(--gold-light);
  background: rgba(212, 168, 67, 0.12);
  border: 1px solid rgba(212, 168, 67, 0.2);
}

/* ========== INTERPRETATION ========== */
.detail-section { margin-bottom: 40px; }

.interpretation {
  padding: 32px;
}

.interp-block {
  margin-bottom: 28px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--border);
}

.interp-block:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.interp-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--gold);
  margin-bottom: 12px;
  letter-spacing: 0.08em;
  padding-left: 14px;
  border-left: 3px solid var(--gold-dim);
}

.interp-text {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.9;
  padding-left: 14px;
}

.interp-text .ji { color: var(--green); font-weight: 600; }
.interp-text .xiong { color: var(--red-bright); font-weight: 600; }
.interp-text .zhong { color: var(--gold); font-weight: 600; }

/* ========== ASPECT SECTION ========== */
.aspect-section { margin-bottom: 40px; }

.aspect-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}

.aspect-card {
  background: var(--surface);
  backdrop-filter: blur(8px);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  transition: all var(--motion);
  position: relative;
  overflow: hidden;
}

.aspect-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--gold-dim), var(--gold), var(--gold-dim));
  opacity: 0;
  transition: opacity var(--motion);
}

.aspect-card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-gold);
  transform: translateY(-2px);
}

.aspect-card:hover::before { opacity: 1; }

.aspect-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.aspect-name-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}

.aspect-icon {
  font-size: 24px;
  line-height: 1;
}

.aspect-name {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-warm);
  letter-spacing: 0.05em;
}

.aspect-rating {
  font-size: 12px;
  font-weight: 700;
  padding: 4px 14px;
  border-radius: 20px;
  letter-spacing: 0.08em;
}

.rating-daji { color: #40d070; background: rgba(64, 208, 112, 0.1); border: 1px solid rgba(64, 208, 112, 0.2); }
.rating-ji { color: var(--green); background: var(--green-dim); border: 1px solid rgba(72, 184, 120, 0.15); }
.rating-ping { color: var(--gold-dim); background: var(--gold-glow); border: 1px solid rgba(212, 168, 67, 0.12); }
.rating-xiong { color: var(--red-bright); background: var(--red-glow); border: 1px solid rgba(192, 48, 64, 0.15); }

.aspect-direction {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: rgba(10, 10, 22, 0.5);
  border-radius: var(--radius-sm);
  margin-bottom: 16px;
  border: 1px solid var(--border);
}

.direction-compass {
  font-size: 18px;
  opacity: 0.6;
}

.direction-label {
  font-size: 11px;
  color: var(--text-dim);
  letter-spacing: 0.1em;
}

.direction-value {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-warm);
}

.direction-element {
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 4px;
  margin-left: auto;
  font-weight: 600;
  letter-spacing: 0.05em;
}

.element-wood { color: #60c070; background: rgba(96, 192, 112, 0.1); }
.element-fire { color: #e07050; background: rgba(224, 112, 80, 0.1); }
.element-earth { color: #d0a840; background: rgba(208, 168, 64, 0.1); }
.element-metal { color: #b0b0c0; background: rgba(176, 176, 192, 0.1); }
.element-water { color: #6090d0; background: rgba(96, 144, 208, 0.1); }

.aspect-detail {
  font-size: 13.5px;
  color: var(--text-muted);
  line-height: 1.8;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

.aspect-detail .ji { color: var(--green); font-weight: 600; }
.aspect-detail .xiong { color: var(--red-bright); font-weight: 600; }
.aspect-detail .zhong { color: var(--gold); font-weight: 600; }

.formation-tip {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

/* ========== HARM TAGS (四害圆形徽章) ========== */
.cell-harms {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 6px;
}
.cell-harm {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: -0.5px;
  border: 2px solid;
  box-shadow: 0 0 8px rgba(0,0,0,0.35), inset 0 0 6px rgba(255,255,255,0.06);
  cursor: help;
  flex-shrink: 0;
}
.cell-harm.harm-ji {
  color: #ff5050;
  background: radial-gradient(circle at 35% 30%, rgba(255,80,80,0.28), rgba(255,80,80,0.12));
  border-color: rgba(255,80,80,0.75);
  text-shadow: 0 0 6px rgba(255,80,80,0.6);
}
.cell-harm.harm-po {
  color: #ff9030;
  background: radial-gradient(circle at 35% 30%, rgba(255,144,48,0.26), rgba(255,144,48,0.1));
  border-color: rgba(255,144,48,0.7);
  text-shadow: 0 0 6px rgba(255,144,48,0.55);
}
.cell-harm.harm-mu {
  color: #b080e0;
  background: radial-gradient(circle at 35% 30%, rgba(176,128,224,0.26), rgba(176,128,224,0.1));
  border-color: rgba(176,128,224,0.7);
  text-shadow: 0 0 6px rgba(176,128,224,0.55);
}
.cell-harm.harm-kong {
  color: #90a8c0;
  background: radial-gradient(circle at 35% 30%, rgba(144,168,192,0.24), rgba(144,168,192,0.08));
  border-color: rgba(144,168,192,0.65);
  text-shadow: 0 0 6px rgba(144,168,192,0.5);
}

.cell-cs {
  font-size: 11px;
  color: #ff9040;
  background: linear-gradient(135deg, rgba(255, 144, 64, 0.18) 0%, rgba(255, 100, 50, 0.12) 100%);
  padding: 3px 8px;
  border-radius: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  border: 1px solid rgba(255, 144, 64, 0.3);
  text-shadow: 0 0 4px rgba(255, 144, 64, 0.3);
}

/* ========== SIZHU (四柱) ========== */
.sizhu-section {
  margin-top: 20px;
  padding: 20px 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.sizhu-top {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

.sizhu-gender {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 4px 12px;
  border-radius: 6px;
}

.sizhu-gender.gender-male {
  color: #6090d0;
  background: rgba(96, 144, 208, 0.1);
  border: 1px solid rgba(96, 144, 208, 0.2);
}

.sizhu-gender.gender-female {
  color: #d070a0;
  background: rgba(208, 112, 160, 0.1);
  border: 1px solid rgba(208, 112, 160, 0.2);
}

.sizhu-date-solar {
  font-size: 14px;
  color: var(--text-primary);
  font-weight: 600;
  letter-spacing: 0.03em;
}

.sizhu-date-lunar {
  font-size: 13px;
  color: var(--text-muted);
  letter-spacing: 0.05em;
}

.sizhu-vertical {
  display: flex;
  justify-content: center;
  gap: 20px;
}

.sizhu-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 16px;
  background: rgba(10, 10, 22, 0.4);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  min-width: 64px;
}

.col-label {
  font-size: 11px;
  color: var(--text-dim);
  letter-spacing: 0.1em;
}

.col-stem {
  font-size: 24px;
  font-weight: 700;
  color: var(--gold);
  line-height: 1.3;
}

.col-branch {
  font-size: 20px;
  font-weight: 600;
  color: var(--text-warm);
  line-height: 1.3;
}

/* ========== GENDER SELECTOR ========== */
.field-gender {
  flex: 0 0 auto;
  min-width: 120px;
}

.gender-group {
  display: flex;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: rgba(10, 10, 22, 0.6);
}

.gender-option {
  flex: 1;
  cursor: pointer;
  display: block;
}

.gender-option input {
  display: none;
}

.gender-option span {
  display: block;
  padding: 10px 16px;
  font-size: 14px;
  font-family: var(--font);
  color: var(--text-dim);
  text-align: center;
  transition: all var(--motion);
  letter-spacing: 0.1em;
}

.gender-option input:checked + span {
  background: linear-gradient(135deg, #a02838, var(--red));
  color: var(--gold-light);
  font-weight: 600;
}

.gender-option:first-child {
  border-right: 1px solid var(--border);
}

/* ========== FORMATION VISUAL ========== */
.formation-visual {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  padding: 10px 14px;
  background: rgba(10, 10, 22, 0.5);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}

.formation-icon {
  font-size: 28px;
  line-height: 1;
}

.formation-dir {
  font-size: 15px;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: 0.08em;
}

.formation-items {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.f-item {
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.6;
  padding: 4px 8px;
  background: rgba(212, 168, 67, 0.04);
  border-radius: 4px;
  border-left: 2px solid var(--gold-dim);
}

/* ========== ANALYSIS SECTION ========== */
.analysis-section { margin-bottom: 40px; }

.day-cs-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 16px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 20px;
  align-items: center;
}

.cs-bar-title {
  font-size: 13px;
  color: var(--text-muted);
  margin-right: 8px;
  font-weight: 600;
}

.cs-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 4px 8px;
  border-radius: 4px;
  min-width: 36px;
  background: rgba(0,0,0,0.2);
}

.cs-zhi { font-size: 11px; color: var(--text-dim); }
.cs-name { font-size: 10px; font-weight: 600; }
.cs-ji { color: var(--green); background: var(--green-dim); }
.cs-zhong { color: var(--gold-dim); background: var(--gold-glow); }
.cs-xiong { color: var(--red-bright); background: var(--red-glow); }

/* ========== TABS ========== */
.tabs {
  display: flex;
  gap: 0;
  margin-bottom: 20px;
  border-bottom: 2px solid var(--border);
}

.tab-btn {
  padding: 10px 24px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  color: var(--text-dim);
  font-family: var(--font);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: all var(--motion);
}

.tab-btn:hover { color: var(--text-muted); }
.tab-btn.active {
  color: var(--gold);
  border-bottom-color: var(--gold);
}

.tab-content {
  animation: fadeInUp 0.3s ease-out;
}

/* ========== DA YUN ========== */
.dy-info {
  font-size: 14px;
  color: var(--text-muted);
  margin-bottom: 16px;
  padding: 12px 16px;
  background: var(--surface);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}

.dy-info strong { color: var(--gold); }

.dy-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 12px;
}

.dy-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px;
  text-align: center;
  transition: all var(--motion);
}

.dy-card.dy-current {
  border-color: var(--gold-dim);
  box-shadow: 0 0 16px var(--gold-glow);
}

.dy-age { font-size: 11px; color: var(--text-dim); margin-bottom: 4px; }
.dy-gz { font-size: 18px; font-weight: 700; color: var(--text-warm); margin-bottom: 4px; }
.dy-cs { font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 4px; display: inline-block; }

/* ========== LIU NIAN ========== */
.ln-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }

.ln-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 16px;
  transition: all var(--motion);
}

.ln-card.ln-current {
  border-color: var(--gold-dim);
  box-shadow: 0 0 16px var(--gold-glow);
}

.ln-year { font-size: 15px; font-weight: 700; color: var(--text-warm); margin-bottom: 8px; }
.ln-now { font-size: 10px; color: var(--gold); background: var(--gold-glow); padding: 1px 6px; border-radius: 3px; margin-left: 6px; }
.ln-cs { font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 4px; display: inline-block; margin-bottom: 8px; }
.ln-gan { font-size: 13px; color: var(--text-muted); margin-bottom: 4px; }
.ln-zhi { font-size: 13px; color: var(--text-muted); margin-bottom: 4px; }
.ln-chong { font-size: 12px; color: var(--red-bright); background: var(--red-glow); padding: 4px 8px; border-radius: 4px; margin-top: 6px; }

/* ========== REMEDY ========== */
.remedy-block {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 24px;
  margin-bottom: 16px;
}

.remedy-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--gold);
  margin-bottom: 12px;
  padding-left: 12px;
  border-left: 3px solid var(--gold-dim);
}

.remedy-content {
  font-size: 13.5px;
  color: var(--text-muted);
  line-height: 1.9;
  padding-left: 12px;
}

.remedy-content strong { color: var(--text-warm); }
.remedy-content em { color: var(--gold-dim); font-style: normal; }

/* ========== 正宗布阵 ========== */
.bz-aspect {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  margin-bottom: 14px;
  background: var(--surface-2);
}
.bz-aspect:last-child { margin-bottom: 0; }
.bz-aspect-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px dashed var(--border-strong);
}
.bz-name { font-size: 15px; font-weight: 700; color: var(--gold-light); letter-spacing: 0.05em; }
.bz-dir { font-size: 12.5px; color: var(--text-muted); }
.bz-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.bz-card {
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  background: rgba(10, 10, 22, 0.5);
  border: 1px solid var(--border);
  border-left: 3px solid var(--gold-dim);
}
.bz-card-t { font-size: 13px; font-weight: 700; color: var(--gold); margin-bottom: 6px; }
.bz-card-b { font-size: 12.5px; color: var(--text-muted); line-height: 1.85; }
.bz-card-b strong { color: var(--text-warm); }
.bz-eye { border-left-color: var(--gold); }
.bz-fu { border-left-color: var(--purple); }
.bz-zhen { border-left-color: var(--red-bright); }
.bz-pos { border-left-color: var(--blue); }

.zw-table { border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.zw-row {
  display: grid;
  grid-template-columns: 1.1fr 1.2fr 1.3fr 2.4fr;
  gap: 8px;
  padding: 9px 12px;
  font-size: 12.5px;
  border-bottom: 1px solid var(--border);
  align-items: start;
}
.zw-row:last-child { border-bottom: none; }
.zw-head { background: var(--gold-glow); color: var(--gold); font-weight: 700; }
.zw-pos { color: var(--text-warm); font-weight: 600; }
.zw-issue { color: var(--red-bright); }
.zw-item { color: var(--gold-light); }
.zw-method { color: var(--text-muted); line-height: 1.7; }
.bz-empty { color: var(--text-muted); font-size: 13px; }

.bz-steps { list-style: none; counter-reset: step; padding: 0; }
.bz-steps li {
  position: relative;
  padding: 0 0 14px 40px;
  counter-increment: step;
}
.bz-steps li::before {
  content: counter(step);
  position: absolute;
  left: 0; top: 0;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--gold-glow);
  border: 1px solid var(--gold-dim);
  color: var(--gold-light);
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bz-steps li::after {
  content: '';
  position: absolute;
  left: 12.5px; top: 28px; bottom: 2px;
  width: 1px;
  background: var(--border-strong);
}
.bz-steps li:last-child { padding-bottom: 0; }
.bz-steps li:last-child::after { display: none; }
.bz-step-t { display: block; font-size: 13.5px; font-weight: 700; color: var(--gold); margin-bottom: 3px; }
.bz-step-b { display: block; font-size: 12.5px; color: var(--text-muted); line-height: 1.85; }

.shan-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.shan-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 10px 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: rgba(10, 10, 22, 0.5);
}
.shan-gong { font-size: 12px; color: var(--text-muted); }
.shan-dir { font-size: 11px; color: var(--text-dim); }
.shan-name { font-size: 15px; font-weight: 700; color: var(--gold-light); letter-spacing: 0.1em; }

/* ========== 七大布阵专局 ========== */
.zhuanju-intro {
  text-align: center;
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.8;
  max-width: 640px;
  margin: -8px auto 18px;
}
.zhuanju-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-bottom: 18px;
}
.role-switch {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin: -4px auto 16px;
}
.role-btn {
  font-family: var(--font);
  font-size: 13.5px;
  color: var(--text-muted);
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 9px 20px;
  cursor: pointer;
  transition: all var(--motion);
  letter-spacing: 0.04em;
}
.role-btn:hover { color: var(--gold-light); border-color: var(--gold-dim); }
.role-btn.active {
  color: var(--gold-light);
  background: var(--gold-glow);
  border-color: var(--gold);
  font-weight: 700;
  box-shadow: var(--shadow-gold);
}
.zj-tab {
  font-family: var(--font);
  font-size: 13px;
  color: var(--text-muted);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 7px 16px;
  cursor: pointer;
  transition: all var(--motion);
}
.zj-tab:hover { color: var(--gold-light); border-color: var(--gold-dim); }
.zj-tab.active {
  color: var(--gold-light);
  background: var(--gold-glow);
  border-color: var(--gold);
  font-weight: 700;
}
.zhuanju-panel { animation: fadeInUp 0.3s ease-out; }
.zj {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 22px 26px;
  box-shadow: var(--shadow-gold);
}
.zj-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--border-strong); }
.zj-icon { font-size: 34px; }
.zj-title { font-size: 19px; font-weight: 700; color: var(--gold-light); letter-spacing: 0.08em; }
.zj-sub { font-size: 12px; color: var(--text-muted); margin-top: 3px; }
.zj-section { margin-bottom: 18px; }
.zj-st {
  font-size: 14px;
  font-weight: 700;
  color: var(--gold);
  margin-bottom: 8px;
  padding-left: 10px;
  border-left: 3px solid var(--gold-dim);
}
.zj-duan { font-size: 12.5px; color: var(--text-muted); line-height: 1.9; margin-bottom: 10px; }
.zj-ys-list { display: flex; flex-direction: column; gap: 6px; }
.zj-ys {
  display: flex;
  gap: 10px;
  align-items: baseline;
  padding: 7px 12px;
  background: rgba(10, 10, 22, 0.5);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 12.5px;
}
.zj-ys-name { color: var(--gold-light); font-weight: 600; min-width: 96px; flex-shrink: 0; }
.zj-ys-state { color: var(--text-muted); line-height: 1.7; }
.zj-peach {
  margin-top: 10px;
  padding: 9px 12px;
  font-size: 12.5px;
  color: var(--text-warm);
  background: var(--purple-dim);
  border: 1px solid rgba(144, 112, 192, 0.3);
  border-radius: var(--radius-sm);
}
.zj-peach strong { color: var(--gold-light); }
.zj-body { font-size: 13px; color: var(--text-muted); line-height: 1.95; }
.zj-body strong { color: var(--text-warm); }
.zj-grid2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 18px; }
.zj-card {
  border: 1px solid var(--border);
  border-left: 3px solid var(--purple);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  background: rgba(10, 10, 22, 0.5);
}
.zj-card:last-child { border-left-color: var(--red-bright); }
.zj-ct { font-size: 13.5px; font-weight: 700; color: var(--gold); margin-bottom: 7px; }
.zj-cb { font-size: 12.5px; color: var(--text-muted); line-height: 1.85; }
.zj-cb strong { color: var(--text-warm); }
.zj-xinfa {
  margin-top: 6px;
  padding: 12px 16px;
  font-size: 12.5px;
  color: var(--text-warm);
  line-height: 1.85;
  background: var(--gold-glow);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
}
.zj-xinfa strong { color: var(--gold-light); }

/* ========== SIHAI RESOLUTION (四害化解专区) ========== */
.sihai-section { margin-top: 40px; }
.sh-intro {
  font-size: 13.5px;
  color: var(--text-muted);
  line-height: 1.9;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 22px;
  margin-bottom: 18px;
}
.sh-intro strong { color: var(--gold-light); }
.sh-clean {
  text-align: center;
  padding: 28px 20px;
  font-size: 14.5px;
  color: var(--green);
  background: rgba(72,184,120,0.06);
  border: 1px solid rgba(72,184,120,0.25);
  border-radius: var(--radius);
  line-height: 1.9;
}
.sh-summary {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 16px;
  margin-bottom: 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.sh-sum-label { font-size: 13px; color: var(--text-warm); font-weight: 600; }
.sh-sum-note { font-size: 12px; color: var(--text-muted); margin-left: auto; }
.sh-chip { font-size: 12.5px; font-weight: 700; padding: 3px 12px; border-radius: 14px; border: 1px solid; }
.sh-chip.sh-ji { color: #ff5050; border-color: rgba(255,80,80,0.5); background: rgba(255,80,80,0.1); }
.sh-chip.sh-po { color: #ff9030; border-color: rgba(255,144,48,0.5); background: rgba(255,144,48,0.1); }
.sh-chip.sh-mu { color: #b080e0; border-color: rgba(176,128,224,0.5); background: rgba(176,128,224,0.1); }
.sh-chip.sh-kong { color: #90a8c0; border-color: rgba(144,168,192,0.5); background: rgba(144,168,192,0.1); }

.sh-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid;
  border-radius: var(--radius);
  padding: 22px 24px;
  margin-bottom: 20px;
}
.sh-card.sh-ji { border-left-color: #ff5050; }
.sh-card.sh-po { border-left-color: #ff9030; }
.sh-card.sh-mu { border-left-color: #b080e0; }
.sh-card.sh-kong { border-left-color: #90a8c0; }
.sh-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.sh-badge {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  font-weight: 800;
  border: 2px solid;
}
.sh-ji .sh-badge { color: #ff5050; border-color: rgba(255,80,80,0.7); background: rgba(255,80,80,0.12); text-shadow: 0 0 8px rgba(255,80,80,0.5); }
.sh-po .sh-badge { color: #ff9030; border-color: rgba(255,144,48,0.7); background: rgba(255,144,48,0.12); text-shadow: 0 0 8px rgba(255,144,48,0.5); }
.sh-mu .sh-badge { color: #b080e0; border-color: rgba(176,128,224,0.7); background: rgba(176,128,224,0.12); text-shadow: 0 0 8px rgba(176,128,224,0.5); }
.sh-kong .sh-badge { color: #90a8c0; border-color: rgba(144,168,192,0.65); background: rgba(144,168,192,0.1); text-shadow: 0 0 8px rgba(144,168,192,0.45); }
.sh-head-t { font-size: 17px; font-weight: 700; color: var(--gold-light); letter-spacing: 0.05em; }
.sh-count { font-size: 12px; color: var(--text-muted); font-weight: 400; margin-left: 8px; }
.sh-palaces { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.sh-palace { font-size: 12.5px; padding: 4px 12px; border-radius: 6px; background: var(--surface-2); border: 1px solid var(--border); color: var(--text-warm); }
.sh-block { margin-bottom: 14px; }
.sh-bt { font-size: 13.5px; font-weight: 700; color: var(--gold); margin-bottom: 6px; letter-spacing: 0.04em; }
.sh-bb { font-size: 13px; color: var(--text-muted); line-height: 1.85; }
.sh-bb strong { color: var(--text-warm); }
.sh-situation { padding: 6px 10px; margin-bottom: 6px; background: rgba(0,0,0,0.15); border-radius: 6px; border-left: 3px solid var(--border-strong); }
.sh-item-row { display: flex; gap: 10px; padding: 8px 10px; margin-bottom: 6px; background: rgba(0,0,0,0.15); border-radius: 6px; }
.sh-item-pos { flex-shrink: 0; min-width: 110px; font-weight: 700; color: var(--gold-light); font-size: 12.5px; }
.sh-color { display: block; font-size: 12px; color: var(--text-muted); margin-top: 3px; font-style: italic; }
.sh-steps { list-style: none; counter-reset: shstep; padding: 0; margin: 0; }
.sh-steps li {
  counter-increment: shstep;
  position: relative;
  padding: 10px 12px 10px 44px;
  margin-bottom: 8px;
  background: rgba(0,0,0,0.15);
  border-radius: 8px;
  border: 1px solid var(--border);
}
.sh-steps li::before {
  content: counter(shstep);
  position: absolute;
  left: 10px;
  top: 10px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--gold-glow);
  border: 1px solid var(--gold-dim);
  color: var(--gold-light);
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sh-step-t { display: block; font-size: 13px; font-weight: 700; color: var(--text-warm); margin-bottom: 3px; }
.sh-step-b { font-size: 12.5px; color: var(--text-muted); line-height: 1.8; }
.sh-taboo {
  margin-top: 14px;
  padding: 12px 16px;
  font-size: 12.5px;
  line-height: 1.8;
  color: #d8a0a0;
  background: rgba(192,48,64,0.08);
  border: 1px solid rgba(192,48,64,0.25);
  border-radius: 8px;
}
.sh-taboo strong { color: #ff8080; }
.sh-footer {
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.9;
  text-align: center;
  padding: 16px 20px;
  border-top: 1px solid var(--border);
  margin-top: 6px;
}

/* ========== 大运专题 / 流年详解专区 ========== */
.dy-tab small, .ln-tab small { display: block; font-size: 10px; opacity: 0.7; margin-top: 2px; }
.yun-card {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 22px 26px;
  box-shadow: var(--shadow-gold);
}
.yun-head {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--border-strong);
}
.yun-head-gz { font-size: 30px; font-weight: 800; color: var(--gold-light); letter-spacing: 0.1em; line-height: 1.1; }
.yun-head-meta { font-size: 12px; color: var(--text-muted); margin-top: 5px; }
.yun-ov-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.yun-ov-item {
  display: flex; flex-direction: column; gap: 3px;
  padding: 8px 12px; background: rgba(10, 10, 22, 0.5);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.yun-ov-k { font-size: 11px; color: var(--text-dim); }
.yun-ov-v { font-size: 13.5px; font-weight: 600; color: var(--text-warm); }
.yun-luck-ji { color: var(--green) !important; }
.yun-luck-xiong { color: var(--red-bright) !important; }
.yun-luck-zhong { color: var(--gold) !important; }
.yun-cg-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.yun-cg {
  font-size: 11.5px; color: var(--text-muted); padding: 3px 9px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px;
}
.yun-shishen-meaning {
  font-size: 12.5px; color: var(--text-muted); line-height: 1.85;
  padding: 10px 14px; background: var(--gold-glow);
  border: 1px solid rgba(212, 168, 67, 0.15); border-radius: var(--radius-sm);
}
.yun-shishen-meaning strong { color: var(--gold-light); }
.yun-rel { display: flex; flex-wrap: wrap; gap: 6px; }
.yun-rel-none { font-size: 12.5px; color: var(--text-dim); }
.yun-rel-chip {
  font-size: 11.5px; font-weight: 600; padding: 3px 10px; border-radius: 12px; border: 1px solid;
}
.yun-rel-chip.yun-rel-ji { color: var(--green); background: var(--green-dim); border-color: rgba(72, 184, 120, 0.3); }
.yun-rel-chip.yun-rel-xiong { color: var(--red-bright); background: var(--red-glow); border-color: rgba(192, 48, 64, 0.3); }
.yun-rel-chip.yun-rel-zhong { color: var(--gold); background: var(--gold-glow); border-color: rgba(212, 168, 67, 0.25); }
.yun-rel-descs { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.yun-rel-desc {
  font-size: 12.5px; color: var(--text-muted); line-height: 1.75;
  padding: 7px 12px; border-left: 3px solid var(--border-strong);
  background: rgba(10, 10, 22, 0.4); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.yun-rel-desc strong { color: var(--text-warm); }
.yun-rel-desc.yun-rel-ji { border-left-color: var(--green); }
.yun-rel-desc.yun-rel-xiong { border-left-color: var(--red-bright); }
.yun-rel-desc.yun-rel-zhong { border-left-color: var(--gold-dim); }
.yun-special {
  font-size: 12.5px; line-height: 1.8; padding: 10px 14px; margin-top: 10px;
  border-radius: var(--radius-sm); border: 1px solid;
}
.yun-special strong { font-weight: 700; }
.yun-special.yun-rel-xiong { color: var(--text-warm); background: var(--red-glow); border-color: rgba(192, 48, 64, 0.3); }
.yun-special.yun-rel-xiong strong { color: var(--red-bright); }
.yun-special.yun-rel-ji { color: var(--text-warm); background: var(--green-dim); border-color: rgba(72, 184, 120, 0.25); }
.yun-special.yun-rel-ji strong { color: var(--green); }
.yun-aspects { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.yun-aspect {
  padding: 12px 14px; background: rgba(10, 10, 22, 0.5);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.yun-aspect-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 7px; font-size: 13.5px; font-weight: 700; color: var(--text-warm); }
.yun-mini-rating { font-size: 11px; font-weight: 700; padding: 1px 9px; border-radius: 10px; border: 1px solid; }
.yun-mini-rating.yun-luck-ji { background: var(--green-dim); border-color: rgba(72, 184, 120, 0.3); }
.yun-mini-rating.yun-luck-xiong { background: var(--red-glow); border-color: rgba(192, 48, 64, 0.3); }
.yun-mini-rating.yun-luck-zhong { background: var(--gold-glow); border-color: rgba(212, 168, 67, 0.25); }
.yun-aspect-text { font-size: 12.5px; color: var(--text-muted); line-height: 1.8; }
.yun-buzhen { display: flex; flex-direction: column; gap: 7px; }
.yun-bz-row { display: flex; gap: 12px; align-items: baseline; font-size: 12.5px; padding: 7px 12px; background: rgba(10, 10, 22, 0.4); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.yun-bz-k { color: var(--gold-light); font-weight: 600; min-width: 72px; flex-shrink: 0; }
.yun-bz-v { color: var(--text-muted); line-height: 1.7; }
.yun-bz-note { font-size: 12px; color: var(--text-dim); line-height: 1.8; padding: 10px 14px; background: var(--gold-glow); border-radius: var(--radius-sm); margin-top: 3px; }
.yun-years { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.yun-year {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  padding: 8px 11px; background: rgba(10, 10, 22, 0.5);
  border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 12px;
}
.yun-year-cur { border-color: var(--gold); background: var(--gold-glow); box-shadow: 0 0 0 1px var(--gold-dim); }
.yun-year-y { font-weight: 700; color: var(--text-warm); }
.yun-year-gz { color: var(--gold-light); font-weight: 600; }
.yun-year-ss { font-size: 11px; font-weight: 600; }
.yun-year-tags { font-size: 10.5px; color: var(--red-bright); width: 100%; }
.yun-years-note { font-size: 11.5px; color: var(--text-dim); line-height: 1.7; margin-top: 10px; }

/* ========== 八字专区 ========== */
.bazi-section { margin-top: 20px; }
.bazi-block { margin-top: 28px; }
.bazi-subtitle {
  font-size: 15px; font-weight: 700; color: var(--gold-light);
  letter-spacing: 0.08em; margin-bottom: 14px;
  padding-left: 12px; border-left: 3px solid var(--gold);
}

/* 命盘 */
.bazi-chart { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.bz-pillar {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px 10px; text-align: center; position: relative;
}
.bz-pillar-day { border-color: var(--border-strong); box-shadow: var(--shadow-gold); background: linear-gradient(180deg, rgba(212,168,67,0.06), var(--surface)); }
.bz-role { font-size: 12px; color: var(--gold); letter-spacing: 0.1em; }
.bz-role small { display: block; font-size: 10px; color: var(--text-dim); letter-spacing: 0; margin-top: 2px; }
.bz-ss { display: inline-block; font-size: 11px; padding: 1px 8px; border-radius: 999px; margin: 8px 0 4px; background: var(--surface-2); border: 1px solid var(--border); color: var(--text-warm); }
.bz-stem { font-size: 30px; font-weight: 800; color: var(--gold-light); line-height: 1.15; }
.bz-branch { font-size: 24px; font-weight: 700; color: var(--text-warm); line-height: 1.2; }
.bz-branch-day { color: var(--gold-light); }
.bz-cang { margin-top: 10px; display: flex; flex-direction: column; gap: 4px; }
.bz-cang-item { font-size: 11px; color: var(--text-warm); display: flex; justify-content: center; gap: 6px; }
.bz-cang-item em { font-style: normal; color: var(--text-dim); font-size: 10px; }
.bz-cs { margin-top: 8px; font-size: 11px; color: var(--text-dim); }
.bz-cs strong { color: var(--gold); font-weight: 600; }
.bz-shensha { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; }
.bz-ss-tag { font-size: 10px; padding: 1px 6px; border-radius: 4px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text-muted); }

/* 五行分布 */
.bazi-element-bar { margin-top: 16px; display: flex; flex-direction: column; gap: 7px; }
.el-row { display: flex; align-items: center; gap: 10px; font-size: 12px; }
.el-label { width: 62px; display: flex; align-items: center; gap: 6px; color: var(--text-warm); }
.el-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.el-track { flex: 1; height: 9px; background: rgba(255,255,255,0.05); border-radius: 999px; overflow: hidden; }
.el-fill { height: 100%; border-radius: 999px; transition: width 0.4s ease; }
.el-count { width: 70px; text-align: right; color: var(--text-dim); font-size: 11px; }
.el-dot-wood, .el-fill-wood { background: #60c070; }
.el-dot-fire, .el-fill-fire { background: #e07050; }
.el-dot-earth, .el-fill-earth { background: #d0a840; }
.el-dot-metal, .el-fill-metal { background: #b0b0c0; }
.el-dot-water, .el-fill-water { background: #6090d0; }

/* 旺衰 */
.bazi-strength-card { background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius); padding: 20px 22px; box-shadow: var(--shadow-gold); }
.bs-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.bs-level { font-size: 20px; font-weight: 800; color: var(--gold-light); }
.bs-score { font-size: 12px; color: var(--text-dim); }
.bs-desc { margin-top: 12px; font-size: 13.5px; color: var(--text-warm); line-height: 1.9; }
.bs-chips { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px; }
.bs-chip { font-size: 12px; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--border); }
.bs-chip-xi { color: var(--green); background: var(--green-dim); border-color: rgba(72,184,120,0.3); }
.bs-chip-ji { color: var(--red-bright); background: var(--red-glow); border-color: rgba(192,48,64,0.3); }

/* 格局 */
.bazi-geju-card { background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius); padding: 20px 22px; }
.bgj-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.bgj-name { font-size: 20px; font-weight: 800; color: var(--gold-light); }
.bgj-badge { font-size: 11px; padding: 2px 10px; border-radius: 999px; border: 1px solid; }
.bgj-badge-ok { color: var(--green); border-color: rgba(72,184,120,0.35); background: var(--green-dim); }
.bgj-badge-bad { color: var(--red-bright); border-color: rgba(192,48,64,0.35); background: var(--red-glow); }
.bgj-desc { margin-top: 12px; font-size: 13.5px; color: var(--text-warm); line-height: 1.9; }
.bgj-advice { margin-top: 10px; font-size: 13px; color: var(--text); line-height: 1.85; border-left: 3px solid var(--gold-dim); padding-left: 12px; }

/* 神煞 */
.bazi-shensha-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.ss-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 14px; }
.ss-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ss-name { font-size: 14px; font-weight: 700; color: var(--text-warm); }
.ss-luck { font-size: 10px; padding: 1px 8px; border-radius: 999px; border: 1px solid; }
.ss-luck-ji { color: var(--green); border-color: rgba(72,184,120,0.35); background: var(--green-dim); }
.ss-luck-xiong { color: var(--red-bright); border-color: rgba(192,48,64,0.35); background: var(--red-glow); }
.ss-luck-zhong { color: var(--gold); border-color: var(--border-strong); background: var(--gold-glow); }
.ss-pillars { font-size: 10.5px; color: var(--gold); margin-top: 3px; }
.ss-desc { font-size: 12px; color: var(--text-muted); line-height: 1.7; margin-top: 5px; }
.ss-resolve { font-size: 11.5px; color: var(--text-dim); margin-top: 5px; line-height: 1.7; }
.ss-empty { font-size: 13px; color: var(--text-dim); padding: 10px 0; }

/* 七大分项 */
.bazi-aspects { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.bza-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; }
.bza-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.bza-name { font-size: 15px; font-weight: 700; color: var(--gold-light); }
.bza-rating { font-size: 11px; padding: 1px 9px; border-radius: 999px; border: 1px solid; }
.bza-basis { font-size: 11.5px; color: var(--text-dim); margin-top: 6px; line-height: 1.6; }
.bza-text { font-size: 13px; color: var(--text-warm); line-height: 1.85; margin-top: 8px; }
.bza-advice { font-size: 12.5px; color: var(--text); line-height: 1.8; margin-top: 8px; border-left: 3px solid var(--gold-dim); padding-left: 10px; }
.bza-remedy { font-size: 12px; color: var(--green); background: var(--green-dim); border-radius: var(--radius-sm); padding: 8px 10px; margin-top: 8px; line-height: 1.7; }

/* 开运化解 */
.bazi-buzhen { display: flex; flex-direction: column; gap: 8px; }
.bzb-row { display: flex; gap: 12px; background: rgba(10,10,22,0.5); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 14px; font-size: 13px; }
.bzb-k { flex: 0 0 88px; color: var(--gold); font-weight: 600; }
.bzb-v { flex: 1; color: var(--text-warm); line-height: 1.8; }
.bzb-note { margin-top: 10px; font-size: 12px; color: var(--text-dim); line-height: 1.8; }

/* 大运流年提要 */
.bazi-yun { display: flex; flex-direction: column; gap: 10px; }
.by-row { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 14px; }
.by-head { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; flex-wrap: wrap; }
.by-gz { color: var(--gold-light); font-weight: 700; }
.by-luck { font-size: 11px; }
.by-text { font-size: 12.5px; color: var(--text-muted); margin-top: 4px; line-height: 1.75; }

@media (max-width: 700px) {
  .bazi-chart { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .bazi-shensha-list { grid-template-columns: 1fr; }
  .bazi-aspects { grid-template-columns: 1fr; }
  .bzb-row { flex-direction: column; gap: 3px; }
  .bzb-k { flex-basis: auto; }
  .bz-stem { font-size: 27px; }
  .bz-branch { font-size: 22px; }
}
@media (max-width: 400px) {
  .bazi-chart { gap: 8px; }
  .bz-pillar { padding: 12px 6px; }
  .bz-stem { font-size: 24px; }
  .bz-branch { font-size: 20px; }
  .bazi-strength-card, .bazi-geju-card { padding: 16px 14px; }
  .bza-card { padding: 14px; }
}

/* ========== 奇门创业开业专局 ========== */
.startup-section { margin-top: 20px; }
.startup-hero {
  display: flex; align-items: center; gap: 18px;
  padding: 16px 18px; margin-bottom: 18px;
  background: rgba(10, 10, 22, 0.5);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
}
.startup-score-num { font-size: 34px; font-weight: 800; color: var(--gold-light); line-height: 1; }
.startup-score-den { font-size: 12px; color: var(--text-dim); }
.startup-hero-body { flex: 1; min-width: 0; }
.startup-badge {
  display: inline-block; font-size: 12px; font-weight: 700;
  padding: 2px 12px; border-radius: 999px;
  border: 1px solid var(--gold); color: var(--gold-light); background: var(--gold-glow);
  margin-bottom: 6px;
}
.startup-verdict { font-size: 13px; color: var(--text-warm); line-height: 1.8; }
.startup-meter { height: 8px; background: rgba(255,255,255,0.06); border-radius: 999px; overflow: hidden; margin-top: 8px; }
.startup-meter i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--gold-dim), var(--gold-light)); }
.startup-dates { display: flex; flex-direction: column; gap: 8px; }
.sd-row {
  display: grid; grid-template-columns: 34px minmax(0, 1.5fr) minmax(0, 1fr) 86px;
  gap: 10px; align-items: center;
  padding: 10px 12px; font-size: 12.5px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.sd-rank { font-weight: 800; color: var(--gold); }
.sd-main { color: var(--text-warm); line-height: 1.7; min-width: 0; }
.sd-main strong { color: var(--gold-light); }
.sd-meta { font-size: 11px; color: var(--text-dim); }
.sd-dir { color: var(--text-muted); line-height: 1.7; }
.sd-score { text-align: right; font-weight: 700; line-height: 1.5; }
.startup-note { margin-top: 10px; font-size: 11.5px; color: var(--text-dim); line-height: 1.8; }
.startup-list { display: flex; flex-direction: column; gap: 8px; }
.startup-item {
  background: rgba(10, 10, 22, 0.5); border: 1px solid var(--border);
  border-left: 3px solid var(--gold-dim); border-radius: var(--radius-sm);
  padding: 10px 12px; font-size: 12.5px; color: var(--text-muted); line-height: 1.8;
}
.startup-item strong { color: var(--text-warm); }
.startup-item-risk { border-left-color: var(--red-bright); }
.startup-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.startup-chip { font-size: 11.5px; padding: 2px 10px; border-radius: 999px; border: 1px solid var(--border); color: var(--text-warm); }
.startup-chip-ji { color: var(--green); border-color: rgba(72,184,120,0.35); background: var(--green-dim); }
.startup-chip-xiong { color: var(--red-bright); border-color: rgba(192,48,64,0.35); background: var(--red-glow); }

/* ========== 八字创业开业专区 ========== */
.bsu-head {
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--shadow-gold);
}
.bsu-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.bsu-num { font-size: 30px; font-weight: 800; color: var(--gold-light); line-height: 1; }
.bsu-den { font-size: 12px; color: var(--text-dim); }
.bsu-rating { font-size: 12px; font-weight: 700; padding: 2px 12px; border-radius: 999px; border: 1px solid; }
.bsu-mode { font-size: 13px; color: var(--text-warm); margin-left: auto; }
.bsu-mode strong { color: var(--gold-light); }
.bsu-verdict { margin-top: 12px; font-size: 13px; color: var(--text-warm); line-height: 1.9; }
.bsu-basis { margin-top: 8px; font-size: 11.5px; color: var(--text-dim); line-height: 1.7; }
.bsu-years { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.bsu-year { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 9px 8px; text-align: center; }
.bsu-year-top { font-size: 11.5px; color: var(--text-dim); }
.bsu-year-gz { font-size: 15px; font-weight: 700; color: var(--gold-light); margin: 2px 0; }
.bsu-year-val { font-size: 11px; font-weight: 700; }
.bsu-year-tag { font-size: 10.5px; color: var(--text-muted); margin-top: 2px; }
.bsu-year-best { border-color: var(--gold); box-shadow: var(--shadow-gold); }

/* ========== FOOTER ========== */
.footer {
  text-align: center;
  padding: 40px 0;
  font-size: 12px;
  color: var(--text-dim);
  letter-spacing: 0.1em;
  border-top: 1px solid var(--border);
  margin-top: 20px;
}

/* ========== ANIMATIONS ========== */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

.info-bar { animation: fadeInUp 0.4s ease-out; }
.chart-section { animation: fadeInUp 0.5s ease-out 0.1s both; }
.detail-section { animation: fadeInUp 0.5s ease-out 0.2s both; }
.aspect-section { animation: fadeInUp 0.5s ease-out 0.3s both; }
.analysis-section { animation: fadeInUp 0.5s ease-out 0.4s both; }

/* ========== RESPONSIVE ========== */
@media (max-width: 700px) {
  .hero { padding: 40px 0 28px; }
  .hero-symbol { font-size: 52px; }
  .hero-title { font-size: 30px; letter-spacing: 0.2em; }
  .hero-title::before, .hero-title::after { margin: 0 10px; }
  .hero-subtitle { font-size: 12px; letter-spacing: 0.15em; }

  .input-section { padding: 20px; }
  .input-row { flex-direction: column; gap: 12px; }
  .btn-divine { width: 100%; text-align: center; }

  .info-bar { flex-wrap: wrap; }
  .info-item { padding: 10px 14px; min-width: 60px; }
  .info-item:not(:last-child)::after { display: none; }
  .info-value { font-size: 15px; }

  .section-title { font-size: 15px; letter-spacing: 0.1em; line-height: 1.7; }
  .section-title::before, .section-title::after { width: 30px; }
  .section-title::before { right: calc(50% + 50px); }
  .section-title::after { left: calc(50% + 50px); }

  .grid { width: min(380px, 94vw); }
  .cell { padding: 5px; }
  .cell-star { font-size: 12px; }
  .cell-door { font-size: 13px; padding: 2px 6px; }
  .cell-deity { font-size: 10px; }
  .cell-stem-tian { font-size: 18px; }
  .cell-stem-di { font-size: 15px; }
  .cell-stems-area { padding: 6px 4px; }
  .stem-label { font-size: 9px; min-width: 28px; padding: 1px 4px; }
  .cell-cs { font-size: 10px; padding: 2px 6px; }

  .sizhu-section { padding: 14px 16px; }
  .sizhu-top { flex-wrap: wrap; gap: 8px; }
  .sizhu-gender { font-size: 14px; padding: 3px 10px; }
  .sizhu-date-solar { font-size: 13px; }
  .sizhu-date-lunar { font-size: 11.5px; }
  .sizhu-vertical { gap: 10px; }
  .sizhu-column { padding: 6px 10px; min-width: 52px; }
  .col-stem { font-size: 20px; }
  .col-branch { font-size: 16px; }

  .formation-visual { padding: 8px 10px; }
  .formation-icon { font-size: 22px; }
  .formation-dir { font-size: 13px; }
  .f-item { font-size: 11.5px; padding: 3px 6px; }

  .interpretation { padding: 20px; }
  .interp-title { font-size: 14px; }
  .interp-text { font-size: 13px; }

  .aspect-grid { grid-template-columns: 1fr; gap: 16px; }
  .aspect-card { padding: 20px; }

  .bz-aspect { padding: 12px; }
  .bz-grid { grid-template-columns: 1fr; }
  .zw-row { grid-template-columns: 1fr; gap: 3px; padding: 10px 12px; }
  .zw-head { display: none; }
  .zw-pos { font-size: 13px; }
  .shan-grid { grid-template-columns: repeat(2, 1fr); }

  .zj { padding: 18px 16px; }
  .zj-grid2 { grid-template-columns: 1fr; }
  .zj-ys { flex-direction: column; gap: 3px; }
  .zj-ys-name { min-width: 0; }
  .zj-tab { padding: 6px 12px; font-size: 12.5px; }

  .cell-harms { gap: 4px; margin-top: 5px; }
  .cell-harm { width: 27px; height: 27px; font-size: 10px; border-width: 1.5px; }

  .sh-card { padding: 16px; }
  .sh-intro { padding: 14px 16px; }
  .sh-item-row { flex-direction: column; gap: 4px; }
  .sh-item-pos { min-width: 0; }
  .sh-sum-note { margin-left: 0; width: 100%; }
  .sh-steps li { padding-left: 40px; }

  .yun-card { padding: 18px 16px; }
  .yun-head-gz { font-size: 25px; }
  .yun-ov-grid { grid-template-columns: repeat(2, 1fr); }
  .yun-aspects { grid-template-columns: 1fr; }
  .yun-bz-row { flex-direction: column; gap: 3px; }
  .yun-bz-k { min-width: 0; }
  .yun-years { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }

  .startup-hero { flex-wrap: wrap; gap: 12px; }
  .sd-row { grid-template-columns: 28px 1fr; gap: 6px 10px; }
  .sd-dir, .sd-score { grid-column: 2; text-align: left; }
  .bsu-years { grid-template-columns: repeat(3, 1fr); }
  .bsu-mode { margin-left: 0; width: 100%; }
}

@media (max-width: 400px) {
  .page { padding: 0 12px; }
  .hero-title { font-size: 26px; }
  .section-title { font-size: 14px; letter-spacing: 0.06em; }
  .grid-container { gap: 4px; }
  .grid { width: calc(100vw - 76px); }
  .aspect-grid { grid-template-columns: 1fr; }

  .day-cs-bar { gap: 3px; padding: 12px; }
  .cs-item { min-width: 28px; padding: 3px 4px; }
  .cs-zhi { font-size: 9px; }
  .cs-name { font-size: 8px; }

  .tab-btn { padding: 8px 16px; font-size: 13px; }
  .dy-grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 8px; }
  .dy-card { padding: 10px; }
  .dy-gz { font-size: 15px; }
  .ln-card { padding: 12px; }
  .remedy-block { padding: 16px; }

  .cell-harm { width: 24px; height: 24px; font-size: 9px; }

  .yun-head { flex-direction: column; align-items: flex-start; gap: 8px; }
  .yun-head-gz { font-size: 23px; }
  .yun-ov-grid { grid-template-columns: 1fr; }
  .yun-years { grid-template-columns: 1fr; }
}

/* ========== 页脚链接 ========== */
.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  margin-top: 8px;
}
.footer-links a {
  color: var(--gold-dim);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.footer-links a:hover { color: var(--gold-light); border-color: var(--gold-dim); }

/* ========== 同行授权页 ========== */
.partner-page { padding-bottom: 20px; }
.partner-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 0 8px;
  font-size: 13px;
}
.partner-back { color: var(--text-muted); text-decoration: none; }
.partner-back:hover { color: var(--gold-light); }
.partner-brand { color: var(--text-dim); letter-spacing: 0.2em; }
.partner-hero { text-align: center; padding: 36px 0 10px; }
.partner-eyebrow {
  display: inline-block;
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--gold-light);
  border: 1px solid var(--gold-dim);
  border-radius: 999px;
  padding: 5px 14px;
  margin-bottom: 18px;
}
.partner-hero h1 {
  font-size: 34px;
  line-height: 1.5;
  color: var(--gold-light);
  letter-spacing: 0.06em;
  margin-bottom: 14px;
  text-wrap: balance;
}
.partner-hero p {
  max-width: 720px;
  margin: 0 auto 22px;
  font-size: 14.5px;
  line-height: 1.95;
  color: var(--text-warm);
}
.partner-hero-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.partner-cta, .partner-ghost {
  display: inline-block;
  font-size: 14px;
  padding: 11px 26px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  letter-spacing: 0.06em;
  transition: all var(--motion);
}
.partner-cta {
  color: #1a1206;
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  font-weight: 700;
}
.partner-cta:hover { filter: brightness(1.06); }
.partner-ghost { color: var(--text-muted); border: 1px solid var(--border-strong); }
.partner-ghost:hover { color: var(--gold-light); border-color: var(--gold-dim); }
.partner-stats {
  display: flex;
  justify-content: center;
  gap: 42px;
  margin: 30px auto 0;
  flex-wrap: wrap;
}
.partner-stats div { display: flex; flex-direction: column; gap: 4px; }
.partner-stats strong { font-size: 24px; color: var(--gold-light); }
.partner-stats span { font-size: 12px; color: var(--text-dim); letter-spacing: 0.1em; }
.partner-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.partner-cell {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 18px;
}
.partner-cell h3 { font-size: 14.5px; color: var(--gold-light); margin-bottom: 8px; letter-spacing: 0.04em; }
.partner-cell p { font-size: 13px; line-height: 1.85; color: var(--text-muted); }
.partner-sub { text-align: center; font-size: 13px; color: var(--text-muted); margin: -6px 0 18px; }
.tier-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-items: stretch; }
.tier {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 24px 22px;
}
.tier.featured { border-color: var(--gold); box-shadow: var(--shadow-gold); }
.tier-name { font-size: 15px; color: var(--text-warm); letter-spacing: 0.12em; }
.tier-price { font-size: 28px; font-weight: 800; color: var(--gold-light); line-height: 1.2; }
.tier-price span { font-size: 12px; font-weight: 400; color: var(--text-dim); margin-left: 4px; }
.tier-desc { font-size: 13px; line-height: 1.8; color: var(--text-muted); min-height: 3.6em; }
.tier ul { list-style: none; display: flex; flex-direction: column; gap: 8px; font-size: 13px; color: var(--text-warm); }
.tier li::before { content: '·'; color: var(--gold); margin-right: 8px; }
.tier-badge {
  align-self: flex-start;
  font-size: 11px;
  color: var(--gold-light);
  border: 1px solid var(--gold-dim);
  border-radius: 999px;
  padding: 2px 10px;
}
.partner-note { font-size: 12px; color: var(--text-dim); line-height: 1.9; margin-top: 12px; text-align: center; }
.partner-steps { list-style: none; counter-reset: ps; display: flex; flex-direction: column; gap: 10px; }
.partner-steps li {
  counter-increment: ps;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  font-size: 13.5px;
  line-height: 1.85;
  color: var(--text-warm);
}
.partner-steps li::before {
  content: counter(ps);
  flex: 0 0 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--gold-glow);
  border: 1px solid var(--gold-dim);
  color: var(--gold-light);
  font-weight: 800;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.partner-faq { display: flex; flex-direction: column; gap: 8px; }
.partner-faq details {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
}
.partner-faq summary {
  cursor: pointer;
  font-size: 13.5px;
  color: var(--text-warm);
  letter-spacing: 0.03em;
}
.partner-faq details[open] summary { color: var(--gold-light); }
.partner-faq p { margin-top: 10px; font-size: 13px; line-height: 1.9; color: var(--text-muted); }
.partner-contact-box {
  text-align: center;
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 30px 22px;
  margin-top: 24px;
}
.partner-contact-box h2 { font-size: 20px; color: var(--gold-light); letter-spacing: 0.1em; margin-bottom: 10px; }
.partner-contact-box > p { font-size: 13.5px; line-height: 1.9; color: var(--text-muted); }
.partner-contact-line {
  margin: 16px auto 4px;
  font-size: 16px;
  color: var(--gold-light);
  letter-spacing: 0.08em;
  word-break: break-all;
}
.partner-contact-line.empty { color: var(--text-dim); font-size: 13px; letter-spacing: 0.02em; }
@media (max-width: 860px) {
  .partner-grid, .tier-grid { grid-template-columns: 1fr; }
  .partner-hero h1 { font-size: 25px; }
}
@media (max-width: 400px) {
  .partner-hero h1 { font-size: 22px; }
  .partner-stats { gap: 24px; }
  .partner-contact-box { padding: 24px 16px; }
}