/* ========================================
   基础样式 (Base Styles)
   ======================================== */

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

:root {
    --bg-color: #f5f5f5;
    --container-bg: #ffffff;
    --text-color: #333;
    --border-color: #e0e0e0;
    --primary-color: #07c160;
    --code-bg: #f6f6f6;
    --shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

html, body {
    height: 100%;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background: var(--bg-color);
    color: var(--text-color);
}

/* ========================================
   容器布局 (Container Layout)
   ======================================== */

.container {
    max-width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--bg-color);
}

/* ========================================
   页头样式 (Header Styles)
   ======================================== */

.header {
    background: var(--container-bg);
    padding: 20px 30px;
    box-shadow: var(--shadow);
    border-bottom: 1px solid var(--border-color);
    z-index: 10;
}

.header h1 {
    font-size: 24px;
    margin-bottom: 15px;
    color: var(--text-color);
}

.toolbar {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}

/* ========================================
   按钮样式 (Button Styles)
   ======================================== */

.btn {
    padding: 8px 16px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: white;
    color: var(--text-color);
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    outline: none;
}

.btn:hover {
    background: #f9f9f9;
    border-color: var(--primary-color);
}

.btn-primary {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

.btn-primary:hover {
    background: #06ad56;
    border-color: #06ad56;
}

.btn-secondary {
    background: white;
}

select.btn {
    cursor: pointer;
}

/* ========================================
   主内容区 (Main Content)
   ======================================== */

.main-content {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    overflow: hidden;
    background: var(--bg-color);
}

/* ========================================
   编辑器面板 (Editor Panel)
   ======================================== */

.editor-panel {
    display: flex;
    flex-direction: column;
    background: var(--container-bg);
    border-right: 1px solid var(--border-color);
    overflow: hidden;
}

.panel-header {
    padding: 15px 20px;
    background: var(--container-bg);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.panel-header h2 {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-color);
}

.word-count {
    font-size: 13px;
    color: #999;
}

.tip {
    font-size: 12px;
    color: #999;
}

.editor {
    flex: 1;
    width: 100%;
    padding: 20px;
    border: none;
    outline: none;
    resize: none;
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 14px;
    line-height: 1.8;
    background: var(--container-bg);
    color: var(--text-color);
    overflow-y: auto;
}

.editor::placeholder {
    color: #bbb;
}

/* ========================================
   预览面板 (Preview Panel)
   ======================================== */

.preview-panel {
    display: flex;
    flex-direction: column;
    background: var(--container-bg);
    overflow: hidden;
}

.preview {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
    background: var(--container-bg);
    color: var(--text-color);
}

/* ========================================
   页脚样式 (Footer Styles)
   ======================================== */

.footer {
    background: var(--container-bg);
    padding: 15px 30px;
    text-align: center;
    border-top: 1px solid var(--border-color);
    font-size: 13px;
    color: #999;
}

.footer p {
    margin: 5px 0;
}

.footer a {
    color: var(--primary-color);
    text-decoration: none;
}

.footer a:hover {
    text-decoration: underline;
}

/* ========================================
   Toast 通知 (Toast Notification)
   ======================================== */

.toast {
    position: fixed;
    top: 80px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 12px 24px;
    border-radius: 6px;
    font-size: 14px;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.toast.show {
    opacity: 1;
    visibility: visible;
}

/* ========================================
   排版样式 (Typography Styles)
   独立于颜色主题的排版设置
   ======================================== */

/* 标准排版 - 适中的字号和间距 */
.typography-standard {
    font-size: 16px;
    line-height: 1.8;
}

.typography-standard h1 {
    font-size: 24px;
    font-weight: bold;
    margin: 20px 0 15px;
    padding-bottom: 10px;
    position: relative;
}

.typography-standard h1::after {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 0;
    width: 60px;
    height: 3px;
}

.typography-standard h2 {
    font-size: 20px;
    font-weight: bold;
    margin: 18px 0 12px;
    padding-left: 12px;
}

.typography-standard h3 {
    font-size: 18px;
    font-weight: bold;
    margin: 16px 0 10px;
}

.typography-standard h4,
.typography-standard h5,
.typography-standard h6 {
    font-size: 16px;
    font-weight: bold;
    margin: 14px 0 8px;
}

.typography-standard p {
    margin: 12px 0;
    text-align: justify;
    text-justify: inter-ideograph;
}

.typography-standard strong {
    font-weight: bold;
}

.typography-standard em {
    font-style: italic;
}

.typography-standard a {
    text-decoration: underline;
}

.typography-standard ul,
.typography-standard ol {
    margin: 12px 0;
    padding-left: 28px;
}

.typography-standard li {
    margin: 6px 0;
    padding-left: 4px;
}

.typography-standard blockquote {
    margin: 15px 0;
    padding: 12px 15px;
    font-style: italic;
}

.typography-standard code {
    padding: 2px 6px;
    border-radius: 3px;
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 14px;
}

.typography-standard pre {
    padding: 15px;
    border-radius: 6px;
    overflow-x: auto;
    margin: 15px 0;
}

.typography-standard pre code {
    background: transparent;
    padding: 0;
    font-size: 13px;
    line-height: 1.6;
}

.typography-standard table {
    border-collapse: collapse;
    width: 100%;
    margin: 15px 0;
    font-size: 14px;
}

.typography-standard table th {
    padding: 10px;
    text-align: left;
    font-weight: bold;
}

.typography-standard table td {
    padding: 10px;
}

.typography-standard img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 15px auto;
    border-radius: 6px;
}

.typography-standard hr {
    border: none;
    margin: 20px 0;
}

/* 紧凑排版 - 较小的字号和间距，节省空间 */
.typography-compact {
    font-size: 15px;
    line-height: 1.7;
}

.typography-compact h1 {
    font-size: 22px;
    font-weight: 600;
    margin: 16px 0 12px;
    padding-bottom: 8px;
    position: relative;
}

.typography-compact h1::after {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 0;
    width: 60px;
    height: 3px;
}

.typography-compact h2 {
    font-size: 19px;
    font-weight: 600;
    margin: 14px 0 10px;
    padding-left: 10px;
}

.typography-compact h3 {
    font-size: 17px;
    font-weight: 600;
    margin: 12px 0 8px;
}

.typography-compact h4,
.typography-compact h5,
.typography-compact h6 {
    font-size: 15px;
    font-weight: 600;
    margin: 10px 0 6px;
}

.typography-compact p {
    margin: 10px 0;
    text-align: justify;
    text-justify: inter-ideograph;
}

.typography-compact strong {
    font-weight: bold;
}

.typography-compact em {
    font-style: italic;
}

.typography-compact a {
    text-decoration: underline;
}

.typography-compact ul,
.typography-compact ol {
    margin: 10px 0;
    padding-left: 24px;
}

.typography-compact li {
    margin: 4px 0;
    padding-left: 4px;
}

.typography-compact blockquote {
    margin: 12px 0;
    padding: 10px 12px;
    font-style: italic;
}

.typography-compact code {
    padding: 2px 5px;
    border-radius: 3px;
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 13px;
}

.typography-compact pre {
    padding: 12px;
    border-radius: 6px;
    overflow-x: auto;
    margin: 12px 0;
}

.typography-compact pre code {
    background: transparent;
    padding: 0;
    font-size: 12px;
    line-height: 1.6;
}

.typography-compact table {
    border-collapse: collapse;
    width: 100%;
    margin: 15px 0;
    font-size: 14px;
}

.typography-compact table th {
    padding: 10px;
    text-align: left;
    font-weight: bold;
}

.typography-compact table td {
    padding: 10px;
}

.typography-compact img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 15px auto;
    border-radius: 6px;
}

