/* 基础样式重置 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Microsoft YaHei', Arial, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #f7f7f7;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

/* 页头样式 */
header {
    text-align: center;
    margin-bottom: 30px;
    padding: 20px;
    background-color: #5c2223;
    color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

header h1 {
    font-size: 28px;
    margin-bottom: 10px;
}

/* 主体部分样式 */
main {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* 面板样式 */
.panel {
    background-color: #fff;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.panel h2 {
    color: #5c2223;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
}

/* 输入区域样式 */
.input-section {
    display: flex;
    gap: 20px;
    justify-content: space-between;
}

/* 基本信息面板样式 */
.basic-info-panel {
    width: calc(50% - 10px);  /* 50%减去间距的一半 */
    flex: none;  /* 取消flex弹性 */
    order: 1;
}

/* 基本信息行的样式调整 */
.basic-info-row {
    display: flex;
    gap: 20px;
    margin-bottom: 15px;
    align-items: flex-end; /* 使所有元素底部对齐 */
}

/* 时间组样式 */
.time-group {
    flex: 3;
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
    height: 74px; /* 标签高度 + 间距 + 输入框高度 */
    justify-content: space-between;
}

.time-group label {
    height: 20px; /* 固定标签高度 */
}

/* 性别组样式 */
.sex-group {
    flex: 2;
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
    height: 74px; /* 标签高度 + 间距 + 输入框高度 */
    justify-content: space-between;
}

.sex-group label {
    height: 20px; /* 固定标签高度 */
}

/* 标签样式统一 */
.input-group label {
    display: block;
    margin-bottom: 8px; /* 统一标签的下边距 */
    font-weight: bold;
    color: #5c2223;
}

/* 单选按钮组样式 */
.radio-group {
    display: flex;
    gap: 20px;
    height: 42px; /* 与时间选择器的高度匹配 */
    align-items: center;
}

/* 时间选择器样式 */
.datetime-picker {
    height: 42px; /* 设置固定高度 */
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 16px;
    box-sizing: border-box;
}

/* 单选按钮样式优化 */
.radio-label {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0 5px;
    cursor: pointer;
}

.radio-label input[type="radio"] {
    margin-right: 8px;
    width: 18px;
    height: 18px;
}

/* 阳面朝上的个数面板样式 - 修改为弹性布局，使按钮可以放在底部 */
.yao-counts-panel {
    flex: 1;
    order: 2;
    display: flex;
    flex-direction: column;
}

/* 爻输入容器占据可用空间 */
.yao-inputs-container {
    display: flex;
    gap: 20px;
    flex-grow: 1; /* 使其占据面板的所有可用空间 */
    margin-bottom: 20px; /* 添加底部间距，与按钮分开 */
}

.yao-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* 每行输入框和标签并排 */
.input-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.input-row label {
    flex: 0 0 60px; /* 固定标签宽度 */
    margin-bottom: 0;
    font-weight: bold;
    color: #5c2223;
}

.input-row input {
    flex: 1;
    text-align: center;
}

input[type="number"], 
input[type="text"], 
textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 16px;
}

/* 字符计数器样式 */
.char-counter {
    text-align: right;
    font-size: 12px;
    color: #777;
    margin-top: 5px;
}

/* 提交按钮容器样式调整 */
.submit-container {
    margin-top: auto; /* 将按钮推至底部 */
    text-align: center;
    width: 100%;
}

.submit-btn {
    background-color: #5c2223;
    color: white;
    border: none;
    padding: 12px 30px;
    font-size: 18px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s;
    width: 100%; /* 让按钮占满容器宽度 */
}

.submit-btn:hover {
    background-color: #7c3635;
}

/* 结果区域样式 */
.result-section {
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.result-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
}

.result-header h2 {
    color: #5c2223;
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.result-content {
    min-height: 150px;
    padding: 10px;
    border: 1px solid #eee;
    border-radius: 4px;
    background-color: #fafafa;
}

.placeholder-text {
    color: #999;
    font-style: italic;
    text-align: center;
    margin-top: 70px;
}

/* 加载指示器样式 */
.loading-indicator {
    text-align: center;
    padding: 30px;
}

.spinner {
    width: 40px;
    height: 40px;
    margin: 0 auto 15px;
    border: 4px solid rgba(92, 34, 35, 0.2);
    border-top: 4px solid #5c2223;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

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

/* 页脚样式 */
footer {
    margin-top: 40px;
    text-align: center;
    padding: 20px;
    color: #777;
    font-size: 14px;
}

/* 错误样式 */
.error {
    border: 1px solid #ff5252 !important;
    background-color: #fff8f8;
}

.error-message {
    color: #ff5252;
    font-size: 12px;
    margin-top: 5px;
}

/* 响应式设计 */
@media (max-width: 767px) {
    .input-section {
        flex-direction: column;
    }
    
    .basic-info-panel, .yao-counts-panel {
        width: 100%;
    }
    
    .basic-info-row {
        flex-direction: column;
        gap: 15px;
    }
    
    .yao-inputs-container {
        flex-direction: column;
    }
}

@media (max-width: 480px) {
    .radio-group {
        flex-direction: column;
        gap: 10px;
    }
    
    .input-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }
    
    .input-row label {
        flex: none;
        width: 100%;
    }
}

/* 复制按钮样式 */
.copy-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    background-color: #f0f0f0;
    color: #444;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 6px 12px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.copy-btn:hover {
    background-color: #e0e0e0;
    border-color: #ccc;
}

.copy-btn:active {
    background-color: #d0d0d0;
    transform: translateY(1px);
}

.copy-btn svg {
    width: 16px;
    height: 16px;
}

/* 复制成功提示样式 */
.copy-success {
    background-color: #4caf50 !important;
    color: white !important;
    border-color: #45a049 !important;
}

/* 更精确的对齐调整（如果上面的方法不够理想）*/
.time-group,
.sex-group {
    display: flex;
    flex-direction: column;
    height: 74px; /* 标签高度 + 间距 + 输入框高度 */
    justify-content: space-between;
}

.time-group label,
.sex-group label {
    height: 20px; /* 固定标签高度 */
}

.radio-group,
.datetime-picker {
    height: 42px; /* 固定输入区域高度 */
}

/* Markdown 内容样式 */
.markdown-content {
    font-family: 'Microsoft YaHei', Arial, sans-serif;
    line-height: 1.6;
    color: #333;
}

.markdown-content h1, 
.markdown-content h2, 
.markdown-content h3, 
.markdown-content h4, 
.markdown-content h5, 
.markdown-content h6 {
    color: #5c2223;
    margin: 1em 0 0.5em;
    font-weight: bold;
}

.markdown-content h1 { font-size: 1.8em; }
.markdown-content h2 { font-size: 1.6em; }
.markdown-content h3 { font-size: 1.4em; }
.markdown-content h4 { font-size: 1.2em; }
.markdown-content h5 { font-size: 1.1em; }
.markdown-content h6 { font-size: 1em; }

.markdown-content p {
    margin: 0.5em 0;
}

.markdown-content ul, 
.markdown-content ol {
    margin: 0.5em 0;
    padding-left: 2em;
}

.markdown-content blockquote {
    margin: 0.5em 0;
    padding: 0.5em 1em;
    border-left: 4px solid #ccc;
    background-color: #f8f8f8;
}

.markdown-content code {
    font-family: Consolas, Monaco, 'Andale Mono', monospace;
    background-color: #f5f5f5;
    padding: 2px 4px;
    border-radius: 3px;
}

.markdown-content pre code {
    display: block;
    overflow-x: auto;
    padding: 1em;
    background-color: #f5f5f5;
    border-radius: 4px;
}

.markdown-content table {
    border-collapse: collapse;
    margin: 1em 0;
    width: 100%;
}

.markdown-content table th,
.markdown-content table td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
}

