/* ============================================================
   result.css - 八字排盘结果页样式（优化版）
   字体优化：正文使用系统黑体栈，大字使用粗衬线体
   表格优化：适配手机端横向滚动 + 响应式字号
   ============================================================ */

/* ---------- 全局字体优化（解决字体过细问题） ---------- */
:root {
    --font-sans: -apple-system, "PingFang SC", "Microsoft YaHei", "Noto Sans SC", "WenQuanYi Micro Hei", "Hiragino Sans GB", sans-serif;
    --font-serif: "Source Han Serif SC", "Noto Serif SC", "Songti SC", "STSong", "SimSun", serif;
}

/* 全局无衬线字体，开启抗锯齿，保证手机端清晰 */
body, .wrap, .result-area, .paper, .tab-btn, .info-item, .mingli-item, 
.analysis-item, .jieqi-detail-item, .dayun-info-item, .yueling-info,
.toggle-btn, .toggle-btn-wx, .btn-back, .loading-text, .error-text,
.bottom-bar, .chenggu-lines p, .chenggu-label, .mingli-sub, .mingli-nayin,
.analysis-label, .analysis-desc, .jieqi-detail-label, .jieqi-detail-value,
.info-label, .info-value, .dayun-info-label, .dayun-info-value,
.bazi-table .row-zizuo td, .bazi-table .row-xingyun td, 
.bazi-table .row-kongwang td, .bazi-table .row-nayin td,
.bazi-table th, .bazi-table .col-label, .bazi-table .row-zhuxing td,
.bazi-table td, .cg-item, .fx-item, .shensha-item {
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* 传统大字元素使用粗衬线，保证清晰有力 */
.bazi-table .gan-cell,
.bazi-table .zhi-cell,
.mingli-pillar,
.liunian-pillar,
.dayun-pillar,
.chenggu-pillar,
.chenggu-total-value,
.hero-name,
.paper-title-cn,
.yl-status-value,
.wsxqd-table tr:first-child td,
.wsxqd-table tr:first-child td.status-label,
.zodiac-placeholder,
.chenggu-title {
    font-family: var(--font-serif);
    font-weight: 700;
}

/* 标签、小标题增加字重，防止过细 */
.info-label, .mingli-name, .analysis-label, .jieqi-detail-label,
.dayun-info-label, .chenggu-label, .mingli-sub, .mingli-nayin,
.col-label, .bazi-table th, .dayun-list th, .xiaoyun-list th,
.wsxqd-table th, .wsxqd-table td:first-child, 
.wsxqd-table tr:first-child td.status-label {
    font-weight: 500;
}

/* ---------- 加载中 ---------- */
.loading-area {
    text-align: center;
    padding: 80px 20px;
}
.loading-spinner {
    width: 40px; height: 40px;
    border: 2px solid var(--line);
    border-top-color: var(--red);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin: 0 auto 20px;
}
@keyframes spin { to { transform: rotate(360deg); } }
.loading-text {
    font-size: 14px;
    color: var(--ink-soft);
    letter-spacing: 4px;
}

/* ---------- 错误区域 ---------- */
.error-area {
    text-align: center;
    padding: 80px 20px;
}
.error-icon {
    width: 48px; height: 48px;
    border: 2px solid var(--red);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: var(--red);
    font-weight: 700;
    margin-bottom: 16px;
}
.error-text {
    font-size: 14px;
    color: var(--ink-2);
    margin-bottom: 24px;
    line-height: 1.8;
    white-space: pre-line;
}
.btn-back {
    display: inline-block;
    padding: 12px 32px;
    background: var(--ink);
    color: var(--paper);
    text-decoration: none;
    font-size: 14px;
    letter-spacing: 4px;
    transition: background 0.2s;
}
.btn-back:hover { background: var(--red); }

/* ---------- 标签导航 ---------- */
.tab-nav {
    display: flex;
    border-bottom: 2px solid var(--ink);
    margin-bottom: 20px;
    background: var(--paper-3);
    position: sticky;
    top: 0;
    z-index: 10;
}
.tab-btn {
    flex: 1;
    padding: 14px 8px;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    color: var(--ink-soft);
    font-family: inherit;
    font-size: 14px;
    letter-spacing: 2px;
    cursor: pointer;
    transition: all 0.2s;
    font-weight: 600;
}
.tab-btn.active {
    color: var(--red);
    border-bottom-color: var(--red);
}
.tab-btn:hover:not(.active) {
    color: var(--ink);
}

/* ---------- 标签面板 ---------- */
.tab-panel {
    display: none;
}
.tab-panel.active {
    display: block;
}

/* ---------- 结果纸张 ---------- */
.result-paper {
    margin-bottom: 20px;
    padding: 24px 16px 20px;
}
.result-paper .paper-header {
    margin-bottom: 18px;
}

/* ---------- 信息网格（基本信息） ---------- */
.info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 12px;
}
.info-item {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 13px;
    line-height: 1.8;
}
.info-item.full {
    grid-column: 1 / -1;
}
.info-label {
    color: var(--ink-soft);
    font-size: 11px;
    letter-spacing: 2px;
    white-space: nowrap;
    flex-shrink: 0;
}
.info-value {
    color: var(--ink);
    font-weight: 600;
}
.info-value.red {
    color: var(--red);
}

/* 基本信息颜色简化 */
.name-color { color: var(--red) !important; font-weight: 700; }
.sex-color { color: var(--ink) !important; }
.lunar-color { color: var(--ink-2) !important; }
.ry-color { color: var(--ink) !important; font-weight: 600; }
.region-color { color: var(--ink-2) !important; }

/* 阳历阴历同一行 */
.date-line {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 8px 12px;
    background: var(--paper);
    border: 1px solid var(--line-soft);
}
.date-label {
    font-size: 11px;
    color: var(--ink-soft);
    letter-spacing: 2px;
}
.date-value {
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
    font-family: var(--font-serif);
}
.date-divider {
    color: var(--line);
    margin: 0 4px;
}