.typography-compact hr {
    border: none;
    margin: 20px 0;
}

/* 优雅排版 - 较大的字号和宽松的间距 */
.typography-elegant {
    font-size: 17px;
    line-height: 1.9;
}

.typography-elegant h1 {
    font-size: 28px;
    font-weight: 600;
    margin: 30px 0 20px;
    padding-bottom: 15px;
    position: relative;
}

.typography-elegant h1::after {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 0;
    width: 60px;
    height: 3px;
}

.typography-elegant h2 {
    font-size: 22px;
    font-weight: 600;
    margin: 24px 0 16px;
    padding-left: 16px;
}

.typography-elegant h3 {
    font-size: 19px;
    font-weight: 600;
    margin: 20px 0 14px;
}

.typography-elegant h4,
.typography-elegant h5,
.typography-elegant h6 {
    font-size: 17px;
    font-weight: 600;
    margin: 16px 0 10px;
}

.typography-elegant p {
    margin: 16px 0;
    text-align: justify;
    text-justify: inter-ideograph;
}

.typography-elegant strong {
    font-weight: bold;
}

.typography-elegant em {
    font-style: italic;
}

.typography-elegant a {
    text-decoration: underline;
}

.typography-elegant ul,
.typography-elegant ol {
    margin: 16px 0;
    padding-left: 32px;
}

