/* 弹窗样式 */
    .bazi-result {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1100;
        overflow-y: auto;
    }

    .result-container {
        margin: 30px auto;
        max-width: 700px;
        background: #fff;
        border-radius: 8px;
        box-shadow: 0 5px 20px rgba(139, 69, 19, 0.3);
        overflow: hidden;
        animation: modalOpen 0.3s ease;
        position: relative;
        z-index: 1101;
    }

    .result-header {
        padding: 10px 15px;
        background: #fffbf0;
        border-bottom: 1px solid #f0e6a9;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .result-header h3 {
        margin: 0;
        font-size: 18px;
        color: #8B4513;
    }

    .close-result {
        font-size: 24px;
        cursor: pointer;
        color: #777;
    }

    .close-result:hover {
        color: #d4a017;
    }

    .result-content {
        padding: 15px;
        max-height: 75vh;
        overflow-y: auto;
    }

    .loader {
        text-align: center;
        padding: 30px;
    }

    .bazi-result-container {
        line-height: 1.6;
    }

    /* 八字详细信息 */
    .bazi-top-info {
        margin-bottom: 15px;
        padding: 10px;
        background-color: #fffbf0;
        border-radius: 5px;
        border: 1px solid #f0e6cc;
    }

    .bazi-info-table {
        width: 100%;
        border-collapse: collapse;
    }

    .bazi-info-table td {
        padding: 6px;
        border: 1px solid #f0e6cc;
        font-size: 14px;
    }

    .bazi-info-table .label {
        font-weight: bold;
        background-color: #fff9e6;
        width: 80px;
        color: #8B4513;
    }

    /* 八字排盘 */
    .bazi-chart {
        margin-bottom: 20px;
    }

    .bazi-chart-table {
        width: 100%;
        border-collapse: collapse;
        table-layout: fixed;
        border: 1px solid #f0e6cc;
    }

    .bazi-chart-table td {
        padding: 8px 3px;
        text-align: center;
        border: 1px solid #f0e6cc;
        vertical-align: middle;
        font-size: 14px;
    }

    .bazi-label {
        font-weight: bold;
        background-color: #fff9e6;
        width: 80px;
        color: #8B4513;
    }

    /* 天干地支颜色 */
    .tg-jin,
    .dz-jin {
        color: #a98600;
        background-color: #fff8e1;
    }

    .tg-mu,
    .dz-mu {
        color: #33691e;
        background-color: #e8f5e9;
    }

    .tg-shui,
    .dz-shui {
        color: #0d47a1;
        background-color: #e3f2fd;
    }

    .tg-huo,
    .dz-huo {
        color: #b71c1c;
        background-color: #ffebee;
    }

    .tg-tu,
    .dz-tu {
        color: #6d4c41;
        background-color: #efebe9;
    }

    /* 五行分析 */
    .result-section {
        margin-bottom: 20px;
        border: 1px solid #f0e6cc;
        border-radius: 5px;
        overflow: hidden;
    }

    .result-section h4 {
        margin: 0;
        padding: 10px;
        background-color: #d4a017;
        color: white;
        font-size: 16px;
    }

    .wuxing-barchart {
        padding: 10px;
    }

    .wuxing-bar-item {
        display: flex;
        align-items: center;
        margin-bottom: 8px;
    }

    .wuxing-name {
        width: 40px;
        font-weight: bold;
        text-align: right;
        margin-right: 10px;
    }

    .wuxing-bar-container {
        flex-grow: 1;
        height: 24px;
        background-color: #f9f9f9;
        border-radius: 3px;
        overflow: hidden;
        margin-right: 10px;
    }

    .wuxing-bar {
        height: 100%;
        border-radius: 3px;
        transition: width 0.5s;
    }

    .wuxing-bar.jin {
        background-color: #ffd54f;
    }

    .wuxing-bar.mu {
        background-color: #81c784;
    }

    .wuxing-bar.shui {
        background-color: #64b5f6;
    }

    .wuxing-bar.huo {
        background-color: #e57373;
    }

    .wuxing-bar.tu {
        background-color: #a1887f;
    }

    .wuxing-value {
        width: 60px;
        text-align: left;
        font-weight: bold;
    }

    .wuxing-value .percent {
        font-size: 0.8em;
        color: #666;
        font-weight: normal;
    }

    .wuxing-status {
        padding: 15px;
        background-color: #fffbf0;
    }

    .status-item {
        margin-bottom: 10px;
    }

    .status-item .label {
        font-weight: bold;
        color: #8B4513;
    }

    .status-item.highlight {
        background-color: #fff8e1;
        padding: 8px;
        border-radius: 4px;
        border-left: 3px solid #d4a017;
    }

    .status-item.highlight strong {
        color: #b8860b;
        font-size: 1.1em;
    }

    /* 付费精批按钮 */
    .premium-analysis {
        margin-top: 15px;
        padding: 12px;
        background-color: #fff8e1;
        border-radius: 8px;
        text-align: center;
        border: 1px dashed #d4a017;
    }

    .premium-analysis p {
        margin-bottom: 15px;
        color: #8B4513;
    }

    .premium-btn {
        display: inline-block;
        padding: 8px 15px;
        background: #d4a017;
        color: #fff;
        border-radius: 30px;
        font-weight: bold;
        transition: all 0.3s;
        font-size: 15px;
    }

    .premium-btn:hover {
        background: #b8860b;
        transform: translateY(-2px);
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
    }

    .premium-icon {
        margin-right: 5px;
    }

    .error-message {
        padding: 15px;
        background-color: #ffebee;
        border-left: 4px solid #e57373;
        color: #b71c1c;
        margin-bottom: 15px;
        border-radius: 4px;
    }

    .canggan-group {
        margin-bottom: 8px;
    }

    .canggan-title {
        font-weight: bold;
        margin-right: 10px;
    }

    .bazi-other-info {
        padding: 15px;
        background-color: #fffbf0;
        border-radius: 5px;
        border: 1px solid #f0e6cc;
        margin-bottom: 20px;
    }

    .info-item {
        margin-bottom: 10px;
    }

    /* 大运和流年样式 */
    .dayun-cards-container,
    .liunian-cards-container {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        padding: 10px;
        overflow-x: auto;
    }

    .dayun-card,
    .liunian-card {
        min-width: 75px;
        padding: 8px;
        text-align: center;
        border-radius: 5px;
        background-color: #fffbf0;
        border: 1px solid #f0e6cc;
        transition: all 0.3s;
    }

    .dayun-card:hover,
    .liunian-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
    }

    .dayun-year,
    .liunian-year {
        font-size: 14px;
        margin-bottom: 3px;
    }

    .dayun-ganzhi,
    .liunian-ganzhi {
        font-size: 16px;
        margin-bottom: 3px;
    }

    .dayun-status,
    .liunian-age {
        font-size: 14px;
        color: #666;
    }

    /* 大运状态样式 */
    .status-good {
        border-left: 3px solid #2e8b57;
        background-color: rgba(46, 139, 87, 0.05);
    }

    .status-bad {
        border-left: 3px solid #e67e22;
        background-color: rgba(230, 126, 34, 0.05);
    }

    /* 流年高亮 */
    .year-highlight {
        border: 2px solid #d4a017;
        background-color: #fff8e1;
    }

    .month-highlight {
        border: 2px solid #4caf50;
        background-color: #e8f5e9;
    }

    /* 小运详解 */
    .xiaoyun-content {
        padding: 15px;
        margin-top: 15px;
        background-color: #fffbf0;
        border-radius: 5px;
        border: 1px solid #f0e6cc;
    }

    .xiaoyun-content h5 {
        margin-top: 0;
        margin-bottom: 10px;
        color: #8B4513;
        font-size: 16px;
    }

    .section-content {
        padding: 15px;
    }

    /* 藏干样式 */
    .cg-item {
        margin-bottom: 5px;
    }

    /* 响应式适配 */
    @media (max-width: 768px) {
        .result-container {
            margin: 20px auto;
            width: 95%;
        }

        .result-content {
            padding: 15px;
            max-height: 80vh;
        }

        .bazi-info-table {
            font-size: 14px;
        }

        .dayun-cards-container,
        .liunian-cards-container {
            padding: 10px;
            justify-content: flex-start;
        }

        .dayun-card,
        .liunian-card {
            min-width: 70px;
            padding: 8px;
        }

        .dayun-year,
        .liunian-year {
            font-size: 14px;
        }

        .dayun-ganzhi,
        .liunian-ganzhi {
            font-size: 16px;
        }
    }

    @media (max-width: 576px) {
        .bazi-info-table {
            font-size: 12px;
        }

        .bazi-label {
            width: 60px;
        }

        .bazi-info-table .label {
            width: 60px;
        }
    }

    /* 模态弹窗覆盖层 */
    .modal-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.6);
        z-index: 1000;
    }

    /* 修改弹窗相关样式 */
    .hero-section {
        padding: 35px 0;
        /* 减少上下内边距 */
    }

    .hero-title {
        font-size: 28px;
        /* 减小标题字体 */
        margin-bottom: 10px;
        /* 减少标题下方间距 */
    }

    .hero-subtitle {
        font-size: 16px;
        /* 减小副标题字体 */
        margin-bottom: 20px;
        /* 减少副标题下方间距 */
    }

    .hero-content {
        margin: 0 auto 20px;
        /* 减少hero-content下方间距 */
    }

    .hero-icon {
        margin-bottom: 15px;
        /* 减少图标下方间距 */
    }

    .calculator-header {
        padding: 10px 15px;
        /* 减少表头内边距 */
    }

    .calculator-header h2 {
        font-size: 18px;
        /* 减小表头字体 */
    }

    .calculator-body {
        padding: 15px;
        /* 减少表单内边距 */
    }

    .form-row {
        margin-bottom: 10px;
        /* 减少表单行间距 */
    }

    .form-group label {
        margin-bottom: 3px;
        /* 减少标签下方间距 */
        font-size: 14px;
        /* 减小标签字体 */
    }

    .form-control {
        height: 35px;
        /* 减小表单控件高度 */
        padding: 0 10px;
        /* 减少输入框内边距 */
        font-size: 14px;
        /* 减小输入字体 */
    }

    .radio-group {
        gap: 15px;
        /* 减小单选按钮组间距 */
    }

    .btn-submit {
        padding: 10px;
        /* 减少提交按钮内边距 */
    }

    /* 调整整体页面布局，减少首页各部分间距 */
    .almanac-section,
    .featured-section,
    .latest-section,
    .widget {
        margin-bottom: 25px;
        /* 减少各区块下方间距 */
    }

    .section-header {
        padding: 12px 15px;
        /* 减少区块标题内边距 */
    }

    .tg-row td,
    .dz-row td {
        font-size: 20px;
    }

    /* 新的布局调整 */
    .radio-group-container {
        width: 40%;
        /* 控制性别选择区域宽度 */
    }

    .submit-container {
        width: 60%;
        /* 控制按钮区域宽度 */
        display: flex;
        align-items: flex-end;
        /* 对齐底部 */
    }

    .form-group {
        margin-right: 10px;
        /* 减少组间距 */
    }

    @media (max-width: 576px) {

        /* 移动端特殊调整 */
        .hero-section {
            padding: 25px 0;
            /* 进一步减少头部区域高度 */
        }

        .hero-title {
            font-size: 24px;
            /* 进一步减小标题 */
        }

        .hero-subtitle {
            font-size: 14px;
            /* 进一步减小副标题 */
            margin-bottom: 15px;
        }

        .radio-group-container,
        .submit-container {
            width: 100%;
            /* 在移动端占满宽度 */
        }

        .submit-container {
            margin-top: 5px;
            /* 添加按钮上方间距 */
        }

        .form-group {
            margin-bottom: 8px;
            /* 进一步减少组垂直间距 */
        }

        .calculator-body {
            padding: 12px 10px;
            /* 减少表单内边距 */
        }

        .form-control {
            height: 32px;
            /* 减小控件高度 */
        }

        .btn-submit {
            margin-top: 5px;
            /* 添加按钮上方间距 */
        }
    }