/* 八字推理系统样式 */

:root {
    --primary-color: #8b5a2b;
    --primary-hover: #724a23;
    --secondary-color: #d4a373;
    --background: #fcf9f2; /* 更柔和的清亮暖色背景 */
    --surface: transparent;
    --surface-light: transparent;
    --text: #333333;
    --text-muted: #888888; /* 调整为更柔和的灰色 */
    --border: #e8e0d5; /* 边框更淡 */
    --success: #4caf50;
    --warning: #f59e0b;
    --error: #ef4444;
}

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

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    background: var(--background);
    color: var(--text);
    line-height: 1.6;
    min-height: 100vh;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0; /* 移除外边距让内容更充实 */
}

/* 头部 */
.header {
    text-align: center;
    padding: 20px 20px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 20px;
}

.header h1 {
    font-size: 2.5rem;
    margin-bottom: 10px;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.subtitle {
    color: var(--text-muted);
    font-size: 1.1rem;
}

/* 区域通用样式 */
section {
    background: transparent;
    padding: 10px;
    margin-bottom: 20px;
    border: none;
}

section h2 {
    font-size: 1.5rem;
    margin-bottom: 20px;
    color: var(--text);
    border-bottom: 2px solid var(--primary-color);
    padding-bottom: 10px;
    display: inline-block;
}

/* 表单样式 */
.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    color: var(--text-muted);
    font-weight: 500;
}

.form-group input,
.form-group select {
    width: 100%;
    padding: 12px 16px;
    background: #ffffff; /* 确保输入框是白色的 */
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    font-size: 1rem;
    transition: all 0.3s ease;
}

.form-group input[type="checkbox"] {
    width: auto;
    padding: 0;
    border: none;
}

.six-char-only-date-label {
    justify-content: flex-start;
    width: 100%;
    text-align: left;
}

.form-group input:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--primary-color);
}

/* 按钮样式 */
.btn {
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-primary {
    background: var(--primary-color);
    color: white;
}

.btn-primary:hover {
    background: var(--primary-hover);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.4);
}

.btn-secondary {
    background: var(--secondary-color);
    color: white;
}

.btn-secondary:hover {
    background: #0891b2;
    transform: translateY(-2px);
}

.btn-outline {
    background: transparent;
    border: 2px solid var(--primary-color);
    color: var(--primary-color);
}

.btn-outline:hover {
    background: var(--primary-color);
    color: white;
}

/* 排盘卡片 */
.bazi-card {
    background: transparent;
    border-radius: 0;
    padding: 0;
    margin-bottom: 20px;
}

.bazi-header {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.info-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
}

.info-row:last-child {
    border-bottom: none;
}

.info-row .label {
    color: var(--text-muted);
}

.bazi-main {
    text-align: center;
    padding: 20px;
    background: var(--background);
    border-radius: 8px;
    margin-bottom: 20px;
}

.bazi-string {
    font-size: 1.8rem;
    font-weight: bold;
    color: var(--primary-color);
    letter-spacing: 4px; /* 增加字间距 */
    margin: 10px 0;
    text-align: center;
}

.day-master {
    font-size: 1.2rem;
    color: var(--text-muted);
}

.day-master-value {
    color: var(--secondary-color);
    font-weight: bold;
}

/* 四柱网格 */
.four-pillars {
    margin-top: 20px;
}

.pillars-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-top: 16px;
}

.pillar {
    background: transparent;
    padding: 10px;
    border-radius: 8px;
    text-align: center;
}

.pillar-title {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-bottom: 8px;
}

.pillar-value {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--text);
}

/* 额外信息 */
.extra-info {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
}

.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 16px;
}

.info-item {
    display: flex;
    justify-content: space-between;
    padding: 8px;
    background: var(--background);
    border-radius: 4px;
}

.info-item .label {
    color: var(--text-muted);
}

/* 操作按钮 */
.action-buttons {
    display: flex;
    gap: 16px;
    justify-content: center;
    margin-top: 20px;
}

.teaser-interpretation {
    margin-top: 20px;
    border: 2px solid var(--border);
    border-radius: 8px;
    padding: 15px;
    background: transparent;
}

.teaser-content {
    margin-top: 0;
}