.typography-elegant li {
    margin: 8px 0;
    padding-left: 4px;
}

.typography-elegant blockquote {
    margin: 20px 0;
    padding: 16px 20px;
    font-style: italic;
}

.typography-elegant code {
    padding: 3px 8px;
    border-radius: 3px;
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 15px;
}

.typography-elegant pre {
    padding: 20px;
    border-radius: 6px;
    overflow-x: auto;
    margin: 20px 0;
}

.typography-elegant pre code {
    background: transparent;
    padding: 0;
    font-size: 14px;
    line-height: 1.6;
}

.typography-elegant table {
    border-collapse: collapse;
    width: 100%;
    margin: 15px 0;
    font-size: 14px;
}

.typography-elegant table th {
    padding: 10px;
    text-align: left;
    font-weight: bold;
}

.typography-elegant table td {
    padding: 10px;
}

.typography-elegant img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 15px auto;
    border-radius: 6px;
}

.typography-elegant hr {
    border: none;
    margin: 20px 0;
}

/* 粗体排版 - 强调粗体和大间距 */
.typography-bold {
    font-size: 16px;
    line-height: 1.85;
}

.typography-bold h1 {
    font-size: 26px;
    font-weight: 700;
    margin: 24px 0 18px;
    padding-bottom: 12px;
    position: relative;
}

.typography-bold h1::after {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 0;
    width: 60px;
    height: 3px;
}

.typography-bold h2 {
    font-size: 21px;
    font-weight: 700;
    margin: 20px 0 14px;
    padding-left: 14px;
}

.typography-bold h3 {
    font-size: 19px;
    font-weight: 700;
    margin: 18px 0 12px;
}

.typography-bold h4,
.typography-bold h5,
.typography-bold h6 {
    font-size: 17px;
    font-weight: 700;
    margin: 16px 0 10px;
}

.typography-bold p {
    margin: 14px 0;
    text-align: justify;
    text-justify: inter-ideograph;
}

.typography-bold strong {
    font-weight: bold;
}

.typography-bold em {
    font-style: italic;
}

.typography-bold a {
    text-decoration: underline;
}

.typography-bold ul,
.typography-bold ol {
    margin: 14px 0;
    padding-left: 30px;
}

.typography-bold li {
    margin: 7px 0;
    padding-left: 4px;
}

.typography-bold blockquote {
    margin: 18px 0;
    padding: 14px 18px;
    font-style: italic;
}

.typography-bold code {
    padding: 3px 7px;
    border-radius: 3px;
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 14px;
}

.typography-bold pre {
    padding: 18px;
    border-radius: 6px;
    overflow-x: auto;
    margin: 18px 0;
}

.typography-bold pre code {
    background: transparent;
    padding: 0;
    font-size: 13px;
    line-height: 1.6;
}

.typography-bold table {
    border-collapse: collapse;
    width: 100%;
    margin: 15px 0;
    font-size: 14px;
}

.typography-bold table th {
    padding: 10px;
    text-align: left;
    font-weight: bold;
}

.typography-bold table td {
    padding: 10px;
}

.typography-bold img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 15px auto;
    border-radius: 6px;
}

.typography-bold hr {
    border: none;
    margin: 20px 0;
}

/* ========================================
   颜色主题 (Color Themes)
   独立于排版的颜色设置
   ======================================== */

/* WeChat Green */
.theme-wechat {
    color: #3f3f3f;
}

.theme-wechat h1 {
    color: #2c3e50;
    border-bottom: 3px solid #07c160;
}

.theme-wechat h1::after {
    background: #34495e;
}

.theme-wechat h2 {
    color: #2c3e50;
    border-left: 4px solid #07c160;
}

.theme-wechat h3 {
    color: #34495e;
}

.theme-wechat h4,
.theme-wechat h5,
.theme-wechat h6 {
    color: #34495e;
}

