/* --- 全局与基本样式 --- */
:root {
    /* 定义颜色变量，方便修改 */
    --primary-color: #007bff;
    --primary-hover-color: #0056b3;
    --secondary-color: #6c757d;
    --secondary-hover-color: #5a6268;
    --background-color: #f8f9fa;
    --pane-background: #ffffff;
    --text-color: #212529;
    --border-color: #dee2e6;
    --header-bg: #e9ecef;
    --code-bg: #f1f3f5;
    --link-color: #007bff;
    --font-sans: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-mono: 'Roboto Mono', SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --success-color: #28a745;
    --success-hover-color: #218838;
}

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

html {
    font-size: 16px; /* 基准字体大小 */
}

body {
    font-family: var(--font-sans);
    line-height: 1.6;
    background-color: var(--background-color);
    color: var(--text-color);
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* 使页脚可以固定在底部（如果内容不足） */
}

/* --- 页面头部 --- */
.app-header {
    padding: 1rem 2rem;
    background-color: var(--header-bg);
    border-bottom: 1px solid var(--border-color);
    text-align: center;
}

.app-header h1 {
    margin-bottom: 0.5rem;
    font-weight: 700;
    color: var(--primary-color);
}

.app-header p {
    margin-bottom: 1rem;
    color: var(--secondary-color);
    font-size: 0.9rem;
}

/* --- 控制按钮通用样式 --- */
.control-button {
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
    font-family: var(--font-sans);
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    color: white;
}

#toggle-input-btn {
    background-color: var(--primary-color);
}
#toggle-input-btn:hover {
    background-color: var(--primary-hover-color);
}

.clear-button {
    background-color: var(--secondary-color);
    padding: 0.3rem 0.8rem; /* 清除按钮小一点 */
    font-size: 0.8rem;
}
.clear-button:hover {
    background-color: var(--secondary-hover-color);
}

/* PDF下载按钮样式 */
#download-pdf-btn {
    background-color: var(--success-color); /* 使用绿色表示下载/保存操作 */
}
#download-pdf-btn:hover {
    background-color: var(--success-hover-color); /* 悬停时更深的绿色 */
}


/* --- 主容器与左右面板布局 --- */
.container {
    display: flex;
    flex-grow: 1; /* 让容器占据剩余空间 */
    padding: 1.5rem;
    gap: 1.5rem; /* 面板间距 */
}

.pane {
    flex: 1 1 50%; /* 默认各占 50% */
    background-color: var(--pane-background);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); /* 添加细微阴影 */
    display: flex;
    flex-direction: column; /* 内部元素垂直排列 */
    overflow: hidden; /* 防止子元素溢出圆角 */
    transition: flex 0.3s ease, opacity 0.3s ease, min-width 0.3s ease; /* 过渡效果 */
}

/* --- 面板头部 (标题和按钮) --- */
.pane-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border-color);
    background-color: #f8f9fa; /* 轻微的头部背景色 */
}

.pane-header h2 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-color);
    margin: 0;
}

/* --- 输入区域 --- */
#input-pane textarea {
    flex-grow: 1; /* 占据面板剩余空间 */
    border: none;
    outline: none;
    padding: 1rem;
    font-family: var(--font-mono); /* 使用等宽字体 */
    font-size: 0.9rem;
    line-height: 1.5;
    resize: none; /* 禁止调整大小 */
    background-color: var(--pane-background);
    color: var(--text-color);
}

/* --- 预览区域 --- */
#preview-pane #html-output {
    flex-grow: 1;
    padding: 1rem 1.5rem; /* 预览区内边距稍大 */
    overflow-y: auto; /* 内容溢出时滚动 */
    text-align: left; /* 确保预览内容左对齐 */
}

/* --- 控制输入面板隐藏 --- */
#input-pane.hidden {
    flex: 0 0 0; /* 收起时宽度为0 */
    opacity: 0;
    border: none;
    padding: 0;
    margin: 0;
    min-width: 0; /* 必须，否则 flex basis 0 可能无效 */
    overflow: hidden; /* 隐藏内容 */
}

/* 当输入面板隐藏时，预览面板自动占据全部空间（因为它是 flex: 1） */

/* --- Markdown 基础样式 (类似 GitHub 的 markdown-body) --- */
.markdown-body {
    font-size: 1rem;
    word-wrap: break-word;
}