/* AI 解读区域 */
.interpret-options {
    display: flex;
    gap: 16px;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.interpret-options select {
    padding: 10px 16px;
    background: var(--surface-light);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    font-size: 1rem;
}

/* 加载动画 */
.loading {
    text-align: center;
    padding: 40px;
}

.spinner {
    width: 50px;
    height: 50px;
    border: 4px solid var(--surface-light);
    border-top-color: var(--primary-color);
    border-radius: 50%;
    margin: 0 auto 20px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* 解读结果 */
.interpret-result {
    background: transparent;
    border-radius: 0;
    padding: 0;
    margin-top: 20px;
}

.interpret-result .result-content {
    border: 2px solid var(--border);
    border-radius: 8px;
    padding: 15px;
}

.result-content h3 {
    margin-bottom: 16px;
    color: var(--primary-color);
}

.content-text {
    line-height: 1.8;
    white-space: pre-wrap;
}

/* 移动端优化：限制解读结果区域高度 */
@media (max-width: 768px) {
    .interpret-result .result-content {
        max-height: 66vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        border: 2px solid var(--border);
        border-radius: 8px;
        padding: 15px;
    }
    
    /* 防止滚动穿透 */
    .interpret-result {
        overscroll-behavior: contain;
    }
}

/* 历史记录 */
.history-list {
    margin-top: 20px;
    max-height: 400px;
    overflow-y: auto;
}

.history-item {
    background: var(--surface-light);
    padding: 16px;
    border-radius: 8px;
    margin-bottom: 12px;
    cursor: pointer;
    transition: all 0.3s;
}

.history-item:hover {
    background: var(--primary-color);
    transform: translateX(4px);
}

.history-item .date {
    color: var(--text-muted);
    font-size: 0.9rem;
}

.history-item .bazi {
    font-weight: bold;
    color: var(--text);
    margin-top: 4px;
}

/* 页脚 */
.footer {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-muted);
    border-top: 1px solid var(--border);
}

.disclaimer {
    font-size: 0.9rem;
    margin-top: 8px;
    color: var(--warning);
}

/* 导航菜单样式 */
.navigation {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-bottom: 30px;
    border-bottom: 1px solid var(--border);
    padding-bottom: 10px;
}

.nav-btn {
    background: transparent;
    color: var(--text-muted);
    border: none;
    padding: 12px 20px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 500;
    transition: all 0.3s;
    min-width: 120px;
    /* iOS 兼容性修复 */
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    touch-action: manipulation;
}

.nav-btn.active {
    background: transparent;
    color: var(--primary-color);
    font-weight: bold;
}

.nav-btn:hover {
    background: rgba(0,0,0,0.05);
    color: var(--text);
}

.nav-link {
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    background: var(--surface-light);
    color: var(--text);
    border: 1px solid var(--border);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.nav-link:hover {
    background: var(--surface);
    transform: translateY(-2px);
    color: white;
    text-decoration: none;
}

/* 合盘容器样式 */
.hepan-persons-details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 20px;
}

/* 优化并排显示时的表格样式 */
.hepan-persons-details .pillar-table th,
.hepan-persons-details .pillar-table td {
    padding: 6px 3px;
    font-size: 0.9rem;
}

.hepan-persons-details .char-large {
    font-size: 1.2rem;
}

.hepan-persons-details .label-column {
    width: 80px;
    font-size: 0.85rem;
}

/* 响应式布局：在较小屏幕上改为垂直排列 */
@media (max-width: 1024px) {
    .hepan-persons-details {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .hepan-persons-details .pillar-table th,
    .hepan-persons-details .pillar-table td {
        padding: 8px 4px;
        font-size: 0.95rem;
    }
    
    .hepan-persons-details .char-large {
        font-size: 1.3rem;
    }
}

/* 合盘容器样式 */
.hepan-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin-bottom: 20px;
}

.hepan-person {
    background: var(--surface-light);
    border-radius: 8px;
    padding: 24px;
    border: 1px solid var(--border);
}

.hepan-person h3 {
    font-size: 1.25rem;
    margin-bottom: 20px;
    color: var(--text);
    border-bottom: 2px solid var(--primary-color);
    padding-bottom: 10px;
}

.hepan-actions {
    display: flex;
    gap: 16px;
    justify-content: center;
    margin-top: 20px;
}

/* 合盘结果样式 */
.hepan-result-content {
    background: transparent;  /* ✅ 移除背景 */
    border-radius: 0;  /* ✅ 移除圆角 */
    padding: 0;  /* ✅ 移除 padding，让内部空间更大 */
    margin-top: 16px;
    border: none;  /* ✅ 移除边框 */
    max-width: 100%;
    overflow-x: hidden;
}

.hepan-result-content h4 {
    font-size: 1.2rem;
    margin-bottom: 16px;
    color: var(--primary-color);
    border-bottom: 1px solid var(--border);
    padding-bottom: 8px;
}

/* 重要参数对比表格样式 */
.important-params-section {
    margin-top: 24px;
    margin-bottom: 24px;
}

.important-params-section h4 {
    font-size: 1.3rem;
    color: var(--primary-color);
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.important-params-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--surface-light);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.important-params-table thead {
    background: linear-gradient(135deg, #f0f0f0, #e0e0e0);
    color: #1a1a1a;
}

.important-params-table thead th {
    padding: 16px 12px;
    text-align: center;
    font-weight: 700;
    font-size: 1rem;
    color: #1a1a1a;
    border-right: 1px solid rgba(255, 255, 255, 0.2);
    vertical-align: middle;
}

.important-params-table thead th:last-child {
    border-right: none;
}

.important-params-table tbody tr {
    border-bottom: 1px solid var(--border-light);
    transition: all 0.2s ease;
}

.important-params-table tbody tr:hover {
    background: rgba(79, 70, 229, 0.04);
}

.important-params-table tbody td {
    padding: 14px 12px;
    border-right: 1px solid var(--border-light);
    font-size: 0.95rem;
    text-align: center;
    vertical-align: middle;
}

.important-params-table tbody td:last-child {
    border-right: none;
}

.important-params-table .param-value {
    font-weight: 500;
    color: var(--text);
    text-align: center;
}

.important-params-table .param-zhi {
    color: var(--text-secondary);
    font-size: 0.9rem;
    text-align: left; /* 解析列左对齐 */
    padding-left: 16px; /* 增加左边距 */
}

/* 响应式设计 */
@media (max-width: 768px) {
    .important-params-table {
        font-size: 0.85rem;
    }
    
    .important-params-table thead th,
    .important-params-table tbody td {
        padding: 10px 8px;
    }
}

/* 四柱表格样式 */
.sizhu-table {
    margin-top: 20px; /* 与重要参数表格的间距 */
}

/* 神煞吉凶颜色 */
.shensha-jixiong {
    color: #d97706 !important; /* 琥珀色，表示吉 */
    font-weight: 600;
}

.shensha-xiong {
    color: #dc2626 !important; /* 红色，表示凶 */
    font-weight: 600;
}

.hepan-compatibility {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}

.compatibility-item {
    background: var(--background);
    padding: 16px;
    border-radius: 8px;
    border: 1px solid var(--border);
}

.compatibility-title {
    font-weight: bold;
    color: var(--secondary-color);
    margin-bottom: 8px;
}

.compatibility-score {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--primary-color);
    text-align: center;
    margin: 10px 0;
}

.compatibility-desc {
    color: var(--text-muted);
    font-size: 0.9rem;
    text-align: center;
}

/* 响应式设计 - 小屏设备 */
@media (max-width: 768px) {
    .container {
        padding: 0;
    }

    .header {
        padding: 20px 15px;
    }

    .header h1 {
        font-size: 2rem;
    }

    .subtitle {
        font-size: 1rem;
    }

    section {
        padding: 5px;
        margin-bottom: 10px;
    }

    .form-group input,
    .form-group select {
        padding: 14px 16px;
        font-size: 16px; /* 防止iOS自动缩放 */
    }

    .btn {
        padding: 14px 20px;
        font-size: 1rem;
        min-height: 48px; /* 确保触摸目标足够大 */
    }

    .pillars-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .bazi-string {
        font-size: 1.5rem;
        letter-spacing: 2px;
    }

    .action-buttons {
        flex-direction: column;
    }

    .interpret-options {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .interpret-options select,
    .interpret-options button {
        width: 100%;
    }
    
    .hepan-container {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .navigation {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }

    .nav-btn {
        padding: 10px 16px;
        font-size: 0.9rem;
        flex: 1;
        min-width: 120px;
    }
    
    .hepan-actions {
        flex-direction: column;
    }

    .bazi-header {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .info-row {
        justify-content: flex-start;
        flex-direction: column;
    }

    .info-row .label {
        margin-bottom: 4px;
    }

    .bazi-main {
        padding: 16px;
    }

    .extra-info .info-grid {
        grid-template-columns: 1fr;
    }

    .dayun-header {
        flex-direction: column;
        gap: 8px;
    }

    .dayun-item {
        justify-content: space-between;
    }
}

/* 超小屏设备优化 */
@media (max-width: 480px) {
    .container {
        padding: 0;
    }

    .header h1 {
        font-size: 1.8rem;
    }

    .header {
        padding: 15px 10px;
    }

    section {
        padding: 5px;
    }

    .form-group {
        margin-bottom: 16px;
    }

    .form-group input,
    .form-group select {
        padding: 12px 14px;
        font-size: 16px;
    }

    .btn {
        padding: 14px 18px;
        min-height: 48px;
    }

    .pillars-grid {
        grid-template-columns: 1fr;
    }

    .bazi-string {
        font-size: 1.3rem;
        letter-spacing: 1px;
    }

    .bazi-card {
        padding: 0;
    }

    .nav-btn {
        padding: 10px 12px;
        font-size: 0.85rem;
        min-width: 100px;
    }

    .interpret-options {
        gap: 10px;
    }

    .interpret-options select {
        padding: 12px 14px;
    }

    .content-text {
        font-size: 0.95rem;
    }

    .bazi-header {
        gap: 10px;
    }

    .info-row {
        padding: 6px 0;
    }

    .dayun-item-card {
        padding: 10px 12px;
    }

    .dayun-detail {
        flex-direction: column;
        gap: 4px;
    }
}

/* 极小屏设备优化 */
@media (max-width: 375px) {
    .header h1 {
        font-size: 1.6rem;
    }

    .subtitle {
        font-size: 0.9rem;
    }

    .bazi-string {
        font-size: 1.2rem;
    }

    .btn {
        padding: 12px 16px;
        font-size: 0.95rem;
    }

    .form-group input,
    .form-group select {
        padding: 12px 12px;
        font-size: 15px;
    }

    section h2 {
        font-size: 1.3rem;
    }

    .bazi-card {
        padding: 0;
    }

    .nav-btn {
        padding: 8px 10px;
        font-size: 0.8rem;
        min-width: 80px;
    }
}

/* 工具类 */
.hidden {
    display: none !important;
}

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

.mt-20 {
    margin-top: 20px;
}

/* 四柱详细信息区域 */
.four-pillars-detail {
    margin-top: 10px;
    padding-top: 10px;
    border-top: none;
}

.four-pillars-detail h3 {
    font-size: 1.25rem;
    margin-bottom: 16px;
    color: var(--text);
}

.pillar-table-container {
    overflow-x: auto;
    margin-top: 16px;
}

.pillar-table {
    width: 100%;
    border-collapse: collapse;
    background: transparent;
    border-radius: 0;
    overflow: hidden;
    border: none;
}

.pillar-table th,
.pillar-table td {
    padding: 8px 4px;
    text-align: center; /* 改为居中对齐 */
    border: none;
    border-bottom: 1px dashed var(--border); /* 只保留底边虚线增加呼吸感 */
}

.pillar-table th {
    background: transparent;
    font-weight: bold;
    color: var(--text-muted);
    padding: 12px;
}

.label-column {
    width: 120px;
    background: transparent;
    color: var(--text);
}

.pillar-column {
    min-width: 120px;
    text-align: center;
}

.label-cell {
    background: transparent;
    font-weight: 600;
    color: var(--text-muted);
    white-space: normal;
    vertical-align: top;
    padding-top: 12px;
    text-align: center; /* 添加居中对齐 */
}

.pillar-cell {
    vertical-align: top;
    text-align: center;
    padding: 12px 8px;
}

.canggan-container,
.fuxing-container {
    min-height: 20px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center; /* 居中对齐 */
    justify-content: center; /* 添加垂直居中对齐 */
    width: 100%;
    text-align: center; /* 确保内容居中 */
}

.shensha-container {
    min-height: 20px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
    justify-content: flex-start; /* 顶部对齐，与 label-cell 保持一致 */
    width: 100%;
    text-align: center;
}

.canggan-item,
.fuxing-item {
    display: block;
    width: 100%;
    padding: 4px 0;
    font-size: 0.8rem;
    text-align: center;
}

.fuxing-item {
    color: var(--text-muted);
    font-size: 0.75rem;
}

.canggan-value {
    font-weight: 500;
}

.shensha-item {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 2px 6px;
    font-size: 0.75rem;
    color: var(--text);
    white-space: nowrap;
    background: var(--surface-light);
    border: 1px solid var(--border);
    border-radius: 4px;
    box-sizing: border-box;
}


.no-shensha, .no-canggan, .no-dayun {
    color: var(--text-muted);
    font-style: italic;
    font-size: 0.8rem;
}

/* 交替行颜色去除，改为纯透明 */
.pillar-table tbody tr:nth-child(odd):not(.label-row) {
    background-color: transparent;
}

.pillar-table tbody tr:nth-child(even):not(.label-row) {
    background-color: transparent;
}

/* 为标签行添加特定类 */
.label-row {
    background-color: var(--surface) !important;
}

/* 大运信息区域 */
.dayun-info {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--border);
}

.dayun-info h3 {
    font-size: 1.25rem;
    margin-bottom: 16px;
    color: var(--text);
}

.dayun-header {
    display: flex;
    gap: 32px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.dayun-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.dayun-label {
    color: var(--text-muted);
    font-size: 0.9rem;
}

.dayun-value {
    color: var(--secondary-color);
    font-weight: bold;
}

.dayun-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.dayun-item-card {
    background: var(--background);
    border-radius: 8px;
    padding: 12px 16px;
    border: 1px solid var(--border);
}

.dayun-title {
    font-weight: bold;
    color: var(--primary-color);
    margin-right: 12px;
}

.dayun-value {
    color: var(--text);
}

.dayun-detail {
    display: flex;
    gap: 16px;
    margin-top: 8px;
    flex-wrap: wrap;
}

.dayun-detail span {
    color: var(--text-muted);
    font-size: 0.85rem;
}

/* 神煞区域 */
.shensha-section {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--border);
}

.shensha-section h3 {
    font-size: 1.25rem;
    margin-bottom: 16px;
    color: var(--text);
}

.shensha-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.shensha-item {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    background: var(--surface-light);
    border-radius: 4px;
    font-size: 0.9rem;
}

/* 姓名测评部分 */
.name-score-section {
    background: var(--surface);
    margin-top: 20px;
    padding: 30px;
    border-radius: 12px;
    border: 1px solid var(--border);
}

.name-score-input {
    margin-bottom: 20px;
}

.name-score-input label {
    display: block;
    margin-bottom: 8px;
    color: var(--text-muted);
    font-weight: 500;
}

.name-score-input input {
    width: 100%;
    padding: 12px 16px;
    background: var(--surface-light);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    font-size: 1rem;
    transition: border-color 0.3s;
    margin-bottom: 10px;
    box-sizing: border-box;
}

.name-score-input input:focus {
    outline: none;
    border-color: var(--primary-color);
}

.score-display {
    text-align: center;
    margin: 20px 0;
}

.score-circle {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    margin: 0 auto 15px;
}

.score-value {
    font-size: 32px;
    font-weight: bold;
    color: white;
}

.score-text {
    font-size: 14px;
    color: white;
}

.score-description {
    font-size: 18px;
    font-weight: bold;
    margin-top: 10px;
    color: var(--text);
}

.name-score-result .result-content h3 {
    color: var(--text);
    margin-bottom: 16px;
    border-bottom: 2px solid var(--primary-color);
    padding-bottom: 10px;
}

.name-score-result .content-text {
    line-height: 1.8;
    white-space: pre-wrap;
    color: var(--text);
}

/* 五行分析样式 - 紧凑布局 */
.wuxing-analysis {
    background: var(--surface);
    border-radius: 8px;
    padding: 12px; /* 进一步减小内边距 */
    margin: 12px 0; /* 进一步减小外边距 */
    border: 1px solid var(--border);
}

.wuxing-analysis h3 {
    margin-top: 0;
    margin-bottom: 10px; /* 减小底部边距 */
    color: var(--text);
    border-bottom: 2px solid var(--primary-color);
    padding-bottom: 6px; /* 进一步减少底部填充 */
    font-size: 1rem; /* 进一步减小标题字体 */
}

.wuxing-scores {
    margin: 8px 0; /* 进一步减小边距 */
}

.wuxing-item {
    display: flex;
    align-items: center;
    margin: 3px 0; /* 进一步减小间距 */
    padding: 2px 0; /* 进一步减小填充 */
}

.wuxing-name {
    width: 35px; /* 进一步减小宽度 */
    font-weight: bold;
    color: var(--text);
    margin-right: 6px; /* 进一步减少右边距 */
    font-size: 0.9rem; /* 减小字体 */
}

.wuxing-bar-track {
    flex: 1;
    height: 12px;
    background: rgba(139, 90, 43, 0.15);
    border-radius: 6px;
    overflow: hidden;
    margin: 0 8px;
}

.wuxing-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
    border-radius: 6px;
    transition: width 0.5s ease-in-out;
}

.wuxing-value {
    min-width: 90px;
    text-align: right;
    font-weight: bold;
    color: var(--text);
    font-size: 0.85rem; /* 进一步减小字体 */
}

.wuxing-strength {
    display: none; /* 隐藏日主强弱部分 */
}

.score-value {
    font-weight: bold;
    color: var(--success);
}

.wuxing-deficiency {
    margin: 6px 0; /* 进一步减小边距 */
    padding: 6px; /* 进一步减小填充 */
    background-color: var(--surface-light);
    border-radius: 4px; /* 减小圆角 */
    border-left: 3px solid var(--warning); /* 减小边框宽度 */
    font-size: 0.85rem; /* 减小字体 */
}

.deficiency-value {
    font-weight: bold;
    color: var(--warning);
    font-size: 0.85rem; /* 进一步减小字体 */
}

/* 响应式设计 - 移动端优化 */
@media (max-width: 768px) {
    .wuxing-analysis {
        padding: 10px; /* 在移动设备上进一步减小内边距 */
        margin: 10px 0; /* 在移动设备上进一步减小外边距 */
    }
    
    .wuxing-analysis h3 {
        font-size: 0.95rem; /* 在移动设备上进一步减小标题字体 */
        margin-bottom: 8px;
        padding-bottom: 5px;
    }
    
    .wuxing-item {
        display: flex;
        align-items: center;
        margin: 2px 0; /* 在移动设备上进一步减小间距 */
    }
    
    .wuxing-name {
        width: 30px; /* 在移动设备上进一步减小宽度 */
        font-size: 0.85rem; /* 在移动设备上进一步减小字体 */
        margin-right: 5px;
    }
    
    .wuxing-bar-track {
        flex: 1;
        height: 10px;
        border-radius: 5px;
        margin: 0 6px;
    }
    
    .wuxing-bar {
        border-radius: 5px;
    }
    
    .wuxing-value {
        font-size: 0.8rem; /* 在移动设备上进一步减小字体 */
        min-width: 78px;
    }
    
    .wuxing-deficiency {
        margin: 5px 0;
        padding: 5px;
        font-size: 0.8rem;
    }
}

/* 针对更小屏幕的优化 (如iPhone SE) */
@media (max-width: 375px) {
    .wuxing-analysis {
        padding: 8px; /* 在小屏幕上进一步减小内边距 */
        margin: 8px 0; /* 在小屏幕上进一步减小外边距 */
    }
    
    .wuxing-item {
        margin: 1px 0; /* 在小屏幕上进一步减小间距 */
        padding: 1px 0; /* 在小屏幕上进一步减小填充 */
    }
    
    .wuxing-name {
        width: 25px; /* 在小屏幕上进一步减小宽度 */
        font-size: 0.8rem; /* 在小屏幕上进一步减小字体 */
        margin-right: 4px;
    }
    
    .wuxing-bar-track {
        height: 8px;
        border-radius: 4px;
        margin: 0 5px;
    }
    
    .wuxing-bar {
        border-radius: 4px;
    }
    
    .wuxing-value {
        font-size: 0.75rem; /* 在小屏幕上进一步减小字体 */
        min-width: 70px;
    }
    
    .wuxing-deficiency {
        margin: 4px 0;
        padding: 4px;
        font-size: 0.75rem;
    }
    
    /* 为五行名称、进度条和数值使用更紧凑的布局 */
    .wuxing-item {
        flex-wrap: nowrap; /* 防止换行 */
    }
}

/* 新增：改进刑冲克害显示样式 */
.relations-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.relation-card {
    background: var(--surface-light);
    border-radius: 8px;
    padding: 15px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    border-left: 4px solid var(--primary-color);
}

.relation-card.he-card {
    border-left-color: #2ecc71; /* 绿色表示合 */
}

.relation-card.chong-card {
    border-left-color: #e74c3c; /* 红色表示冲 */
}

.relation-card.ke-card {
    border-left-color: #f39c12; /* 橙色表示克 */
}

.relation-card.xing-card {
    border-left-color: #9b59b6; /* 紫色表示刑 */
}

.relation-card.hai-card {
    border-left-color: #e67e22; /* 橙红色表示害 */
}

.relation-title {
    font-weight: bold;
    margin-bottom: 10px;
    color: var(--text);
    display: flex;
    align-items: center;
}

.relation-title i {
    margin-right: 8px;
}

.relation-items {
    list-style: none;
    padding: 0;
}

.relation-items li {
    padding: 5px 0;
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
}

.relation-items li:last-child {
    border-bottom: none;
}

.relation-item {
    display: flex;
    align-items: center;
}

.relation-item i {
    margin-right: 5px;
    color: var(--text-muted);
}

.tiangan-relation, .dizhi-relation {
    margin-bottom: 30px;
}

.relation-category {
    margin-bottom: 15px;
}

.relation-category-title {
    font-size: 16px;
    font-weight: bold;
    color: var(--text);
    margin-bottom: 10px;
    padding-left: 10px;
    border-left: 3px solid var(--primary-color);
}

.ai-interpret-btn {
    background: linear-gradient(135deg, #1abc9c 0%, #16a085 100%);
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 15px;
    font-size: 14px;
    transition: transform 0.2s;
}

.ai-interpret-btn:hover {
    transform: scale(1.05);
}

.interpret-result {
    margin-top: 20px;
    padding: 15px;
    background: var(--surface-light);
    border-radius: 5px;
    border-left: 4px solid #1abc9c;
    display: none;
}

/* 合盘结果页面增强样式 */
.hepan-basic-analysis {
    margin-top: 20px;
}

.hepan-basic-analysis h4 {
    margin-bottom: 15px;
    color: var(--primary-color);
    font-size: 1.2rem;
}

.hepan-basic-analysis h5 {
    margin: 15px 0 10px 0;
    color: var(--text);
    font-size: 1rem;
    border-left: 3px solid var(--primary-color);
    padding-left: 10px;
}

.hepan-basic-analysis ul {
    padding-left: 20px;
    margin-bottom: 10px;
}

.hepan-basic-analysis li {
    margin-bottom: 5px;
    padding: 5px 0;
    border-bottom: 1px dashed var(--border);
}

.hepan-basic-analysis li:last-child {
    border-bottom: none;
}

.hepan-basic-analysis p {
    color: var(--text-muted);
    font-style: italic;
    margin: 10px 0;
}

.interpretation-section {
    margin-top: 20px;  /* ✅ 减小间距 */
    padding-top: 0;  /* ✅ 移除顶部 padding */
    border-top: none;  /* ✅ 移除顶部边框，减少视觉干扰 */
}

.interpretation-section h4 {
    margin-bottom: 15px;
    color: var(--primary-color);
}

.interpret-controls {
    display: flex;
    gap: 15px;
    margin-bottom: 15px;
    align-items: center;
    flex-wrap: wrap;
}

.interpret-controls select {
    padding: 8px 12px;
    background: var(--surface-light);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text);
    font-size: 0.9rem;
}

.interpretation-result {
    background: transparent;
    border-radius: 0;
    padding: 0;
    margin-top: 20px;
    width: 100%;
}

.interpretation-result .result-content {
    width: 100%;
    max-width: 100%;
    border: 2px solid var(--border);
    border-radius: 8px;
    padding: 15px 20px;  /* 左右增加 padding */
    box-sizing: border-box;
}

.interpretation-result .interpretation-content {
    line-height: 1.8;
    color: var(--text);
    white-space: pre-wrap;
    font-size: 0.95rem;  /* 增加半个字号 */
}

/* 移动端优化：限制解读结果区域高度 */
@media (max-width: 768px) {
    .interpretation-result .result-content {
        max-height: 66vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        border: 2px solid var(--border);
        border-radius: 8px;
        padding: 15px 18px;  /* 移动端左右稍微增加 */
    }
    
    /* 防止滚动穿透 */
    .interpretation-result {
        overscroll-behavior: contain;
    }
    
    .interpretation-result .interpretation-content {
        font-size: 0.9rem;  /* 移动端增加半个字号 */
    }
}

.interpretation-content {
    line-height: 1.8;
    color: var(--text);
    white-space: pre-wrap;
}

.parsed-interpretation {
    margin-top: 15px;
}

.parsed-interpretation > div {
    margin-bottom: 10px;
    padding: 10px;
    background: var(--surface);
    border-radius: 6px;
}

.parsed-interpretation h5 {
    color: var(--secondary-color);
    margin-bottom: 5px;
    font-size: 0.95rem;
}

/* 合盘关系表格样式 */
.relations-table {
    width: 100%;
    border-collapse: collapse;
    margin: 15px 0;
    font-size: 14px;
    background: var(--surface-light);
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--border);
}

.relations-table th,
.relations-table td {
    padding: 10px 15px;
    text-align: left;
    border-bottom: 1px solid var(--border);
}

.relations-table th {
    background-color: var(--surface);
    font-weight: 600;
    color: var(--text);
}

.relations-table tr:last-child td {
    border-bottom: none;
}

.relations-table tr:nth-child(even) {
    background-color: var(--background);
}

.relations-table tr:hover {
    background-color: var(--surface);
}

.relation-he { color: #2ecc71; }
.relation-chong { color: #e74c3c; }
.relation-ke { color: #f39c12; }
.relation-xing { color: #9b59b6; }
.relation-hai { color: #e67e22; }

.relation-icon {
    display: inline-block;
    width: 20px;
    text-align: center;
    margin-right: 5px;
}

/* 五行相克表格 */
.wuxing-ke-table {
    width: 100%;
    border-collapse: collapse;
    margin: 15px 0;
    background: var(--surface-light);
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--border);
}

.wuxing-ke-table th,
.wuxing-ke-table td {
    padding: 12px;
    text-align: center;
    border-bottom: 1px solid var(--border);
}

.wuxing-ke-table th {
    background-color: var(--surface);
    font-weight: 600;
    color: var(--text);
}

.wuxing-ke-table tr:last-child td {
    border-bottom: none;
}

.wuxing-ke-table .arrow-col {
    width: 60px;
    text-align: center;
    font-weight: bold;
    color: var(--error);
}

/* 关系卡片样式 */
.relation-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 15px;
    margin: 15px 0;
}

.relation-card {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 15px;
    background: var(--surface-light);
    transition: box-shadow 0.2s;
}

.relation-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.relation-title {
    font-weight: 600;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
    color: var(--text);
}

.relation-items {
    list-style: none;
    padding: 0;
    margin: 0;
}

.relation-item {
    padding: 6px 0;
    border-bottom: 1px dashed var(--border);
}

.relation-item:last-child {
    border-bottom: none;
}

.relation-item i {
    margin-right: 8px;
    font-style: normal;
}

/* 合盘概览样式 */
.hepan-overview {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.overview-card {
    background: var(--surface-light);
    border-radius: 8px;
    padding: 20px;
    border: 1px solid var(--border);
    text-align: center;
}

.overview-title {
    font-size: 14px;
    color: var(--text-muted);
    margin-bottom: 10px;
}

.overview-value {
    font-size: 24px;
    font-weight: bold;
    color: var(--text);
}

/* 重复项统计样式 */
.duplicate-count {
    background: var(--surface);
    color: var(--secondary-color);
    border-radius: 12px;
    padding: 2px 8px;
    font-size: 12px;
    margin-left: 5px;
    display: inline-block;
}

/* 响应式优化 */
@media (max-width: 768px) {
    .relations-table,
    .wuxing-ke-table {
        font-size: 12px;
    }
    
    .relations-table th,
    .relations-table td,
    .wuxing-ke-table th,
    .wuxing-ke-table td {
        padding: 8px;
    }
    
    .hepan-overview {
        grid-template-columns: 1fr;
    }
    
    .relation-cards {
        grid-template-columns: 1fr;
    }
    
    /* 针对四柱表格的额外优化 */
    .pillar-table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch; /* iOS平滑滚动 */
    }
    
    .pillar-table {
        min-width: 100%; /* 不再强制设定最小宽度 */
        table-layout: fixed;
    }
    
    .pillar-table th,
    .pillar-table td {
        word-break: break-all;
        white-space: normal;
    }
    
    /* 神煞列表在移动端居中对齐 */
    .shensha-list {
        justify-content: center;
    }
    
    /* 信息行在移动端垂直堆叠 */
    .info-row {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .info-row .label {
        margin-bottom: 4px;
    }
}

/* 针对iPhone X等375px宽度屏幕的优化 */
@media (max-width: 375px) and (min-width: 321px) {
    .header h1 {
        font-size: 1.4rem;
    }
    
    .bazi-string {
        font-size: 1.1rem;
        letter-spacing: 0.5px;
    }
    
    .container {
        padding: 0;
    }
    
    section {
        padding: 5px;
    }
    
    .btn {
        padding: 12px 14px;
        font-size: 0.9rem;
    }
    
    .form-group input,
    .form-group select {
        padding: 10px 12px;
        font-size: 14px;
    }
    
    .nav-btn {
        padding: 6px 8px;
        font-size: 0.75rem;
        min-width: 70px;
    }
    
    .interpret-options {
        gap: 8px;
    }
    
    /* 针对四柱表格在iPhone X等375px屏幕上的优化 */
    .pillar-table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin: 0 -10px; /* 扩展到边缘 */
        padding: 0 10px;
        border: 1px solid var(--border);
        border-radius: 8px;
    }
    
    .pillar-table {
        min-width: 100%; /* 适应屏幕宽度 */
        font-size: 0.75rem; /* 进一步缩小字体 */
        table-layout: fixed; /* 固定列宽，避免被长文本撑开 */
    }
    
    .pillar-table th,
    .pillar-table td {
        padding: 5px 2px; /* 减小内边距 */
        white-space: normal; /* 允许换行 */
        word-break: break-all;
    }
    
    .label-column {
        width: 18%; /* 减小标签列宽度 */
    }
    
    .pillar-column {
        width: 20.5%; /* 调整列宽 */
        min-width: 0;
    }
    
    /* 针对藏干、神煞等复杂内容的优化 */
    .canggan-container,
    .fuxing-container {
        font-size: 0.7rem; /* 进一步减小字号以适应内容 */
        line-height: 1.2;
        min-height: auto; /* 重置最小高度 */
    }

    .shensha-container {
        font-size: 0.7rem;
        line-height: 1.2;
        min-height: auto;
        justify-content: flex-start; /* 保持顶部对齐 */
    }
    
    .canggan-item,
    .fuxing-item {
        font-size: 0.7rem; /* 进一步减小字号 */
        padding: 1px 0;
        margin: 1px 0;
        white-space: normal;
        overflow: visible; /* 不隐藏溢出内容 */
        max-width: none; /* 移除最大宽度限制 */
        display: block;
        text-align: center;
    }

    .shensha-item {
        font-size: 0.7rem;
        padding: 1px 0;
        margin: 0;
        white-space: nowrap; /* 保持不换行 */
        overflow: visible;
        max-width: none;
        display: block;
        text-align: center;
    }
    
    /* 特殊处理藏干和神煞较多的情况 */
    .canggan-container,
    .fuxing-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 1px; /* 减小项目间距 */
    }

    .shensha-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start; /* 顶部对齐 */
        gap: 1px;
    }
    
    /* 信息行在375px屏幕上垂直堆叠 */
    .info-row {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .info-row .label {
        margin-bottom: 2px;
    }
    
    /* 调整其他表格相关元素 */
    .pillar-table .label-cell {
        padding: 5px 3px;
        font-size: 0.65rem;
    }
    
    .pillar-table .pillar-cell {
        padding: 5px 3px;
        vertical-align: top; /* 保持上对齐 */
    }
}

/* iPhone SE及类似极小屏幕优化 */
@media (max-width: 320px) {
    .header h1 {
        font-size: 1.3rem;
    }
    
    .bazi-string {
        font-size: 1rem;
        letter-spacing: 0.2px;
    }
    
    .container {
        padding: 0;
    }
    
    section {
        padding: 5px;
    }
    
    .btn {
        padding: 11px 12px;
        font-size: 0.85rem;
    }
    
    .form-group input,
    .form-group select {
        padding: 9px 10px;
        font-size: 13px;
    }
    
    .nav-btn {
        padding: 5px 6px;
        font-size: 0.7rem;
        min-width: 60px;
    }
    
    .interpret-options {
        gap: 6px;
    }
    
    /* 进一步优化表格 */
    .pillar-table {
        min-width: 100%; /* 不再强制设定最小宽度 */
        font-size: 0.75rem;
        table-layout: fixed; /* 固定列宽 */
    }
    
    .pillar-table th,
    .pillar-table td {
        padding: 5px 2px;
        word-break: break-all;
        white-space: normal; /* 允许换行 */
    }
    
    .label-column {
        width: 18%; /* 占总宽度18% */
    }
    
    .pillar-column {
        width: 20.5%; /* 四柱各占约20% */
        min-width: 0;
    }
    
    .canggan-item,
    .fuxing-item {
        font-size: 0.65rem;
        padding: 1px 0;
        white-space: normal;
        text-align: center;
    }

    .shensha-item {
        font-size: 0.65rem;
        padding: 1px 0;
        white-space: nowrap; /* 神煞保持不换行 */
        text-align: center;
    }
    
    /* 在极小屏幕上将表格转换为卡片布局 */
    .pillar-table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin: 0 -5px;
        padding: 5px;
    }
    
    /* 当屏幕非常小时，隐藏整个表格并用卡片替代 */
    .pillar-table {
        display: none; /* 在极小屏幕上隐藏原表格 */
    }
    
    /* 显示卡片式布局替代表格 */
    .pillar-cards-container {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }
    
    .pillar-card {
        background: var(--background);
        border: 1px solid var(--border);
        border-radius: 8px;
        padding: 10px;
    }
    
    .pillar-card-header {
        font-weight: bold;
        color: var(--primary-color);
        text-align: center;
        padding-bottom: 8px;
        border-bottom: 1px solid var(--border);
        margin-bottom: 8px;
    }
    
    .pillar-card-row {
        display: flex;
        justify-content: space-between;
        padding: 4px 0;
        border-bottom: 1px dashed var(--border);
    }
    
    .pillar-card-label {
        color: var(--text-muted);
        font-size: 0.65rem;
    }
    
    .pillar-card-value {
        font-size: 0.7rem;
        text-align: right;
    }
    
    .pillar-card-canggan,
    .pillar-card-shensha {
        display: flex;
        flex-wrap: wrap;
        gap: 2px;
        margin-top: 4px;
    }
    
    .pillar-card-canggan-item,
    .pillar-card-shensha-item {
        font-size: 0.6rem;
        padding: 1px 3px;
        background: var(--surface);
        border-radius: 3px;
    }
    
    .canggan-item,
    .fuxing-item {
        font-size: 0.6rem;
        padding: 1px 2px;
    }

    .shensha-item {
        font-size: 0.6rem;
        padding: 1px 2px;
        white-space: nowrap;
    }
}

/* 触摸友好的交互效果优化 */
@media (hover: none) and (pointer: coarse) {
    /* 针对触摸设备的按钮交互优化 */
    .btn {
        -webkit-tap-highlight-color: transparent;
        tap-highlight-color: transparent;
        /* 使用transform代替box-shadow实现按压效果 */
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }
    
    .btn:active {
        transform: translateY(-1px) scale(0.98);
    }
    
    .nav-btn:active {
        transform: translateY(-1px) scale(0.98);
    }
    
    .history-item:active {
        background: var(--primary-color);
        transform: translateX(2px);
    }
}

/* 高对比度模式支持 */
@media (prefers-contrast: high) {
    :root {
        --border: #cbd5e1;
        --text: #0f172a;
        --text-muted: #475569;
        --background: #ffffff;
        --surface: #f1f5f9;
        --surface-light: #e2e8f0;
    }
    
    body {
        background: var(--background);
        color: var(--text);
    }
    
    section {
        background: transparent;
        border: none;
    }
    
    .bazi-card {
        background: transparent;
    }
    
    .btn-outline {
        border: 3px solid var(--primary-color);
    }
}

/* 减少动画偏好支持 */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    .btn,
    .nav-btn {
        transition: none;
    }
    
    .spinner {
        animation: none;
    }
    
    .history-item {
        transition: none;
    }
}

/* 五行颜色 */
.wu-jin { color: #f39c12 !important; font-weight: bold; }   /* 金 - 橙色 */
.wu-mu { color: #4caf50 !important; font-weight: bold; }    /* 木 - 绿色 */
.wu-huo { color: #f44336 !important; font-weight: bold; }   /* 火 - 红色 */
.wu-tu { color: #8d6e63 !important; font-weight: bold; }    /* 土 - 棕色 */
.wu-shui { color: #2196f3 !important; font-weight: bold; }  /* 水 - 蓝色 */

/* 保持原有的wx-类名作为备用，以防其他地方使用 */
.wx-wood { color: #4caf50 !important; font-weight: bold; }
.wx-fire { color: #f44336 !important; font-weight: bold; }
.wx-earth { color: #8d6e63 !important; font-weight: bold; }
.wx-metal { color: #f39c12 !important; font-weight: bold; }
.wx-water { color: #2196f3 !important; font-weight: bold; }

.char-large {
    font-size: 1.4rem;
}

.pillar-void {
    position: relative;
    display: inline-block;
}

.pillar-void-tag {
    position: absolute;
    left: 50%;
    top: -0.72em;
    transform: translateX(-50%);
    font-size: 0.44em;
    font-weight: 700;
    color: var(--text-muted);
    line-height: 1;
    pointer-events: none;
    background: var(--surface-light);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 2px 6px;
    white-space: nowrap;
}
.canggan-shishen {
    font-size: 0.8em;
    color: #888;
    margin-left: 2px;
    display: none; /* 移动端隐藏藏干的十神，或者让其换行 */
}

/* 在大屏幕上显示十神 */
@media (min-width: 600px) {
    .canggan-shishen {
        display: inline;
    }
}

.city-selector-hidden {
    display: none;
}

.region-picker-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    display: none;
    align-items: flex-end;
    justify-content: center;
    z-index: 9999;
}

.region-picker-overlay.is-open {
    display: flex;
}

.region-picker-sheet {
    width: min(720px, 100%);
    background: #ffffff;
    border-top-left-radius: 14px;
    border-top-right-radius: 14px;
    overflow: hidden;
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.15);
}

.region-picker-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
}

.region-picker-title {
    font-weight: 600;
    color: var(--text);
}

.region-picker-btn {
    border: none;
    background: transparent;
    padding: 8px 10px;
    font-size: 1rem;
    color: var(--text-muted);
    cursor: pointer;
}

.region-picker-btn-primary {
    color: var(--primary-color);
}

.region-picker-body {
    position: relative;
    padding: 8px 12px 14px;
}

.region-picker-columns {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
}

.region-picker-column {
    height: 240px;
    overflow: hidden;
    border-radius: 10px;
    background: var(--surface);
}

.region-picker-list {
    height: 240px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: y mandatory;
    padding: 100px 0;
}

.region-picker-item {
    height: 40px;
    line-height: 40px;
    padding: 0 10px;
    text-align: center;
    scroll-snap-align: center;
    color: var(--text);
    cursor: pointer;
    user-select: none;
    width: 100%;
    border: none;
    background: transparent;
    white-space: nowrap;
    overflow: visible; /* 允许超出部分显示 */
}

/* 针对长名字自动缩小字号或使用更紧凑的排版，在小屏幕上保证单行显示完全 */
@media (max-width: 400px) {
    .region-picker-item {
        font-size: 0.9em;
        letter-spacing: -0.5px;
        padding: 0 2px;
    }
}

.region-picker-item.is-active {
    color: var(--primary-color);
    font-weight: 600;
}

.region-picker-indicator {
    position: absolute;
    left: 12px;
    right: 12px;
    top: 50%;
    transform: translateY(-20px);
    height: 40px;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    pointer-events: none;
    border-radius: 10px;
}

/* ===== 出生时间选择器样式 ===== */

/* 标签样式 */
.birthtime-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    color: var(--text-muted);
    font-weight: 500;
}

.birthtime-label > span:first-child {
    font-size: 1rem;
}

/* 日期类型切换标签 */
.datetime-tabs {
    display: flex;
    background: var(--surface-light);
    border-radius: 8px;
    padding: 4px;
    gap: 4px;
}

.datetime-tab {
    flex: 1;
    padding: 6px 12px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.85rem;
    transition: all 0.3s;
}

.datetime-tab.active {
    background: var(--primary-color);
    color: white;
    font-weight: 500;
}

.datetime-tab:hover:not(.active) {
    background: rgba(139, 90, 43, 0.1);
}

/* 输入容器 */
.datetime-input-container {
    position: relative;
    margin-top: 8px;
}

.datetime-input-container.active {
    display: flex;
}

/* 日期显示文字 */
.datetime-display-text {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-top: 6px;
    padding: 4px 8px;
    background: var(--background);
    border-radius: 4px;
    text-align: center;
}

/* 输入框样式 */
.datetime-input {
    flex: 1;
    width: 100%;
    padding: 12px 50px 12px 16px;
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    font-size: 1rem;
    transition: all 0.3s;
}

.datetime-input:focus {
    outline: none;
    border-color: var(--primary-color);
}

.datetime-input[readonly] {
    background: var(--background);
    cursor: pointer;
}

/* 选择器按钮 */
.datetime-picker-btn {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 1.2rem;
    color: var(--text-muted);
    transition: all 0.3s;
}

.datetime-picker-btn:hover {
    color: var(--primary-color);
}

/* ===== 四柱选择器样式 ===== */

.sizhu-selector {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 16px;
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-top: 8px;
    align-items: center;
}

.sizhu-search-trigger {
    margin-top: 16px;
    width: 100%;
    max-width: 200px;
    align-self: center;
}

.sizhu-pillar {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 8px;
    background: var(--background);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s;
    border: 2px solid transparent;
}

.sizhu-pillar:hover {
    background: var(--surface-light);
    border-color: var(--primary-color);
}

.sizhu-pillar.selected {
    border-color: var(--primary-color);
    background: rgba(139, 90, 43, 0.1);
}

.sizhu-label {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.sizhu-ganzi {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
}

.sizhu-gan,
.sizhu-zhi {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 50%;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text);
    transition: all 0.3s;
}

/* 四柱选择器弹窗底部按钮 */
.sizhu-picker-footer {
    padding: 16px;
    border-top: 1px solid var(--border);
    text-align: center;
}

.sizhu-picker-footer .btn {
    width: 100%;
    padding: 12px 24px;
    font-size: 1rem;
    font-weight: 600;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s;
}

.sizhu-picker-footer .btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* 候选时间列表 */
.sizhu-candidates-list {
    max-height: 400px;
    overflow-y: auto;
    padding: 16px;
}

.candidate-item {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    margin-bottom: 8px;
    background: var(--background);
    border: 1px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s;
}

.candidate-item:hover {
    border-color: var(--primary-color);
    background: rgba(139, 90, 43, 0.05);
}

.candidate-item input[type="radio"] {
    margin-right: 12px;
    width: 20px;
    height: 20px;
    cursor: pointer;
}

.candidate-item label {
    flex: 1;
    cursor: pointer;
    margin: 0;
    color: var(--text);
}

.candidate-date {
    font-size: 1rem;
    font-weight: 500;
}

.sizhu-gan:hover,
.sizhu-zhi:hover {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

/* ===== 滚轮选择器弹窗 ===== */

.wheel-picker-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    align-items: flex-end;
    justify-content: center;
    z-index: 10000;
}

.wheel-picker-overlay.active {
    display: flex;
}

.wheel-picker-sheet {
    width: 100%;
    max-width: 500px;
    background: #ffffff;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    overflow: hidden;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
}

.wheel-picker-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
}

.wheel-picker-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text);
}

.wheel-picker-actions {
    display: flex;
    gap: 12px;
}

.wheel-picker-btn {
    padding: 8px 16px;
    border: none;
    background: transparent;
    font-size: 1rem;
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.3s;
}

.wheel-picker-cancel {
    color: var(--text-muted);
}

.wheel-picker-confirm {
    color: var(--primary-color);
    font-weight: 600;
}

.wheel-picker-body {
    padding: 20px;
}

/* 公历滚轮 */
.solar-wheel-container {
    display: flex;
    gap: 8px;
    justify-content: center;
}

.wheel-column {
    flex: 1;
    max-width: 80px;
    height: 240px; /* 添加固定高度 */
    overflow: hidden;
    border-radius: 10px;
    background: var(--surface); /* 添加背景色 */
}

.wheel-column-label {
    text-align: center;
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.wheel-list {
    height: 240px;
    overflow-y: auto;
    scroll-snap-type: y mandatory;
    -webkit-overflow-scrolling: touch;
    position: relative;
    background: #ffffff; /* 改为白色背景 */
    border-radius: 10px; /* 调整圆角 */
    padding: 100px 0; /* 调整内边距 */
    box-sizing: border-box;
}

.wheel-list.is-disabled {
    opacity: 0.55;
    pointer-events: none;
}

.wheel-item {
    height: 40px; /* 从 44px 改为 40px */
    line-height: 40px;
    text-align: center;
    scroll-snap-align: center;
    font-size: 1rem;
    color: var(--text);
    cursor: pointer;
    transition: all 0.2s;
}

.wheel-item.is-selected {
    color: var(--primary-color);
    font-weight: 600;
    font-size: 1.1rem;
}

.wheel-indicator {
    position: absolute;
    left: 12px;
    right: 12px;
    top: 50%;
    transform: translateY(-20px); /* 调整为 20px 匹配 40px 高度 */
    height: 40px;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    pointer-events: none;
    border-radius: 10px; /* 添加圆角 */
}

/* 农历滚轮 - 与公历类似，但显示农历信息 */
.lunar-wheel-container {
    display: flex;
    gap: 8px;
    justify-content: center;
}

/* 与公历滚轮样式保持一致 */
.lunar-wheel-container .wheel-column {
    flex: 1;
    max-width: 80px;
    height: 240px;
    overflow: hidden;
    border-radius: 10px;
    background: var(--surface);
}

.lunar-wheel-container .wheel-column-label {
    text-align: center;
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.lunar-wheel-container .wheel-list {
    height: 240px;
    overflow-y: auto;
    scroll-snap-type: y mandatory;
    -webkit-overflow-scrolling: touch;
    position: relative;
    background: #ffffff;
    border-radius: 10px;
    padding: 100px 0;
    box-sizing: border-box;
}

.lunar-wheel-container .wheel-item {
    height: 40px;
    line-height: 40px;
    text-align: center;
    scroll-snap-align: center;
    font-size: 1rem;
    color: var(--text);
    cursor: pointer;
    transition: all 0.2s;
}

.lunar-wheel-container .wheel-item.is-selected {
    color: var(--primary-color);
    font-weight: 600;
    font-size: 1.1rem;
}

.lunar-wheel-container .wheel-indicator {
    position: absolute;
    left: 12px;
    right: 12px;
    top: 50%;
    transform: translateY(-20px); /* 调整为 20px 匹配 40px 高度 */
    height: 40px;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    pointer-events: none;
    border-radius: 10px; /* 添加圆角 */
}

/* 农历特殊样式：显示月份别称 */
.lunar-month-names .wheel-item {
    font-size: 0.95rem;
}

/* 四柱选择弹窗 */
.sizhu-picker-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 10000;
}

.sizhu-picker-overlay.active {
    display: flex;
}

.sizhu-picker-sheet {
    width: 90%;
    max-width: 400px;
    background: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2);
}

.sizhu-picker-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
}

.sizhu-picker-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text);
}

.sizhu-picker-body {
    padding: 20px;
}

.sizhu-picker-range {
    text-align: center;
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 16px;
}

/* 四柱并排显示 */
.sizhu-four-pillars {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}

.sizhu-pillar-selector {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 12px 8px;
    border-radius: 8px;
    background: var(--background);
    border: 2px solid transparent;
    transition: all 0.3s;
}

.sizhu-pillar-selector:hover {
    background: #f5f5f5;
}

.sizhu-pillar-selector.selected {
    border-color: var(--primary-color);
    background: rgba(108, 92, 68, 0.15);
    box-shadow: 0 0 0 2px rgba(108, 92, 68, 0.2);
}

.sizhu-pillar-label {
    font-size: 0.85rem;
    color: var(--text-muted);
    font-weight: 500;
}

.sizhu-pillar-gan,
.sizhu-pillar-zhi {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text);
}