.theme-wechat strong {
    color: #07c160;
}

.theme-wechat em {
    color: #576b95;
}

.theme-wechat a {
    color: #576b95;
}

.theme-wechat ul li::marker {
    color: #07c160;
}

.theme-wechat blockquote {
    background: #f7f7f7;
    border-left: 4px solid #07c160;
    color: #666;
}

.theme-wechat code {
    background: #fff5f5;
    color: #ff502c;
}

.theme-wechat pre {
    background: #f6f8fa;
    border: 1px solid #e1e4e8;
}

.theme-wechat pre code {
    color: inherit;
}

.theme-wechat table th {
    background: #07c160;
    color: white;
}

.theme-wechat table td {
    border: 1px solid #e1e8ed;
}

.theme-wechat table tr:nth-child(even) {
    background: #f8f9fa;
}

.theme-wechat img {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.theme-wechat hr {
    border-top: 2px solid #e1e8ed;
}

/* Zhihu Blue */
.theme-zhihu {
    color: #1a1a1a;
}

.theme-zhihu h1 {
    color: #0084ff;
    border-bottom: 3px solid #0084ff;
}

.theme-zhihu h1::after {
    background: #0066cc;
}

.theme-zhihu h2 {
    color: #0084ff;
    border-left: 4px solid #0084ff;
}

.theme-zhihu h3 {
    color: #0066cc;
}

.theme-zhihu h4,
.theme-zhihu h5,
.theme-zhihu h6 {
    color: #0066cc;
}

.theme-zhihu strong {
    color: #0084ff;
}

.theme-zhihu em {
    color: #0066cc;
}

.theme-zhihu a {
    color: #0084ff;
}

.theme-zhihu ul li::marker {
    color: #0084ff;
}

.theme-zhihu blockquote {
    background: #f0f7ff;
    border-left: 4px solid #0084ff;
    color: #444;
}

.theme-zhihu code {
    background: #e8f4ff;
    color: #0066cc;
}

.theme-zhihu pre {
    background: #f6f8fa;
    border: 1px solid #d1e7ff;
}

.theme-zhihu pre code {
    color: inherit;
}

.theme-zhihu table th {
    background: #0084ff;
    color: white;
}

.theme-zhihu table td {
    border: 1px solid #d1e7ff;
}

.theme-zhihu table tr:nth-child(even) {
    background: #f8fafe;
}

.theme-zhihu img {
    box-shadow: 0 2px 8px rgba(0, 132, 255, 0.1);
}

.theme-zhihu hr {
    border-top: 2px solid #d1e7ff;
}

/* Juejin Purple */
.theme-juejin {
    color: #2d2d2d;
}

.theme-juejin h1 {
    color: #6366f1;
    border-bottom: 3px solid #6366f1;
}

.theme-juejin h1::after {
    background: #4f46e5;
}

.theme-juejin h2 {
    color: #6366f1;
    border-left: 4px solid #6366f1;
}

.theme-juejin h3 {
    color: #4f46e5;
}

.theme-juejin h4,
.theme-juejin h5,
.theme-juejin h6 {
    color: #4f46e5;
}

.theme-juejin strong {
    color: #6366f1;
}

.theme-juejin em {
    color: #8b5cf6;
}

.theme-juejin a {
    color: #6366f1;
}

.theme-juejin ul li::marker {
    color: #6366f1;
}

.theme-juejin blockquote {
    background: #f5f3ff;
    border-left: 4px solid #6366f1;
    color: #555;
}

.theme-juejin code {
    background: #ede9fe;
    color: #6366f1;
}

.theme-juejin pre {
    background: #faf5ff;
    border: 1px solid #e9d5ff;
}

.theme-juejin pre code {
    color: inherit;
}

.theme-juejin table th {
    background: #6366f1;
    color: white;
}

.theme-juejin table td {
    border: 1px solid #e9d5ff;
}

.theme-juejin table tr:nth-child(even) {
    background: #faf5ff;
}

.theme-juejin img {
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.12);
}

.theme-juejin hr {
    border-top: 2px solid #e9d5ff;
}

/* Dark Night */
.theme-dark {
    color: #e5e5e5;
}

.theme-dark h1 {
    color: #00d4aa;
    border-bottom: 3px solid #00d4aa;
}

