/* 紫微命盘样式（515px 重构版，米色/棕色系，自实现） */

/* ===== 容器 ===== */
body { margin: 0; font-family: "PingFang SC", "Microsoft YaHei", sans-serif; }
.zwpp-page { width: 515px; margin: 16px auto; padding: 13px; box-sizing: border-box; }
.zwpp-box { padding: 0; }

/* ===== 颜色类（米色/棕色系，与项目其他命盘统一） ===== */
.red { color: #b8482e; }
.gray { color: #8b6b3d; }
.orange { color: rgba(180, 110, 40, 1); }
.purple { color: #5c4621; }
.success { color: #6b8e3d; }

/* ===== 命盘表格 ===== */
.table-zwpp { width: 100%; border-collapse: collapse; table-layout: fixed; border: 1px solid #d4c8b0; }
.table-zwpp td { padding: 0; width: 25%; vertical-align: top; border: 1px solid #d4c8b0; }
.table-zwpp .td-info { position: relative; padding: 10px; text-align: center; border: 1px solid #d4c8b0; }
.table-zwpp .td-info img { max-width: 100%; display: block; }
.table-zwpp .td-info canvas { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }

/* ===== 单个宫位 ===== */
.gong { padding: 4px 4px 0; cursor: pointer; transition: background .2s; }
.gong.active { background-color: rgb(227 217 204); }
.gong.active2 { background-color: #ebe8e0 !important; }

/* ===== 顶部星曜区（横向并排多个星曜，每个 18px 居中） ===== */
.td-top { display: flex; height: 80px; padding: 4px 0; max-width: 100%; box-sizing: border-box; overflow: hidden; align-items: flex-start; }
.td-top .td-top-item { width: 14px; text-align: center; line-height: 1.2; font-size: 10px; flex: 0 0 14px; min-width: 0; box-sizing: border-box; overflow-wrap: anywhere; }
.td-top .td-top-item strong { font-weight: 600; }
.td-top .td-top-item .orange { display: block; font-size: 10px; }
.td-top.dense-stars { justify-content: space-between; gap: 0; }
.td-top.dense-stars .td-top-item { width: auto; flex: 1 1 0; font-size: 9px; line-height: 1.12; }
.td-top.dense-stars .td-top-item .orange { font-size: 9px; }
.td-top.dense-stars .label { width: 12px; height: 12px; line-height: 12px; font-size: 9px; }
.td-top.dense-stars-10 .td-top-item { font-size: 8.5px; line-height: 1.08; }
.td-top.dense-stars-10 .td-top-item .orange { font-size: 8.5px; }

/* ===== 中部年龄行 ===== */
.td-middle { height: 42px; text-align: left; color: #666; font-size: 9px; padding: 2px 4px; line-height: 1.12; box-sizing: border-box; overflow: hidden; }
.td-middle .age-line { white-space: nowrap; transform: scale(.92); transform-origin: left center; }
.td-middle .small-age { color: #8b6b3d; }
.td-middle strong { display: block; font-size: 10px; line-height: 1.2; font-weight: 400; margin-top: 1px; }

/* ===== 底部三段 ===== */
.td-bottom { display: flex; align-items: end; height: 60px; padding: 4px 0; }
.td-bottom-left, .td-bottom-center, .td-bottom-right { flex: 1; font-size: 11px; }
.td-bottom-left { text-align: left; padding-left: 4px; }
.td-bottom-center, .td-bottom-right { text-align: center; }
.td-bottom span, .td-bottom-center strong { display: inline-block; width: 100%; }
.td-bottom span { font-size: 11px; }
.td-bottom span.gray { color: gray; }
.td-bottom-center strong { background-color: transparent; border-top-left-radius: 5px; border-top-right-radius: 5px; font-size: 14px; color: #8b6b3d; font-weight: 600; }
.gong.active .td-bottom-center strong { background-color: #8b6b3d; color: #fff; }
.td-bottom-right { font-size: 11px; }
.td-bottom-right .label { margin-bottom: 2px; }

/* ===== 中央 .info 信息面板（公历/农历/坤造/...） ===== */
.table-zwpp .info { padding: 8px 16px; height: 100%; width: 100%; position: absolute; left: 0; top: 0; opacity: .8; box-sizing: border-box; display: flex; flex-direction: column; }
.table-zwpp .info .cells { display: flex; flex-direction: column; gap: 3px; flex: 1 1 auto; min-height: 0; }
.table-zwpp .info .cell { display: flex; align-items: center; border: none; padding: 0; }
.table-zwpp .info .cell-hd { width: 40px; color: #8b6b3d; font-size: 10px; flex: 0 0 40px; }
.table-zwpp .info .cell-bd { font-size: 10px; color: #4a3820; flex: 1; }
.table-zwpp .info .cell-bd.bz { display: flex; flex-direction: column; }
.table-zwpp .info .cell-bd.bz div { display: flex; justify-content: space-between; padding: 1px 0; }
.table-zwpp .info .cell.success .cell-bd { color: #5c8a3d; }
.table-zwpp .info .cell.color-primary .cell-bd { color: #6b5b3a; }
.table-zwpp .info .cell.orange .cell-bd { color: rgba(180, 110, 40, 1); }
.table-zwpp .info .sh { display: flex; align-items: center; justify-content: space-between; padding: 0 3px; margin-top: auto; flex: 0 0 auto; }
.table-zwpp .info .sh .cell { display: flex; flex-direction: column; align-items: center; }
.table-zwpp .info .sh .cell .cell-hd { color: #8b6b3d; font-size: 10px; width: auto; flex: none; margin-bottom: 2px; }
.table-zwpp .info .sh .cell .cell-bd { display: flex; gap: 2px; }

/* ===== 中央 .text-block 文字面板（居中多行） ===== */
.table-zwpp .info .text-block { text-align: center; line-height: 1.6; font-size: 11px; color: #4a3820; flex: 1 1 auto; min-height: 0; }
.table-zwpp .info .text-block .row { padding: 2px 0; }
.table-zwpp .info .text-block .row-name { font-size: 12px; font-weight: 600; color: #5c4621; margin-bottom: 4px; }
.table-zwpp .info .text-block .row-bz { display: inline-grid; grid-auto-columns: max-content; grid-auto-flow: column; justify-content: center; column-gap: 8px; row-gap: 2px; min-width: max-content; font-family: "STKaiti", "KaiTi", serif; font-size: 12px; }
.table-zwpp .info .text-block .row-bz .bz-label { display: inline-block; width: 56px; color: #8b6b3d; white-space: nowrap; text-align: right; }
.table-zwpp .info .text-block .row-bz.row-bz-sm { font-size: 10px; color: #8b6b3d; }
.table-zwpp .info .text-block .row-age { color: #8b6b3d; font-size: 10px; }
.table-zwpp .info .text-block .row-age em { font-style: normal; color: #b8482e; margin-left: 4px; }
.table-zwpp .info .text-block .row-pair { display: flex; justify-content: center; gap: 20px; }
.table-zwpp .info .text-block .row-pair span { white-space: nowrap; }
.table-zwpp .info .text-block .row-current { color: #b8482e; font-weight: 500; }

/* ===== 四化 label 18×18 圆角方块 ===== */
.label { display: inline-block; width: 14px; height: 14px; font-size: 10px; text-align: center; line-height: 14px; border-radius: 2px; color: #fff; }
.label-danger { background-color: #b8482e; }
.label-success { background-color: #6b8e3d; }
.label-primary { background-color: #8b6b3d; }
.label-warning { background-color: rgba(180, 110, 40, 1); }

/* ===== 大运/流年行（按八字 bazi-detail-container 风格重做） ===== */
.table-zwdy-wrap { margin-top: 12px; }
.table-zwdy-wrap .section-block { margin-bottom: 12px; border: 1px solid #f0f0f0; border-radius: 4px; overflow-x: auto; }
.table-zwdy { width: 100%; border-collapse: collapse; text-align: center; font-size: 12px; }
.table-zwdy td { padding: 6px 2px; vertical-align: middle; border-right: 1px solid #f5f5f5; min-width: 45px; color: #4a3820; }
.table-zwdy td:last-child { border-right: none; }
.table-zwdy .title-col { font-size: 13px; color: #888; width: 36px; min-width: 36px; font-weight: bold; background-color: transparent; border-right: 1px solid #eee; padding: 0 4px; }
.table-zwdy .title-col .sub-title { font-size: 11px; font-weight: normal; display: block; color: #aaa; margin-top: 4px; }
.table-zwdy .dyln { cursor: pointer; transition: background .2s; line-height: 1.3; }
.table-zwdy .dyln:hover { background-color: #faf6ee; }
.table-zwdy .dyln .year-info { color: #666; font-size: 11px; padding-bottom: 2px; }
.table-zwdy .dyln .char-pair { font-size: 13px; font-weight: 500; line-height: 1.3; color: #333; }
.table-zwdy .dyln.active { background-color: rgb(209 216 228) !important; color: #333; font-weight: bold; }
.table-zwdy .dyln.active .year-info { color: #333; font-weight: bold; }