/* 查找范围提示 */
.sizhu-search-range {
    text-align: center;
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

/* 搜索结果区域 */
.sizhu-search-results {
    margin-top: 16px;
    padding: 16px;
    background: #f9f9f9;
    border-radius: 8px;
    border: 1px solid var(--border);
}

.sizhu-results-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 12px;
}

.sizhu-candidates-list {
    max-height: 200px;
    overflow-y: auto;
}

.sizhu-candidate-item {
    display: flex;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #eee;
}

.sizhu-candidate-item:last-child {
    border-bottom: none;
}

.sizhu-candidate-item input[type="radio"] {
    margin-right: 10px;
}

.sizhu-candidate-item label {
    flex: 1;
    cursor: pointer;
    margin: 0;
}

.candidate-date {
    font-size: 0.9rem;
    color: var(--text);
}

.sizhu-confirm-candidate-btn {
    margin-top: 12px;
    width: 100%;
}

/* 底部按钮 */
.sizhu-picker-footer {
    padding: 16px 20px;
    border-top: 1px solid var(--border);
    text-align: center;
}

.sizhu-picker-footer .btn {
    width: 100%;
    max-width: 300px;
}

/* 四柱天干选择 - 上下两排 */
.sizhu-gan-picker {
    margin-bottom: 16px;
}

