/* app/static/css/home.css */

@font-face {
    font-family: 'ZhuqueFangsongMinimal';
    src: url('../fonts/minimal_zhuqueFangsong.ttf') format('truetype');
    font-display: swap;
}

body {
    background-color: #F8F0D9;
    margin: 0;
    padding: 0;
    font-family: "Songti SC", SimSun, "STSong",  "Microsoft YaHei", serif;
}

/* 添加动态加载字体样式 */
body.font-loaded {
    font-family: 'ZhuqueFangsongMinimal', "Songti SC", SimSun, "STSong", "Microsoft YaHei", serif !important;
}


.container {
    max-width: 1300px;
    margin: 0 auto;
    padding: 30px 20px 10px;
}

/* 主模块布局 */
.main-module {
    display: flex;
    justify-content: center;
    margin-top: 55px;
    width: 100%;
    min-height: 890px; /* 设置最小高度 */
}

/* 预加载样式 */
.form-preload {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.form-loaded {
    opacity: 1;
}

/* 确保不要隐藏整个容器，只控制透明度 */
.form-container {
    display: flex;
    justify-content: center;
    width: 100%;
}

/* 操作和示例模块共同样式 */
.operation, .examples {
    width: 600px;
    min-height: 890px; /* 改为最小高度 */
    max-height: none; /* 移除最大高度限制 */
    background-color: #FDFBF7;
    border: 4px solid #F1D7B7;
    border-radius: 10px;
    box-shadow: 0 0 3px 2px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: visible; /* 允许内容溢出 */
    padding: 20px;
    box-sizing: border-box;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
}

/* 为operation添加右边距，为examples添加左边距，共同创建55px的间隔 */
.operation {
    margin-right: calc(40px / 2);
}

.examples {
    margin-left: calc(40px / 2);
}

/* 为了保证在较小屏幕上的显示，可以添加一个媒体查询 */
@media (max-width: 1255px) { /* 600px + 600px + 55px */
    .main-module {
        flex-direction: column;
        align-items: center;
    }

    .operation, .examples {
        margin: 0 0 20px 0; /* 在垂直布局时移除左右边距，添加底部边距 */
    }
}

.operation::before, .examples::before, .section.examples::before, .modal-content::before {
    content: "";
    position: absolute;
    top: 4px;
    left: 4px;
    right: 4px;
    bottom: 4px;
    border: 2px solid #F1D7B7;
    border-radius: 6px;
    pointer-events: none;
}

/* 各部分共同样式 */
.basic-info,
.divination,
.divination-method,
.divination-guidance,
.hexagram-interpretation{
    width: 100%;
    padding: 0 40px;
    box-sizing: border-box;
    margin-top: 0; /* 重置顶部边距 */
}

.divination,
.divination-method {
    margin-top: 40px;
}

.operation > div:first-child,
.examples > div:first-child {
    margin-top: 20px;
}

/* 子标题样式 */
.subtitle {
    color: #000000;
    font-size: 16px;
    margin-bottom: 20px;
    text-align: left;
    margin-top: 0; /* 确保子标题没有额外的上边距 */
}

/* 分隔线样式 */
.divider,
.divination-method .divider {
    border: none;
    border-top: 1px solid #F1D7B7;
    margin: 20px 0;
    width: 100%;
}

.divination-method .divider {
    margin: 0 0 20px 0;
}

/* 表单组样式 */
.form-group {
    margin-bottom: 20px;
    text-align: left;
    display: flex;
    align-items: center;
}

.form-group label,
.time-picker-label {
    color: #000000;
    font-size: 14px;
    width: 80px;
    margin-right: 30px;
}

/* 日期和时间选择器样式 */
.date-picker,
.time-picker {
    display: flex;
    align-items: center;
}

/* 表单元素通用样式 */
select,
#gender,
#divination-content {
    height: 35px;
    padding: 5px 10px;
    border: 1px solid #F1D7B7;
    border-radius: 4px;
    box-sizing: border-box;
    font-family: inherit;
    font-size: 14px;
    background-color: white;
    text-align: left;
    max-width: 280px;
}