.theme-dark h1::after {
    background: #5eead4;
}

.theme-dark h2 {
    color: #00d4aa;
    border-left: 4px solid #00d4aa;
}

.theme-dark h3 {
    color: #5eead4;
}

.theme-dark h4,
.theme-dark h5,
.theme-dark h6 {
    color: #5eead4;
}

.theme-dark strong {
    color: #00d4aa;
}

.theme-dark em {
    color: #5eead4;
}

.theme-dark a {
    color: #5eead4;
}

.theme-dark ul li::marker {
    color: #00d4aa;
}

.theme-dark blockquote {
    background: #2a2a2a;
    border-left: 4px solid #00d4aa;
    color: #b0b0b0;
}

.theme-dark code {
    background: #2a2a2a;
    color: #00d4aa;
}

.theme-dark pre {
    background: #1e1e1e;
    border: 1px solid #3a3a3a;
}

.theme-dark pre code {
    color: inherit;
}

.theme-dark table th {
    background: #00d4aa;
    color: #1a1a1a;
}

.theme-dark table td {
    border: 1px solid #3a3a3a;
}

.theme-dark table tr:nth-child(even) {
    background: #252525;
}

.theme-dark img {
    box-shadow: 0 2px 8px rgba(0, 212, 170, 0.15);
}

.theme-dark hr {
    border-top: 2px solid #3a3a3a;
}

/* Simple Gray */
.theme-simple {
    color: #333333;
}

.theme-simple h1 {
    color: #333333;
    border-bottom: 3px solid #666666;
}

.theme-simple h1::after {
    background: #888888;
}

.theme-simple h2 {
    color: #333333;
    border-left: 4px solid #666666;
}

.theme-simple h3 {
    color: #555555;
}

.theme-simple h4,
.theme-simple h5,
.theme-simple h6 {
    color: #555555;
}

.theme-simple strong {
    color: #333333;
}

.theme-simple em {
    color: #666666;
}

.theme-simple a {
    color: #666666;
}

.theme-simple ul li::marker {
    color: #666666;
}

.theme-simple blockquote {
    background: #f9f9f9;
    border-left: 4px solid #666666;
    color: #666666;
}

.theme-simple code {
    background: #f5f5f5;
    color: #666666;
}

.theme-simple pre {
    background: #fafafa;
    border: 1px solid #e0e0e0;
}

.theme-simple pre code {
    color: inherit;
}

.theme-simple table th {
    background: #666666;
    color: white;
}

.theme-simple table td {
    border: 1px solid #e0e0e0;
}

.theme-simple table tr:nth-child(even) {
    background: #fafafa;
}