.sizhu-gan-row {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
    margin-bottom: 8px;
}

.sizhu-gan-btn {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--background);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--text);
    cursor: pointer;
    transition: all 0.3s;
}

.sizhu-gan-btn:hover {
    background: var(--primary-color);
    color: white;
}

.sizhu-gan-btn.selected {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

/* 四柱地支选择 - 上下两排 */
.sizhu-zhi-picker {
    margin-bottom: 16px;
}

.sizhu-zhi-row {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 6px;
    margin-bottom: 8px;
}

.sizhu-zhi-btn {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--background);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text);
    cursor: pointer;
    transition: all 0.3s;
}

.sizhu-zhi-btn:hover {
    background: var(--secondary-color);
    color: white;
}

.sizhu-zhi-btn.selected {
    background: var(--secondary-color);
    color: white;
    border-color: var(--secondary-color);
}

/* 四柱搜索结果 */
.sizhu-search-results {
    margin-top: 16px;
    padding: 16px;
    background: #f9f9f9;
    border-radius: 8px;
    border: 1px solid var(--border);
}

.sizhu-results-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 12px;
}

.sizhu-candidates-list {
    max-height: 200px;
    overflow-y: auto;
}

.sizhu-candidate-item {
    display: flex;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #eee;
}

.sizhu-candidate-item input[type="radio"] {
    margin-right: 10px;
}