/* 自定义下拉框样式 */
select,
#gender {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: url("data:image/svg+xml;utf8,<svg t='1733276047223' class='icon' viewBox='0 0 1024 1024' version='1.1' xmlns='http://www.w3.org/2000/svg' p-id='6944' width='20' height='20'><path d='M338.015375 505.084382l-45.345344 45.164324 203.284714 204.189811 203.329969-204.235065-45.345343-45.164325L496.045255 663.74783z' fill='%232c2c2c' p-id='6945'></path></svg>") no-repeat right calc(50% - 2px);
    padding-right: 30px;
}

/* 特定元素宽度设置 */
#year { width: 80px; }
#month, #day { width: 60px; }
#gender { width: 90px; }
#divination-method-select { width: 120px; }
#divination-content { width: 280px; }

/* 日期选择器间距 */
.date-picker select:not(:last-child),
.date-picker span:not(:last-child) {
    margin-right: 12px;
}

/* 文本样式 */
.date-picker span,
.time-picker span {
    font-size: 14px;
    color: #000000;
}

/* 占卜内容占位符样式 */
#divination-content::placeholder {
    color: #999;
}

/* 示例模块样式 */
.examples {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.examples h2 {
    font-size: 14px;
    color: #000000;
    margin-bottom: 20px;
    align-self: flex-start;
}

/* 时间选择器容器样式 */
.time-picker-container {
    display: flex;
    align-items: center;
    margin-top: 20px;
}

.time-picker-label {
    display: flex;
    align-items: center;
    height: 35px;
}

.time-picker select {
    width: 60px;
    margin-right: 0;
}

.time-picker span {
    margin: 0 8px;
    font-size: 14px;
    color: #000000;
}

.time-picker span:last-child {
    margin-right: 0;
}

/* 自定义占卜方法样式 */
#divination-method-inputs .custom-divination {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

#divination-method-inputs .custom-divination .divination-yao-container:not(.last-yao) {
    margin-bottom: 20px;
}

#divination-method-inputs .custom-divination .divination-yao-container.last-yao {
    margin-bottom: 0;
}

/* 占卜名称和数字输入样式 */
.divination-name-container,
.divination-number-container {
    display: flex;
    align-items: center;
}

.divination-name-label,
.divination-number-label {
    color: #000000;
    font-size: 14px;
    margin-right: 68px;
}

.divination-name-input,
.divination-number-input {
    width: 280px;
}

/* 自定义占卜样式 */
.custom-divination {
    display: flex;
    flex-direction: column;
}

.divination-yao-container {
    display: flex;
    align-items: flex-start;
    margin-bottom: 10px;
    height: auto;
}

.divination-yao-container.last-yao {
    margin-bottom: 0;
}

.divination-yao-label {
    color: #000000;
    font-size: 14px;
    width: 80px;
    margin-right: 30px;
    line-height: 35px;
    display: inline-block;
}

.divination-yao-select {
    height: 35px;
    padding: 0 30px 0 10px;
    border: 1px solid #F1D7B7;
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 14px;
    background-color: white;
    width: 90px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg fill='black' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
    background-repeat: no-repeat;
    background-position: right 5px center;
    background-size: 20px;
    display: inline-block;
}

.divination-yao-select::-ms-expand {
    display: none;
}

.divination-yao-select:focus {
    outline: none;
    border-color: #40A9FF;
}

/* 起卦方式部分样式 */
.divination-method .subtitle-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.divination-method .explanation-text {
    color: #1890FF;
    font-size: 16px;
    cursor: pointer;
    margin-bottom: 20px;
}

/* 模态框样式 */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.8);
    justify-content: center;
    align-items: center;
}