.theme-simple img {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.theme-simple hr {
    border-top: 2px solid #e0e0e0;
}

/* Elegant Pink */
.theme-elegant {
    color: #374151;
}

.theme-elegant h1 {
    color: #ec4899;
    border-bottom: 3px solid #ec4899;
}

.theme-elegant h1::after {
    background: #db2777;
}

.theme-elegant h2 {
    color: #ec4899;
    border-left: 4px solid #ec4899;
}

.theme-elegant h3 {
    color: #db2777;
}

.theme-elegant h4,
.theme-elegant h5,
.theme-elegant h6 {
    color: #db2777;
}

.theme-elegant strong {
    color: #ec4899;
}

.theme-elegant em {
    color: #f472b6;
}

.theme-elegant a {
    color: #ec4899;
}

.theme-elegant ul li::marker {
    color: #ec4899;
}

.theme-elegant blockquote {
    background: #fef1f7;
    border-left: 4px solid #ec4899;
    color: #6b7280;
}

.theme-elegant code {
    background: #fef1f7;
    color: #ec4899;
}

.theme-elegant pre {
    background: #fdf2f8;
    border: 1px solid #fce7f3;
}

.theme-elegant pre code {
    color: inherit;
}

.theme-elegant table th {
    background: #ec4899;
    color: white;
}

.theme-elegant table td {
    border: 1px solid #fce7f3;
}

.theme-elegant table tr:nth-child(even) {
    background: #fef2f2;
}

.theme-elegant img {
    box-shadow: 0 2px 8px rgba(236, 72, 153, 0.12);
}

.theme-elegant hr {
    border-top: 2px solid #fce7f3;
}

/* Orange Vibrant */
.theme-orange {
    color: #333333;
}

.theme-orange h1 {
    color: #f97316;
    border-bottom: 3px solid #f97316;
}

.theme-orange h1::after {
    background: #ea580c;
}

.theme-orange h2 {
    color: #f97316;
    border-left: 4px solid #f97316;
}

.theme-orange h3 {
    color: #ea580c;
}

.theme-orange h4,
.theme-orange h5,
.theme-orange h6 {
    color: #ea580c;
}

.theme-orange strong {
    color: #f97316;
}

.theme-orange em {
    color: #fb923c;
}

.theme-orange a {
    color: #f97316;
}

.theme-orange ul li::marker {
    color: #f97316;
}

.theme-orange blockquote {
    background: #fff7ed;
    border-left: 4px solid #f97316;
    color: #666666;
}

.theme-orange code {
    background: #fff7ed;
    color: #f97316;
}

.theme-orange pre {
    background: #fffbf5;
    border: 1px solid #fed7aa;
}

.theme-orange pre code {
    color: inherit;
}

.theme-orange table th {
    background: #f97316;
    color: white;
}

.theme-orange table td {
    border: 1px solid #fed7aa;
}

.theme-orange table tr:nth-child(even) {
    background: #fffbf5;
}

.theme-orange img {
    box-shadow: 0 2px 8px rgba(249, 115, 22, 0.12);
}

.theme-orange hr {
    border-top: 2px solid #fed7aa;
}

/* Teal Ocean */
.theme-teal {
    color: #1f2937;
}

.theme-teal h1 {
    color: #14b8a6;
    border-bottom: 3px solid #14b8a6;
}

.theme-teal h1::after {
    background: #0d9488;
}

.theme-teal h2 {
    color: #14b8a6;
    border-left: 4px solid #14b8a6;
}

.theme-teal h3 {
    color: #0d9488;
}

.theme-teal h4,
.theme-teal h5,
.theme-teal h6 {
    color: #0d9488;
}

.theme-teal strong {
    color: #14b8a6;
}

.theme-teal em {
    color: #5eead4;
}

.theme-teal a {
    color: #14b8a6;
}

.theme-teal ul li::marker {
    color: #14b8a6;
}

.theme-teal blockquote {
    background: #f0fdfa;
    border-left: 4px solid #14b8a6;
    color: #4b5563;
}

.theme-teal code {
    background: #f0fdfa;
    color: #14b8a6;
}

.theme-teal pre {
    background: #f0fdfa;
    border: 1px solid #99f6e4;
}

.theme-teal pre code {
    color: inherit;
}

.theme-teal table th {
    background: #14b8a6;
    color: white;
}

.theme-teal table td {
    border: 1px solid #99f6e4;
}

.theme-teal table tr:nth-child(even) {
    background: #ccfbf1;
}

.theme-teal img {
    box-shadow: 0 2px 8px rgba(20, 184, 166, 0.12);
}

.theme-teal hr {
    border-top: 2px solid #99f6e4;
}

/* Red Bold */
.theme-red {
    color: #1f2937;
}

.theme-red h1 {
    color: #ef4444;
    border-bottom: 3px solid #ef4444;
}

.theme-red h1::after {
    background: #dc2626;
}

.theme-red h2 {
    color: #ef4444;
    border-left: 4px solid #ef4444;
}

.theme-red h3 {
    color: #dc2626;
}

.theme-red h4,
.theme-red h5,
.theme-red h6 {
    color: #dc2626;
}

.theme-red strong {
    color: #ef4444;
}

.theme-red em {
    color: #f87171;
}

.theme-red a {
    color: #ef4444;
}

.theme-red ul li::marker {
    color: #ef4444;
}

.theme-red blockquote {
    background: #fef2f2;
    border-left: 4px solid #ef4444;
    color: #4b5563;
}

.theme-red code {
    background: #fef2f2;
    color: #ef4444;
}

.theme-red pre {
    background: #fef8f8;
    border: 1px solid #fecaca;
}

.theme-red pre code {
    color: inherit;
}

.theme-red table th {
    background: #ef4444;
    color: white;
}

.theme-red table td {
    border: 1px solid #fecaca;
}

.theme-red table tr:nth-child(even) {
    background: #fef8f8;
}

.theme-red img {
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.12);
}