.sizhu-candidate-item label {
    flex: 1;
    cursor: pointer;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.candidate-date {
    font-size: 0.95rem;
    color: var(--text);
    font-weight: 500;
}

.candidate-sizhu {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.sizhu-confirm-candidate-btn {
    margin-top: 12px;
    width: 100%;
}

/* 四柱选择的阳历时间显示 */
.sizhu-selected-time {
    text-align: center;
    padding: 8px;
    margin-top: 8px;
    font-size: 0.85rem;
    color: var(--text-muted);
    background: #f5f5f5;
    border-radius: 4px;
}

/* 四柱文字显示区域 */
.datetime-display-text {
    margin-top: 12px;
    padding: 12px;
    background: #f9f9f9;
    border-radius: 8px;
    border: 1px solid var(--border);
}

.sizhu-text-main {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 6px;
}

.sizhu-text-solar {
    font-size: 0.85rem;
    color: var(--text-muted);
    font-weight: normal;
}

/* ===== 响应式设计 ===== */

@media (max-width: 768px) {
    .birthtime-label {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    
    .datetime-tabs {
        width: 100%;
    }
    
    .sizhu-selector {
        flex-wrap: wrap;
        gap: 8px;
    }
    
    .sizhu-pillar {
        flex: 0 1 calc(50% - 4px); /* 手机端两列并排 */
    }
    
    .sizhu-search-trigger {
        max-width: 100%;
        margin-top: 12px;
    }
    
    .wheel-picker-sheet {
        max-width: 100%;
        border-top-left-radius: 12px;
        border-top-right-radius: 12px;
    }
    
    /* 四柱选择器响应式 */
    .sizhu-four-pillars {
        gap: 8px;
        margin-bottom: 16px;
    }
    
    .sizhu-pillar-gan,
    .sizhu-pillar-zhi {
        width: 32px;
        height: 32px;
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    /* 超小屏幕保持两列布局 */
    
    .sizhu-gan,
    .sizhu-zhi {
        width: 36px;
        height: 36px;
        font-size: 1rem;
    }
}

/* ========== 每日运势样式 ========== */

.fortune-section {
    margin-top: 20px;
    padding: 30px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.fortune-section h2 {
    font-size: 1.6rem;
    margin-bottom: 0;
    color: var(--text);
    border-bottom: 2px solid var(--primary-color);
    padding-bottom: 10px;
    display: inline-block;
}

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

.save-image-btn {
    padding: 8px 16px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.save-image-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.save-image-btn:active {
    transform: translateY(0);
}

.save-image-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.fortune-date {
    font-size: 1.1em;
    color: #666;
    margin-bottom: 30px;
    text-align: center;
    padding: 10px;
    background: #f9f9f9;
    border-radius: 8px;
}

.fortune-content {
    display: block;
}

.fortune-block {
    margin-bottom: 28px;
}

.fortune-block-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}

.fortune-block-title {
    margin: 0;
    font-size: 1.25rem;
    color: var(--text);
}

.fortune-block-meta {
    color: #666;
    font-size: 0.95rem;
    text-align: right;
    line-height: 1.4;
}

.fortune-meta-sep {
    margin: 0 10px;
    color: #ddd;
}

.fortune-divider {
    border: 0;
    border-top: 1px solid #eee;
    margin: 26px 0;
}

.fortune-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 25px;
}

.fortune-card {
    background: #f9f9f9;
    border-radius: 10px;
    padding: 20px;
    border-left: 4px solid var(--primary-color);
    transition: all 0.3s ease;
}

.fortune-card:hover {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.fortune-card-title {
    margin-top: 0;
    margin-bottom: 15px;
    color: var(--primary-color);
    font-size: 1.2em;
    font-weight: bold;
    text-align: center;
    padding-bottom: 10px;
    border-bottom: 1px solid #e8e0d5;
}

.fortune-body {
    display: grid;
    gap: 15px;
}

.fortune-ganzhi-row,
.fortune-pulse-row,
.fortune-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.fortune-ganzhi-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: #fff;
    border-radius: 999px;
    border: 1px solid #eee;
    color: #555;
    font-size: 0.9rem;
}

.fortune-pulse-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: #fff;
    border-radius: 999px;
    border: 1px solid #eee;
    color: #555;
    font-size: 0.9rem;
    white-space: nowrap;
}

.fortune-pulse-tag {
    color: var(--primary-color);
    font-weight: 600;
}

.fortune-tip-chip {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    background: #fff;
    border-radius: 999px;
    border: 1px solid #eee;
    color: #555;
    font-size: 0.9rem;
}

.fortune-tip-chip-warn {
    border-color: rgba(231, 76, 60, 0.25);
    color: #b03a2e;
}

.fortune-phase {
    display: grid;
    gap: 8px;
}

.fortune-shenqiang,
.fortune-shenruo {
    padding: 15px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}

.fortune-shenqiang h4,
.fortune-shenruo h4 {
    margin: 0 0 8px 0;
    font-size: 0.95em;
    font-weight: 600;
}

.fortune-shenqiang p,
.fortune-shenruo p {
    margin: 0;
    font-size: 0.9em;
    line-height: 1.8;
    color: #555;
    text-align: justify;
}

.fortune-shenruo {
    border-left: 3px solid #e74c3c;
}

.fortune-shenqiang {
    border-left: 3px solid #27ae60;
}

.fortune-shenruo h4 {
    color: #e74c3c;
}

.fortune-shenqiang h4 {
    color: #27ae60;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .fortune-section {
        padding: 20px;
    }
    
    .fortune-grid {
        grid-template-columns: 1fr;
    }
    
    .fortune-card {
        padding: 15px;
    }
}

@media (max-width: 480px) {
    .fortune-section {
        padding: 15px;
    }
    
    .fortune-section h2 {
        font-size: 1.3rem;
    }
    
    .fortune-card-title {
        font-size: 1.1em;
    }
    
    .fortune-shenqiang p,
    .fortune-shenruo p {
        font-size: 0.85em;
    }
}

.detail-pan {
    margin-top: 12px;
    background: var(--surface-light);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px;
}

.detail-pan.is-collapsed {
    padding: 0;
}

.detail-pan-collapsed {
    width: 100%;
    border: none;
    background: transparent;
    color: var(--text);
    font-size: 1.05rem;
    font-weight: 600;
    padding: 12px;
    text-align: left;
    cursor: pointer;
}

.detail-pan-collapsed:active {
    transform: translateY(1px);
}

.detail-pan-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.detail-pan-title {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text);
}

.detail-pan-toggle {
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    border-radius: 10px;
    padding: 8px 10px;
    font-size: 0.95rem;
    cursor: pointer;
}

.detail-pan-table-wrap {
    overflow-x: auto;
}

.detail-pan-table {
    width: 100%;
    border-collapse: collapse;
    background: transparent;
    table-layout: fixed;
    --dp-col-count: 6;
    --dp-label-width: 56px;
}

.detail-pan-table th,
.detail-pan-table td {
    padding: 10px 8px;
    border-bottom: 1px dashed var(--border);
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
}

.detail-pan-table thead th {
    color: var(--text-muted);
    font-weight: 700;
}

.detail-pan:not(.is-collapsed) .detail-pan-table th[data-col="year"],
.detail-pan:not(.is-collapsed) .detail-pan-table td[data-col="year"] {
    position: relative;
}

.detail-pan:not(.is-collapsed) .detail-pan-table th[data-col="year"]::before,
.detail-pan:not(.is-collapsed) .detail-pan-table td[data-col="year"]::before {
    content: '';
    position: absolute;
    left: 6px;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--border);
    pointer-events: none;
}