.modal-content {
    background-color: #FDFBF7;
    border: 4px solid #F1D7B7;
    border-radius: 10px;
    width: 500px;
    height: 420px;
    position: relative;
    padding: 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

.modal-header {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    margin-bottom: 20px;
    position: relative;
}

#modal-content {
    font-size: 14px;
    flex-grow: 1;
    overflow-y: auto;
    text-align: center;
}

.close-btn {
    width: 20px;
    height: 20px;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1024 1024' version='1.1' xmlns='http://www.w3.org/2000/svg' width='18' height='18'%3E%3Cpath d='M512 466.944l233.472-233.472a31.744 31.744 0 0 1 45.056 45.056L557.056 512l233.472 233.472a31.744 31.744 0 0 1-45.056 45.056L512 557.056l-233.472 233.472a31.744 31.744 0 0 1-45.056-45.056L466.944 512 233.472 278.528a31.744 31.744 0 0 1 45.056-45.056z' fill='%235A5A68'%3E%3C/path%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

/* 操作按钮样式 */
.operation-buttons {
    display: flex;
    justify-content: center;
    margin-top: 30px;
}

.calculate-button,
.reset-button {
    width: 60px;
    height: 35px;
    border: none;
    border-radius: 4px;
    font-family: inherit;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 10px;
}

.calculate-button:hover,
.reset-button:hover {
    opacity: 0.9;
}


.calculate-button {
    background-color: #1890FF;
    color: #FFFFFF;
}

.reset-button {
    background-color: #D9D9D9;
    color: #000000;
}

/* 占卜指引样式 */
.divination-guidance {
    margin-top: 20px;
}

.guidance-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    height: 100%; /* 移除减去标题高度的计算，使用全高度 */
    padding-top: 0; /* 确保顶部没有内边距 */
    margin-top: 0; /* 确保顶部没有外边距 */
}

.guidance-content p {
    margin: 0;
    padding: 0;
    font-size: 14px;
    line-height: 1.5;
    color: #333;
    text-align: center;
}

.guidance-content p:first-child {
    margin-top: 0; /* 确保第一个p元素没有上边距 */
}