/* ---------- 命理参数地支五行颜色 ---------- */
.mu-color { color: #2e7d32 !important; }
.huo-color { color: #c62828 !important; }
.tu-color { color: #ef6c00 !important; }
.jin-color { color: #616161 !important; }
.shui-color { color: #1565c0 !important; }

/* ---------- 五行/藏干切换按钮 ---------- */
.wuxing-toggle {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--line-soft);
}
.toggle-btn-wx {
    padding: 6px 16px;
    background: transparent;
    border: 1px solid var(--line);
    font-size: 13px;
    color: var(--ink-soft);
    cursor: pointer;
    font-family: inherit;
    letter-spacing: 2px;
    border-radius: 4px;
    transition: all 0.2s;
}
.toggle-btn-wx.active {
    background: var(--ink);
    color: var(--paper);
    border-color: var(--ink);
}
.toggle-btn-wx:hover:not(.active) {
    border-color: var(--red);
    color: var(--red);
}

/* ---------- 五行图例（饼图下方） ---------- */
.wuxing-legend-line {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 24px;
    padding: 12px 0;
}
.wuxing-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 600;
    font-family: var(--font-serif);
    white-space: nowrap;
}
.wuxing-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}
.wuxing-num {
    font-size: 16px;
    font-weight: 700;
    margin: 0 2px;
}

/* ---------- 节气信息 ---------- */
.jieqi-info {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.jieqi-main {
    font-size: 14px;
    color: var(--ink);
    line-height: 1.8;
    padding: 12px 14px;
    background: rgba(179, 48, 42, 0.04);
    border-left: 3px solid var(--red);
}
.jieqi-detail {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.jieqi-detail-item {
    padding: 10px 12px;
    background: var(--paper);
    border: 1px solid var(--line-soft);
    font-size: 12px;
}
.jieqi-detail-label {
    color: var(--ink-soft);
    font-size: 11px;
    letter-spacing: 1px;
    margin-bottom: 4px;
}
.jieqi-detail-value {
    color: var(--ink);
    font-weight: 600;
}

/* ---------- 命理参数网格（3列） ---------- */
.mingli-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.mingli-item {
    padding: 16px 10px;
    background: var(--paper);
    border: 1px solid var(--line-soft);
    text-align: center;
    transition: border-color 0.2s;
}
.mingli-item:hover {
    border-color: var(--red);
}
.mingli-name {
    font-size: 11px;
    color: var(--ink-soft);
    letter-spacing: 2px;
    margin-bottom: 8px;
}
.mingli-pillar {
    font-size: 22px;
    font-weight: 700;
    font-family: var(--font-serif);
    color: var(--ink);
    margin-bottom: 4px;
}
.mingli-sub {
    font-size: 11px;
    color: var(--ink-soft);
    line-height: 1.5;
}
.mingli-nayin {
    font-size: 11px;
    color: var(--ink-mute);
    margin-top: 4px;
}

/* ---------- 智能分析（横向卡片） ---------- */
.analysis-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.analysis-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px 12px;
    background: var(--paper);
    border: 1px solid var(--line-soft);
    border-left: 3px solid var(--red);
}
.analysis-label {
    font-size: 11px;
    color: var(--ink-soft);
    letter-spacing: 2px;
}
.analysis-value {
    font-size: 15px;
    font-weight: 700;
    color: var(--ink);
}
.analysis-desc {
    font-size: 12px;
    color: var(--ink-2);
    line-height: 1.6;
}

/* ---------- 五行图表 ---------- */
.chart-wrap {
    max-width: 260px;
    margin: 0 auto;
    padding: 10px;
}

/* ---------- 旺相休囚死 ---------- */
.yueling-info {
    text-align: center;
    padding: 14px;
    margin-bottom: 16px;
    background: rgba(179, 48, 42, 0.04);
    border: 1px solid var(--line);
    font-size: 14px;
    color: var(--ink-2);
}
.yueling-info strong {
    color: var(--red);
    font-family: var(--font-serif);
    font-size: 20px;
    margin: 0 4px;
}

/* ---------- 月令状态（表格上方） ---------- */
.yue-ling-status {
    margin-bottom: 16px;
    border: 1px solid var(--line);
    background: var(--paper);
}
.yl-status-label {
    padding: 10px 14px;
    font-size: 12px;
    color: var(--ink-soft);
    letter-spacing: 2px;
    background: var(--paper-2);
    border-bottom: 1px solid var(--line-soft);
    font-weight: 600;
}
.yl-status-row {
    display: flex;
}
.yl-status-cell {
    flex: 1;
    text-align: center;
    padding: 14px 4px;
    border-right: 1px solid var(--line-soft);
}
.yl-status-cell:last-child {
    border-right: none;
}
.yl-status-name {
    display: block;
    font-size: 12px;
    color: var(--ink-soft);
    margin-bottom: 4px;
    letter-spacing: 2px;
}
.yl-status-value {
    display: block;
    font-size: 20px;
    font-weight: 700;
    font-family: var(--font-serif);
}
.yue-ling-status .wx-mu-cell { color: #2e7d32; background: rgba(76, 175, 80, 0.08); }
.yue-ling-status .wx-huo-cell { color: #c62828; background: rgba(244, 67, 54, 0.08); }
.yue-ling-status .wx-tu-cell { color: #ef6c00; background: rgba(255, 152, 0, 0.08); }
.yue-ling-status .wx-jin-cell { color: #f57f17; background: rgba(255, 193, 7, 0.08); }
.yue-ling-status .wx-shui-cell { color: #1565c0; background: rgba(33, 150, 243, 0.08); }

/* ---------- 旺相休囚死表格 ---------- */
.wsxqd-table {
    width: 100%;
    overflow-x: auto;
}
.wsxqd-table table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}
.wsxqd-table th,
.wsxqd-table td {
    text-align: center;
    padding: 14px 8px;
    border: 1px solid var(--line);
    font-size: 14px;
    vertical-align: middle;
}
.wsxqd-table th {
    background: var(--paper-2);
    font-size: 13px;
    color: var(--ink-soft);
    letter-spacing: 2px;
    font-weight: 400;
}
.wsxqd-table th:first-child,
.wsxqd-table td:first-child {
    width: 80px;
    background: var(--paper-2);
    font-weight: 600;
    color: var(--ink-soft);
    font-size: 12px;
    letter-spacing: 1px;
}
.wsxqd-table tr:first-child td {
    font-size: 18px;
    font-weight: 700;
    font-family: var(--font-serif);
    padding: 16px 8px;
}
.wsxqd-table tr:first-child td.status-label {
    font-size: 12px;
    font-weight: 600;
    font-family: inherit;
    background: var(--paper-2);
    letter-spacing: 1px;
}
.wsxqd-table tr:last-child td {
    font-size: 12px;
    color: var(--ink-soft);
}
.wsxqd-table .wx-mu-cell { color: #2e7d32; background: rgba(76, 175, 80, 0.08); }
.wsxqd-table .wx-huo-cell { color: #c62828; background: rgba(244, 67, 54, 0.08); }
.wsxqd-table .wx-tu-cell { color: #ef6c00; background: rgba(255, 152, 0, 0.08); }
.wsxqd-table .wx-jin-cell { color: #616161; background: rgba(158, 158, 158, 0.1); }
.wsxqd-table .wx-shui-cell { color: #1565c0; background: rgba(33, 150, 243, 0.08); }

/* ============================================================
   八字四柱表格（基本排盘）—— 新布局样式 + 手机端优化
   ============================================================ */
.bazi-table {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-collapse: collapse;
    font-family: var(--font-sans);
}
.bazi-table table {
    width: 100%;
    min-width: 320px;
    border-collapse: collapse;
}
.bazi-table th,
.bazi-table td {
    text-align: center;
    padding: 10px 4px;
    border: 1px solid var(--line);
    font-size: 13px;
    font-family: var(--font-sans);
}
.bazi-table th {
    background: var(--paper-2);
    font-size: 11px;
    color: var(--ink-soft);
    letter-spacing: 2px;
    font-weight: 500;
    font-family: var(--font-sans);
}
.bazi-table .col-label {
    background: var(--paper-2);
    font-size: 11px;
    color: var(--ink-soft);
    letter-spacing: 2px;
    width: 60px;
    font-weight: 500;
    font-family: var(--font-sans);
}

/* 主星行 */
.bazi-table .row-zhuxing td {
    font-size: 12px;
    color: var(--ink-soft);
    padding: 8px 4px;
    letter-spacing: 1px;
    font-weight: 500;
}

/* 天干地支大字 */
.bazi-table .gan-cell,
.bazi-table .zhi-cell {
    font-size: 22px;
    font-weight: 700;
    font-family: var(--font-serif);
    padding: 14px 4px;
}

/* 五行颜色 */
.wx-mu { color: #2e7d32; }
.wx-huo { color: #c62828; }
.wx-tu { color: #ef6c00; }
.wx-jin { color: #616161; }
.wx-shui { color: #1565c0; }

/* 五行图片图标（天干/地支） */
.wx-tag-img {
    width: 28px;
    height: 28px;
    margin-left: 4px;
    vertical-align: middle;
    display: inline-block;
}
/* 藏干 / 副星 垂直堆叠 */
.cg-stack,
.fuxing-stack {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
    justify-content: center;
    padding: 4px 0;
}
.cg-item,
.fx-item {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 14px;
    line-height: 1.4;
    font-family: var(--font-sans);
}

/* 自坐、星运、空亡、纳音 */
.bazi-table .row-zizuo td,
.bazi-table .row-xingyun td,
.bazi-table .row-kongwang td {
    font-size: 13px;
    padding: 10px 4px;
    color: var(--ink-2);
    font-family: var(--font-sans);
}
.bazi-table .row-nayin td {
    font-size: 12px;
    color: var(--ink-soft);
    padding: 8px 4px;
    font-family: var(--font-sans);
}

/* 神煞垂直堆叠 */
.shensha-stack {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
    padding: 4px 0;
}
.shensha-item {
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 2px;
    line-height: 1.4;
    white-space: nowrap;
    letter-spacing: 0.5px;
    font-family: var(--font-sans);
    font-weight: 500;
}

/* 神煞吉凶色 */
/* 大吉 —— 琥珀金（与凶煞红色明显区分） */
/* ---------- 神煞垂直堆叠 ---------- */
/* ---------- 神煞垂直堆叠 ---------- */
.shensha-stack {
    display: flex;
    flex-direction: column;
    gap: 5px;
    align-items: center;
    padding: 4px 0;
}
.shensha-item {
    font-size: 11px;
    padding: 4px 10px;
    border-radius: 4px;
    line-height: 1.4;
    white-space: nowrap;
    letter-spacing: 0.5px;
    font-family: var(--font-sans);
    font-weight: 700;          /* ← 加粗 */
    display: inline-block;
}

/* 大吉 —— 浅绿底 + 深绿粗字 */
.ss-da-ji {
    color: #155724;
    background: #d4edda;
    border: 1px solid #c3e6cb;
}

/* 吉 —— 浅蓝底 + 深蓝粗字 */
.ss-ji {
    color: #004085;
    background: #cce5ff;
    border: 1px solid #b8daff;
}

/* 凶 —— 浅红底 + 深红粗字 */
.ss-xiong {
    color: #721c24;
    background: #f8d7da;
    border: 1px solid #f5c6cb;
}

/* 中性 —— 浅灰底 + 深灰粗字 */
.ss-zhong {
    color: #383d41;
    background: #e2e3e5;
    border: 1px solid #d6d8db;
}

/* 保留旧样式兼容（防止其他页面受影响） */
.bazi-table .na-yin { font-size: 11px; color: var(--ink-soft); }
.bazi-table .shen-sha { font-size: 10px; color: var(--red); line-height: 1.6; }
.bazi-table .kong-wang { font-size: 11px; color: var(--ink-mute); }
.bazi-table .cg-cell { font-size: 11px; color: var(--ink-2); line-height: 1.7; }
.bazi-table .cg-god { font-size: 10px; color: var(--ink-soft); }
.bazi-table .cs-cell { font-size: 11px; color: var(--ink-2); }
.bazi-table .xy-cell { font-size: 11px; color: var(--ink-mute); }
.bazi-table .shishen-tg { font-size: 12px; color: var(--ink-2); font-weight: 600; }
.bazi-table .day-gan { color: var(--red); }
.bazi-table .day-zhi { color: var(--red); }

/* ---------- 大运信息 ---------- */
.dayun-info {
    margin-bottom: 16px;
    padding: 12px 14px;
    background: rgba(179, 48, 42, 0.04);
    border-left: 3px solid var(--red);
}
.dayun-info-item {
    display: flex;
    gap: 8px;
    font-size: 13px;
    line-height: 2;
}
.dayun-info-label {
    color: var(--ink-soft);
    font-size: 11px;
    letter-spacing: 2px;
    white-space: nowrap;
}
.dayun-info-value {
    color: var(--ink);
    font-weight: 600;
}

/* ---------- 大运卡片网格 ---------- */
.dayun-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
}

.dayun-card {
    text-align: center;
    padding: 14px 8px;
    background: var(--paper);
    border: 1px solid var(--line-soft);
    border-radius: 6px;
    transition: all 0.2s;
    position: relative;
}

.dayun-card:hover {
    border-color: var(--red);
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.dayun-card.current {
    border: 2px solid var(--red);
    background: rgba(179, 48, 42, 0.04);
}

.dayun-card.current .dayun-card-pillar {
    color: var(--red);
}

/* 十神（天干/地支） */
.dayun-card-shishen {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 4px;
    font-size: 12px;
    color: var(--ink-soft);
    letter-spacing: 1px;
}

.ds-shishen {
    font-weight: 500;
    min-width: 24px;
    text-align: center;
}

/* 大运干支 */
.dayun-card-pillar {
    font-size: 24px;
    font-weight: 700;
    font-family: var(--font-serif);
    color: var(--ink);
    margin-bottom: 8px;
    letter-spacing: 4px;
}

/* 年龄 / 年份 */
.dayun-card-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 11px;
    color: var(--ink-soft);
    margin-bottom: 8px;
    line-height: 1.5;
}

.dayun-card-age {
    font-weight: 500;
}

.dayun-card-year {
    font-size: 10px;
    color: var(--ink-mute);
}

/* 神煞 */
.dayun-card-shensha {
    font-size: 10px;
    color: var(--red);
    line-height: 1.5;
    margin-bottom: 8px;
    word-break: keep-all;
}

/* 流年展开按钮 */
.dayun-toggle {
    width: 100%;
    justify-content: center;
    padding: 4px 0;
    font-size: 11px;
    border: 1px solid var(--line-soft);
    background: transparent;
    color: var(--ink-soft);
    cursor: pointer;
    font-family: inherit;
    letter-spacing: 1px;
    border-radius: 4px;
    transition: all 0.2s;
}

.dayun-toggle:hover {
    border-color: var(--red);
    color: var(--red);
}

/* ---------- 流年展开面板 ---------- */
.liunian-panel {
    grid-column: 1 / -1; /* 占满整行 */
    background: var(--paper-3);
    border: 1px solid var(--line-soft);
    border-radius: 6px;
    margin-top: 4px;
}

.liunian-panel .liunian-inner {
    padding: 12px;
}

.liunian-panel .liunian-grid {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 6px;
}

/* ---------- 响应式（每行数量自适应） ---------- */
@media (max-width: 768px) {
    .dayun-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }
    .dayun-card {
        padding: 12px 6px;
    }
    .dayun-card-pillar {
        font-size: 20px;
        letter-spacing: 2px;
    }
    .dayun-card-shishen {
        gap: 16px;
    }
    .liunian-panel .liunian-grid {
        grid-template-columns: repeat(5, 1fr);
    }
}

@media (max-width: 480px) {
    .dayun-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
    .dayun-card {
        padding: 10px 6px;
    }
    .dayun-card-pillar {
        font-size: 18px;
        letter-spacing: 2px;
    }
    .dayun-card-shishen {
        gap: 12px;
        font-size: 11px;
    }
    .dayun-card-meta {
        font-size: 10px;
    }
    .liunian-panel .liunian-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 4px;
    }
    .liunian-panel .liunian-inner {
        padding: 8px;
    }
}

/* ---------- 保留旧样式兼容（防止其他页面受影响） ---------- */
.dayun-list {
    overflow-x: auto;
}
.dayun-list table {
    width: 100%;
    min-width: 500px;
    border-collapse: collapse;
    font-size: 12px;
}
.dayun-list th,
.dayun-list td {
    text-align: center;
    padding: 8px 6px;
    border: 1px solid var(--line);
}
.dayun-list th {
    background: var(--paper-2);
    font-size: 11px;
    color: var(--ink-soft);
    letter-spacing: 1px;
    font-weight: 400;
    white-space: nowrap;
}
.dayun-list .dayun-pillar {
    font-size: 16px;
    font-weight: 700;
    font-family: var(--font-serif);
}
.dayun-list .dayun-age {
    font-size: 11px;
    color: var(--ink-soft);
}
.dayun-list .dayun-shishen {
    font-size: 11px;
    color: var(--ink-2);
}
.dayun-list .dayun-cs {
    font-size: 11px;
    color: var(--ink-mute);
}
.dayun-list .dayun-shensha {
    font-size: 10px;
    color: var(--red);
    max-width: 80px;
}
.dayun-list .current-row {
    background: rgba(179, 48, 42, 0.06);
}
.dayun-list .current-row .dayun-pillar {
    color: var(--red);
}

/* ---------- 袁天罡称骨 ---------- */
#chengguSection { display: none; }
.chenggu-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 20px;
}
.chenggu-item {
    text-align: center;
    padding: 16px 8px;
    background: var(--paper);
    border: 1px solid var(--line-soft);
    transition: border-color 0.2s;
}
.chenggu-item:hover {
    border-color: var(--red);
}
.chenggu-label {
    font-size: 11px;
    color: var(--ink-soft);
    letter-spacing: 2px;
    margin-bottom: 8px;
}
.chenggu-pillar {
    font-size: 16px;
    font-weight: 700;
    font-family: var(--font-serif);
    color: var(--ink);
    margin-bottom: 6px;
}
.chenggu-weight {
    font-size: 14px;
    color: var(--red);
    font-weight: 600;
}
.chenggu-total {
    text-align: center;
    padding: 20px;
    margin-bottom: 20px;
    background: rgba(179, 48, 42, 0.04);
    border: 1px solid var(--line);
}
.chenggu-total-label {
    font-size: 12px;
    color: var(--ink-soft);
    letter-spacing: 4px;
    margin-bottom: 8px;
}
.chenggu-total-value {
    font-size: 28px;
    font-weight: 700;
    font-family: var(--font-serif);
    color: var(--red);
}
.chenggu-poem {
    padding: 16px;
    background: var(--paper);
    border: 1px solid var(--line-soft);
    line-height: 2;
}
.chenggu-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--ink);
    text-align: center;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line-soft);
    font-family: var(--font-serif);
}
.chenggu-lines p {
    font-size: 14px;
    color: var(--ink-2);
    margin: 8px 0;
    text-align: center;
    font-family: var(--font-serif);
}

/* ---------- 基本排盘头部（左图 | 中信息 | 右眼睛） ---------- */
.bazi-hero {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 0 16px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--line-soft);
}
.bazi-hero-left {
    flex-shrink: 0;
}
.bazi-hero-avatar {
    width: 64px;
    height: 64px;
}
.zodiac-img {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--line);
    background: var(--paper);
    display: block;
}
.zodiac-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 700;
    font-family: var(--font-serif);
    color: var(--red);
    border: 2px solid var(--line);
}
.bazi-hero-center {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.hero-line {
    display: flex;
    align-items: baseline;
    gap: 4px;
    font-size: 13px;
    color: var(--ink-2);
    line-height: 1.6;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.hero-prefix {
    color: var(--ink-soft);
    font-size: 12px;
    letter-spacing: 1px;
    flex-shrink: 0;
}
.hero-name .hero-prefix {
    font-size: 13px;
}
.hero-value,
.hero-nl-value {
    color: var(--ink-2);
}
.hero-name .hero-value {
    color: var(--ink);
    font-weight: 600;
}
.hero-name {
    font-size: 16px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: 2px;
}
.hero-gender {
    display: inline-block;
    margin-left: 8px;
    padding: 1px 6px;
    background: var(--ink);
    color: var(--paper);
    font-size: 11px;
    letter-spacing: 2px;
    border-radius: 2px;
}
.bazi-hero-right {
    flex-shrink: 0;
    align-self: flex-start;
    padding-top: 4px;
}

.eye-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
    padding: 0;
}
.eye-btn:hover {
    opacity: 0.7;
}
.eye-icon {
    width: 24px;
    height: 24px;
    display: block;
    pointer-events: none;
}

.eye-btn.eye-closed {
    opacity: 0.5;
}
/* ==================== 天干地支留意（单行横向） ==================== */
.bazi-relation {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 2px solid var(--line);
}

.relation-section {
    margin-bottom: 16px;
}
.relation-section:last-child {
    margin-bottom: 0;
}

.relation-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-soft);
    letter-spacing: 4px;
    margin-bottom: 10px;
    padding-left: 10px;
    border-left: 3px solid var(--red);
}

.relation-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* 单行关系项：横向 flex，左右紧凑，中间固定，右侧备注自适应 */
.relation-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 6px;
    border: 1px solid transparent;
    background: var(--paper);
    font-size: 14px;
    line-height: 1.4;
}

/* 左右两侧干支：宽度自适应内容，不拉伸 */
.rel-side {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 15px;
    font-weight: 700;
    font-family: var(--font-serif);
    color: var(--ink);
    white-space: nowrap;
    flex: 0 0 auto;
}
.rel-side small {
    font-size: 10px;
    color: var(--ink-soft);
    font-weight: 400;
    font-family: var(--font-sans);
    letter-spacing: 0.5px;
}

/* 中间关系标签（合/冲/克/害/破/刑） */
.rel-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 700;
    font-family: var(--font-serif);
    letter-spacing: 2px;
    color: #fff;
    flex-shrink: 0;
    min-width: 32px;
    text-align: center;
    box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}

/* 末尾备注（合化/局名）：占据右侧所有剩余空间 */
.rel-note {
    font-size: 14px;
    color: var(--ink-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: right;
    font-family: var(--font-sans);
    font-weight: 500;
    flex: 1;
    min-width: 0;
}

/* 多支组合（三合/三刑） */
.rel-parts {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
    flex-wrap: nowrap;
    overflow: hidden;
}
.rel-part {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px 6px;
    background: var(--paper-2);
    border-radius: 3px;
    border: 1px solid var(--line-soft);
    font-size: 14px;
    font-weight: 700;
    font-family: var(--font-serif);
    color: var(--ink);
    white-space: nowrap;
}
.rel-part small {
    font-size: 10px;
    color: var(--ink-soft);
    font-weight: 400;
    font-family: var(--font-sans);
}
.rel-connector {
    font-size: 12px;
    color: var(--ink-soft);
    font-weight: 600;
    flex-shrink: 0;
}

/* 各类型颜色 */
.rel-he   { background: rgba(46, 125, 50, 0.06);   border-color: rgba(46, 125, 50, 0.2); }
.rel-he   .rel-badge { background: #2e7d32; }

.rel-chong{ background: rgba(198, 40, 40, 0.06);   border-color: rgba(198, 40, 40, 0.2); }
.rel-chong .rel-badge { background: #c62828; }

.rel-ke   { background: rgba(239, 108, 0, 0.06);  border-color: rgba(239, 108, 0, 0.2); }
.rel-ke   .rel-badge { background: #ef6c00; }

.rel-hai  { background: rgba(106, 27, 154, 0.06);  border-color: rgba(106, 27, 154, 0.2); }
.rel-hai  .rel-badge { background: #6a1b9a; }

.rel-po   { background: rgba(121, 85, 72, 0.06);   border-color: rgba(121, 85, 72, 0.2); }
.rel-po   .rel-badge { background: #795548; }

.rel-xing { background: rgba(183, 28, 28, 0.06);   border-color: rgba(183, 28, 28, 0.2); }
.rel-xing .rel-badge { background: #b71c1c; }

.rel-zhong{ background: var(--paper-2);             border-color: var(--line-soft); }
.rel-zhong .rel-badge { background: var(--ink-soft); }

.relation-empty {
    text-align: center;
    padding: 20px;
    font-size: 13px;
    color: var(--ink-soft);
    background: var(--paper-2);
    border: 1px solid var(--line-soft);
    border-radius: 6px;
}

/* 手机端适配 */
@media (max-width: 480px) {
    .bazi-relation {
        margin-top: 16px;
        padding-top: 16px;
    }
    .relation-item {
        padding: 7px 10px;
        gap: 6px;
    }
    .rel-side {
        font-size: 14px;
        gap: 2px;
    }
    .rel-side small {
        font-size: 9px;
    }
    .rel-badge {
        font-size: 11px;
        padding: 2px 6px;
        letter-spacing: 1px;
        min-width: 28px;
    }
    .rel-note {
        font-size: 10px;
    }
    .rel-part {
        font-size: 13px;
        padding: 1px 4px;
    }
    .rel-connector {
        font-size: 11px;
    }
    .relation-title {
        font-size: 12px;
        letter-spacing: 3px;
    }
}

@media (min-width: 640px) {
    .bazi-hero { gap: 20px; padding: 24px 0 20px; }
    .zodiac-img, .bazi-hero-avatar { width: 80px; height: 80px; }
    .zodiac-placeholder { font-size: 30px; }
    .hero-name { font-size: 18px; }
    .hero-line { font-size: 14px; }
    .eye-btn { width: 40px; height: 40px; }
}



/* ==================== 天干地支关系连线图 ==================== */
.bazi-relation-graph {
    margin-top: 24px;
    padding: 20px 12px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 8px;
}

.relation-graph {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* 天干连线区、地支连线区 */
.rg-gan-area,
.rg-zhi-area {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* 关系行：4列网格 */
.rg-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    align-items: center;
    height: 36px;
    position: relative;
}

/* 节点（带圆圈，匹配截图） */
.rg-node {
    justify-self: center;
    font-size: 18px;
    font-weight: 700;
    font-family: var(--font-serif);
    z-index: 2;
    background: var(--paper);
    width: 32px;
    height: 32px;
    border: 1px solid var(--ink);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

/* 线容器 */
.rg-line-cell {
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
}

.rg-line-cell::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 1px;
    background: var(--ink);
    transform: translateY(-50%);
    z-index: 1;
}

/* 关系标签：在线中间，带颜色框 */
.rg-label {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    font-family: var(--font-sans);
    letter-spacing: 1px;
    padding: 2px 8px;
    border-radius: 4px;
    white-space: nowrap;
    z-index: 3;
    position: relative;
    background: var(--paper);
    border: 1px solid var(--line);
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

/* 天干标签在线上方 */
.rg-gan-area .rg-label {
    top: 0;
}

/* 地支标签在线下方 */
.rg-zhi-area .rg-label {
    bottom: 0;
}

/* 四柱区 */
.rg-pillars {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    padding: 16px 0;
    margin: 4px 0;
    border-top: 2px solid var(--line);
    border-bottom: 2px solid var(--line);
}

.rg-pillar {
    text-align: center;
}

.rg-pillar-label {
    font-size: 12px;
    color: var(--ink-soft);
    letter-spacing: 2px;
    margin-bottom: 6px;
    font-weight: 500;
}

.rg-pillar-gan,
.rg-pillar-zhi {
    font-size: 26px;
    font-weight: 700;
    font-family: var(--font-serif);
    line-height: 1.4;
}

/* 关系图五行颜色 */
.rg-node.wx-mu,
.rg-pillar-gan.wx-mu,
.rg-pillar-zhi.wx-mu { color: #2e7d32; }
.rg-node.wx-huo,
.rg-pillar-gan.wx-huo,
.rg-pillar-zhi.wx-huo { color: #c62828; }
.rg-node.wx-tu,
.rg-pillar-gan.wx-tu,
.rg-pillar-zhi.wx-tu { color: #ef6c00; }
.rg-node.wx-jin,
.rg-pillar-gan.wx-jin,
.rg-pillar-zhi.wx-jin { color: #616161; }
.rg-node.wx-shui,
.rg-pillar-gan.wx-shui,
.rg-pillar-zhi.wx-shui { color: #1565c0; }

/* 手机端适配 */
@media (max-width: 480px) {
    .bazi-relation-graph {
        padding: 16px 8px;
        margin-top: 16px;
    }
    .rg-node {
        font-size: 16px;
        width: 28px;
        height: 28px;
    }
    .rg-pillar-gan,
    .rg-pillar-zhi {
        font-size: 22px;
    }
    .rg-label {
        font-size: 11px;
        padding: 0 4px;
    }
    .rg-row {
        height: 32px;
    }
    .rg-pillar-label {
        font-size: 11px;
    }
}

/* ---------- 大屏响应式 ---------- */
@media (min-width: 640px) {
    .result-paper { padding: 32px 28px 28px; }
    .info-grid { grid-template-columns: repeat(3, 1fr); }
    .mingli-grid { grid-template-columns: repeat(3, 1fr); }
    .analysis-grid { grid-template-columns: repeat(2, 1fr); }
    .jieqi-detail { grid-template-columns: repeat(2, 1fr); }
    .bazi-table th, .bazi-table td { 
        padding: 12px 8px; 
        font-size: 14px; 
        font-family: var(--font-sans);
    }
    .bazi-table .gan-cell, .bazi-table .zhi-cell { 
        font-size: 26px; 
        font-family: var(--font-serif);
    }
    .dayun-list table { min-width: 600px; }
    .liunian-grid { grid-template-columns: repeat(10, 1fr); }
    .chart-wrap { max-width: 300px; }
    .tab-btn { font-size: 16px; padding: 16px; }
    .yl-status-value { font-size: 24px; }
    .wsxqd-table th,
    .wsxqd-table td { padding: 16px 12px; }
    .wsxqd-table tr:first-child td { font-size: 22px; padding: 18px 12px; }
    .wuxing-toggle { gap: 16px; }
    .toggle-btn-wx { padding: 8px 20px; font-size: 14px; }
    .wuxing-legend-line { gap: 32px; }
    .wuxing-legend-item { font-size: 15px; }
    .wuxing-num { font-size: 18px; }
    .chenggu-item { padding: 20px 12px; }
    .chenggu-pillar { font-size: 18px; }
    .chenggu-total-value { font-size: 32px; }
    .chenggu-lines p { font-size: 15px; }
    .bazi-table .row-zhuxing td { 
        font-size: 13px; 
        padding: 10px 8px; 
        font-weight: 500;
    }
    .cg-item, .fx-item { 
        font-size: 15px; 
        font-family: var(--font-sans);
    }
    .shensha-item { 
        font-size: 12px; 
        padding: 3px 8px; 
        font-family: var(--font-sans);
        font-weight: 500;
    }
}

/* ---------- 手机端表格适配（核心修改） ---------- */
@media (max-width: 480px) {
    .chenggu-grid { grid-template-columns: repeat(2, 1fr); }
    
    /* 八字表格手机端适配 */
    .bazi-table {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .bazi-table table {
        min-width: 340px;
    }
    .bazi-table th,
    .bazi-table td {
        padding: 5px 2px;
        font-size: 11px;
    }
    .bazi-table .col-label {
        width: 42px;
        font-size: 10px;
        letter-spacing: 0;
        padding: 5px 1px;
    }
    .bazi-table .gan-cell,
    .bazi-table .zhi-cell {
        font-size: 18px;
        padding: 8px 2px;
    }
    .bazi-table .row-zhuxing td {
        font-size: 10px;
        padding: 5px 2px;
    }
    .wx-tag-img {
        width: 20px;
        height: 20px;
        margin-left: 2px;
    }
    .cg-item, .fx-item {
        font-size: 11px;
        gap: 2px;
    }
    .shensha-item {
        font-size: 9px;
        padding: 1px 3px;
        letter-spacing: 0;
    }
    .cg-stack, .fuxing-stack, .shensha-stack {
        gap: 2px;
        padding: 2px 0;
    }
    .bazi-table .row-zizuo td,
    .bazi-table .row-xingyun td,
    .bazi-table .row-kongwang td,
    .bazi-table .row-nayin td {
        font-size: 11px;
        padding: 6px 2px;
    }
}


/* 关系线轨道基础样式 */
.rg-line-track {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    height: 1px;
    background: var(--line);
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* 合（天干五合 / 地支六合） */
.rg-line-track.he .rg-label {
    color: #155724;
    background: #d4edda;
    border-color: #c3e6cb;
}

/* 合化 */
.rg-line-track.he-hua .rg-label {
    color: #155724;
    background: #c3e6cb;
    border-color: #2e7d32;
}

/* 暗合 */
.rg-line-track.an-he .rg-label {
    color: #0c5460;
    background: #d1ecf1;
    border-color: #bee5eb;
}

/* 拱合 */
.rg-line-track.gong-he .rg-label {
    color: #004085;
    background: #cce5ff;
    border-color: #b8daff;
}

/* 半合/暗三合 */
.rg-line-track.ban-he .rg-label {
    color: #155724;
    background: #c3e6cb;
    border-color: #2e7d32;
}

/* 冲 */
.rg-line-track.chong .rg-label {
    color: #721c24;
    background: #f8d7da;
    border-color: #f5c6cb;
}

/* 刑 */
.rg-line-track.xing .rg-label {
    color: #383d41;
    background: #e2e3e5;
    border-color: #d6d8db;
}

/* 害 */
.rg-line-track.hai .rg-label {
    color: #6a1b9a;
    background: #f3e5f5;
    border-color: #e1bee7;
}

/* 破 */
.rg-line-track.po .rg-label {
    color: #795548;
    background: #efebe9;
    border-color: #d7ccc8;
}

/* 克 */
.rg-line-track.ke .rg-label {
    color: #ffffff;
    background: #fb0648;
    border-color: #ffeaa7;
}

/* ==================== 关系图标题 ==================== */
.bazi-relation-graph-wrap {
    margin-top: 24px;
}

.relation-graph-header {
    text-align: center;
    padding: 16px 12px 12px;
    margin-bottom: 0;
    border-top: 2px solid var(--line);
    border-left: 1px solid var(--line);
    border-right: 1px solid var(--line);
    border-radius: 8px 8px 0 0;
    background: var(--paper-2);
}

.relation-graph-title {
    font-size: 16px;
    font-weight: 700;
    font-family: var(--font-serif);
    color: var(--ink);
    letter-spacing: 6px;
    margin-bottom: 6px;
}

.relation-graph-subtitle {
    font-size: 11px;
    color: var(--ink-soft);
    letter-spacing: 2px;
    font-weight: 400;
}

/* 调整关系图容器顶部圆角，与标题衔接 */
.bazi-relation-graph {
    margin-top: 0;
    padding: 20px 12px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-top: none;
    border-radius: 0 0 8px 8px;
}

/* 手机端适配 */
@media (max-width: 480px) {
    .bazi-relation-graph-wrap {
        margin-top: 16px;
    }
    .relation-graph-header {
        padding: 12px 8px 10px;
    }
    .relation-graph-title {
        font-size: 14px;
        letter-spacing: 4px;
    }
    .relation-graph-subtitle {
        font-size: 10px;
        letter-spacing: 1px;
    }
    .bazi-relation-graph {
        padding: 16px 8px;
    }
}

/* ==================== 大运·小运·流年·流月 统一卡片样式 ==================== */

/* ---------- 区域标题 ---------- */
.dayun-section-header,
.liunian-section-header,
.liuyue-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    padding: 0 4px;
}

.section-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: 2px;
    margin: 0;
    font-family: var(--font-serif);
}

.section-icon {
    color: var(--red);
    margin-right: 4px;
}

.section-subtitle {
    font-size: 12px;
    color: var(--ink-soft);
    font-weight: 500;
}

/* ---------- 运势卡片网格（大运+小运）每行6个 ---------- */
.yun-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 8px;
}

/* ---------- 流年卡片网格 每行5个 ---------- */
.liunian-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
}

/* ---------- 流月卡片网格 每行6个 ---------- */
.liuyue-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 8px;
}

/* ---------- 统一卡片基础 ---------- */
.yun-card,
.liunian-card,
.liuyue-card {
    text-align: center;
    padding: 10px 4px;
    background: var(--paper);
    border: 1px solid var(--line-soft);
    border-radius: 6px;
    transition: all 0.2s;
    position: relative;
    cursor: pointer;
    min-width: 0;
    overflow: hidden;
}

.yun-card:hover,
.liunian-card:hover,
.liuyue-card:hover {
    border-color: var(--red);
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    transform: translateY(-1px);
}

.yun-card.active,
.liunian-card.active,
.liuyue-card.active {
    border: 2px solid var(--red);
    background: rgba(179, 48, 42, 0.06);
}

/* 当前卡片特殊样式 - 蓝色主题 */
.yun-card.current,
.liunian-card.current,
.liuyue-card.current {
    border: 2px solid #1565c0;
    background: rgba(21, 101, 192, 0.08);
}

.yun-card.current:hover,
.liunian-card.current:hover,
.liuyue-card.current:hover {
    border-color: #1565c0;
    box-shadow: 0 2px 10px rgba(21, 101, 192, 0.15);
}

/* 小运特殊标识 - 淡蓝色边框 */
.yun-card.xiaoyun {
    background: rgba(21, 101, 192, 0.03);
    border-color: rgba(21, 101, 192, 0.15);
}

.yun-card.xiaoyun:hover {
    border-color: #1565c0;
    box-shadow: 0 2px 8px rgba(21, 101, 192, 0.1);
}

.yun-card.xiaoyun.active {
    border: 2px solid #1565c0;
    background: rgba(21, 101, 192, 0.08);
}

/* ---------- "当前"角标 ---------- */
.card-current-badge {
    position: absolute;
    top: 0;
    left: 0;
    font-size: 9px;
    padding: 2px 6px;
    border-radius: 0 0 6px 0;
    background: linear-gradient(135deg, #1565c0, #1976d2);
    color: #fff;
    letter-spacing: 1px;
    font-weight: 700;
    font-family: var(--font-sans);
    z-index: 5;
    line-height: 1;
    box-shadow: 0 1px 3px rgba(21, 101, 192, 0.3);
}

/* ---------- 卡片主区域：竖排天干地支 + 右侧十神 ---------- */
.card-main {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 6px;
    margin-bottom: 2px;
}

/* 竖排天干地支 */
.card-pillar-vertical {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}

.cp-gan,
.cp-zhi {
    display: block;
    font-size: 20px;
    font-weight: 700;
    font-family: var(--font-serif);
    line-height: 1.25;
    color: var(--ink);
}

/* 右侧十神竖排 */
.card-shishen-side {
    display: flex;
    flex-direction: column;
    gap: 0;
    font-size: 12px;
    font-weight: 700;
    font-family: var(--font-serif);
}

.cs-gan,
.cs-zhi {
    display: block;
    text-align: center;
    min-width: 16px;
    line-height: 1.25;
}

/* 十神颜色：吉神蓝色，凶神红色 */
.ss-ji { color: #1565c0; }
.ss-xiong { color: #c62828; }

/* ---------- 卡片元信息 ---------- */
.card-meta-age,
.card-meta-year,
.card-meta-cs,
.card-meta-date,
.card-meta-xy {
    font-size: 10px;
    color: var(--ink-soft);
    line-height: 1.4;
    letter-spacing: 0.5px;
}

.card-meta-age {
    font-weight: 600;
    margin-top: 2px;
    color: var(--ink);
}

.card-meta-year {
    color: var(--ink-mute);
}

.card-meta-cs {
    font-size: 9px;
    color: var(--ink-mute);
}

/* 小运来源标识 */
.card-meta-xy {
    font-size: 9px;
    color: #1565c0;
    margin-top: 1px;
    font-weight: 500;
}

/* 流年卡片特殊 */
.liunian-card .card-meta-year {
    font-weight: 600;
    margin-top: 2px;
    font-size: 11px;
    color: var(--ink);
}

/* 流月卡片特殊 */
.liuyue-card .card-jieqi {
    font-size: 11px;
    font-weight: 600;
    color: var(--ink-soft);
    margin-bottom: 1px;
    letter-spacing: 1px;
}

.liuyue-card .cp-gan,
.liuyue-card .cp-zhi {
    font-size: 18px;
}

.liuyue-card .card-meta-date {
    font-size: 9px;
    margin-top: 2px;
    color: var(--ink-mute);
}

/* ---------- 流年/流月区域容器 ---------- */
.liunian-section,
.liuyue-section {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px dashed var(--line-soft);
}

/* ==================== 响应式适配 ==================== */

/* 平板端 */
@media (max-width: 768px) {
    .yun-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 6px;
    }
    
    .liunian-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 6px;
    }
    
    .liuyue-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 6px;
    }
    
    .yun-card,
    .liunian-card,
    .liuyue-card {
        padding: 8px 3px;
    }
    
    .cp-gan,
    .cp-zhi {
        font-size: 18px;
    }
    
    .liuyue-card .cp-gan,
    .liuyue-card .cp-zhi {
        font-size: 16px;
    }
    
    .card-shishen-side {
        font-size: 11px;
    }
    
    .cs-gan,
    .cs-zhi {
        min-width: 14px;
    }
    
    .card-meta-age,
    .card-meta-year,
    .card-meta-date {
        font-size: 9px;
    }
    
    .card-current-badge {
        font-size: 8px;
        padding: 1px 4px;
    }
}

/* 手机端 */
@media (max-width: 480px) {
    .yun-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 5px;
    }
    
    .liunian-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 5px;
    }
    
    .liuyue-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 5px;
    }
    
    .yun-card,
    .liunian-card,
    .liuyue-card {
        padding: 6px 2px;
        border-radius: 4px;
    }
    
    .card-main {
        gap: 4px;
        margin-top: 4px;
        margin-bottom: 1px;
    }
    
    .cp-gan,
    .cp-zhi {
        font-size: 16px;
    }
    
    .liuyue-card .cp-gan,
    .liuyue-card .cp-zhi {
        font-size: 14px;
    }
    
    .card-shishen-side {
        font-size: 10px;
    }
    
    .cs-gan,
    .cs-zhi {
        min-width: 12px;
    }
    
    .card-meta-age,
    .card-meta-year,
    .card-meta-date,
    .card-meta-xy {
        font-size: 9px;
    }
    
    .liunian-card .card-meta-year {
        font-size: 10px;
    }
    
    .liuyue-card .card-jieqi {
        font-size: 10px;
    }
    
    .liuyue-card .card-meta-date {
        font-size: 8px;
    }
    
    .card-current-badge {
        font-size: 7px;
        padding: 1px 3px;
    }
    
    .section-title {
        font-size: 13px;
    }
    
    .section-subtitle {
        font-size: 10px;
    }
}

/* 超小屏幕 */
@media (max-width: 360px) {
    .yun-grid,
    .liunian-grid,
    .liuyue-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 4px;
    }
    
    .cp-gan,
    .cp-zhi {
        font-size: 18px;
    }
}

/* ---------- 隐藏旧版样式冲突 ---------- */
.dayun-card .card-pillar,
.liunian-card .card-pillar,
.liuyue-card .card-pillar {
    display: none;
}

.dayun-card .card-shishen,
.liunian-card .card-shishen,
.liuyue-card .card-shishen {
    display: none;
}

.dayun-card .card-meta-age,
.dayun-card .card-meta-year {
    display: none;
}

/* 隐藏类型标签（如果JS中未完全移除） */
.card-type-label {
    display: none !important;
}

/* ==================== 流年十二神煞 ==================== */

.liunian-shensha-section {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px dashed var(--line-soft);
}

.liunian-shensha-header {
    margin-bottom: 12px;
    padding: 0 4px;
}

.shensha-12-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 8px;
}

.shensha-12-item {
    text-align: center;
    padding: 10px 4px;
    border-radius: 6px;
    border: 1px solid;
    transition: all 0.2s;
    cursor: default;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.shensha-12-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* 地支 */
.shensha-12-zhi {
    font-size: 20px;
    font-weight: 700;
    font-family: var(--font-serif);
    line-height: 1.2;
}

/* 神煞名称 */
.shensha-12-name {
    font-size: 14px;
    font-weight: 700;
    font-family: var(--font-serif);
    letter-spacing: 1px;
    line-height: 1.2;
}

/* 神煞描述 */
.shensha-12-desc {
    font-size: 10px;
    color: var(--ink-soft);
    font-family: var(--font-sans);
    line-height: 1.2;
    margin-top: 2px;
}

/* 大吉 - 贵神 */
.shensha-12-item.da-ji {
    border-color: #2e7d32;
    background: rgba(46, 125, 50, 0.08);
}
.shensha-12-item.da-ji .shensha-12-zhi,
.shensha-12-item.da-ji .shensha-12-name {
    color: #2e7d32;
}

/* 吉 - 青龙、六合 */
.shensha-12-item.ji {
    border-color: #1565c0;
    background: rgba(21, 101, 192, 0.08);
}
.shensha-12-item.ji .shensha-12-zhi,
.shensha-12-item.ji .shensha-12-name {
    color: #1565c0;
}

/* 凶 - 太岁、丧门、朱雀、白虎、吊客 */
.shensha-12-item.xiong {
    border-color: #c62828;
    background: rgba(198, 40, 40, 0.08);
}
.shensha-12-item.xiong .shensha-12-zhi,
.shensha-12-item.xiong .shensha-12-name {
    color: #c62828;
}

/* 中凶 - 官符、小耗、大耗、病符 */
.shensha-12-item.zhong-xiong {
    border-color: #ef6c00;
    background: rgba(239, 108, 0, 0.08);
}
.shensha-12-item.zhong-xiong .shensha-12-zhi,
.shensha-12-item.zhong-xiong .shensha-12-name {
    color: #ef6c00;
}

/* 中性 */
.shensha-12-item.zhong {
    border-color: #616161;
    background: rgba(97, 97, 97, 0.08);
}
.shensha-12-item.zhong .shensha-12-zhi,
.shensha-12-item.zhong .shensha-12-name {
    color: #616161;
}

/* 响应式 */
@media (max-width: 768px) {
    .shensha-12-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 6px;
    }
    .shensha-12-item {
        padding: 8px 3px;
    }
    .shensha-12-zhi {
        font-size: 18px;
    }
    .shensha-12-name {
        font-size: 13px;
    }
    .shensha-12-desc {
        font-size: 9px;
    }
}

@media (max-width: 480px) {
    .shensha-12-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 5px;
    }
    .shensha-12-item {
        padding: 6px 2px;
        border-radius: 4px;
    }
    .shensha-12-zhi {
        font-size: 16px;
    }
    .shensha-12-name {
        font-size: 12px;
    }
    .shensha-12-desc {
        font-size: 8px;
    }
    .liunian-shensha-header .section-title {
        font-size: 13px;
    }
}
/* ============================================================
   动态八字表格（大运/流年/流月）
   ============================================================ */
.dynamic-bazi-section {
    margin-top: 20px;
}

.dynamic-bazi-table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--line);
    background: var(--paper-3);
}

.dynamic-bazi-table table {
    width: 100%;
    min-width: 680px;
    font-size: 13px;
    border-collapse: collapse;
    table-layout: fixed;
}

.dynamic-bazi-table th,
.dynamic-bazi-table td {
    padding: 6px 3px;
    text-align: center;
    border: 1px solid var(--line-soft);
    vertical-align: middle;
    line-height: 1.5;
}

/* 主表头 */
.dynamic-bazi-table .dynamic-header-main th {
    background: var(--ink);
    color: var(--paper);
    font-size: 14px;
    font-weight: 700;
    padding: 8px 3px;
    letter-spacing: 1px;
    border-color: var(--ink);
}

/* 副表头 */
.dynamic-bazi-table .dynamic-header-sub td {
    background: var(--paper-2);
    color: var(--ink-2);
    font-size: 12px;
    padding: 4px 3px;
    border-bottom: 2px solid var(--ink);
    font-weight: 600;
}

/* 动态列（流月/流年/大运）微红底区分 */
.dynamic-bazi-table .col-liuyue,
.dynamic-bazi-table .col-liunian,
.dynamic-bazi-table .col-dayun {
    background: rgba(179, 48, 42, 0.03);
}

/* 行标签列 */
.dynamic-bazi-table .col-label {
    background: var(--paper-2);
    font-weight: 700;
    font-size: 12px;
    color: var(--ink-soft);
    width: 52px;
    min-width: 52px;
    white-space: nowrap;
}

/* 天干地支单元格 */
.dynamic-bazi-table .gan-cell,
.dynamic-bazi-table .zhi-cell {
    font-size: 15px;
    font-weight: 700;
}

/* 日主高亮 */
.dynamic-bazi-table .day-gan,
.dynamic-bazi-table .day-zhi {
    background: rgba(179, 48, 42, 0.08);
}

/* 藏干、副星、神煞堆叠 */
.dynamic-bazi-table .cg-stack,
.dynamic-bazi-table .fuxing-stack,
.dynamic-bazi-table .shensha-stack {
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: center;
}

.dynamic-bazi-table .cg-item,
.dynamic-bazi-table .fx-item {
    font-size: 11px;
    line-height: 1.3;
}

.dynamic-bazi-table .shensha-item {
    font-size: 11px;
    line-height: 1.3;
    padding: 1px 3px;
    border-radius: 2px;
    display: inline-block;
}

/* 纳音 */
.dynamic-bazi-table .na-yin {
    font-size: 11px;
    color: var(--ink-soft);
}

/* 五行图标 */
.dynamic-bazi-table .wx-tag-img {
    width: 12px;
    height: 12px;
    vertical-align: middle;
    margin-left: 2px;
}

/* 副标题中年份/节气颜色 */
.dynamic-bazi-table .dynamic-header-sub .col-liuyue,
.dynamic-bazi-table .dynamic-header-sub .col-liunian,
.dynamic-bazi-table .dynamic-header-sub .col-dayun {
    color: var(--red);
}

/* ============================================================
   动态表格移动端适配
   ============================================================ */
@media (max-width: 640px) {
    .dynamic-bazi-table {
        margin: 0 -16px;
        border-left: none;
        border-right: none;
    }
    .dynamic-bazi-table table {
        font-size: 11px;
        min-width: 600px;
    }
    .dynamic-bazi-table th,
    .dynamic-bazi-table td {
        padding: 4px 2px;
    }
    .dynamic-bazi-table .dynamic-header-main th {
        font-size: 12px;
        padding: 6px 2px;
        letter-spacing: 0;
    }
    .dynamic-bazi-table .dynamic-header-sub td {
        font-size: 10px;
        padding: 3px 2px;
    }
    .dynamic-bazi-table .col-label {
        font-size: 10px;
        width: 42px;
        min-width: 42px;
    }
    .dynamic-bazi-table .gan-cell,
    .dynamic-bazi-table .zhi-cell {
        font-size: 13px;
    }
    .dynamic-bazi-table .cg-item,
    .dynamic-bazi-table .fx-item,
    .dynamic-bazi-table .shensha-item {
        font-size: 10px;
    }
    .dynamic-bazi-table .wx-tag-img {
        width: 10px;
        height: 10px;
    }
	
	

	/* ============ AI 标签按钮 ============ */
	.tab-btn-ai {
		background: linear-gradient(135deg, #fff8f0 0%, #fef5e7 100%);
		color: #c0392b !important;
		font-weight: 700;
		position: relative;
	}
	.tab-btn-ai .ai-spark {
		display: inline-block;
		animation: aiSparkRotate 3s linear infinite;
		color: #d4a017;
	}
	.tab-btn-ai.active {
		background: linear-gradient(135deg, #c0392b 0%, #a93226 100%);
		color: #fff !important;
	}
	.tab-btn-ai.active .ai-spark { color: #ffd966; }
	@keyframes aiSparkRotate {
		from { transform: rotate(0); }
		to   { transform: rotate(360deg); }
	}

	/* ============ 进度条 ============ */
	.ai-progress-wrap {
		padding: 16px 20px;
		background: #fdfaf3;
		border: 1px solid #e8d5c0;
		border-radius: 10px;
		margin-bottom: 16px;
	}
	.ai-progress-row {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 13px;
		color: #5a4a3f;
		margin-top: 10px;
	}
	.ai-progress-row:first-child { margin-top: 0; }
	.ai-progress-label { font-weight: 600; }
	.ai-progress-status {
		font-size: 12px;
		color: #8b7355;
		padding: 2px 8px;
		border-radius: 10px;
		background: #f0e8d8;
	}
	.ai-progress-status.running {
		background: #fff3cd;
		color: #856404;
		animation: aiPulse 1.4s ease-in-out infinite;
	}
	.ai-progress-status.done {
		background: #d4edda;
		color: #155724;
	}
	.ai-progress-status.error {
		background: #f8d7da;
		color: #721c24;
	}
	.ai-progress-bar {
		height: 4px;
		background: #ece4d2;
		border-radius: 2px;
		overflow: hidden;
		margin-top: 6px;
	}
	.ai-progress-fill {
		height: 100%;
		width: 0;
		background: linear-gradient(90deg, #d4a017, #c0392b);
		border-radius: 2px;
		transition: width .35s ease;
	}
	.ai-meta {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 12px;
		padding-top: 10px;
		border-top: 1px dashed #e8d5c0;
		font-size: 12px;
		color: #8b7355;
	}
	.ai-heartbeat-dot {
		color: #c0392b;
		opacity: .3;
		transition: opacity .2s;
	}
	.ai-heartbeat-dot.beat { opacity: 1; }
	@keyframes aiPulse {
		0%,100% { opacity: 1; }
		50% { opacity: .5; }
	}

	/* ============ AI 内容区 ============ */
	.ai-content {
		padding: 20px 24px;
		background: #fffdf8;
		border: 1px solid #e8d5c0;
		border-radius: 10px;
		line-height: 1.95;
		font-size: 15px;
		color: #3d2b1f;
		min-height: 100px;
		word-break: break-word;
	}
	.ai-content:empty::before {
		content: "AI 正在排盘中，正文将在此处实时呈现…";
		color: #b8a99a;
		font-style: italic;
	}
	.ai-content h1 {
		font-size: 19px;
		color: #8b5a2b;
		margin: 22px 0 10px;
		padding: 8px 0;
		border-top: 2px solid #c0392b;
		border-bottom: 1px solid #e8d5c0;
		text-align: center;
		letter-spacing: 2px;
	}
	.ai-content h1:first-child { margin-top: 0; }
	.ai-content h2 {
		font-size: 16px;
		color: #c0392b;
		margin: 18px 0 8px;
		padding-left: 10px;
		border-left: 4px solid #c0392b;
	}
	.ai-content h3 {
		font-size: 15px;
		color: #8b5a2b;
		margin: 14px 0 6px;
	}
	.ai-content p { margin: 8px 0; }
	.ai-content ul, .ai-content ol { margin: 8px 0; padding-left: 24px; }
	.ai-content li { margin: 4px 0; }
	.ai-content strong { color: #c0392b; font-weight: 700; }
	.ai-content em { color: #8b5a2b; font-style: normal; }
	.ai-content table {
		width: 100%;
		border-collapse: collapse;
		margin: 12px 0;
		font-size: 13px;
	}
	.ai-content th, .ai-content td {
		border: 1px solid #e8d5c0;
		padding: 8px 10px;
		text-align: left;
	}
	.ai-content th {
		background: #fdf6e3;
		color: #8b5a2b;
		font-weight: 700;
	}
	.ai-content code {
		background: #f5efe1;
		color: #8b5a2b;
		padding: 2px 6px;
		border-radius: 4px;
		font-family: Consolas, Monaco, monospace;
		font-size: 13px;
	}
	.ai-content pre {
		background: #2c2416;
		color: #f5efe1;
		padding: 14px 16px;
		border-radius: 8px;
		overflow-x: auto;
		line-height: 1.5;
		font-size: 13px;
		margin: 12px 0;
	}
	.ai-content pre code {
		background: transparent;
		color: inherit;
		padding: 0;
	}
	.ai-content blockquote {
		border-left: 4px solid #d4a017;
		background: #fdf6e3;
		margin: 12px 0;
		padding: 10px 14px;
		color: #5a4a3f;
	}
	.ai-content hr {
		border: none;
		border-top: 1px dashed #c0392b;
		margin: 22px 0;
	}

	/* 光标效果（生成中） */
	.ai-content.streaming::after {
		content: "▍";
		color: #c0392b;
		animation: aiCursor 1s ease-in-out infinite;
		margin-left: 2px;
	}
	@keyframes aiCursor {
		0%,100% { opacity: 1; }
		50% { opacity: 0; }
	}

	/* ============ 底部按钮 ============ */
	.ai-actions {
		display: flex;
		gap: 12px;
		justify-content: center;
		margin-top: 18px;
	}
	.btn-ai-action {
		padding: 9px 22px;
		font-size: 14px;
		border: 1px solid #c0392b;
		background: #fff;
		color: #c0392b;
		border-radius: 6px;
		cursor: pointer;
		transition: all .2s;
	}
	.btn-ai-action:hover {
		background: #fef5e7;
	}
	.btn-ai-action-primary {
		background: linear-gradient(135deg, #c0392b 0%, #a93226 100%);
		color: #fff;
		border-color: transparent;
	}
	.btn-ai-action-primary:hover {
		background: linear-gradient(135deg, #a93226 0%, #922b21 100%);
	}

	/* ============ 错误区 ============ */
	.ai-error {
		text-align: center;
		padding: 30px 20px;
	}
	.ai-error-icon {
		width: 50px; height: 50px;
		margin: 0 auto 12px;
		border-radius: 50%;
		background: #f8d7da;
		color: #721c24;
		font-size: 26px;
		font-weight: 700;
		line-height: 50px;
	}
	.ai-error-text {
		color: #721c24;
		font-size: 14px;
		margin-bottom: 16px;
	}

	/* 响应式 */
	@media (max-width: 640px) {
		.ai-content { padding: 14px 16px; font-size: 14px; }
		.ai-content h1 { font-size: 17px; }
		.ai-content h2 { font-size: 15px; }
	}

}