.dp-label {
    text-align: left;
    color: var(--text-muted);
    font-weight: 700;
    width: var(--dp-label-width);
}

.dp-col-label {
    width: var(--dp-label-width);
}

.dp-col-data {
    width: calc((100% - var(--dp-label-width)) / var(--dp-col-count, 6));
}

.dp-col {
    font-size: 0.95rem;
    font-weight: 700;
}

.dp-gan {
    font-size: 1.6rem;
    font-weight: 800;
    display: inline-block;
    line-height: 1;
}

.dp-muted {
    color: var(--text-muted);
}

.dp-zhi-cell {
    position: relative;
    min-height: 3.05rem;
}

.dp-zhi-anchor {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.dp-zhi-main {
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1;
    height: 1.6rem;
    display: inline-flex;
    align-items: center;
    position: relative;
}

.dp-zhi-main.is-void {
    /* 恢复 100% 饱和度与不透明度，由 dp-void-tag 区分即可 */
}

.dp-void-tag {
    position: absolute;
    left: 50%;
    top: -1.0em;
    transform: translateX(-50%);
    font-size: 0.55em;
    font-weight: 700;
    color: var(--text-muted);
    line-height: 1;
    pointer-events: none;
}

.dp-canggan-list {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateY(-50%);
    margin-left: calc(0.55em + 6px);
    display: flex;
    flex-direction: column;
    gap: 2px;
    height: 3.05rem;
    justify-content: center;
}

.dp-canggan-item {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    line-height: 1.2;
    opacity: 0.40;
    filter: saturate(0.6);
}

.dp-canggan-gan {
    font-weight: 800;
}

.dp-fuxing-list {
    display: grid;
    grid-auto-flow: row;
    grid-auto-rows: 1.3em;
    row-gap: 2px;
    align-items: center;
    justify-items: center;
    height: calc(3 * 1.3em + 2 * 2px);
    overflow: hidden;
}

.dp-fuxing-item {
    font-size: 0.92rem;
    color: var(--text);
    line-height: 1.3;
}

.detail-pan-bars {
    margin-top: 12px;
    display: grid;
    gap: 10px;
}

.detail-pan-bar-group {
    display: grid;
    gap: 6px;
}

.detail-pan-bar-title {
    color: var(--text-muted);
    font-size: 0.9rem;
    font-weight: 700;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.detail-pan-bar-meta {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-muted);
    white-space: nowrap;
}

.detail-pan-bar {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
}

.detail-pan-bar.detail-pan-bar-grid {
    display: grid;
    overflow-x: hidden;
    padding-bottom: 0;
}

.detail-pan-bar.detail-pan-bar-grid .dp-chip {
    width: 100%;
    min-width: 0;
}

.detail-pan-bar.dp-dayun-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.detail-pan-bar.dp-liunian-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.dp-chip.dp-xiaoyun {
    background: rgba(0, 0, 0, 0.04);
}

.dp-chip-sub-age {
    line-height: 1.05;
}

@media (max-width: 480px) {
    .dp-chip-sub {
        font-size: 0.72rem;
    }
    .dp-chip-sub-age {
        font-size: 0.66rem;
    }
}

.dp-chip {
    flex: 0 0 auto;
    border: 1px solid var(--border);
    background: var(--surface);
    border-radius: 10px;
    padding: 8px 10px;
    min-width: 78px;
    cursor: pointer;
    text-align: center;
}

.dp-chip.is-active {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(139, 90, 43, 0.15);
}

.dp-chip-main {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--text);
    line-height: 1.1;
}