.guidance-content .icon {
    display: block;
    width: 20px;
    height: 20px;
    margin: 8px 0;
    background-image: url("data:image/svg+xml;base64,PHN2ZyB0PSIxNzI0MjI2MzcyNjA3IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDExMzcgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9Ijk5MTMiIHdpZHRoPSIyMDAiIGhlaWdodD0iMjAwIj48cGF0aCBkPSJNMjIzLjAwOTg4NiA4MDcuMjUzNTc0YTEzNS4xNjc4NSAxMzUuMTY3ODUgMCAwIDEtMTIxLjkxMjc1NC0xNDcuNDU1ODM2IDEzNS42MjI5NiAxMzUuNjIyOTYgMCAwIDEgMTMzLjk3MzE4NS0xMjEuODU1ODY1aDg2LjE4NjU3VjQ0MC41NDgyMDRIMjM1LjA3MDMxN0MxMDYuMTAzMzQ5IDQzOS43NTE3NiAwLjg1OTAyMSA1NDMuMDA0OTc5IDAuMDA1Njg5IDY3MS40MDMwNThjLTAuODUzMzMyIDEyNC42NDM0MTcgOTcuNzM1MDAzIDIyNy44Mzk3NDcgMjIzLjAwNDE5NyAyMzMuNTI4NjNWOTk1LjU1NTU4N2wxNDAuMjg3ODQ0LTEzOC45MjI1MTItMTQwLjM0NDczMy0xMzguOTIyNTEydjg5LjQ4NjEyMnogbTQyMC4wNjcwODgtNzIuOTMxNDc0aC0xNDguNDc5ODM1Yy02Ny44MTE0OCAwLTEyMi43NjYwODYgNTQuNjcwMTYxLTEyMi43NjYwODUgMTIyLjE0MDMwOCAwIDY3LjUyNzAzNiA1NC45NTQ2MDYgMTIyLjE0MDMwOSAxMjIuODIyOTc0IDEyMi4xNDAzMDloMTQ4LjQyMjk0NmM2Ny44NjgzNjkgMCAxMjIuODIyOTc1LTU0LjYxMzI3MyAxMjIuODIyOTc1LTEyMi4xNDAzMDlhMTIyLjU5NTQxOSAxMjIuNTk1NDE5IDAgMCAwLTEyMi44Nzk4NjMtMTIyLjE0MDMwOHogbTAgMTQ2Ljg4Njk0OGgtMTQ4LjQ3OTgzNWEyNC44NjA0MTcgMjQuODYwNDE3IDAgMCAxLTEuNTM1OTk4LTQ5LjU1MDE2OGgxNTAuMTI5NjExYTI0Ljg2MDQxNyAyNC44NjA0MTcgMCAwIDEgMi4zODkzMzEgNDkuNTUwMTY4aC0yLjUwMzEwOXogbTI1OS41ODM3MTItODA3LjgyMTMyNWgtODYuMTg2NTcxVjE3MC42Njc2MTVoODYuMTg2NTcxYzM2LjA2NzUxNSAwIDcwLjcxMjgxIDE0LjE2NTMxOCA5Ni4yNTU4OTMgMzkuNDIzOTU2YTEzNC4yNTc2MjkgMTM0LjI1NzYyOSAwIDAgMSAwLjI4NDQ0NCAxOTAuNTc3NTY2bC0wLjI4NDQ0NCAwLjM0MTMzM2ExMzYuMDIxMTgyIDEzNi4wMjExODIgMCAwIDEtODQuMzY2MTI4IDM4Ljk2ODg0NlYzNTAuMTUxODZMNzc0LjQzMzI3MyA0ODkuMjQ1MDM5bDE0MC4yODc4NDQgMTM4LjkyMjUxMlY1MzcuNjAwNTRjMTI4Ljc5NjMwMS01LjgwMjY2IDIyOC42OTMwNzktMTE0LjM0NjU0IDIyMi44MzM1My0yNDIuNDYwMTc1LTUuNjg4ODgzLTEyNC41Mjk2MzktMTA5LjM0MDMyMy0yMjIuNDkyMTk3LTIzNC45NTA4NS0yMjEuNjM4ODY0eiBtLTI1OS41ODM3MTIgMjkzLjgzMDc4NWgtMTQ4LjQ3OTgzNWMtNjcuODExNDggMC0xMjIuNzY2MDg2IDU0LjY3MDE2MS0xMjIuNzY2MDg1IDEyMi4xNDAzMDggMCA2Ny41MjcwMzYgNTQuOTU0NjA2IDEyMi4xNDAzMDkgMTIyLjgyMjk3NCAxMjIuMTQwMzA5aDE0OC40MjI5NDZjNjcuODY4MzY5IDAgMTIyLjgyMjk3NS01NC42MTMyNzMgMTIyLjgyMjk3NS0xMjIuMTQwMzA5YTEyMi41Mzg1MzEgMTIyLjUzODUzMSAwIDAgMC0xMjIuODc5ODYzLTEyMi4xNDAzMDh6IG0wIDE0Ni44ODY5NDdoLTE0OC40Nzk4MzVhMjQuODYwNDE3IDI0Ljg2MDQxNyAwIDAgMS0xLjUzNTk5OC00OS41NTAxNjdoMTUwLjEyOTYxMWEyNC44NjA0MTcgMjQuODYwNDE3IDAgMCAxIDIuMzg5MzMxIDQ5LjU1MDE2N2gtMi41MDMxMDl6IG0wLTUxNC4xMDQzMTdoLTE0OC40Nzk4MzVDNDI2Ljg0MjU0OCAwLjAwMTEzOCAzNzEuODg3OTQyIDU0LjYxNDQxIDM3MS44ODc5NDIgMTIyLjE0MTQ0N2MwIDY3LjQ3MDE0NyA1NC45NTQ2MDYgMTIyLjE0MDMwOSAxMjIuODIyOTc1IDEyMi4xNDAzMDhoMTQ4LjQyMjk0NmM2Ny44NjgzNjkgMCAxMjIuODIyOTc1LTU0LjYxMzI3MyAxMjIuODIyOTc1LTEyMi4xNDAzMDhBMTIyLjUzODUzMSAxMjIuNTM4NTMxIDAgMCAwIDY0My4wMjAwODYgMC4wMDExMzh6IG0wIDE0Ny4wMDA3MjVoLTE0OC40Nzk4MzVhMjQuODYwNDE3IDI0Ljg2MDQxNyAwIDAgMS0xLjUzNTk5OC00OS41NTAxNjdoMTUwLjEyOTYxMWEyNC44MDM1MjggMjQuODAzNTI4IDAgMSAxIDIuODQ0NDQxIDQ5LjM3OTUwMWMtMS4xMzc3NzcgMC4xNzA2NjYtMi4xNjE3NzUgMC4xNzA2NjYtMi45NTgyMTkgMC4xNzA2NjZ6IiBmaWxsPSIjRjFEN0I3IiBwLWlkPSI5OTE0Ij48L3BhdGg+PC9zdmc+");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.section.examples {
    min-height: 880px; /* 改为最小高度 */
    max-height: none; /* 移除最大高度限制 */
    padding-bottom: 80px; /* 为按钮和底部留白预留空间 */
}

.divination-guidance {
    margin-top: 20px;
}

/* 卦象说明模块样式 */
/* 更新 hexagram-description 相关样式 */
.hexagram-description {
    padding: 0 40px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center; /* 水平居中子元素 */
    width: 100%; /* 确保占满容器宽度 */
    margin: 0 auto; /* 水平居中整个模块 */
}

.hexagram-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%; /* 确保内容区域占满容器宽度 */
    max-width: 480px; /* 限制最大宽度，保持良好的阅读体验 */
}