.markdown-body > *:first-child {
    margin-top: 0 !important;
}
.markdown-body > *:last-child {
    margin-bottom: 0 !important;
}

.markdown-body h1, .markdown-body h2, .markdown-body h3, .markdown-body h4, .markdown-body h5, .markdown-body h6 {
    margin-top: 1.5em;
    margin-bottom: 0.8em;
    font-weight: 700;
    line-height: 1.3;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 0.3em;
}
.markdown-body h1 { font-size: 2em; }
.markdown-body h2 { font-size: 1.75em; }
.markdown-body h3 { font-size: 1.5em; }
.markdown-body h4 { font-size: 1.25em; }
.markdown-body h5 { font-size: 1em; border-bottom: none; }
.markdown-body h6 { font-size: 0.9em; border-bottom: none; color: var(--secondary-color); }

.markdown-body p {
    margin-bottom: 1em;
    text-align: left; /* 再次确保段落左对齐 */
}

.markdown-body ul, .markdown-body ol {
    margin-left: 1.5em;
    margin-bottom: 1em;
    padding-left: 0.5em;
}

.markdown-body li {
    margin-bottom: 0.4em;
}

.markdown-body code { /* 行内代码 */
    font-family: var(--font-mono);
    background-color: var(--code-bg);
    padding: 0.2em 0.4em;
    border-radius: 3px;
    font-size: 0.85em;
    color: #c7254e; /* 醒目颜色 */
}

.markdown-body pre { /* 代码块 */
    background-color: var(--code-bg);
    font-family: var(--font-mono);
    padding: 1em;
    margin-bottom: 1em;
    overflow-x: auto; /* 水平滚动 */
    border-radius: 4px;
    border: 1px solid var(--border-color);
    line-height: 1.45;
    font-size: 0.85em;
}
.markdown-body pre code { /* 代码块内的 code 样式重置 */
    padding: 0;
    background-color: transparent;
    border-radius: 0;
    font-size: 1em;
    color: inherit;
}

.markdown-body blockquote {
    margin: 0 0 1em 0;
    padding: 0 1em;
    color: var(--secondary-color);
    border-left: 0.25em solid #dfe2e5; /* 引用块左边框 */
}
.markdown-body blockquote > :first-child { margin-top: 0; }
.markdown-body blockquote > :last-child { margin-bottom: 0; }

.markdown-body a {
    color: var(--link-color);
    text-decoration: none;
}
.markdown-body a:hover {
    text-decoration: underline;
}

/* --- 表格样式 (修复和美化) --- */
.markdown-body table {
    width: auto; /* 不要强制100%，让表格根据内容调整 */
    max-width: 100%; /* 防止溢出 */
    margin-bottom: 1em;
    border-collapse: collapse;
    border-spacing: 0;
    border: 1px solid var(--border-color); /* 表格外边框 */
    font-size: 0.9em; /* 表格字体稍小 */
    display: table; /* 确保以表格方式渲染 */
}

.markdown-body th,
.markdown-body td {
    border: 1px solid var(--border-color); /* 单元格边框 */
    padding: 0.6em 0.8em; /* 单元格内边距 */
    text-align: left; /* 单元格内容左对齐 */
    vertical-align: top; /* 顶部对齐 */
}

.markdown-body thead th { /* 表头 */
    font-weight: 700;
    background-color: var(--background-color); /* 表头背景色 */
    border-bottom-width: 2px; /* 表头下边框加粗 */
}

/* 交替行背景色 */
.markdown-body tbody tr:nth-child(even) {
    background-color: #f8f9fa;
}


.markdown-body img {
    max-width: 100%;
    height: auto;
    background-color: var(--pane-background); /* 图片背景，防止透明图片看不清 */
}

/* --- 响应式设计 --- */
@media (max-width: 768px) {
    html {
        font-size: 14px; /* 移动端字体小一点 */
    }
    .container {
        flex-direction: column; /* 垂直堆叠 */
        padding: 1rem;
        gap: 1rem;
    }
    .pane {
        flex-basis: auto; /* 高度自动 */
        min-height: 40vh; /* 给个最小高度 */
    }
    .app-header {
        padding: 0.8rem 1rem;
    }
    /* 如果希望移动端默认隐藏输入区，可以在 JS 中实现 */
}