/* =========================================================
   四柱命盘
   源文件行号：400-476
   ========================================================= */

/* ============ 四柱命盘 ============ */
.detail-info-wrap { background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 12px; margin-bottom: 12px; box-shadow: var(--shadow-sm); overflow: hidden; }
.detail-info-header { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; cursor: pointer; background: #FDFBF7; border-bottom: 1px solid var(--border-color); }
.detail-info-header h3 { font-size: 14px; font-weight: 700; color: var(--accent-dark); margin: 0; }
.detail-info-header .toggle-icon { font-size: 12px; color: var(--accent-gold); display: inline-flex; align-items: center; gap: 4px; }
.detail-info-header .toggle-icon .arrow { display: inline-block; transition: transform 0.3s; }
.detail-info-header.open .toggle-icon .arrow { transform: rotate(180deg); }
.detail-info-body { max-height: 0; overflow: hidden; transition: max-height 0.4s ease, padding 0.4s ease; padding: 0 14px; background: #FFFFFF; }
.detail-info-body.open { max-height: 600px; padding: 12px 14px; border-top: 1px solid #F5F2EC; }
.di-row { font-size: 12.5px; line-height: 2; color: var(--text-sub); display: flex; flex-wrap: wrap; }
.di-label { color: var(--text-light); width: 42px; flex-shrink: 0; }
.di-val { color: var(--text-main); font-weight: 600; margin-right: 14px; }
.di-val.red { color: var(--accent-red); }
.di-val.green { color: var(--accent-green); }

.sizhu-wrap { margin: 0 0 14px; background: #FFFFFF; border-radius: 0; border: 1px solid #EDE8DF; box-shadow: var(--shadow-sm); overflow: hidden; }
.sizhu-grid { display: grid; grid-template-columns: 58px repeat(4, 1fr); }
.sz-cell { padding: 10px 2px; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 46px; font-size: 12.5px; line-height: 1.4; text-align: center; border-right: 1px solid #F1EDE6; border-bottom: 1px solid #F1EDE6; }
.sz-cell:nth-child(5n) { border-right: none; }
.sz-cell.head { background: #FDFBF7; font-weight: 700; color: var(--text-main); font-size: 14.5px; min-height: 44px; }
.sz-cell.label { background: #FDFBF7; font-size: 12px; color: var(--text-light); }
.sz-cell.label.narrow { font-size: 10.5px; line-height: 1.2; padding: 8px 2px; }
.sz-cell.merged { grid-column: span 4; border-right: none !important; }
.sz-cell.zao-label { background: #FDFBF7; font-size: 13px; font-weight: 700; color: var(--accent-gold); }
.sz-cell.day-col { background: rgba(185, 154, 107, 0.06); }
.sz-cell.head.day-col { background: rgba(185, 154, 107, 0.18); color: var(--accent-gold); }
.sz-shishen { font-size: 12.5px; color: var(--text-sub); }
.sz-shishen.day { color: var(--accent-gold); font-weight: 600; }
.sz-gan { font-size: 24px; font-weight: 700; }
.sz-zhi { font-size: 24px; font-weight: 700; }
.sz-cang { display: flex; flex-direction: row; gap: 4px; font-size: 13.5px; font-weight: 700; }
.sz-cangshen { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 2px; font-size: 10px; color: var(--text-sub); }
.sz-nayin { font-size: 12px; color: var(--text-main); }
.sz-kong { font-size: 12px; color: var(--accent-red); font-weight: 600; }
.wx-mu { color: var(--wx-mu); }
.wx-huo { color: var(--wx-huo); }
.wx-tu { color: var(--wx-tu); }
.wx-jin { color: var(--wx-jin); }
.wx-shui { color: var(--wx-shui); }

.section-block { margin: 0 0 14px; background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 0; padding: 14px; box-shadow: var(--shadow-sm); }
.section-block h3 { font-size: 13px; color: var(--text-main); font-weight: 700; margin-bottom: 12px; display: flex; align-items: center; gap: 6px; }
.section-block h3::before { content: '◆'; font-size: 9px; color: var(--accent-gold); }
.liunian-sub-title { font-size: 13px; color: var(--text-main); font-weight: 700; margin-top: 14px; margin-bottom: 10px; padding-top: 12px; border-top: 1px dashed var(--border-color); display: flex; align-items: center; gap: 6px; }
.liunian-sub-title::before { content: '◆'; font-size: 9px; color: var(--accent-gold); }

.shensha-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.shensha-col { text-align: center; padding: 4px 0; }
.shensha-col.has-tags { background: rgba(185, 154, 107, 0.04); border-radius: 8px; }
.shensha-title { font-size: 12px; font-weight: 700; color: var(--text-main); margin-bottom: 6px; padding-bottom: 6px; border-bottom: 1px dashed var(--border-color); }
.shensha-tag { display: inline-block; font-size: 10.5px; color: var(--accent-red); background: rgba(177, 90, 74, 0.08); border: 1px solid rgba(177, 90, 74, 0.2); padding: 2px 6px; border-radius: 4px; margin: 2px 2px; }
.shensha-tag.empty { color: var(--text-light); background: transparent; border-color: transparent; }
.shensha-tag.good { color: var(--accent-green); background: rgba(74, 139, 92, 0.08); border-color: rgba(74, 139, 92, 0.2); }
.shensha-tag.moving { color: #8A6D46; background: rgba(185, 154, 107, 0.12); border-color: rgba(185, 154, 107, 0.35); }

.dayun-scroll { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px 0 6px; margin: 0 -14px; padding-left: 14px; padding-right: 14px; }
.dayun-scroll::-webkit-scrollbar { display: none; }
.dayun-item { flex-shrink: 0; width: 62px; padding: 9px 4px; border-radius: 10px; background: #FDFBF7; border: 1px solid var(--border-color); text-align: center; cursor: pointer; }
.dayun-item.active { background: var(--accent-dark); border-color: var(--accent-dark); }
.dy-gz { font-size: 15px; font-weight: 700; color: var(--text-main); }
.dayun-item.active .dy-gz { color: #fff; }
.dy-age { font-size: 10px; color: var(--text-light); margin-top: 3px; }
.dayun-item.active .dy-age { color: rgba(255,255,255,0.7); }
.dy-year { font-size: 10px; color: var(--text-light); margin-top: 1px; }
.dayun-item.active .dy-year { color: rgba(255,255,255,0.55); }

.xiaoyun-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.xy-item { text-align: center; padding: 6px 2px; border-radius: 8px; background: #FDFBF7; border: 1px solid #F2EEE6; }
.xy-gz { font-size: 12.5px; font-weight: 700; color: var(--text-main); }
.xy-age { font-size: 9.5px; color: var(--text-light); margin-top: 2px; }

.liunian-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.ln-item { text-align: center; padding: 7px 2px; border-radius: 8px; background: #FDFBF7; border: 1px solid #F2EEE6; }
.ln-gz { font-size: 13px; font-weight: 700; color: var(--text-main); }
.ln-year { font-size: 9.5px; color: var(--text-light); margin-top: 2px; }
.ln-age { font-size: 9.5px; color: var(--text-light); }