.hexagram-image {
    width: 180px;
    height: 180px;
    margin-bottom: 20px; /* 增加与下方文字的间距 */
    display: block; /* 确保图片作为块级元素 */
}

.hexagram-info {
    text-align: center;
    width: 100%; /* 确保文字信息区域占满容器宽度 */
}

.hexagram-name {
    font-size: 16px;
    font-weight: bold;
    margin: 0 0 20px 0;
    text-align: center; /* 确保标题居中 */
}

.hexagram-intro,
.hexagram-description {
    font-size: 14px;
    margin: 10px 0;
    line-height: 1.5;
    text-align: center; /* 确保文本居中 */
    width: 100%; /* 确保文本区域占满容器宽度 */
}

/* 响应式调整 */
@media (max-width: 768px) {
    .hexagram-description {
        padding: 0 20px; /* 在小屏幕上减小两侧内边距 */
    }

    .hexagram-content {
        max-width: 100%; /* 在小屏幕上允许内容区域完全占满 */
    }

    .hexagram-image {
        width: 150px; /* 在小屏幕上稍微缩小图片尺寸 */
        height: 150px;
    }
}



/* 新增的hexagram-interpretation样式 */
.hexagram-interpretation {
    margin-top: 20px; /* 与其他部分保持一致的顶部间距 */
}

.hexagram-interpretation .subtitle {
    color: #000000;
    font-size: 16px;
    margin-bottom: 20px;
    text-align: left;
    margin-top: 0;
}

.hexagram-interpretation .divider {
    border: none;
    border-top: 1px solid #F1D7B7;
    margin: 20px 0 20px 0;
    width: 100%;
}

/* 设置 divination-image 下 svg 图片大小 */
.divination-image img {
    width: 160px;
    height: 160px;
}

/* 在 section.examples 中水平居中 divination-image */
.section.examples .divination-image {
    display: flex;
    justify-content: center;
    width: 100%;
}