.dp-chip-sub {
    margin-top: 4px;
    font-size: 0.78rem;
    color: var(--text-muted);
}

.dp-chip-sub-age {
    margin-top: 2px;
    font-size: 0.72rem;
    white-space: nowrap;
}

.dp-chip-sub-age.dp-age-long {
    font-size: 0.62rem;
    letter-spacing: -0.2px;
    transform: translateX(-2px);
}

.dp-age {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-weight: 700;
}

.dp-year-chip .dp-year {
    font-size: 0.85rem;
    color: var(--text-muted);
    font-weight: 700;
}

.dp-year-chip .dp-gz {
    margin-top: 2px;
    font-size: 1rem;
    font-weight: 900;
}

.dp-date-range {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1.05;
}

.dp-gz-vert {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
}

.dp-gz-char {
    font-weight: 800;
    line-height: 1;
}

@media (max-width: 480px) {
    .detail-pan-table {
        --dp-label-width: 44px;
    }

    .detail-pan-table th,
    .detail-pan-table td {
        padding: 8px 6px;
    }

    .dp-label {
        width: var(--dp-label-width);
        font-size: 0.85rem;
    }

    .dp-col-label {
        width: var(--dp-label-width);
    }

    .dp-col-data {
        width: calc((100% - var(--dp-label-width)) / 6);
    }

    .dp-gan,
    .dp-zhi-main {
        font-size: 1.25rem;
        font-weight: 700;
    }

    .dp-zhi-main {
        height: 1.25rem;
    }

    .dp-zhi-cell {
        min-height: 2.75rem;
    }

    .dp-canggan-item {
        font-size: 0.66rem;
        opacity: 0.75;
    }

    .dp-canggan-list {
        margin-left: calc(0.55em + 5px);
        height: 2.75rem;
    }

    .dp-fuxing-list {
        grid-auto-rows: 1.35em;
        height: calc(3 * 1.35em + 2 * 2px);
    }

    .dp-fuxing-item {
        font-size: 0.82rem;
    }

    .detail-pan-bar {
        overflow-x: auto;
        flex-wrap: nowrap;
    }

    .dp-chip {
        min-width: 52px;
        padding: 5px 6px;
    }

    .dp-chip-main {
        font-size: 0.85rem;
        font-weight: 600;
    }

    .dp-chip-sub {
        font-size: 0.65rem;
    }

    .dp-chip-sub-age {
        font-size: 0.62rem;
    }

    .dp-age {
        font-size: 0.68rem;
    }

    .detail-pan-bar-meta {
        font-size: 0.72rem;
    }

    .dp-year-chip .dp-year {
        font-size: 0.75rem;
    }

    .dp-year-chip .dp-gz {
        font-size: 0.85rem;
        font-weight: 800;
    }

    .dp-gz-vert {
        gap: 1px;
    }
}

/* ================================================
   分享卡片样式
   ================================================ */

/* ========== 分享卡片 v2.0 ========== */

/* --- overlay / modal (保留不变) --- */

.share-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    animation: shareFadeIn 0.25s ease;
}

@keyframes shareFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.share-modal {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    animation: shareSlideUp 0.3s ease;
}

@keyframes shareSlideUp {
    from { transform: translateY(30px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.share-modal-close {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    z-index: 10;
    transition: background 0.2s;
}

.share-modal-close:hover {
    background: rgba(255, 255, 255, 0.3);
}

.share-modal-card-wrapper {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
}

.share-modal-actions {
    display: flex;
    gap: 12px;
}

.share-action-btn {
    padding: 10px 24px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.share-action-download {
    background: #c9a96e;
    color: #1a1a2e;
}

.share-action-download:hover {
    background: #d4b87a;
}

.share-action-copy {
    background: rgba(255, 255, 255, 0.12);
    color: #e0e0e0;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.share-action-copy:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* --- 卡片本体 --- */

.share-card {
    width: 360px;
    padding: 28px 24px 20px;
    border-radius: 16px;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    color: #f0e6d3;
    font-family: "Noto Serif SC", "Source Han Serif SC", "SimSun", serif;
    box-sizing: border-box;
}

.share-card-header {
    text-align: center;
    margin-bottom: 20px;
}

.share-card-logo {
    font-size: 13px;
    color: #c9a96e;
    letter-spacing: 2px;
}

.share-card-body {
    padding: 0 4px;
}

/* --- 个人信息区 --- */
.share-card-info {
    margin-bottom: 18px;
    padding: 10px 16px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.share-info-line {
    display: flex;
    align-items: baseline;
    justify-content: center;
    padding: 3px 0;
}

.share-label {
    font-size: 15px;
    color: #a0a0b0;
}

.share-dot {
    font-size: 18px;
    color: #c9a96e;
    font-weight: bold;
}

.share-info-value {
    font-size: 13px;
    color: #c0c8d4;
}

.share-info-bazi {
    font-family: "Noto Serif SC", "Source Han Serif SC", "SimSun", serif;
    letter-spacing: 2px;
}

.share-nickname-refresh {
    display: inline-block;
    margin-left: 6px;
    cursor: pointer;
    font-size: 16px;
    color: #7a8ba0;
    transition: color 0.2s, transform 0.3s;
    user-select: none;
    vertical-align: middle;
    line-height: 1;
}

.share-nickname-refresh:hover {
    color: #c9a96e;
    transform: rotate(180deg);
}

/* --- 隐私开关 --- */
.share-modal-privacy {
    display: flex;
    justify-content: center;
    margin: 4px 0 0;
}

.share-privacy-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
}

.share-privacy-checkbox {
    width: 16px;
    height: 16px;
    accent-color: #5b8def;
    cursor: pointer;
}

.share-privacy-label {
    font-size: 13px;
    color: #8b9dc3;
}

/* 隐私模式：统一隐藏分隔点和换一按钮 */
.share-card-info--masked .share-dot,
.share-card-info--masked .share-nickname-refresh {
    display: none !important;
}

/* ========== v2.0 新布局：Hero + 喜用 + 命盘主线 + 特质 + quote ========== */

/* --- Hero 区 --- */
.share-card-hero {
    text-align: center;
    margin-bottom: 6px;
}

.share-hero-label {
    display: block;
    font-size: 14px;
    color: #a0a0b0;
    margin-bottom: 4px;
}

.share-hero-value {
    display: block;
    font-size: 52px;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: 8px;
}

/* --- 喜用神 --- */
.share-card-yongshen {
    text-align: center;
    margin-bottom: 22px;
}

.share-yongshen-label {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.35);
}

.share-yongshen-value {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.55);
    letter-spacing: 2px;
}

/* --- 命盘主线（三标签行）--- */
.share-card-mainline {
    text-align: center;
    margin-bottom: 18px;
}

.share-card-mainline--single {
    margin-bottom: 8px;
}

.share-mainline-label {
    display: block;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.3);
    margin-bottom: 10px;
    letter-spacing: 2px;
}

.share-mainline-tags {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

.share-mainline-tag {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
}

/* 格局标签 - 金色 */
.share-tag--pattern {
    background: rgba(201, 169, 110, 0.18);
    border: 1px solid rgba(201, 169, 110, 0.35);
    color: #e8d5a3;
}

/* 格局标签 - 弱化（杂格） */
.share-tag--pattern-weak {
    background: rgba(139, 157, 195, 0.12);
    border: 1px solid rgba(139, 157, 195, 0.25);
    color: #8b9dc3;
}

/* 结构标签 - 蓝色 */
.share-tag--structure {
    background: rgba(96, 165, 250, 0.15);
    border: 1px solid rgba(96, 165, 250, 0.3);
    color: #93c5fd;
}

/* 日柱标签 - 紫色 */
.share-tag--pillar {
    background: rgba(167, 139, 250, 0.15);
    border: 1px solid rgba(167, 139, 250, 0.3);
    color: #c4b5fd;
}

/* --- 特质关键词 --- */
.share-card-traits {
    display: flex;
    justify-content: center;
    gap: 14px;
    margin: 0 0 24px;
    flex-wrap: wrap;
}

.share-trait {
    font-size: 14px;
    color: #b8c5d6;
    padding: 4px 10px;
    border: 1px solid rgba(201, 169, 110, 0.3);
    border-radius: 20px;
    white-space: nowrap;
}

/* --- 文案 --- */
.share-card-quote {
    text-align: center;
    margin: 0 0 8px;
    padding: 0 12px;
    line-height: 1.8;
}

.share-card-quote--no-pattern {
    margin-top: 18px;
}

.share-quote-text {
    font-size: 15px;
    color: #d4c5a9;
}

/* --- Footer --- */
.share-card-footer {
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 16px;
}

.share-footer-qr-placeholder {
    display: inline-block;
    width: 64px;
    height: 64px;
    margin: 0 auto 6px;
    border: 2px dashed rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    line-height: 64px;
}

.share-footer-qr-icon {
    display: inline-block;
    vertical-align: middle;
    line-height: 1.3;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.2);
    letter-spacing: 2px;
    text-align: center;
}

.share-footer-text {
    font-size: 11px;
    color: #6a7a8a;
    letter-spacing: 1px;
}

/* --- Toast --- */
.share-copy-toast {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    padding: 10px 24px;
    border-radius: 8px;
    font-size: 14px;
    z-index: 10001;
    transition: opacity 0.3s;
    pointer-events: none;
}

.feedback-btn-share:hover {
    background: #5b8def !important;
    color: white !important;
}

/* 五行参数雷达图与表格样式 */
.wuxing-params-container {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 20px;
    margin: 20px 0;
}

.radar-chart-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 20px;
}

.radar-legend {
    display: flex;
    gap: 20px;
    margin-top: 15px;
    font-size: 14px;
    color: var(--text);
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.legend-color-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 1.5px solid;
    background: transparent;
}

.wuxing-params-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
    background: var(--surface-light, rgba(255,255,255,0.03));
    border-radius: 8px;
    overflow: hidden;
}