.markdown-content table th {
    background-color: #f2f2f2;
    font-weight: bold;
}

.markdown-content table tr:nth-child(even) {
    background-color: #f9f9f9;
}

/* 论盘区域样式 */
.analysis-section {
    margin-top: 30px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    padding: 20px;
}

/* 复制按钮样式 */
.copy-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    background-color: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 5px 10px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.copy-btn:hover {
    background-color: #e5e5e5;
}

.copy-btn.copy-success {
    background-color: #4caf50;
    color: white;
    border-color: #4caf50;
}

/* 加载指示器样式 */
.loading-indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px 0;
}

.spinner {
    width: 40px;
    height: 40px;
    border: 4px solid rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    border-left-color: #3498db;
    animation: spin 1s linear infinite;
    margin-bottom: 15px;
}

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

/* Markdown内容样式 */
.markdown-content {
    line-height: 1.6;
}

.markdown-content h1,
.markdown-content h2,
.markdown-content h3,
.markdown-content h4,
.markdown-content h5,
.markdown-content h6 {
    margin-top: 1.5em;
    margin-bottom: 0.5em;
    color: #333;
}

.markdown-content h1 {
    font-size: 1.8em;
    border-bottom: 1px solid #eee;
    padding-bottom: 0.3em;
}

.markdown-content h2 {
    font-size: 1.5em;
    border-bottom: 1px solid #eee;
    padding-bottom: 0.3em;
}

.markdown-content h3 {
    font-size: 1.3em;
}

.markdown-content p {
    margin: 0.8em 0;
}

.markdown-content ul, 
.markdown-content ol {
    padding-left: 2em;
    margin: 0.8em 0;
}

.markdown-content li {
    margin: 0.3em 0;
}

.markdown-content blockquote {
    border-left: 4px solid #ddd;
    padding-left: 1em;
    color: #666;
    margin: 1em 0;
}

.markdown-content code {
    background-color: #f6f8fa;
    padding: 0.2em 0.4em;
    border-radius: 3px;
    font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
    font-size: 85%;
}

.markdown-content pre {
    background-color: #f6f8fa;
    padding: 16px;
    border-radius: 6px;
    overflow: auto;
    margin: 1em 0;
}

.markdown-content pre code {
    background-color: transparent;
    padding: 0;
}

.markdown-content table {
    border-collapse: collapse;
    width: 100%;
    margin: 1em 0;
}

.markdown-content table th,
.markdown-content table td {
    border: 1px solid #ddd;
    padding: 6px 13px;
}

.markdown-content table th {
    background-color: #f6f8fa;
    font-weight: 600;
}

.markdown-content table tr:nth-child(2n) {
    background-color: #f8f8f8;
}

/* 结果区域占位符文本 */
.placeholder-text {
    color: #888;
    text-align: center;
    padding: 20px 0;
}

/* 错误文本样式 */
.error-text {
    color: #cc0000;
    font-weight: bold;
}

/* 结果头部样式 */
.result-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
}

/* 特别为论盘区域添加的样式，确保内容完整显示 */
.analysis-section .result-content {
    height: auto;
    overflow: visible;
}