/* 设置 divination-name 在 section.examples 中水平居中 */
.section.examples .divination-name {
    text-align: center;
    width: 100%;
}

/* 设置 divination-name 的上下间距，字号和字重 */
.section.examples .divination-name {
    margin-top: 20px;
    margin-bottom: 20px;
    font-size: 18px;
}

/* 设置 divination-description 在 section.examples 中水平居中 */
.section.examples .divination-description {
    text-align: center;
    width: 100%;
    padding: 0 20px;  /* 添加一些左右内边距，以确保文本不会太靠近边缘 */
    box-sizing: border-box;  /* 确保内边距不会增加元素的总宽度 */
}

/* 修改 divination-name 的字体大小为14px */
.section.examples .divination-description{
    font-size: 14px;
    text-align: center;
    width: 100%;
    margin-top: 20px;
    margin-bottom: 20px;
}

.section.examples .explanation-content {
    font-size: 14px;
    text-align: left;
    width: 100%;
    margin-top: 20px;
    margin-bottom: 20px;
    position: relative;
}

.section.examples .explanation-content p {
    line-height: calc(1em + 10px);
}

/* 新增查看详情按钮样式 */
.details-button {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    background-color: #D32423;
    color: #FFFFFF;
    width: 90px;
    height: 33px;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.details-button:hover {
    opacity: 0.9;
}

/* 添加媒体查询，确保在较小屏幕上的响应式布局 */
@media (max-width: 1255px) {
    .main-module {
        flex-direction: column;
        align-items: center;
    }

    .operation, .examples {
        margin: 0 0 20px 0;
        width: 100%;
        max-width: 600px;
    }
}

/* 更新日期选择器样式 */
.date-picker select {
    font-family: inherit;
}

/* 更新时间选择器样式 */
.time-picker-container select {
    font-family: inherit;
}

/* 如果需要，可以更具体地指定选择框 */
.date-picker select#year,
.date-picker select#month,
.date-picker select#day,
.time-picker-container select#hour,
.time-picker-container select#minute {
    font-family: inherit;
}

/* 摇卦框 */
/* 手工起卦模态框样式 */
#manual-divination-modal .modal-content {
    width: 500px;  /* 可调整 - 模态框的宽度 */
    height: 570px; /* 可调整 - 模态框的高度 */
    background-color: #FDFBF7;
    padding: 30px;
    position: relative;
    display: flex;
    flex-direction: column;
}

#manual-divination-modal .modal-header {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    margin-bottom: 10px;
    font-size: 18px;  /* 设置字号为18px */
}

#manual-divination-modal .modal-title {
    margin: 0;
    font-size: 18px;
    color: #000;
    text-align: center;
}

#manual-divination-modal .coins-container {
    display: flex;
    justify-content: center;
    gap: 60px;
    margin-top: 20px;
    margin-bottom: 10px;
}

#manual-divination-modal .coin {
    width: 100px;
    height: 100px;
    transition: transform 0.5s;
}

#manual-divination-modal .coin.flipping {
    animation: flip 0.5s ease-in-out;
}

@keyframes flip {
    0% { transform: rotateY(0deg); }
    100% { transform: rotateY(360deg); }
}

#manual-divination-modal .button-container {
    display: flex;
    justify-content: center;
    margin: 10px 0;
}

#manual-divination-modal .shake-button {
    width: 60px;
    height: 35px;
    background-color: #1890FF;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    font-family: inherit;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

#manual-divination-modal .shake-button:hover {
    opacity: 0.9;
}

#manual-divination-modal .shake-button:disabled {
    background-color: #ccc;
    cursor: not-allowed;
}

#manual-divination-modal .hexagram-lines {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    margin-top: 20px;
}

#manual-divination-modal .hexagram-line {
    width: 100px;
    height: 15px;
}

#manual-divination-modal .hexagram-line svg {
    display: block;
}