.wuxing-params-table th,
.wuxing-params-table td {
    padding: 12px 10px;
    text-align: center;
    border-bottom: 1px solid var(--border);
    color: var(--text);
}

.wuxing-params-table th {
    background: rgba(0, 0, 0, 0.2);
    color: var(--text-muted);
    font-weight: normal;
}

.wuxing-params-table tr:last-child td {
    border-bottom: none;
}

.wx-color-mu { color: #4CAF50; font-weight: bold; }
.wx-color-huo { color: #F44336; font-weight: bold; }
.wx-color-tu { color: #FF9800; font-weight: bold; }
.wx-color-jin { color: #FFC107; font-weight: bold; }
.wx-color-shui { color: #2196F3; font-weight: bold; }

/* ========== 合盘签名卡样式 ========== */
.hepan-section-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--primary-color, #8b5a2b);
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--primary-color, #8b5a2b);
    display: flex;
    align-items: center;
    gap: 8px;
}

.section-icon {
    font-size: 1.3rem;
}

.hepan-signature-card {
    background: var(--surface-light, #fcf9f2);
    border-radius: 12px;
    padding: 20px;
    border: 1px solid var(--border, #e8e0d5);
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    margin-bottom: 0;
    transition: box-shadow 0.2s;
}

.hepan-signature-card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}

.sig-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 2px solid var(--primary-color, #8b5a2b);
}

.sig-header-left {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}

.sig-name {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text, #333);
}

.sig-pronoun {
    font-size: 0.85rem;
    color: var(--text-muted, #888);
}

.sig-gender {
    font-size: 0.85rem;
    color: var(--text-muted, #888);
    padding: 2px 8px;
    background: rgba(0,0,0,0.05);
    border-radius: 4px;
}

.sig-badge {
    font-size: 0.75rem;
    color: #fff;
    background: #e67e22;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 600;
}

.sig-header-right {
    display: flex;
    align-items: center;
}

.sig-shengxiao {
    font-size: 1rem;
    color: var(--text-muted, #888);
    font-weight: 600;
}

.sig-bazi-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    padding: 14px 0;
    margin-bottom: 12px;
    font-size: 1.5rem;
    letter-spacing: 2px;
    flex-wrap: wrap;
}

.sig-bazi-part {
    display: inline-block;
    padding: 4px 8px;
    background: rgba(139, 90, 43, 0.08);
    border-radius: 6px;
    font-weight: 700;
    color: var(--text, #333);
    font-family: "Noto Serif SC", "SimSun", serif;
}

.sig-bazi-day {
    background: rgba(139, 90, 43, 0.18);
    color: var(--primary-color, #8b5a2b);
    font-size: 1.6rem;
}

.sig-bazi-sep {
    color: var(--text-muted, #888);
    font-size: 1rem;
}

.sig-summary {
    display: flex;
    justify-content: space-around;
    gap: 8px;
    padding: 10px 0;
    margin-bottom: 12px;
    background: rgba(255,255,255,0.5);
    border-radius: 8px;
    flex-wrap: wrap;
}

.sig-summary-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 60px;
}

.sig-summary-label {
    font-size: 0.75rem;
    color: var(--text-muted, #888);
    font-weight: 500;
}

.sig-summary-value {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text, #333);
}

.sig-pillar-table {
    font-size: 0.85rem;
}

/* ========== 和盘解析模块样式 ========== */
.hepan-analysis-section {
    background: var(--surface-light, #fcf9f2);
    border: 1px solid var(--border, #e8e0d5);
    border-radius: 12px;
    padding: 20px;
    margin: 20px 0;
}

.hepan-analysis-section h4 {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--primary-color, #8b5a2b);
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--primary-color, #8b5a2b);
    display: flex;
    align-items: center;
    gap: 8px;
}

/* 综合评分 */
.ha-score-block {
    margin-bottom: 20px;
    padding: 16px;
    background: linear-gradient(135deg, rgba(139, 90, 43, 0.06) 0%, rgba(212, 163, 115, 0.06) 100%);
    border-radius: 10px;
    border: 1px solid var(--border, #e8e0d5);
}

.ha-score-header {
    font-size: 0.9rem;
    color: var(--text-muted, #888);
    margin-bottom: 12px;
    font-weight: 500;
    text-align: center;
}

.ha-score-main {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
}

.ha-score-circle {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-color, #8b5a2b), var(--secondary-color, #d4a373));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(139, 90, 43, 0.3);
}

.ha-score-num {
    font-size: 2rem;
    font-weight: 800;
    color: #fff;
    line-height: 1;
}

.ha-score-label {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.8);
    font-weight: 500;
}

.ha-score-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.ha-score-level {
    font-size: 1.1rem;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 6px;
}

.ha-score-summary {
    font-size: 0.85rem;
    color: var(--text-muted, #888);
}

.score-excellent { color: #2e7d32; background: rgba(46, 125, 50, 0.1); }
.score-good { color: #f57f17; background: rgba(245, 127, 23, 0.1); }
.score-fair { color: #e65100; background: rgba(230, 81, 0, 0.1); }
.score-poor { color: #c62828; background: rgba(198, 40, 40, 0.1); }

/* 子模块 */
.ha-subsection {
    margin-bottom: 16px;
}

.ha-subtitle {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text, #333);
    margin-bottom: 12px;
    padding-left: 10px;
    border-left: 3px solid var(--primary-color, #8b5a2b);
}

.ha-no-data {
    text-align: center;
    color: var(--text-muted, #888);
    font-size: 0.9rem;
    padding: 12px;
    font-style: italic;
}

/* 刑冲克害卡片网格 */
.ha-relations-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 12px;
}

.ha-relation-card {
    border-radius: 8px;
    padding: 12px 16px;
    border: 1px solid var(--border, #e8e0d5);
    background: #fff;
}

.ha-rel-he { border-left: 4px solid #2e7d32; }
.ha-rel-chong { border-left: 4px solid #c62828; }
.ha-rel-xing { border-left: 4px solid #6a1b9a; }
.ha-rel-hai { border-left: 4px solid #e65100; }
.ha-rel-ke { border-left: 4px solid #f57f17; }

.ha-rel-title {
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--text, #333);
}

.ha-rel-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.ha-rel-list li {
    font-size: 0.85rem;
    color: var(--text-muted, #888);
    padding: 3px 0;
    border-bottom: 1px dashed var(--border, #e8e0d5);
}

.ha-rel-list li:last-child {
    border-bottom: none;
}

/* 四柱交互网格 */
.ha-pillar-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
}

.ha-pillar-card {
    background: #fff;
    border: 1px solid var(--border, #e8e0d5);
    border-radius: 8px;
    padding: 12px;
    border-left: 3px solid var(--primary-color, #8b5a2b);
}

.ha-pillar-name {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text, #333);
    margin-bottom: 8px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--border, #e8e0d5);
}

.ha-pillar-rows {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ha-pillar-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
}

.ha-pillar-label {
    color: var(--text-muted, #888);
    min-width: 36px;
    font-weight: 500;
}

.ha-pillar-val {
    font-weight: 600;
    min-width: 40px;
}

.ha-pillar-desc {
    color: var(--text-muted, #888);
    font-size: 0.8rem;
}

/* 十神互参网格 */
.ha-cross-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

@media (max-width: 768px) {
    .ha-cross-grid {
        grid-template-columns: 1fr;
    }
}

.ha-cross-card {
    background: #fff;
    border: 1px solid var(--border, #e8e0d5);
    border-radius: 8px;
    padding: 12px 16px;
}

.ha-cross-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text, #333);
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border, #e8e0d5);
}

.ha-cross-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.ha-cross-list li {
    font-size: 0.85rem;
    color: var(--text-muted, #888);
    padding: 4px 0;
    border-bottom: 1px dashed var(--border, #e8e0d5);
    display: flex;
    align-items: flex-start;
    gap: 6px;
}

.ha-cross-list li:last-child {
    border-bottom: none;
}

.ha-cross-icon {
    flex-shrink: 0;
    font-size: 0.9rem;
}

/* 权重说明 */
.ha-weight-section {
    margin-bottom: 0;
}

.ha-weight-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
}

.ha-weight-item {
    background: #fff;
    border: 1px solid var(--border, #e8e0d5);
    border-radius: 8px;
    padding: 10px 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ha-weight-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text, #333);
}

.ha-weight-pct {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--primary-color, #8b5a2b);
}

.ha-weight-desc {
    font-size: 0.8rem;
    color: var(--text-muted, #888);
}