.theme-red hr {
    border-top: 2px solid #fecaca;
}

/* Amber Warm */
.theme-amber {
    color: #292524;
}

.theme-amber h1 {
    color: #f59e0b;
    border-bottom: 3px solid #f59e0b;
}

.theme-amber h1::after {
    background: #d97706;
}

.theme-amber h2 {
    color: #f59e0b;
    border-left: 4px solid #f59e0b;
}

.theme-amber h3 {
    color: #d97706;
}

.theme-amber h4,
.theme-amber h5,
.theme-amber h6 {
    color: #d97706;
}

.theme-amber strong {
    color: #f59e0b;
}

.theme-amber em {
    color: #fbbf24;
}

.theme-amber a {
    color: #f59e0b;
}

.theme-amber ul li::marker {
    color: #f59e0b;
}

.theme-amber blockquote {
    background: #fffbeb;
    border-left: 4px solid #f59e0b;
    color: #57534e;
}

.theme-amber code {
    background: #fffbeb;
    color: #f59e0b;
}

.theme-amber pre {
    background: #fffbeb;
    border: 1px solid #fde68a;
}

.theme-amber pre code {
    color: inherit;
}

.theme-amber table th {
    background: #f59e0b;
    color: white;
}

.theme-amber table td {
    border: 1px solid #fde68a;
}

.theme-amber table tr:nth-child(even) {
    background: #fef3c7;
}

.theme-amber img {
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.12);
}

.theme-amber hr {
    border-top: 2px solid #fde68a;
}

/* Mint Fresh */
.theme-mint {
    color: #1f2937;
}

.theme-mint h1 {
    color: #10b981;
    border-bottom: 3px solid #10b981;
}

.theme-mint h1::after {
    background: #059669;
}

.theme-mint h2 {
    color: #10b981;
    border-left: 4px solid #10b981;
}

.theme-mint h3 {
    color: #059669;
}

.theme-mint h4,
.theme-mint h5,
.theme-mint h6 {
    color: #059669;
}

.theme-mint strong {
    color: #10b981;
}

.theme-mint em {
    color: #34d399;
}

.theme-mint a {
    color: #10b981;
}

.theme-mint ul li::marker {
    color: #10b981;
}

.theme-mint blockquote {
    background: #f0fdf4;
    border-left: 4px solid #10b981;
    color: #4b5563;
}

.theme-mint code {
    background: #f0fdf4;
    color: #10b981;
}

.theme-mint pre {
    background: #f0fdf4;
    border: 1px solid #a7f3d0;
}

.theme-mint pre code {
    color: inherit;
}

.theme-mint table th {
    background: #10b981;
    color: white;
}

.theme-mint table td {
    border: 1px solid #a7f3d0;
}

.theme-mint table tr:nth-child(even) {
    background: #d1fae5;
}

.theme-mint img {
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.12);
}

.theme-mint hr {
    border-top: 2px solid #a7f3d0;
}

/* ========================================
   深色模式
   ======================================== */

body.dark-mode {
    --bg-color: #1a1a1a;
    --container-bg: #2d2d2d;
    --text-color: #e4e4e4;
    --border-color: #404040;
    --code-bg: #1e1e1e;
    --shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}

body.dark-mode .preview {
    color: #e4e4e4;
    background: #2d2d2d;
}

body.dark-mode .preview h1,
body.dark-mode .preview h2,
body.dark-mode .preview h3 {
    color: #f0f0f0;
}

body.dark-mode .preview pre {
    background: #1e1e1e;
    border-color: #404040;
}

body.dark-mode .preview blockquote {
    background: #383838;
    color: #b0b0b0;
}

body.dark-mode .preview table td {
    border-color: #404040;
}

body.dark-mode .preview table tr:nth-child(even) {
    background: #383838;
}

/* ========================================
   响应式设计
   ======================================== */

@media (max-width: 768px) {
    .main-content {
        grid-template-columns: 1fr;
    }
    
    .header h1 {
        font-size: 20px;
    }
    
    .toolbar {
        justify-content: center;
    }
    
    .btn {
        font-size: 12px;
        padding: 6px 12px;
    }
}

/* ========================================
   滚动条美化
   ======================================== */

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-color);
}

::-webkit-scrollbar-thumb {
    background: #bbb;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #999;
}