/* 分隔线样式 */
.manual_divider {
    border: none;
    border-top: 1px solid #F1D7B7;
    width: 100%;
}

.manual-explain {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: 0; /* 确保顶部没有内边距 */
    margin-top: 0; /* 确保顶部没有外边距 */
}

.manual-explain p {
    margin: 0;
    padding: 0;
    font-size: 14px;
    line-height: 1.5;
    color: #333;
    text-align: center;
}

/* 手工起卦模态框的样式调整 */
#manual-divination-modal .hexagram-area {
    margin-top: 20px;
    padding: 0 20px;
}

#manual-divination-modal .hexagram-details {
    display: flex;
    justify-content: center;
    gap: 100px; /* 两列之间的间距设置为100px */
}

#manual-divination-modal .detail-column {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#manual-divination-modal .detail-title {
    font-size: 15px;
    margin-bottom: 15px;
    font-weight: bold;
}

#manual-divination-modal .detail-content {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#manual-divination-modal .detail-item {
    font-size: 15px;
    line-height: 1.5;
    height: 22.5px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#manual-divination-modal .detail-item svg {
    width: 100px;
    height: 15px;
}

/* 响应式布局调整 */
@media (max-width: 768px) {
    #manual-divination-modal .hexagram-details {
        flex-direction: column;
        gap: 20px;
    }

    #manual-divination-modal .detail-column {
        width: 100%;
    }
}


/* 模态框内容样式 */
.modal-description {
    text-align: left;
    padding: 0 20px;
}

.divination-method-item {
    margin-bottom: 20px;
}

.divination-method-item:last-child {
    margin-bottom: 0;
}

.divination-method-formula {
    margin-left: 20px;
    margin-top: 10px;
}


/* 数字输入框基础样式 */
.divination-number-input {
    height: 35px;
    padding: 5px 10px;
    border: 1px solid #F1D7B7;
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 16px;  /* 确保与占位符文字大小一致 */
    background-color: white;
    text-align: left;
    width: 280px;
    font-family: inherit;
}

/* 确保占位符文字样式一致 */
.divination-number-input::placeholder {
    font-family: inherit;
    font-size: 14px;  /* 与输入文字大小保持一致 */
    color: #999;
    line-height: normal;
}

/* 确保输入时的文字样式一致 */
.divination-number-input:focus {
    font-family: inherit;
    outline: none;
    border-color: #F1D7B7;
    font-size: 16px;  /* 保持聚焦时字号不变 */
}

/* 特殊状态下保持字号一致 */
.divination-number-input:hover,
.divination-number-input:active,
.divination-number-input:disabled {
    font-family: inherit;
    font-size: 16px;
}



/* 默认加载动画不可见，但元素存在 */
.loading-overlay {
    opacity: 0; /* 默认不可见 */
    pointer-events: none; /* 禁止与之交互 */
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(248, 240, 217, 0.9);
    display: flex; /* 保持布局 */
    justify-content: center;
    align-items: center;
    transition: opacity 0.3s ease-in-out; /* 渐变效果 */
}

/* 需要显示加载动画时 */
.loading-overlay.visible {
    opacity: 1; /* 完全可见 */
    pointer-events: all; /* 允许交互 */
}

/* 动画部分保持不变 */
.loading-spinner {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.spinner {
    width: 50px;
    height: 50px;
    animation: rotate 2s linear infinite;
    margin-bottom: 15px;
}

.path {
    stroke: rgb(211, 36, 35);
    stroke-linecap: round;
    animation: dash 1.5s ease-in-out infinite;
}

.loading-text {
    color: #333;
    font-size: 16px;
    font-family: inherit;
}

@keyframes rotate {
    100% {
        transform: rotate(360deg);
    }
}

@keyframes dash {
    0% {
        stroke-dasharray: 1, 150;
        stroke-dashoffset: 0;
    }
    50% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -35;
    }
    100% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -124;
    }
}