:root {
            --primary-color: #413f3f;
            /* 从绿色改为淡蓝色 */
            --primary-light: #eeeeee;
            /* 从淡绿色改为非常淡的蓝色背景 */
            --primary-dark: #39393a;
            /* 从深绿色改为柔和的深蓝色 */
            --accent-color: #ff4081;
            --text-primary: #212121;
            --text-secondary: #757575;
            --divider-color: #e0e0e0;
            --background: #f9f9fc;
            --card-bg: #ffffff;
            --wood-color: #4caf50;
            --fire-color: #f5222d;
            --earth-color: #a64b00;
            --metal-color: #ff9728;
            --water-color: #3a74f1;
            --primary-rgb: 65, 63, 63;
            --eye-protect-bg: #f5f5eb;
            /* 护眼米色背景 */
            --eye-protect-card: #f8f8f0;
            /* 护眼米色卡片背景 */
            --eye-protect-table: #f0f0e6;
            /* 护眼米色表格背景 */
        }

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

        body {
            font-family: "Microsoft YaHei", "PingFang SC", -apple-system, BlinkMacSystemFont, sans-serif;
            background: var(--eye-protect-bg);
            color: var(--text-primary);
            line-height: 1.6;
            padding: 0;
            margin: 0;
        }

        .container {
            max-width: 1000px;
            margin: 40px auto;
            background: var(--eye-protect-card);
            border-radius: 16px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
            padding: 36px 40px;
        }

        /* 添加顶部输入区样式 */
        .input-section {
            margin-bottom: 5px;
            padding-bottom: 5px;
            border-bottom: 1px solid var(--divider-color);
        }

        .input-form {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            align-items: flex-end;
        }

        .input-group {
            flex: 1;
            min-width: 120px;
        }

        .input-group label {
            display: block;
            margin-bottom: 0px;
            font-size: 12px;
            color: var(--text-secondary);
        }

        .input-group input,
        .input-group select {
            width: 100%;
            padding: 8px 12px;
            border: 1px solid var(--divider-color);
            border-radius: 6px;
            font-size: 15px;
            color: var(--text-primary);
        }

        .input-group input:focus,
        .input-group select:focus {
            outline: none;
            border-color: var(--primary-color);
            box-shadow: 0 0 0 2px rgba(63, 81, 181, 0.2);
        }

        .submit-btn {
            background: var(--primary-color);
            color: white;
            border: none;
            border-radius: 6px;
            padding: 9px 20px;
            font-size: 15px;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .submit-btn:hover {
            background: var(--primary-dark);
            transform: translateY(-2px);
        }

        @media (max-width: 768px) {
            .input-form {
                flex-direction: column;
                gap: 5px;
            }

            .input-group {
                width: 100%;
            }

            .submit-btn {
                width: 100%;
                margin-top: 10px;
            }

            .container {
                padding: 15px 10px !important;
                margin: 15px auto;
                border-radius: 12px;
            }

            .input-form {
                padding: 0 !important;
            }

            .bazi-header {
                padding-bottom: 15px;
                margin-bottom: 15px;
            }

            .shengxiao-icon {
                width: 60px;
                height: 60px;
                font-size: 48px;
                margin-right: 15px;
            }

            .bazi-info-row>div {
                font-size: 14px;
                padding: 5px 10px;
            }
        }

        /* 添加移动端优化样式 */
        @media (max-width: 768px) {
            .input-group[style*="width: 100%"] {
                margin-bottom: 10px !important;
            }

            #quickInput {
                height: 44px;
                font-size: 16px !important;
                padding: 8px !important;
            }

            .container {
                padding: 15px !important;
            }

            .input-form {
                padding: 0 !important;
            }
        }

        .bazi-header {
            display: flex;
            align-items: center;
            margin-bottom: 5px;
            border-bottom: 1px solid var(--divider-color);
            padding-bottom: 5px;
            width: 100%;
            box-sizing: border-box;
        }

        .shengxiao-icon {
            width: 80px;
            height: 80px;
            font-size: 64px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 30px;
            background: var(--primary-light);
            border-radius: 50%;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        }

        .bazi-info-row {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 5px;
        }

        .bazi-info-row>div {
            font-size: 16px;
            padding: 6px 12px;
            background: var(--primary-light);
            border-radius: 8px;
            color: var(--primary-dark);
            font-weight: 500;
        }

        /* 基础盘样式已移除（.new-bazi-table） */

        .wuxing-mu {
            color: var(--wood-color);
            font-weight: bold;
        }

        .wuxing-huo {
            color: var(--fire-color);
            font-weight: bold;
        }

        .wuxing-tu {
            color: var(--earth-color);
            font-weight: bold;
        }

        .wuxing-jin {
            color: var(--metal-color);
            font-weight: bold;
        }

        .wuxing-shui {
            color: var(--water-color);
            font-weight: bold;
        }

        /* 天干地支间距 */


        .wuxing-bar {
            display: flex;            
            height: 24px;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        }

        .wuxing-bar>div {
            flex: 1;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: bold;
            font-size: 14px;
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
        }

        .wuxing-bar>div:hover {
            transform: scaleY(1.1);
        }

        .wuxing-bar .tu {
            background: var(--earth-color);
        }

        .wuxing-bar .jin {
            background: var(--metal-color);
        }

        .wuxing-bar .huo {
            background: var(--fire-color);
        }

        .wuxing-bar .mu {
            background: var(--wood-color);
        }

        .wuxing-bar .shui {
            background: var(--water-color);
        }

        .wuxing-bar-labels {
            display: flex;
            justify-content: space-around;
            font-size: 14px;
            font-weight: 500;
            margin-top: 8px;
        }

        .wuxing-bar-labels div {
            text-align: center;
            padding: 2px 8px;
            border-radius: 4px;
        }

        .wuxing-bar-labels .wuxing-mu {
            color: var(--wood-color);
        }

        .wuxing-bar-labels .wuxing-huo {
            color: var(--fire-color);
        }

        .wuxing-bar-labels .wuxing-tu {
            color: var(--earth-color);
        }

        .wuxing-bar-labels .wuxing-jin {
            color: var(--metal-color);
        }

        .wuxing-bar-labels .wuxing-shui {
            color: var(--water-color);
        }

        .relation-text {            
            background: var(--primary-light);
            padding: 1px;
            border-radius: 3px;            
            line-height: 0.7;
        }

        .yun-jiao-text {
            font-size: 13px;
            color: var(--text-primary);
            background: var(--primary-light);
            margin: 3px 0;
            padding: 3px 3px;
            border-radius: 10px;
            font-weight: 500;
            display: inline-block;
        }

        .yun-table-container {
            overflow-x: auto;
            scrollbar-width: thin;
        }

        .yun-table-container::-webkit-scrollbar {
            height: 6px;
        }

        .yun-table-container::-webkit-scrollbar-track {
            background: #f1f1f1;
        }

        .yun-table-container::-webkit-scrollbar-thumb {
            background: var(--primary-color);
            border-radius: 3px;
        }

        .yun-table-container table {
            border-collapse: separate;
            border-spacing: 0;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 6px 3px rgba(0, 0, 0, 0.08);
        }

        .yun-table-container th,
        .yun-table-container td {
            background: white;
            padding: 12px 12px;
            text-align: center;
            border: none;
            border-bottom: 1px solid #f0f0f0;
            border-right: 1px solid #f0f0f0;
        }

        .yun-table-container th {

            color: rgb(0, 0, 0);
            font-weight: 100;
        }

        .yun-table-container td {
            background: white;
            border-right: 1px solid #f0f0f0;
        }

        .yun-table-container td:last-child {
            border-right: none;
        }

        .yun-table-container td:hover {
            background-color: var(--primary-light);
            cursor: pointer;
            transform: translateY(-2px);
            transition: all 0.2s ease;
        }

        .yun-table-container td.active {
            background-color: var(--primary-color);
            color: white;
        }

        .yun-cell {
            padding: 10px 12px !important;
        }

        .yun-cell .gan-shishen {
            font-size: 13px;
            color: var(--accent-color);
            margin-bottom: 1px;
        }

        .yun-cell .zhi-shishen {
            font-size: 11px;
            color: var(--text-secondary);
            margin-top: 1px;
        }

        .yun-cell .yun-age {
            font-size: 9px;
            margin-top: 1px;
            color: var(--primary-dark);
            font-weight: 500;
        }

        .yun-cell .yun-year {
            font-size: 11px;
            color: var(--text-primary);
            margin-top: 1px;
            opacity: 0.8;
        }

        .yun-cell.active .gan-shishen,
        .yun-cell.active .zhi-shishen,
        .yun-cell.active .yun-age {
            color: rgba(255, 255, 255, 0.85) !important;
        }

        .yun-cell.active .yun-year {
            color: rgba(255, 255, 255, 0.75) !important;
        }

        .liu-nian-detail-container {
            margin-top: 1px;
        }

        .liu-nian-table {
            width: 100%;
            border-collapse: separate;
            border-spacing: 0;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
        }

        .liu-nian-table th,
        .liu-nian-table td {
            background: white;
            padding: 2px 10px;
            text-align: center;
            border: none;
            border-bottom: 1px solid #f0f0f0;
            border-right: 1px solid #f0f0f0;
        }

        .liu-nian-table th {

            color: rgb(0, 0, 0);
            font-weight: 100;
        }

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

        .liu-nian-table td:last-child,
        .liu-nian-table th:last-child {
            border-right: none;
        }

        .liu-nian-year-cell {
            background: var(--primary-light) !important;
            color: var(--primary-dark) !important;
            font-weight: 500;
        }

        .liu-nian-year {
            margin-bottom: 1px;
            text-align: center;
        }

        .liu-nian-age {
            font-size: 10px;
            margin-top: 4px;
            font-weight: normal;
        }

        /* 新增独立的年龄样式，不受移动端字体缩小的影响 */
        .liu-nian-ganzhi-cell .liu-nian-age {
            font-size: 12px;
            color: var(--text-secondary);
            margin-top: 1px;
            font-weight: normal;
        }

        /* 选中状态下的年龄样式 */
        .liu-nian-ganzhi-cell.active .liu-nian-age {
            color: rgba(255, 255, 255, 0.85) !important;
        }

        .liu-nian-ganzhi-cell,
        .liu-nian-shishen-cell {
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .liu-nian-ganzhi-cell:hover,
        .liu-nian-shishen-cell:hover {
            background-color: var(--primary-light);
            transform: translateY(-2px);
        }

        .liu-nian-ganzhi-cell.active,
        .liu-nian-shishen-cell.active {
            background-color: var(--primary-color);
            color: white;
        }

        .liu-nian-ganzhi-cell.active .gan-shishen,
        .liu-nian-ganzhi-cell.active .zhi-shishen {
            color: rgba(255, 255, 255, 0.85) !important;
        }

        .gan-shishen {
            font-size: 12px;
            color: var(--accent-color);
            margin-bottom: 4px;
        }

        .zhi-shishen {
            font-size: 11px;
            color: var(--text-secondary);
            margin-top: 4px;
        }

        .liu-yue-table {
            width: 90%;
            border-collapse: separate;
            border-spacing: 0;
            margin-top: 3px;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
        }

        .liu-yue-table th,
        .liu-yue-table td {
            background: white;
            padding: 12px 8px;
            text-align: center;
            border: none;
            border-bottom: 1px solid #f0f0f0;
            border-right: 1px solid #f0f0f0;
        }

        #流月栏文字 .liu-yue-table th {
            background: var(--primary-color);
            color: white;
            font-weight: 100;
        }

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

        .liu-yue-table td:last-child,
        .liu-yue-table th:last-child {
            border-right: none;
        }

        .month-cell {
            background: var(--primary-light) !important;
            color: var(--primary-dark) !important;
            font-weight: 100;
            padding: 2px 2px !important;
            cursor: pointer;
        }

        .month-cell.active {
            background: var(--primary-color) !important;
            color: white !important;
        }

        .month-cell.active .jieqi-text {
            color: rgba(255, 255, 255, 0.85) !important;
        }

        .jieqi-text {
            font-size: 11px;
            color: var(--accent-color);
            margin-top: 2px;
            font-weight: normal;
        }

        .ganzhi-cell {
            background: white !important;
        }

        .ganzhi-cell.active {
            background: var(--primary-color) !important;
            color: white !important;
        }

        .ganzhi-cell.active .gan-shishen,
        .ganzhi-cell.active .zhi-shishen,
        .ganzhi-cell.active span {
            color: rgba(255, 255, 255, 0.85) !important;
        }

        .shishen-cell {
            background: rgba(33, 150, 243, 0.1) !important;
            color: var(--water-color) !important;
        }

        .analysis-section {

            background: white;
            box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
            border-left: 6px solid var(--primary-color);
        }

        .analysis-title {
            font-size: 20px;
            color: var(--primary-color);
            margin-bottom: 1px;
            font-weight: bold;
            display: flex;
            align-items: center;
        }

        .analysis-title::before {
            content: "✨";
            margin-right: 10px;
        }

        .analysis-content {
            font-size: 16px;
            color: var(--text-secondary);
            line-height: 1.8;
        }

        .button-container {
            text-align: center;
            margin-top: 40px;
        }

        .back-button {
            display: inline-block;
            padding: 10px 16px;
            background: var(--primary-color);
            color: white;
            text-decoration: none;
            border-radius: 30px;
            font-size: 13px;
            font-weight: 200;
            transition: all 0.3s ease;
            border: none;
            cursor: pointer;
            box-shadow: 0 6px 12px rgba(115, 177, 224, 0.2);
            /* 更新为淡蓝色的透明版本 */
            letter-spacing: 1px;
        }

        .back-button:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 20px rgba(115, 177, 224, 0.3);
            /* 更新为淡蓝色的透明版本 */
            background: var(--primary-dark);
        }

        @media (max-width: 768px) {
            .container {
                margin: 20px 10px;
                padding: 20px;
                border-radius: 12px;
            }

            .bazi-header {
                flex-direction: column;
                align-items: flex-start;
            }

            .shengxiao-icon {
                margin-bottom: 16px;
                margin-right: 0;
            }

            .bazi-info-row {
                flex-direction: column;
                align-items: flex-start;
                gap: 10px;
            }

            .back-button {
                width: 100%;
            }
        }

        /* 流日表样式 */
        .liu-ri-title {
            font-size: 13px;
            color: var(--primary-color);
            margin-bottom: 5px;
            font-weight: 200;
            background: var(--primary-light);
            padding: 5px 5px;
            border-radius: 8px;
            display: inline-block;
        }

        /* 流日网格布局 */
        .liu-ri-grid {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-bottom: 3px;
        }

        .liu-ri-cell {
            width: calc(0.1% - 1px);
            /* 7天一行，考虑间隔 */
            min-width: 45px;
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
            padding: 8px 4px;
            text-align: center;
            transition: all 0.2s ease;
            cursor: pointer;
        }

        .liu-ri-cell:hover {
            transform: translateY(-3px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
            background-color: var(--primary-light);
        }

        .liu-ri-cell.active {
            background-color: var(--primary-color);
            color: white;
            transform: translateY(-3px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
        }

        .liu-ri-cell.active .liu-ri-lunar,
        .liu-ri-cell.active .liu-ri-day,
        .liu-ri-cell.active .gan-shishen,
        .liu-ri-cell.active .zhi-shishen,
        .liu-ri-cell.active .liu-ri-lunar-month {
            color: rgba(255, 255, 255, 0.9);
        }

        .liu-ri-cell.active .liu-ri-jieqi {
            background-color: rgba(255, 255, 255, 0.2);
            color: white;
        }

        .liu-ri-day {
            font-weight: bold;
            font-size: 15px;
            color: var(--primary-color);
            margin-bottom: 2px;
        }

        .liu-ri-lunar {
            font-size: 12px;
            color: var(--accent-color);
            margin-bottom: 4px;
            font-weight: normal;
        }

        .liu-ri-ganzhi {
            font-size: 14px;
            margin: 4px 0;
        }

        .liu-ri-cell .gan-shishen {
            font-size: 12px;
            color: var(--accent-color);
            margin-bottom: 2px;
        }

        .liu-ri-cell .zhi-shishen {
            font-size: 11px;
            color: var(--text-secondary);
            margin-top: 2px;
        }

        /* 流月单元格点击状态 */
        .ganzhi-cell.active,
        .shishen-cell.active {
            background-color: var(--primary-color) !important;
            color: white !important;
        }

        /* 响应式调整 */
        @media (max-width: 768px) {
            .liu-ri-cell {
                width: calc(20% - 8px);
                /* 5天一行 */
                min-width: 60px;
            }
        }

        @media (max-width: 480px) {
            .liu-ri-cell {
                width: calc(1% - 8px);
                /* 4天一行 */
                min-width: 45px;
            }
        }

        .liu-ri-cell .zhi-shishen {
            font-size: 11px;
            color: var(--text-secondary);
            margin-top: 2px;
        }

        .liu-ri-jieqi {
            font-size: 12px;
            color: var(--primary-color);
            font-weight: 500;
            margin: 2px 0;
            background-color: rgba(115, 177, 224, 0.1);
            /* 更新为淡蓝色的透明版本 */
            border-radius: 4px;
            padding: 1px 4px;
            display: inline-block;
        }

        .liu-ri-lunar-first-day {
            font-weight: bold;
            color: var(--accent-color);
            background-color: rgba(255, 64, 129, 0.1);
            border-radius: 4px;
            padding: 1px 4px;
            display: inline-block;
        }

        .liu-ri-lunar-month {
            font-size: 12px;
            color: var(--primary-color);
            font-weight: bold;
            background-color: rgba(115, 177, 224, 0.1);
            /* 更新为淡蓝色的透明版本 */
            border-radius: 4px;
            padding: 1px 6px;
            margin: 2px 0;
            display: inline-block;
        }

        .liu-nian-info {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 6px;
            font-size: 10px;
            color: var(--text-primary);
            opacity: 0.9;
        }

        .liu-nian-year {
            font-size: 12px;
            letter-spacing: 0;
        }

        /* 新增独立的年龄样式，不受移动端字体缩小的影响 */
        .liu-nian-ganzhi-cell .liu-nian-age {
            font-size: 12px;
            color: var(--text-secondary);
            margin-top: 1px;
            font-weight: normal;
        }

        /* 选中状态下的年龄样式 */
        .liu-nian-ganzhi-cell.active .liu-nian-age {
            color: rgba(255, 255, 255, 0.85) !important;
        }

        /* 移动端样式调整 */
        @media (max-width: 768px) {
            .liu-nian-info .liu-nian-year {
                font-size: 11px !important;
            }

            /* 不再缩小年龄的字体大小 */
            /*.liu-nian-info .liu-nian-age {
                font-size: 9px !important;
            }*/
        }

        /* 详细命盘表格样式 */
        .detailed-bazi-container {
            margin: 5px 0 5px 0;
            overflow-x: auto;
        }

        .detailed-bazi-table {
            width: 100%;
            border-collapse: separate;
            border-spacing: 0;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
            font-size: 14px;
        }

        .detailed-bazi-table th,
        .detailed-bazi-table td {
            padding: 1px 1px;
            text-align: center;
            border: 1px solid #f0f0f0;
            vertical-align: middle;
        }

        .detailed-bazi-table th {
            background-color: var(--primary-color);
            color: white;
            font-weight: 600;
        }

        .detailed-bazi-table td.header-cell {
            background-color: var(--primary-light);
            color: var(--primary-dark);
            font-weight: 600;
        }

        .detailed-bazi-table .multi-value-cell {
            line-height: 1.5;
        }

        .detailed-bazi-table .ganzhi-cell {
            font-size: 18px;
            font-weight: bold;
        }

        .detailed-bazi-table td.highlight-column,
        .detailed-bazi-table td.highlight-column-liuNian,
        .detailed-bazi-table td.highlight-column-liuYue,
        .detailed-bazi-table td.highlight-column-liuRi {
            background-color: transparent !important;
        }

        .detailed-bazi-table td.highlight-column-liuNian {
            background-color: white;
            transition: background-color 0.3s ease;
            border: 1px solid #f0f0f0;
        }

        .detailed-bazi-table td.highlight-column-liuYue {
            background-color: white;
            transition: background-color 0.3s ease;
            border: 1px solid #f0f0f0;
        }

        .detailed-bazi-table td.highlight-column-liuRi {
            background-color: white;
            transition: background-color 0.3s ease;
            border: 1px solid #f0f0f0;
        }

        /* 天干十神样式 */
        .gan-shishen-corner {
            position: relative;
            display: inline-block;
            font-size: 20px;
            /* 增大天干字号 */
            margin-right: 24px;
            /* 为右侧十神预留空间 */
        }

        .gan-shishen-corner .shishen-text {
            position: absolute;
            top: 2px;
            right: -24px;
            /* 将十神往右移 */
            font-size: 10px;
            font-weight: normal;
        }

        /* 日主元男元女标识 */
        .day-gender {
            position: absolute;
            top: -8px;
            right: -16px;
            font-size: 10px;
            font-weight: normal;
        }

        .male {
            color: #333333;
        }

        .female {
            color: #ff0033;
        }

        /* 地支藏干样式 */
        .zhi-canggan-right {
            position: relative;
            display: inline-block;
            margin-right: 24px;
            /* 增加右侧间距 */
            font-size: 20px;
            /* 增大地支字号 */
        }

        .zhi-canggan-right .canggan-text {
            position: absolute;
            top: -5px;
            right: -24px;
            /* 将藏干信息往右移 */
            font-size: 10px;
            font-weight: normal;
            display: flex;
            flex-direction: column;
            line-height: 1.3;
            /* 增加十神间的行间距 */
        }

        .zhi-canggan-right .canggan-text span {
            display: block;
            margin-bottom: 1px;
            /* 增加十神间的间距 */
        }

        .guanxi-info-container {
            background: var(--primary-light);

            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
            font-size: 13px;
        }

        .guanxi-row {
            margin-bottom: 10px;
        }

        .guanxi-row:last-child {
            margin-bottom: 0;
        }

        .guanxi-title {
            font-weight: 600;
            color: var(--primary-color);
            margin-bottom: 6px;
            font-size: 13px;
        }

        .guanxi-content {
            color: var(--text-primary);
            line-height: 1.5;
        }

        .guanxi-item {
            display: inline-block;
            margin-right: 8px;
            margin-bottom: 6px;
            padding: 2px 8px;
            background: white;
            border-radius: 4px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
            font-size: 12px;
        }

        /* 关系颜色 */
        .guanxi-item.he {
            /* 合 */
            color: #1e88e5;
            background-color: #e3f2fd;
        }

        .guanxi-item.chong {
            /* 冲 */
            color: #e53935;
            background-color: #ffebee;
        }

        .guanxi-item.ke {
            /* 克 */
            color: #f57c00;
            background-color: #fff3e0;
        }

        .guanxi-item.hui {
            /* 会 */
            color: #43a047;
            background-color: #e8f5e9;
        }

        .guanxi-item.he3 {
            /* 三合 */
            color: #7b1fa2;
            background-color: #f3e5f5;
        }

        .guanxi-item.ban {
            /* 半合 */
            color: #0097a7;
            background-color: #e0f7fa;
        }

        .guanxi-item.he6 {
            /* 六合 */
            color: #00897b;
            background-color: #e0f2f1;
        }

        .guanxi-item.xing {
            /* 刑 */
            color: #d32f2f;
            background-color: #ffebee;
        }

        .guanxi-item.po {
            /* 破 */
            color: #c2185b;
            background-color: #fce4ec;
        }

        .guanxi-item.hai {
            /* 害 */
            color: #6d4c41;
            background-color: #efebe9;
        }

        .guanxi-item.gong {
            /* 拱 */
            color: #5e35b1;
            background-color: #ede7f6;
        }

        .guanxi-item.zi {
            /* 自刑 */
            color: #d81b60;
            background-color: #fce4ec;
        }

        /* 新增表格样式 */
        .guanxi-table {
            width: 100%;
            border-collapse: separate;
            border-spacing: 0;
            border-radius: 8px;
            overflow: hidden;
            margin-top: 8px;
            box-shadow: 0 1px 1px rgba(0, 0, 0, 0.01);
        }

        .guanxi-table th {
            background: var(--primary-color);
            color: white;
            font-weight: 100;
            text-align: left;
            padding: 3px 3px;
            font-size: 13px;
        }

        .guanxi-table td {
            background: white;
            padding: 3px 3px;
            font-size: 13px;
            line-height: 1.4;
        }

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

        .detailed-bazi-table tr:nth-child(4) {
            height: 0;
            overflow: hidden;
            padding: 0;
            margin: 0;
            border: none;
            display: none;
        }

        .detailed-bazi-table tr:nth-child(7) {
            height: 0;
            overflow: hidden;
            padding: 0;
            margin: 0;
            border: none;
            display: none;
        }

        .liu-nian-ganzhi-cell.active .liu-nian-year,
        .liu-nian-ganzhi-cell.active .liu-nian-age {
            color: white !important;
            opacity: 1 !important;
            font-weight: bold;
        }

        /* 活跃状态单元格悬浮时的字体颜色 */
        .month-cell:hover {
            background-color: var(--primary-light);
            transform: translateY(-2px);
        }

        .ganzhi-cell:hover {
            background-color: var(--primary-light);
            transform: translateY(-2px);
        }

        /* 添加滚动容器样式 */
        .scroll-container {
            width: 100%;
            overflow-x: auto;
            scrollbar-width: thin;
            -webkit-overflow-scrolling: touch;
            /* 为iOS提供平滑滚动 */
            margin-bottom: 1px;
        }

        .scroll-container::-webkit-scrollbar {
            height: 6px;
        }

        .scroll-container::-webkit-scrollbar-track {
            background: #f1f1f1;
        }

        .scroll-container::-webkit-scrollbar-thumb {
            background: var(--primary-color);
            border-radius: 3px;
        }

        /* 设置滚动内容的最小宽度 */
        .scroll-content {
            min-width: 100%;
            display: inline-block;
        }

        /* 确保滚动容器内的表格不会被压缩 */
        .scroll-container table {
            width: auto;
            white-space: nowrap;
        }

        /* 移动端额外优化 */
        @media (max-width: 768px) {

            .liu-nian-table,
            .liu-yue-table {
                width: auto !important;
                min-width: 100%;
            }

            .liu-nian-ganzhi-cell,
            .ganzhi-cell {
                min-width: 40px !important;
                padding: 6px 4px !important;
                font-size: 0.95em !important;
            }

            .yun-cell,
            .liu-nian-ganzhi-cell,
            .ganzhi-cell {
                min-width: 40px !important;
                padding: 6px 4px !important;
            }


            /* 缩小十神信息的字体大小 */
            .gan-shishen,
            .zhi-shishen {
                font-size: 10px !important;
                margin: 1px 0 !important;
            }

            /* 缩小节气信息的字体大小 */
            .liuyue-jieqi {
                font-size: 10px !important;
                margin-top: 2px !important;
            }

            .liu-ri-grid {
                overflow-x: auto;
                scrollbar-width: thin;
                -webkit-overflow-scrolling: touch;
                white-space: nowrap;
                padding-bottom: 8px;
            }

            .liu-ri-grid::-webkit-scrollbar {
                height: 6px;
            }

            .liu-ri-grid::-webkit-scrollbar-track {
                background: #f1f1f1;
            }

            .liu-ri-grid::-webkit-scrollbar-thumb {
                background: var(--primary-color);
                border-radius: 3px;
            }

            /* 流日单元格在手机端也缩小 */
            .liu-ri-cell {
                min-width: 42px !important;
                padding: 6px 3px !important;
            }

            .liu-ri-day {
                font-size: 13px !important;
            }

            .liu-ri-lunar,
            .liu-ri-jieqi,
            .liu-ri-lunar-month {
                font-size: 10px !important;
            }
        }

        /* 额外信息区域样式 */
        .extra-info-container {
            display: flex;
            flex-direction: column;
            gap: 2px;
            margin: 5px 0 5px 0;
            padding: 12px 15px;
            background-color: rgba(var(--primary-rgb), 0.08);
            border-radius: 10px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
            width: 100%;
            box-sizing: border-box;
        }

        .extra-info-item {
            font-size: 14px;
            line-height: 1.6;
            color: var(--text-primary);
            background-color: white;
            padding: 8px 12px;
            border-radius: 6px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
        }

        /* 让 bazi-info-row 使用与 extra-info-container 相同的风格 */
        .bazi-info-row {
            display: flex;
            flex-direction: column;
            gap: 8px;
            margin: 12px 0 20px 0;
            padding: 12px 15px;
            background-color: rgba(var(--primary-rgb), 0.08);
            border-radius: 10px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
            width: 100%;
            box-sizing: border-box;
        }

        .bazi-info-row > div {
            font-size: 14px;
            line-height: 1.6;
            color: var(--text-primary);
            background-color: white;
            padding: 8px 12px;
            border-radius: 6px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
        }

        @media (max-width: 768px) {
            .extra-info-container {
                padding: 10px;
                margin: 10px 0 15px 0;
            }

            .extra-info-item {
                font-size: 13px;
                padding: 6px 10px;
            }
            .bazi-info-row {
                padding: 10px;
                margin: 10px 0 15px 0;
            }
            .bazi-info-row > div {
                font-size: 13px;
                padding: 6px 10px;
            }
        }

        .mingli-analysis-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 15px;
            margin-top: 10px;
        }

        .mingli-card {
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
            overflow: hidden;
        }

        .mingli-card-title {
            background-color: var(--primary-light);
            color: var(--primary-dark);
            padding: 8px 12px;
            font-size: 13px;
            font-weight: 600;
            border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        }

        .mingli-card-content {
            padding: 10px 12px;
        }

        .mingli-item {
            font-size: 12px;
            line-height: 1.6;
            margin-bottom: 5px;
            color: var(--text-primary);
        }

        .mingli-label {
            font-weight: 500;
            color: var(--primary-dark);
        }

        .mingli-text {
            font-size: 11px;
            color: var(--text-secondary);
            line-height: 1.5;
        }

        @media (max-width: 768px) {
            .mingli-analysis-grid {
                grid-template-columns: 1fr;
                gap: 10px;
            }
        }

        .relation-text {
            background: var(--primary-light);            
            border-radius: 5px;            
            line-height: 18px;
            font-size: 13px;
        }

        .mingli-text {
            font-size: 13px !important;
            /* 增大字体大小 */
            color: var(--text-primary) !important;
            /* 加深颜色 */
            line-height: 1.6 !important;
            font-weight: normal !important;
        }

        .yun-jiao-text {
            font-size: 13px;
            color: var(--text-primary);
            background: var(--primary-light);
            margin: 3px 0;
            padding: 3px 3px;
            border-radius: 10px;
            font-weight: 500;
            display: inline-block;
        }

        /* 为不同类型的命理分析内容添加不同颜色 */
        .mingli-hannuan {
            color: var(--water-color) !important;
            font-weight: 500 !important;
        }

        .mingli-yongshen {
            color: var(--wood-color) !important;
            font-weight: 500 !important;
        }

        .mingli-shuaiwang {
            color: var(--fire-color) !important;
            font-weight: 500 !important;
        }

        .mingli-hunpei {
            color: #000000 !important;
            font-weight: 500 !important;
        }

        /* 称骨男女部分的不同颜色 */
        .mingli-male {
            color: #4285F4 !important;
            /* 蓝色 */
            font-weight: 500 !important;
            display: block;
            margin-top: 8px;
        }

        .mingli-female {
            color: #EA4335 !important;
            /* 红色 */
            font-weight: 500 !important;
            display: block;
            margin-top: 8px;
        }

        .dayun-liunian-table-container {
            margin-top: 20px;
            width: 100%;
        }

        .dayun-liunian-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 12px;
        }

        .dayun-liunian-table th,
        .dayun-liunian-table td {
            border: 1px solid #e0e0e0;
            padding: 6px 4px;
            text-align: center;
        }

        .dayun-row th,
        .dayun-row td {
            background-color: var(--primary-light);
            font-weight: bold;
        }

        .dayun-cell,
        .liunian-cell {
            min-width: 60px;
        }

        .liunian-year {
            font-size: 10px;
            color: var(--text-secondary);
        }

        @media (max-width: 768px) {
            .dayun-liunian-table {
                font-size: 10px;
            }

            .dayun-liunian-table th,
            .dayun-liunian-table td {
                padding: 4px 2px;
            }
        }



        .dayun-liunian-content {
            margin-top: 1px;
            overflow-x: auto;
            /* 添加横向滚动 */
        }

        .dayun-liunian-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 13px;
            table-layout: fixed;
            /* 固定表格布局 */
        }

        .dayun-liunian-table th,
        .dayun-liunian-table td {
            border: 1px solid #e0e0e0;
            padding: 1px 1px;
            /* 减少内边距 */
            text-align: center;
            background-color: white;
        }

        .dayun-row th,
        .dayun-row td {
            background-color: var(--primary-light);
            font-weight: bold;
        }

        .dayun-cell,
        .liunian-cell {
            min-width: 60px;
            /* 减少最小宽度 */
            max-width: 60px;
            /* 添加最大宽度 */
            background-color: white;
        }

        .liunian-year {
            font-size: 11px;
            color: var(--text-secondary);
        }

        @media (max-width: 768px) {
            .dayun-liunian-section {
                padding: 12px 8px;
                /* 减少移动端内边距 */
                border-radius: 12px;
                margin: 15px auto;
                /* 减少上下外边距 */
            }

            .dayun-liunian-title {
                font-size: 16px;
                margin-bottom: 10px;
                padding-bottom: 8px;
            }

            .dayun-liunian-table {
                font-size: 10px;
                /* 移动端更小的字体 */
            }

            .dayun-liunian-table th,
            .dayun-liunian-table td {
                padding: 4px 2px;
                /* 移动端更小的内边距 */
            }

            .dayun-cell,
            .liunian-cell {
                min-width: 42px;
                /* 移动端更小的单元格宽度 */
                max-width: 42px;
            }

            .ganzhi-vertical div {
                font-size: 14px;
                /* 移动端更小的字体 */
            }

            .gan-shishen,
            .zhi-shishen {
                font-size: 9px;
                /* 移动端更小的十神字体 */
            }

            .start-age {
                font-size: 10px;
                /* 移动端更小的年龄字体 */
            }

            .start-year,
            .liunian-year {
                font-size: 9px;
                /* 移动端更小的年份字体 */
            }
        }

        .ganzhi-vertical {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin: 0px 0;
        }

        .ganzhi-vertical div {
            line-height: 1.0;
            font-size: 12px;
            font-weight: 500;
            text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
            padding: 0px 0;
        }

        /* 为干支字符添加精致效果 */
        .dayun-cell .ganzhi-vertical div,
        .liunian-cell .ganzhi-vertical div {
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 1px auto;
            position: relative;
        }

        /* 为五行添加淡淡的背景色 - 护眼版 */
        .dayun-cell .wuxing-mu,
        .liunian-cell .wuxing-mu {
            /* 移除背景色 */
        }

        .dayun-cell .wuxing-huo,
        .liunian-cell .wuxing-huo {
            /* 移除背景色 */
        }

        .dayun-cell .wuxing-tu,
        .liunian-cell .wuxing-tu {
            /* 移除背景色 */
        }

        .dayun-cell .wuxing-jin,
        .liunian-cell .wuxing-jin {
            /* 移除背景色 */
        }

        .dayun-cell .wuxing-shui,
        .liunian-cell .wuxing-shui {
            /* 移除背景色 */
        }

        .gan-shishen {
            font-size: 13px;
            line-height: 1;
            margin-bottom: 1px;
        }

        .zhi-shishen {
            font-size: 10px;
            line-height: 1;
            margin-top: 2px;
        }

        .start-age {
            font-weight: bold;
            font-size: 12px;
            color: #000;
            margin-top: 1px;
        }

        .start-year {
            font-size: 11px;
            color: var(--text-secondary);
        }

        @media (max-width: 768px) {
            .dayun-liunian-section {
                padding: 15px;
                border-radius: 12px;
            }

            .dayun-liunian-table {
                font-size: 11px;
            }

            .dayun-liunian-table th,
            .dayun-liunian-table td {
                padding: 1px 1px;
            }
        }

        .clickable {
            cursor: pointer;
            text-decoration: underline;
            text-decoration-style: dotted;
        }
        .clickable:hover {
            opacity: 0.8;
        }
        .info-modal {
            display: block;
            position: fixed;
            z-index: 1000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.4);
            overflow: hidden;
        }
        .info-modal-content {
            position: relative;
            background-color: #fefefe;
            margin: 0 auto;
            margin-top: 50vh;
            padding: 20px;
            border: 1px solid #888;
            border-radius: 8px 8px 0 0;
            width: 94%;
            max-width: 1200px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
            height: 50vh;
            display: flex;
            flex-direction: column;
        }
        .info-modal-close {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
            cursor: pointer;
            margin-left: auto;
        }
        .info-modal-close:hover,
        .info-modal-close:focus {
            color: black;
            text-decoration: none;
        }
        .info-modal-body {
            margin-top: 15px;
            max-height: 40vh;
            overflow-y: auto;
            line-height: 1.5;
        }
        /* Maximize toggle button for info modal */
        .info-modal-content .info-modal-max-btn {
            position: absolute;
            top: 10px;
            right: 44px;
            background: #f1f5f9;
            color: #0f172a;
            border: 1px solid #e2e8f0;
            border-radius: 6px;
            padding: 2px 8px;
            font-size: 12px;
            cursor: pointer;
            line-height: 1.5;
        }
        .info-modal-content .info-modal-max-btn:hover {
            background: #e2e8f0;
        }
        /* Maximized state */
        .info-modal-content.maximized {
            margin-top: 2vh !important;
            width: 98vw !important;
            max-width: none !important;
            height: 96vh !important;
            border-radius: 8px !important;
        }
        .info-modal-content.maximized .info-modal-body {
            max-height: calc(96vh - 80px) !important;
        }
        .info-modal-content.maximized iframe {
            min-height: calc(96vh - 120px) !important;
        }
        .loading-spinner {
            border: 4px solid #f3f3f3;
            border-top: 4px solid #3498db;
            border-radius: 50%;
            width: 30px;
            height: 30px;
            animation: spin 2s linear infinite;
            margin: 20px auto;
        }
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        iframe {
            flex: 1;
            min-height: 40vh;
            border: none;
            background-color: #f9f9f9;
            border-radius: 4px;
        }
        .guanxi-item {
            margin: 0 5px;
            padding: 2px 5px;
            border-radius: 3px;
            display: inline-block;
        }
        .he, .sanhe, .liuhe, .banhe, .anhe { background-color: #e6f7ff; }
        .chong { background-color: #fff1f0; }
        .xing { background-color: #fff7e6; }
        .hai { background-color: #f6ffed; }
        .po { background-color: #f9f0ff; }
        .jue { background-color: #fff2e8; }
        .ke { background-color: #e6fffb; }
        .sanhui { background-color: #fcffe6; }

        /* 大运流年表样式补充 */
        .dayun-liunian-section {
            max-width: 1000px;
            margin: 2px auto;
            background: var(--eye-protect-card);
            border-radius: 16px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.08);
            padding: 2px;
        }

        /* 天干留意关系颜色定制：仅作用于天干区域 */
        #tiangan-guanxi-content .guanxi-item.he {
            color: #1e88e5;
            background-color: #e3f2fd;
        }
        #tiangan-guanxi-content .guanxi-item.ke {
            color: #f44336;
            background-color: #ffebee;
        }
        #tiangan-guanxi-content .guanxi-item.sheng {
            color: #2e7d32 !important; /* 绿色文字 */
            background-color: #e8f5e9 !important; /* 淡绿底 */
            border: 1px solid #c8e6c9 !important;
            font-weight: 600 !important;
        }
        #tiangan-guanxi-content .guanxi-item.chong {
            color: #ff0000 !important;
            background-color: #ffffff !important;
        }

        /* 地支留意关系颜色定制：仅作用于地支区域 */
        #dizhi-guanxi-content .guanxi-item.he,
        #dizhi-guanxi-content .guanxi-item.sanhe,
        #dizhi-guanxi-content .guanxi-item.liuhe,
        #dizhi-guanxi-content .guanxi-item.banhe,
        #dizhi-guanxi-content .guanxi-item.anhe {
            color: #1e88e5 !important; /* 蓝色 */
            background-color: #e3f2fd !important;
        }
        #dizhi-guanxi-content .guanxi-item.chong {
            color: #ff0000 !important; /* 白字 */
            background-color: #ffffff !important; /* 更鲜明的红底 */
        }
        #dizhi-guanxi-content .guanxi-item.hai {
            color: #ff1744 !important; /* 鲜红色 */
            background-color: #ffebee !important;
        }
        #dizhi-guanxi-content .guanxi-item.xing {
            color: #a64b00 !important; /* 土色，呼应 --earth-color */
            background-color: #fff3e0 !important;
        }

        .dayun-liunian-title {
            font-size: 15px;
            font-weight: bold;
            color: var(--primary-dark);
            margin-bottom: 0px;
            padding-bottom: 0px;
            border-bottom: 0px solid var(--divider-color);
        }

        /* 大运单元格点击样式 */
        .dayun-cell {
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .dayun-cell:hover {
            background-color: rgba(108, 140, 255, 0.1) !important;
            transform: translateY(-1px);
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }

        .dayun-cell.active {
            background-color: rgba(108, 140, 255, 0.2) !important;
            border: 2px solid #6c8cff;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(108, 140, 255, 0.3);
        }

        /* 流年单元格点击样式 */
        .liunian-cell {
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .liunian-cell:hover {
            background-color: rgba(255, 152, 0, 0.1) !important;
            transform: translateY(-1px);
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }

        .liunian-cell.active {
            background-color: rgba(255, 152, 0, 0.2) !important;
            border: 2px solid #ff9800;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(255, 152, 0, 0.3);
        }

        /* 移动端大运流年表样式 */
        @media (max-width: 768px) {
            .dayun-cell:hover {
                transform: translateY(-1px);
                box-shadow: 0 1px 4px rgba(0,0,0,0.1);
            }

            .dayun-cell.active {
                transform: translateY(-1px);
                box-shadow: 0 2px 6px rgba(108, 140, 255, 0.3);
            }

            .liunian-cell:hover {
                transform: translateY(-1px);
                box-shadow: 0 1px 4px rgba(0,0,0,0.1);
            }

            .liunian-cell.active {
                transform: translateY(-1px);
                box-shadow: 0 2px 6px rgba(255, 152, 0, 0.3);
            }
        }

        /* 为所有笔记相关的modal-dialog添加更大尺寸 */
        .modal-dialog.modal-xl {
            max-width: 90% !important;
            width: 90% !important;
            height: 80vh !important;
            margin: 10vh auto !important;
        }
        
        .modal-dialog.modal-xxl {
            max-width: 98% !important;
            width: 98% !important;
            height: 98vh !important;
            margin: 1vh auto !important;
        }

        .modal-xl .modal-body {
            flex: 1;
            overflow-y: auto;
            padding: 20px;
        }

        .modal-xl .modal-body textarea {
            height: 60vh !important;
            min-height: 500px !important;
            resize: vertical;
            font-size: 14px;
            line-height: 1.6;
        }

        .modal-xl .modal-body input[type="text"] {
            font-size: 16px;
            padding: 10px 12px;
        }

        /* 笔记编辑窗内容样式 */
        .modal-xl .modal-content {
            height: 80vh !important;
            display: flex;
            flex-direction: column;
        }



        /* 移动端适配 */
        @media (max-width: 768px) {
            .modal-dialog.modal-xl {
                max-width: 95% !important;
                width: 95% !important;
                height: 85vh !important;
                margin: 7.5vh auto !important;
            }

            .modal-xl .modal-content {
                height: 85vh !important;
                max-height: 85vh !important;
            }

            .modal-xl .modal-body {
                flex: 1 !important;
                overflow-y: auto;
                padding: 15px;
                display: flex;
                flex-direction: column;
                height: calc(85vh - 120px) !important;
            }

            .modal-xl .modal-body textarea {
                height: 50vh !important;
                min-height: 300px !important;
                flex: 1 !important;
            }

            .modal-xl .modal-header {
                padding: 10px 15px;
            }

            .modal-xl .modal-footer {
                padding: 10px 15px;
            }
        }

        /* 全屏modal样式优化 */
        .modal-xl .modal-header {
            padding: 15px 20px;
            border-bottom: 1px solid #dee2e6;
        }

        .modal-xl .modal-footer {
            padding: 15px 20px;
            border-top: 1px solid #dee2e6;
        }

        .modal-xl .modal-body {
            flex: 1;
            overflow-y: auto;
            padding: 20px;
            display: flex;
            flex-direction: column;
        }

        .modal-xl .modal-body form {
            display: flex;
            flex-direction: column;
            height: 100%;
        }

        .modal-xl .modal-body .mb-3 {
            margin-bottom: 15px;
        }

        .modal-xl .modal-body .mb-3:last-child {
            flex: 1;
            display: flex;
            flex-direction: column;
        }

        .modal-xl .modal-body .mb-3:last-child textarea {
            flex: 1;
            min-height: 0;
        }

        /* 强制覆盖Bootstrap默认样式的更强力选择器 */
        body .modal-dialog.modal-xl {
            max-width: 90% !important;
            width: 90% !important;
            height: 80vh !important;
            margin: 10vh auto !important;
        }

        body .modal-xl .modal-content {
            height: 80vh !important;
            max-height: 80vh !important;
        }

        body .modal-xl .modal-body {
            flex: 1 !important;
            overflow-y: auto;
            padding: 20px;
            display: flex;
            flex-direction: column;
            height: calc(80vh - 120px) !important;
        }

        body .modal-xl .modal-body textarea {
            height: 60vh !important;
            min-height: 500px !important;
            flex: 1 !important;
        }

        /* 确保modal背景也是全屏的 */
        body .modal.show {
            display: flex !important;
            align-items: center;
            justify-content: center;
        }

        body .modal.show .modal-dialog.modal-xl {
            margin: 0 !important;
            max-width: 95% !important;
            width: 95% !important;
            height: 95vh !important;
        }

        /* 移动端强制样式 */
        @media (max-width: 768px) {
            body .modal-dialog.modal-xl {
                max-width: 95% !important;
                width: 95% !important;
                height: 85vh !important;
                margin: 7.5vh auto !important;
            }

            body .modal-xl .modal-content {
                height: 85vh !important;
                max-height: 85vh !important;
            }

            body .modal-xl .modal-body {
                flex: 1 !important;
                overflow-y: auto;
                padding: 15px;
                display: flex;
                flex-direction: column;
                height: calc(85vh - 120px) !important;
            }

            body .modal-xl .modal-body textarea {
                height: 50vh !important;
                min-height: 300px !important;
                flex: 1 !important;
            }

            body .modal.show .modal-dialog.modal-xl {
                margin: 7.5vh auto !important;
                max-width: 95% !important;
                width: 95% !important;
                height: 85vh !important;
            }
        }

        /* 人生事件modal特定样式 */
        #addEventModal .modal-dialog,
        #editEventModal .modal-dialog {
            max-width: 90% !important;
            width: 90% !important;
            height: 80vh !important;
            margin: 10vh auto !important;
        }

        #addEventModal .modal-content,
        #editEventModal .modal-content {
            height: 80vh !important;
            display: flex;
            flex-direction: column;
        }

        #addEventModal .modal-body,
        #editEventModal .modal-body {
            flex: 1 !important;
            overflow-y: auto;
            padding: 20px;
            display: flex;
            flex-direction: column;
        }

        #addEventModal textarea,
        #editEventModal textarea {
            height: 50vh !important;
            min-height: 400px !important;
            resize: vertical;
            font-size: 14px;
            line-height: 1.6;
        }

        /* 人生事件modal移动端样式 */
        @media (max-width: 768px) {
            #addEventModal .modal-dialog,
            #editEventModal .modal-dialog {
                max-width: 95% !important;
                width: 95% !important;
                height: 85vh !important;
                margin: 7.5vh auto !important;
            }

            #addEventModal .modal-content,
            #editEventModal .modal-content {
                height: 85vh !important;
                max-height: 85vh !important;
            }

            #addEventModal .modal-body,
            #editEventModal .modal-body {
                flex: 1 !important;
                overflow-y: auto;
                padding: 15px;
                display: flex;
                flex-direction: column;
                height: calc(85vh - 120px) !important;
            }

            #addEventModal textarea,
            #editEventModal textarea {
                height: 40vh !important;
                min-height: 250px !important;
                flex: 1 !important;
            }

            #addEventModal .modal-header,
            #editEventModal .modal-header {
                padding: 10px 15px;
            }

            #addEventModal .modal-footer,
            #editEventModal .modal-footer {
                padding: 10px 15px;
            }
        }

        /* 人生事件modal强制样式 */
        body #addEventModal .modal-dialog,
        body #editEventModal .modal-dialog {
            max-width: 90% !important;
            width: 90% !important;
            height: 80vh !important;
            margin: 10vh auto !important;
        }

        body #addEventModal .modal-content,
        body #editEventModal .modal-content {
            height: 80vh !important;
            max-height: 80vh !important;
        }

        body #addEventModal .modal-body,
        body #editEventModal .modal-body {
            flex: 1 !important;
            overflow-y: auto;
            padding: 20px;
            display: flex;
            flex-direction: column;
            height: calc(80vh - 120px) !important;
        }

        body #addEventModal textarea,
        body #editEventModal textarea {
            height: 50vh !important;
            min-height: 400px !important;
            flex: 1 !important;
        }

        /* 人生事件modal移动端强制样式 */
        @media (max-width: 768px) {
            body #addEventModal .modal-dialog,
            body #editEventModal .modal-dialog {
                max-width: 95% !important;
                width: 95% !important;
                height: 85vh !important;
                margin: 7.5vh auto !important;
            }

            body #addEventModal .modal-content,
            body #editEventModal .modal-content {
                height: 85vh !important;
                max-height: 85vh !important;
            }

            body #addEventModal .modal-body,
            body #editEventModal .modal-body {
                flex: 1 !important;
                overflow-y: auto;
                padding: 15px;
                display: flex;
                flex-direction: column;
                height: calc(85vh - 120px) !important;
            }

            body #addEventModal textarea,
            body #editEventModal textarea {
                height: 40vh !important;
                min-height: 250px !important;
                flex: 1 !important;
            }

            body .modal.show #addEventModal .modal-dialog,
            body .modal.show #editEventModal .modal-dialog {
                margin: 7.5vh auto !important;
                max-width: 95% !important;
                width: 95% !important;
                height: 85vh !important;
            }
        }