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

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    min-height: 100vh;
    color: #333;
}

.container {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

/* 头部工具栏 */
.toolbar {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    padding: 1rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.logo h1 {
    font-size: 1.8rem;
    color: #667eea;
    margin-bottom: 0.2rem;
}

.logo span {
    font-size: 0.9rem;
    color: #666;
}

/* 主题切换开关样式 */
.theme-toggle-container {
    display: flex;
    align-items: center;
}

.theme-toggle-switch {
    position: relative;
    width: 60px;
    height: 30px;
    cursor: pointer;
    user-select: none;
}

.toggle-track {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 15px;
    transition: all 0.3s ease;
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.1),
        0 2px 8px rgba(0, 0, 0, 0.15);
}

.toggle-thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 24px;
    height: 24px;
    background: white;
    border-radius: 50%;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.toggle-thumb svg {
    transition: all 0.3s ease;
    position: absolute;
}

.toggle-thumb .sun-icon {
    color: #ffa726;
    opacity: 1;
    transform: scale(1) rotate(0deg);
}

.toggle-thumb .moon-icon {
    color: #5c6bc0;
    opacity: 0;
    transform: scale(0.8) rotate(180deg);
}

/* 悬停效果 */
.theme-toggle-switch:hover .toggle-track {
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.1),
        0 4px 12px rgba(0, 0, 0, 0.2);
    transform: translateY(-1px);
}

.theme-toggle-switch:active .toggle-thumb {
    transform: scale(0.95);
}

.controls {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.theme-selector, .size-selector {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.theme-selector label, .size-selector label {
    font-weight: 500;
    color: #555;
}

select {
    padding: 0.5rem;
    border: 1px solid #ddd;
    border-radius: 6px;
    background: white;
    font-size: 0.9rem;
    cursor: pointer;
}

.btn {
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.3s ease;
}

.btn-primary {
    background: #667eea;
    color: white;
}

.btn-primary:hover {
    background: #5a6fd8;
    transform: translateY(-1px);
}

.btn-secondary {
    background: #6c757d;
    color: white;
}

.btn-secondary:hover {
    background: #5a6268;
    transform: translateY(-1px);
}

.btn-small {
    padding: 0.3rem 0.6rem;
    font-size: 0.8rem;
    background: #f8f9fa;
    color: #495057;
    border: 1px solid #dee2e6;
}

.btn-small:hover {
    background: #e9ecef;
}

/* 主要内容区域 - 三列布局 */
.main-content {
    flex: 1;
    display: grid !important;
    grid-template-columns: 45% 40% 15% !important;
    gap: 1rem;
    padding: 1rem;
    overflow: hidden;
    min-height: 0; /* 确保网格项目可以收缩 */
    width: 100%;
    box-sizing: border-box;
    transition: grid-template-columns 0.3s ease;
}

/* 设置区折叠时的布局 */
.main-content.settings-collapsed {
    grid-template-columns: 45% 55% 0% !important;
}

/* 编辑区折叠时的布局 */
.main-content.editor-collapsed {
    grid-template-columns: 0% 85% 15% !important;
}

/* 编辑区和设置区都折叠时的布局 */
.main-content.editor-collapsed.settings-collapsed {
    grid-template-columns: 0% 100% 0% !important;
}

.editor-column, .preview-column, .settings-column {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
    display: flex;
    flex-direction: column;
    overflow: hidden; /* 让内部元素控制滚动 */
    min-width: 0; /* 允许收缩 */
    box-sizing: border-box;
    max-height: calc(100vh - 160px); /* 限制最大高度 */
}

/* 编辑器列特殊处理 */
.editor-column {
    overflow: visible; /* 允许下拉菜单显示 */
}

.preview-column, .settings-column {
    overflow: visible; /* 允许显示滚动条 */
}

/* 编辑器容器需要单独处理滚动 */
.editor-container {
    overflow: visible; /* 允许编辑器显示滚动条 */
}

/* 列特定样式 */
.editor-column {
    /* 编辑器列样式 */
}

.preview-column {
    /* 预览列样式 */
}

.settings-column {
    /* 设置列样式 */
}

.panel-header {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(255, 255, 255, 0.8);
}

.panel-header h3 {
    font-size: 1.1rem;
    color: #333;
}

/* 设置区折叠按钮样式 */
.settings-toggle-btn {
    background: none;
    border: none;
    padding: 6px;
    border-radius: 4px;
    cursor: pointer;
    color: #666;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
}

.settings-toggle-btn:hover {
    background: rgba(0, 123, 255, 0.1);
    color: #007bff;
    transform: scale(1.1);
}

/* 编辑区折叠按钮样式 */
.editor-toggle-btn {
    background: none;
    border: none;
    padding: 6px;
    border-radius: 4px;
    cursor: pointer;
    color: #666;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin-right: 0.5rem;
}

.editor-toggle-btn:hover {
    background: rgba(0, 123, 255, 0.1);
    color: #007bff;
    transform: scale(1.1);
}

.settings-toggle-btn svg {
    transition: transform 0.3s ease;
}

.editor-actions, .preview-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

/* 编辑器工具栏 */
.editor-toolbar {
    display: flex !important;
    flex-wrap: nowrap;
    gap: 0.08rem;
    padding: 0.4rem 0.6rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    background: rgba(248, 249, 250, 0.95);
    overflow: visible;
    min-height: 40px;
    align-items: center;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative;
    z-index: 10;
}

.toolbar-btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 5px;
    background: transparent;
    color: #495057;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
    opacity: 1;
    visibility: visible;
    font-size: 14px;
}

.toolbar-btn:hover {
    background: rgba(0, 123, 255, 0.1);
    color: #007bff;
}

.toolbar-btn:active {
    background: rgba(0, 123, 255, 0.2);
}

.toolbar-divider {
    width: 1px;
    height: 20px;
    background: rgba(0, 0, 0, 0.1);
    margin: 0 0.1rem;
}

/* 工具栏下拉菜单样式 */
/* 下拉菜单样式 */
.dropdown {
    position: relative;
    display: inline-block;
    z-index: 10000;
}

.dropdown-content {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: white;
    min-width: 160px;
    box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
    border: 1px solid #ddd;
    border-radius: 6px;
    z-index: 9999;
    overflow: hidden;
}

.dropdown-content a {
    color: #333;
    padding: 10px 16px;
    text-decoration: none;
    display: block;
    cursor: pointer;
    font-weight: 500;
    font-size: 14px;
    border-bottom: 1px solid #f0f0f0;
    transition: background-color 0.2s ease;
}

.dropdown-content a:last-child {
    border-bottom: none;
}

.dropdown-content a:hover {
    background-color: #f8f9fa;
    color: #007bff;
}

.dropdown-content.show {
    display: block !important;
}

.dropdown-content a:active {
    background-color: #e9ecef;
}

/* 删除冲突的hover规则，使用JavaScript控制显示 */







.dropdown-item:hover {
    background-color: #f8f9fa;
}

.dropdown-item:active {
    background-color: #e9ecef;
}

/* 标题预览样式 */
.heading-preview {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: #333;
    white-space: nowrap;
}

.h1-preview {
    font-size: 18px;
    font-weight: 700;
}

.h2-preview {
    font-size: 16px;
    font-weight: 600;
}

.h3-preview {
    font-size: 15px;
    font-weight: 600;
}

.h4-preview {
    font-size: 14px;
    font-weight: 500;
}

.h5-preview {
    font-size: 13px;
    font-weight: 500;
}

.h6-preview {
    font-size: 12px;
    font-weight: 500;
    color: #666;
}

/* 预览区操作按钮 */
.action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 6px;
    background: rgba(0, 123, 255, 0.1);
    color: #007bff;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.action-btn:hover {
    background: rgba(0, 123, 255, 0.2);
    transform: translateY(-1px);
}

.action-btn:active {
    transform: translateY(0);
}

.editor-container {
    flex: 1;
    position: relative;
    overflow: visible; /* 确保CodeMirror可以正常交互 */
    display: flex;
    flex-direction: column;
    min-height: 400px; /* 确保有足够高度 */
}

.CodeMirror {
    height: 100% !important;
    min-height: 400px; /* 确保有足够高度显示滚动条 */
    font-size: 14px;
    line-height: 1.6;
    position: relative !important;
    z-index: 1 !important;
    pointer-events: auto !important;
}

/* 确保CodeMirror的光标和选择区域可见 */
.CodeMirror-cursor {
    pointer-events: none !important;
    z-index: 3 !important;
}

.CodeMirror-selected {
    z-index: 2 !important;
}

/* 确保CodeMirror的文本区域可以接收点击事件 */
.CodeMirror-lines {
    pointer-events: auto !important;
    cursor: text !important;
}

.CodeMirror-code {
    pointer-events: auto !important;
}

#markdown-editor {
    width: 100%;
    height: 100%;
    min-height: 400px; /* 确保有足够高度显示滚动条 */
    border: none;
    outline: none;
    padding: 1.5rem;
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    font-size: 14px;
    line-height: 1.6;
    resize: none;
    background: transparent;
    overflow-x: auto; /* 水平滚动条 */
    overflow-y: auto; /* 垂直滚动条 */
    box-sizing: border-box;
    word-wrap: break-word; /* 允许长单词换行 */
}

.preview-container {
    flex: 1;
    padding: 1rem;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    overflow: auto;
    background: #f8f9fa;
}

/* 设置面板样式 */
.settings-column {
    padding: 0;
    overflow-y: auto;
    transition: all 0.3s ease;
    position: relative;
}

/* 设置区折叠状态 */
.settings-column.collapsed {
    transform: translateX(100%);
    opacity: 0;
    pointer-events: none;
}

/* 编辑区折叠状态 */
.editor-column.collapsed {
    transform: translateX(-100%);
    opacity: 0;
    pointer-events: none;
}

/* 折叠按钮在隐藏状态下的样式 */
.settings-toggle-btn.collapsed {
    position: fixed;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 123, 255, 0.9);
    color: white;
    box-shadow: 0 2px 8px rgba(0, 123, 255, 0.3);
    z-index: 1000;
    border-radius: 50%;
    width: 40px;
    height: 40px;
}

.settings-toggle-btn.collapsed:hover {
    background: rgba(0, 123, 255, 1);
    transform: translateY(-50%) scale(1.1);
}

.settings-toggle-btn.collapsed svg {
    transform: rotate(180deg);
}

/* 显示编辑区按钮样式 */
.show-editor-btn {
    position: fixed;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 123, 255, 0.9);
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    z-index: 1000;
    box-shadow: 0 2px 8px rgba(0, 123, 255, 0.3);
    transition: all 0.3s ease;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.show-editor-btn:hover {
    background: rgba(0, 123, 255, 1);
    transform: translateY(-50%) scale(1.1);
}

.show-editor-btn svg {
    transition: transform 0.3s ease;
}

.settings-section {
    padding: 1.5rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.settings-section:last-child {
    border-bottom: none;
}

.settings-section h4 {
    margin: 0 0 1rem 0;
    font-size: 1rem;
    font-weight: 600;
    color: #333;
}

/* 下拉选择框样式 */
.select-wrapper {
    position: relative;
    width: 100%;
}

.select-wrapper select {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid #ddd;
    border-radius: 6px;
    background: white;
    font-size: 0.9rem;
    color: #333;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.select-wrapper::after {
    content: '▼';
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: #666;
    font-size: 0.8rem;
}

.select-wrapper select:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

/* 主题选择器样式 */
.theme-selector {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* 分类图标行 */
.theme-category-icons {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.category-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    background: #f8f9fa;
    border: 2px solid #e9ecef;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    user-select: none;
}

.category-icon:hover {
    background: #e9ecef;
    border-color: #007bff;
    transform: translateY(-2px) scale(1.1);
    box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
}

.category-icon.active {
    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
    border-color: #007bff;
    color: white;
    transform: scale(1.1);
    box-shadow: 0 4px 16px rgba(0, 123, 255, 0.4);
}

.category-icon.active:hover {
    transform: translateY(-2px) scale(1.15);
    box-shadow: 0 6px 20px rgba(0, 123, 255, 0.5);
}

/* Tooltip样式 */
.category-icon::after {
    content: attr(title);
    position: absolute;
    bottom: -35px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 0.4rem 0.6rem;
    border-radius: 4px;
    font-size: 0.7rem;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 1000;
}

.category-icon:hover::after {
    opacity: 1;
    visibility: visible;
    bottom: -30px;
}

.theme-category {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    animation: fadeIn 0.3s ease-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.theme-tags {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    width: 100%;
}

.theme-tag {
    padding: 0.5rem 0.4rem;
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 500;
    color: #495057;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
    white-space: nowrap;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
}

.theme-tag:hover {
    background: #e9ecef;
    border-color: #007bff;
    color: #007bff;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 123, 255, 0.2);
}

.theme-tag.active {
    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
    border-color: #007bff;
    color: white;
    box-shadow: 0 2px 8px rgba(0, 123, 255, 0.3);
}

.theme-tag.active:hover {
    background: linear-gradient(135deg, #0056b3 0%, #004085 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 123, 255, 0.4);
}

/* 尺寸设置 */
.size-settings {
    display: flex;
    flex-direction: row;
    gap: 0.75rem;
    align-items: flex-end;
}

.size-input-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1;
}

.size-input-group label {
    font-size: 0.85rem;
    font-weight: 500;
    color: #555;
    white-space: nowrap;
}

.size-input-group input {
    padding: 0.5rem;
    border: 1px solid #ddd;
    border-radius: 6px;
    background: white;
    font-size: 0.9rem;
    width: 100%;
    box-sizing: border-box;
}

.size-input-group input:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

/* 字体设置 */
.font-family-setting {
    margin-bottom: 1rem;
}

.font-family-setting label {
    display: block;
    font-size: 0.85rem;
    font-weight: 500;
    color: #555;
    margin-bottom: 0.5rem;
}

.font-settings {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: stretch;
}

.setting-item {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.setting-item label {
    font-size: 0.85rem;
    font-weight: 500;
    color: #555;
}

.setting-item input[type="range"] {
    width: 100%;
    height: 6px;
    border-radius: 3px;
    background: #ddd;
    outline: none;
    -webkit-appearance: none;
}

.setting-item input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #007bff;
    cursor: pointer;
}

.setting-item input[type="range"]::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #007bff;
    cursor: pointer;
    border: none;
}

.setting-item span {
    font-size: 0.75rem;
    color: #666;
    text-align: center;
    margin-top: 0.25rem;
}

/* 页码设置 */
.page-settings {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.checkbox-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

.checkbox-option input[type="checkbox"] {
    margin: 0;
}

.page-position {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.page-position label {
    font-size: 0.9rem;
    font-weight: 500;
    color: #555;
}

.page-position select {
    padding: 0.5rem;
    border: 1px solid #ddd;
    border-radius: 6px;
    background: white;
    font-size: 0.9rem;
}

/* 间距设置样式 */
.spacing-settings {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}





.spacing-settings .setting-item input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #007bff;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.spacing-settings .setting-item input[type="range"]::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #007bff;
    cursor: pointer;
    border: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* 长文拆分设置样式 */
.split-settings {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.split-settings .setting-item label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    font-weight: 500;
    color: #555;
}

.split-settings .setting-item input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: #007bff;
    cursor: pointer;
}

.split-settings .setting-item select {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: white;
    font-size: 0.85rem;
    color: #333;
    cursor: pointer;
}

.split-settings .setting-item select:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

.split-options {
    margin-top: 0.5rem;
    padding-left: 1rem;
    border-left: 2px solid #e9ecef;
}

.split-options .setting-item {
    margin-bottom: 1rem;
}

.split-options .setting-item:last-child {
    margin-bottom: 0;
}

/* 预览内容容器样式 */
.preview-content {
    height: calc(100vh - 120px);
    overflow-y: auto;
    padding: 0;
}

/* 拆分状态指示器样式 */
.split-status {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    margin: 0 0 1rem 0;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
    position: sticky;
    top: 0;
    z-index: 5;
}

.split-status-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.split-status-stats {
    font-size: 0.8rem;
    opacity: 0.9;
}

/* 多卡片容器样式 */
.multi-card-container {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 0;
    width: 100%;
}

.card-item {
    position: relative;
    border: 2px solid transparent;
    border-radius: 16px;
    transition: all 0.3s ease;
    width: 100%;
    max-width: 100%;
}

.card-item .card {
    margin: 0;
    /* 多卡片模式下让卡片高度自适应内容，避免空白区域 */
    height: auto !important;
    min-height: auto !important;
}

.card-item:hover {
    border-color: rgba(102, 126, 234, 0.3);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.card-number {
    position: absolute;
    top: -8px;
    right: 1rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    z-index: 10;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}

/* 预览内容滚动条美化 */
.preview-content::-webkit-scrollbar {
    width: 6px;
}

.preview-content::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 3px;
}

.preview-content::-webkit-scrollbar-thumb {
    background: rgba(102, 126, 234, 0.6);
    border-radius: 3px;
}

.preview-content::-webkit-scrollbar-thumb:hover {
    background: rgba(102, 126, 234, 0.8);
}

/* 卡片样式 */
.card {
    width: 400px;
    height: 400px;
    border-radius: 16px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    overflow: auto;
    transition: all 0.3s ease;
    position: relative;
    flex-shrink: 0;
    margin: 1rem;
    background: #ffffff;
}

.card-content {
    padding: 2rem;
    height: 100%;
    overflow-y: auto;
    box-sizing: border-box;
}

/* 多卡片模式下的内容区域自适应高度 */
.multi-card-container .card-content {
    height: auto;
    min-height: auto;
    overflow-y: visible;
}

/* 主题样式 */
.warm {
    background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
    color: #8b4513;
}

.minimal {
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    color: #2c3e50;
}

.gradient {
    background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
    color: #2c3e50;
}

.nature {
    background: linear-gradient(135deg, #d299c2 0%, #fef9d7 100%);
    color: #2d5016;
}

.tech {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.elegant {
    background: linear-gradient(135deg, #a8caba 0%, #5d4e75 100%);
    color: white;
}

/* 删除重复的渐变主题系列 - 这些主题与后面的定义重复 */

/* 保留森林主题，删除其他重复主题 */
.forest {
    background: linear-gradient(135deg, #134e5e 0%, #71b280 100%);
    color: white;
}

/* 🎯 商务主题系列 */
.corporate {
    background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
    color: white;
}



.finance {
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
    color: white;
}

/* 保留部分创意主题，删除重复主题 */
.neon {
    background: linear-gradient(135deg, #ff006e 0%, #8338ec 100%);
    color: white;
}

.monochrome {
    background: #ffffff;
    color: #000000;
}

/* 保留部分特殊主题，删除重复主题 */

/* 主题特定的样式调整 */
.warm .card-content blockquote {
    border-left-color: rgba(139, 69, 19, 0.3);
}

.minimal .card-content blockquote {
    border-left-color: rgba(44, 62, 80, 0.3);
}

.gradient .card-content blockquote {
    border-left-color: rgba(44, 62, 80, 0.3);
}

.nature .card-content blockquote {
    border-left-color: rgba(45, 80, 22, 0.3);
}

.tech .card-content blockquote,
.elegant .card-content blockquote {
    border-left-color: rgba(255, 255, 255, 0.3);
}

/* 保留主题的blockquote样式 */
.sunset .card-content blockquote {
    border-left-color: rgba(139, 38, 53, 0.3);
}

.forest .card-content blockquote,
.corporate .card-content blockquote,
.finance .card-content blockquote,
.neon .card-content blockquote {
    border-left-color: rgba(255, 255, 255, 0.3);
}

.gold .card-content blockquote {
    border-left-color: rgba(139, 69, 19, 0.3);
}

.glass .card-content blockquote {
    border-left-color: rgba(45, 52, 54, 0.6);
    background: rgba(255, 255, 255, 0.3);
    color: #2d3436;
}

.monochrome .card-content blockquote {
    border-left-color: rgba(51, 51, 51, 0.3);
}

/* 代码块主题适配 */
.warm .card-content code,
.warm .card-content pre {
    background: rgba(139, 69, 19, 0.1);
}

.minimal .card-content code,
.minimal .card-content pre {
    background: rgba(44, 62, 80, 0.1);
}

.gradient .card-content code,
.gradient .card-content pre {
    background: rgba(44, 62, 80, 0.1);
}

.nature .card-content code,
.nature .card-content pre {
    background: rgba(45, 80, 22, 0.1);
}

.tech .card-content code,
.tech .card-content pre,
.elegant .card-content code,
.elegant .card-content pre {
    background: rgba(255, 255, 255, 0.1);
}

/* 保留主题的代码块样式 */
.sunset .card-content code,
.sunset .card-content pre,
.gold .card-content code,
.gold .card-content pre {
    background: rgba(139, 69, 19, 0.1);
}

.forest .card-content code,
.forest .card-content pre,
.corporate .card-content code,
.corporate .card-content pre,
.finance .card-content code,
.finance .card-content pre,
.neon .card-content code,
.neon .card-content pre {
    background: rgba(255, 255, 255, 0.1);
}

.glass .card-content code,
.glass .card-content pre {
    background: rgba(255, 255, 255, 0.4);
    color: #2d3436;
    border: 1px solid rgba(255, 255, 255, 0.6);
}

.monochrome .card-content code,
.monochrome .card-content pre {
    background: #ffffff;
    border: 1px solid #ddd;
}

/* 间距设置样式 - 通过CSS变量控制 */
.card-content {
    --paragraph-spacing: 0.05rem;
    --heading-spacing: 0.1rem;
    --list-spacing: 0.02rem;
    --element-spacing: 0.05rem;
}

/* Markdown内容样式 - 使用最高优先级确保间距设置生效 */
#card-preview .card-content h1,
#card-preview .card h1,
#card-preview .card-content .card h1 {
    font-size: 1.8rem !important;
    margin: 0 !important;
    margin-bottom: var(--heading-spacing) !important;
    padding: 0 !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
}

#card-preview .card-content h2,
#card-preview .card h2,
#card-preview .card-content .card h2 {
    font-size: 1.4rem !important;
    margin: var(--heading-spacing) 0 var(--heading-spacing) 0 !important;
    padding: 0 !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
}

#card-preview .card-content h3,
#card-preview .card h3,
#card-preview .card-content .card h3 {
    font-size: 1.2rem !important;
    margin: var(--heading-spacing) 0 var(--heading-spacing) 0 !important;
    padding: 0 !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
}

#card-preview .card-content h4,
#card-preview .card h4,
#card-preview .card-content .card h4 {
    font-size: 1.1rem !important;
    margin: var(--heading-spacing) 0 var(--heading-spacing) 0 !important;
    padding: 0 !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
}

#card-preview .card-content h5,
#card-preview .card h5,
#card-preview .card-content .card h5 {
    font-size: 1.0rem !important;
    margin: var(--heading-spacing) 0 var(--heading-spacing) 0 !important;
    padding: 0 !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
}

#card-preview .card-content h6,
#card-preview .card h6,
#card-preview .card-content .card h6 {
    font-size: 0.9rem !important;
    margin: var(--heading-spacing) 0 var(--heading-spacing) 0 !important;
    padding: 0 !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    color: #666 !important;
}

#card-preview .card-content h2:first-child,
#card-preview .card-content h3:first-child,
#card-preview .card-content h4:first-child,
#card-preview .card-content h5:first-child,
#card-preview .card-content h6:first-child {
    margin-top: 0 !important;
}

#card-preview .card-content p,
#card-preview .card p,
#card-preview .card-content .card p {
    margin: 0 !important;
    margin-bottom: var(--paragraph-spacing) !important;
    padding: 0 !important;
    line-height: 1.4 !important;
}

#card-preview .card-content ul,
#card-preview .card-content ol,
#card-preview .card ul,
#card-preview .card ol {
    margin: var(--element-spacing) 0 !important;
    padding: 0 !important;
    padding-left: 1.5rem !important;
}

#card-preview .card-content li,
#card-preview .card li {
    margin: 0 !important;
    margin-bottom: var(--list-spacing) !important;
    padding: 0 !important;
    line-height: 1.3 !important;
}



#card-preview .card-content blockquote {
    border-left: 4px solid rgba(255, 255, 255, 0.3) !important;
    padding-left: 1rem !important;
    margin: var(--element-spacing) 0 !important;
    font-style: italic !important;
    opacity: 0.9 !important;
}

#card-preview .card-content code {
    background: rgba(0, 0, 0, 0.1) !important;
    padding: 0.2rem 0.4rem !important;
    border-radius: 4px !important;
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace !important;
    font-size: 0.9em !important;
}

#card-preview .card-content pre {
    background: rgba(0, 0, 0, 0.1) !important;
    padding: 1rem !important;
    border-radius: 8px !important;
    overflow-x: auto !important;
    margin: var(--element-spacing) 0 !important;
}

/* monochrome主题的代码块样式 - 使用更高优先级 */
#card-preview .card.monochrome .card-content code {
    background: #ffffff !important;
    border: 1px solid #ddd !important;
    color: #000000 !important;
}

#card-preview .card.monochrome .card-content pre {
    background: #ffffff !important;
    border: 1px solid #ddd !important;
    color: #000000 !important;
}

.card-content pre code {
    background: none;
    padding: 0;
}



/* 底部 */
.footer {
    text-align: center;
    padding: 1rem;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.9rem;
}

/* 响应式设计 */
@media (max-width: 1400px) {
    .main-content {
        grid-template-columns: 45% 40% 15%;
    }
}

@media (max-width: 1200px) {
    .main-content {
        grid-template-columns: 50% 35% 15%;
    }
}

@media (max-width: 992px) {
    .main-content {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
    }

    .editor-column {
        order: 1;
    }

    .preview-column {
        order: 2;
    }

    .settings-column {
        order: 3;
    }

    .toolbar {
        flex-direction: column;
        gap: 1rem;
        padding: 1rem;
    }

    .controls {
        flex-wrap: wrap;
        justify-content: center;
    }

    .card {
        width: 100% !important;
        max-width: 350px;
        height: auto;
        min-height: 300px;
    }
}

@media (max-width: 768px) {
    .main-content {
        padding: 0.5rem;
        gap: 0.5rem;
    }

    .editor-toolbar {
        padding: 0.5rem;
        flex-wrap: wrap;
    }

    .toolbar-btn {
        width: 24px;
        height: 24px;
    }

    .settings-section {
        padding: 1rem;
    }

    .select-wrapper select {
        font-size: 0.8rem;
        padding: 0.4rem;
    }

    .size-input-group input {
        font-size: 0.8rem;
        padding: 0.4rem;
    }
}

/* 缩放效果 */
.preview-container.zoomed {
    transform-origin: center;
}

#zoom-level {
    min-width: 50px;
    text-align: center;
    font-weight: 500;
}

/* 加载动画 */
.loading {
    position: relative;
    pointer-events: none;
}

.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid #f3f3f3;
    border-top: 2px solid #667eea;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    z-index: 1000;
}

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

/* 按钮禁用状态 */
.btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none !important;
}

/* 工具提示 */
.tooltip {
    position: relative;
    display: inline-block;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: rgba(0, 0, 0, 0.8);
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -60px;
    opacity: 0;
    transition: opacity 0.3s;
    font-size: 0.8rem;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}

/* 改进的滚动条样式 */
.card-content::-webkit-scrollbar,
#markdown-editor::-webkit-scrollbar,
.editor-toolbar::-webkit-scrollbar,
.preview-container::-webkit-scrollbar,
.settings-column::-webkit-scrollbar,
.CodeMirror-scroll::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.card-content::-webkit-scrollbar-track,
#markdown-editor::-webkit-scrollbar-track,
.editor-toolbar::-webkit-scrollbar-track,
.preview-container::-webkit-scrollbar-track,
.settings-column::-webkit-scrollbar-track,
.CodeMirror-scroll::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05);
    border-radius: 4px;
}

.card-content::-webkit-scrollbar-thumb,
#markdown-editor::-webkit-scrollbar-thumb,
.editor-toolbar::-webkit-scrollbar-thumb,
.preview-container::-webkit-scrollbar-thumb,
.settings-column::-webkit-scrollbar-thumb,
.CodeMirror-scroll::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 4px;
    transition: background 0.2s ease;
}

.card-content::-webkit-scrollbar-thumb:hover,
#markdown-editor::-webkit-scrollbar-thumb:hover,
.editor-toolbar::-webkit-scrollbar-thumb:hover,
.preview-container::-webkit-scrollbar-thumb:hover,
.settings-column::-webkit-scrollbar-thumb:hover,
.CodeMirror-scroll::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.5);
}

/* 页码样式 */
.page-number {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-weight: 500;
    user-select: none;
    pointer-events: none;
}

/* 编辑模式样式 */
.card-content[contenteditable="true"] {
    cursor: text;
}

.card-content[contenteditable="true"]:focus {
    outline: 2px dashed #007bff !important;
    outline-offset: 4px;
}

/* 表格样式 */
.card-content table,
.card-content .markdown-table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--element-spacing) 0;
    font-size: 0.9em;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.card-content th,
.card-content td {
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 0.75rem 0.5rem;
    text-align: left;
    vertical-align: top;
}

.card-content th {
    background: rgba(255, 255, 255, 0.15);
    font-weight: 600;
    font-size: 0.85em;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.card-content tbody tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.05);
}

.card-content tbody tr:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* 图片样式 */
.card-content img {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
    margin: var(--element-spacing) 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    display: block;
}

/* 高亮文本样式 */
.card-content mark {
    background: rgba(255, 255, 0, 0.3);
    padding: 0.1rem 0.2rem;
    border-radius: 3px;
}

/* 删除线样式 */
.card-content del {
    opacity: 0.7;
}

/* 主题特定的表格样式 */
.warm table th,
.warm table td {
    border-color: rgba(139, 69, 19, 0.2);
}

.warm table th {
    background: rgba(139, 69, 19, 0.1);
}

.minimal table th,
.minimal table td {
    border-color: rgba(44, 62, 80, 0.2);
}

.minimal table th {
    background: rgba(44, 62, 80, 0.1);
}

.gradient table th,
.gradient table td {
    border-color: rgba(44, 62, 80, 0.2);
}

.gradient table th {
    background: rgba(44, 62, 80, 0.1);
}

.nature table th,
.nature table td {
    border-color: rgba(45, 80, 22, 0.2);
}

.nature table th {
    background: rgba(45, 80, 22, 0.1);
}

.tech table th,
.tech table td,
.elegant table th,
.elegant table td {
    border-color: rgba(255, 255, 255, 0.2);
}

.tech table th,
.elegant table th {
    background: rgba(255, 255, 255, 0.1);
}

/* 新主题的表格样式 */
.sunset table th,
.sunset table td,
.pastel table th,
.pastel table td,
.gold table th,
.gold table td {
    border-color: rgba(139, 69, 19, 0.2);
}

.sunset table th,
.pastel table th,
.gold table th {
    background: rgba(139, 69, 19, 0.1);
}

.aurora table th,
.aurora table td,
.lavender table th,
.lavender table td {
    border-color: rgba(44, 62, 80, 0.2);
}

.aurora table th,
.lavender table th {
    background: rgba(44, 62, 80, 0.1);
}

.ocean table th,
.ocean table td,
.forest table th,
.forest table td,
.sky table th,
.sky table td,
.corporate table th,
.corporate table td,
.finance table th,
.finance table td,
.neon table th,
.neon table td,
.cyberpunk table th,
.cyberpunk table td,
.retro table th,
.retro table td,
.galaxy table th,
.galaxy table td,
.rose table th,
.rose table td,
.midnight table th,
.midnight table td {
    border-color: rgba(255, 255, 255, 0.2);
}

.ocean table th,
.forest table th,
.sky table th,
.corporate table th,
.finance table th,
.neon table th,
.cyberpunk table th,
.retro table th,
.galaxy table th,
.rose table th,
.midnight table th {
    background: rgba(255, 255, 255, 0.1);
}

.monochrome table th,
.monochrome table td {
    border-color: #ddd;
}

.monochrome table th {
    background: #ffffff;
    border: 1px solid #ddd;
}

/* 夜间模式样式 - 高端精美配色 */
.dark-mode {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 25%, #334155 50%, #475569 75%, #64748b 100%);
    color: #f1f5f9;
}

.dark-mode .toolbar {
    background: rgba(15, 23, 42, 0.95);
    border-bottom: 1px solid rgba(148, 163, 184, 0.2);
    backdrop-filter: blur(10px);
}

.dark-mode .logo h1 {
    color: #38bdf8;
    text-shadow: 0 0 20px rgba(56, 189, 248, 0.3);
}

.dark-mode .logo span {
    color: #cbd5e1;
}

/* 夜间模式下的切换开关 */
.dark-mode .toggle-track {
    background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
}

.dark-mode .toggle-thumb {
    transform: translateX(30px);
}

.dark-mode .toggle-thumb .sun-icon {
    opacity: 0;
    transform: scale(0.8) rotate(-180deg);
}

.dark-mode .toggle-thumb .moon-icon {
    opacity: 1;
    transform: scale(1) rotate(0deg);
}

.dark-mode .editor-column,
.dark-mode .preview-column,
.dark-mode .settings-column {
    background: rgba(30, 41, 59, 0.95);
    color: #f1f5f9;
    border: 1px solid rgba(148, 163, 184, 0.1);
    backdrop-filter: blur(10px);
}

.dark-mode .panel-header {
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
    border-bottom: 1px solid rgba(148, 163, 184, 0.2);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.dark-mode .panel-header h3 {
    color: #f1f5f9;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* 暗色模式下的设置区折叠按钮 */
.dark-mode .settings-toggle-btn {
    color: #cbd5e1;
}

.dark-mode .settings-toggle-btn:hover {
    background: rgba(59, 130, 246, 0.2);
    color: #60a5fa;
}

.dark-mode .settings-toggle-btn.collapsed {
    background: rgba(59, 130, 246, 0.9);
    color: white;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.4);
}

.dark-mode .settings-toggle-btn.collapsed:hover {
    background: rgba(59, 130, 246, 1);
}

/* 暗色模式下的编辑区折叠按钮 */
.dark-mode .editor-toggle-btn {
    color: #cbd5e1;
}

.dark-mode .editor-toggle-btn:hover {
    background: rgba(59, 130, 246, 0.2);
    color: #60a5fa;
}

.dark-mode .show-editor-btn {
    background: rgba(59, 130, 246, 0.9);
    color: white;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.4);
}

.dark-mode .show-editor-btn:hover {
    background: rgba(59, 130, 246, 1);
}

.dark-mode .editor-toolbar {
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
    border-bottom: 1px solid rgba(148, 163, 184, 0.2);
    backdrop-filter: blur(10px);
}

.dark-mode .toolbar-btn {
    color: #cbd5e1;
    transition: all 0.3s ease;
}

.dark-mode .toolbar-btn:hover {
    background: linear-gradient(135deg, #38bdf8 0%, #0ea5e9 100%);
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(56, 189, 248, 0.3);
}

.dark-mode .toolbar-divider {
    background: linear-gradient(to bottom, transparent, rgba(148, 163, 184, 0.3), transparent);
}

/* 暗色模式下的下拉菜单 */
.dark-mode .dropdown-menu {
    background: #2d3748;
    border-color: #4a5568;
    color: #e2e8f0;
}

.dark-mode .dropdown-item:hover {
    background-color: #4a5568;
}

.dark-mode .dropdown-item:active {
    background-color: #2d3748;
}

.dark-mode .heading-preview {
    color: #e2e8f0;
}

.dark-mode .h6-preview {
    color: #a0aec0;
}

/* 夜间模式下的H6标题颜色 */
.dark-mode #card-preview .card-content h6,
.dark-mode #card-preview .card h6,
.dark-mode #card-preview .card-content .card h6 {
    color: #a0aec0 !important;
}

.dark-mode #markdown-editor {
    background: rgba(15, 23, 42, 0.5);
    color: #f1f5f9;
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 8px;
}

.dark-mode #markdown-editor::placeholder {
    color: #94a3b8;
}

.dark-mode .preview-container {
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 8px;
}

.dark-mode .settings-section {
    border-bottom: 1px solid rgba(148, 163, 184, 0.2);
}

.dark-mode .settings-section h4 {
    color: #f1f5f9;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.dark-mode .select-wrapper select,
.dark-mode .size-input-group input,
.dark-mode .page-position select {
    background: rgba(30, 41, 59, 0.8);
    border: 1px solid rgba(148, 163, 184, 0.3);
    color: #f1f5f9;
    backdrop-filter: blur(5px);
}

.dark-mode .font-family-setting label {
    color: #b0b0b0;
}

.dark-mode .select-wrapper select:focus,
.dark-mode .size-input-group input:focus {
    border-color: #38bdf8;
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.2);
    background: rgba(30, 41, 59, 0.9);
}

.dark-mode .select-wrapper::after {
    color: #cbd5e1;
}

.dark-mode .size-input-group label,
.dark-mode .setting-item label,
.dark-mode .page-position label {
    color: #cbd5e1;
}

.dark-mode .setting-item input[type="range"] {
    background: rgba(148, 163, 184, 0.3);
}

.dark-mode .setting-item input[type="range"]::-webkit-slider-thumb {
    background: linear-gradient(135deg, #38bdf8 0%, #0ea5e9 100%);
    box-shadow: 0 2px 8px rgba(56, 189, 248, 0.3);
}

.dark-mode .setting-item input[type="range"]::-moz-range-thumb {
    background: linear-gradient(135deg, #38bdf8 0%, #0ea5e9 100%);
    box-shadow: 0 2px 8px rgba(56, 189, 248, 0.3);
}

.dark-mode .setting-item label {
    color: #cbd5e1;
}

.dark-mode .setting-item span {
    color: #94a3b8;
}

/* 夜间模式下的长文拆分设置 */
.dark-mode .split-settings .setting-item label {
    color: #cbd5e1;
}

.dark-mode .split-settings .setting-item select {
    background: rgba(30, 41, 59, 0.8);
    border: 1px solid rgba(148, 163, 184, 0.3);
    color: #f1f5f9;
}

.dark-mode .split-settings .setting-item select:focus {
    border-color: #38bdf8;
    box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.25);
}

.dark-mode .split-options {
    border-left-color: rgba(148, 163, 184, 0.3);
}

.dark-mode .split-status {
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
    color: #f1f5f9;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.dark-mode .card-item:hover {
    border-color: rgba(56, 189, 248, 0.5);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.dark-mode .card-number {
    background: linear-gradient(135deg, #38bdf8 0%, #0ea5e9 100%);
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(56, 189, 248, 0.4);
}

.dark-mode .preview-content::-webkit-scrollbar-track {
    background: rgba(148, 163, 184, 0.1);
}

.dark-mode .preview-content::-webkit-scrollbar-thumb {
    background: rgba(56, 189, 248, 0.6);
}

.dark-mode .preview-content::-webkit-scrollbar-thumb:hover {
    background: rgba(56, 189, 248, 0.8);
}



/* 夜间模式下的主题选择器 */
.dark-mode .category-icon {
    background: rgba(30, 41, 59, 0.8);
    border: 2px solid rgba(148, 163, 184, 0.3);
    color: #cbd5e1;
}

.dark-mode .category-icon:hover {
    background: rgba(56, 189, 248, 0.2);
    border-color: #38bdf8;
    color: #38bdf8;
    box-shadow: 0 4px 16px rgba(56, 189, 248, 0.4);
}

.dark-mode .category-icon.active {
    background: linear-gradient(135deg, #38bdf8 0%, #0ea5e9 100%);
    border-color: #38bdf8;
    color: white;
    box-shadow: 0 4px 20px rgba(56, 189, 248, 0.5);
}

.dark-mode .category-icon.active:hover {
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
    box-shadow: 0 6px 24px rgba(56, 189, 248, 0.6);
}

.dark-mode .category-icon::after {
    background: rgba(15, 23, 42, 0.95);
    color: #f1f5f9;
    border: 1px solid rgba(148, 163, 184, 0.3);
}

.dark-mode .theme-tag {
    background: rgba(30, 41, 59, 0.8);
    border: 1px solid rgba(148, 163, 184, 0.3);
    color: #cbd5e1;
}

.dark-mode .theme-tag:hover {
    background: rgba(56, 189, 248, 0.2);
    border-color: #38bdf8;
    color: #38bdf8;
    box-shadow: 0 2px 8px rgba(56, 189, 248, 0.3);
}

.dark-mode .theme-tag.active {
    background: linear-gradient(135deg, #38bdf8 0%, #0ea5e9 100%);
    border-color: #38bdf8;
    color: white;
    box-shadow: 0 2px 12px rgba(56, 189, 248, 0.4);
}

.dark-mode .theme-tag.active:hover {
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
    box-shadow: 0 4px 16px rgba(56, 189, 248, 0.5);
}

/* 外观样式 */
.small-book-34 {
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.small-book-11 {
    border-radius: 12px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
    border: 1px solid rgba(0, 0, 0, 0.08);
}

.phone-916 {
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    border: 2px solid rgba(0, 0, 0, 0.05);
}

.square-11 {
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.a4-72dpi {
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(0, 0, 0, 0.12);
}

.a4-96dpi {
    border-radius: 4px;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.12);
    border: 1px solid rgba(0, 0, 0, 0.1);
}

/* 兼容旧的形状样式 */
.square {
    border-radius: 12px;
}

.landscape {
    border-radius: 8px;
}

.portrait {
    border-radius: 8px;
}

/* 夜间模式下的外观样式 */
.dark-mode .small-book-34,
.dark-mode .small-book-11,
.dark-mode .phone-916,
.dark-mode .square-11,
.dark-mode .a4-72dpi,
.dark-mode .a4-96dpi {
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.dark-mode .btn-small {
    background: #3a3a3a;
    color: #e0e0e0;
    border: 1px solid #555;
}

.dark-mode .btn-small:hover {
    background: #4a4a4a;
}

.dark-mode .action-btn {
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.2) 0%, rgba(14, 165, 233, 0.2) 100%);
    color: #38bdf8;
    border: 1px solid rgba(56, 189, 248, 0.3);
}

.dark-mode .action-btn:hover {
    background: linear-gradient(135deg, #38bdf8 0%, #0ea5e9 100%);
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(56, 189, 248, 0.3);
}

.dark-mode .footer {
    background: rgba(30, 30, 30, 0.95);
    color: #b0b0b0;
}

.dark-mode .footer p {
    color: #b0b0b0;
}

/* Emoji选择器样式 */
.emoji-picker {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 450px;
    height: 600px;
    max-height: 80vh;
    background: white;
    border-radius: 16px;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
    z-index: 10000;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: emojiPickerFadeIn 0.3s ease-out;
}

@keyframes emojiPickerFadeIn {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

.emoji-picker-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #eee;
    background: #f8f9fa;
}

.emoji-picker-header h4 {
    margin: 0;
    font-size: 1.1rem;
    color: #333;
}

.emoji-close-btn {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: #666;
    cursor: pointer;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s ease;
}

.emoji-close-btn:hover {
    background: #e9ecef;
    color: #333;
}

.emoji-categories {
    display: flex;
    padding: 0.5rem;
    border-bottom: 1px solid #eee;
    background: #f8f9fa;
    overflow-x: auto;
}

.emoji-category-btn {
    background: none;
    border: none;
    padding: 0.5rem;
    margin: 0 0.25rem;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1.2rem;
    transition: all 0.2s ease;
    min-width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.emoji-category-btn:hover {
    background: #e9ecef;
}

.emoji-category-btn.active {
    background: #007bff;
    color: white;
}

.emoji-grid {
    flex: 1;
    padding: 1.2rem;
    overflow-y: auto;
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 0.5rem;
    align-content: start;
    min-height: 0;
    max-height: calc(100% - 80px);
}

.emoji-grid::-webkit-scrollbar {
    width: 8px;
}

.emoji-grid::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.08);
    border-radius: 4px;
    margin: 4px 0;
}

.emoji-grid::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 4px;
}

.emoji-grid::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.4);
}

.emoji-item {
    background: none;
    border: none;
    padding: 0.5rem;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1.5rem;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    position: relative;
    min-height: 44px;
    min-width: 44px;
}

.emoji-item:hover {
    background: #f0f8ff;
    transform: scale(1.15);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    z-index: 1;
}

.emoji-item:active {
    transform: scale(1.05);
    transition-duration: 0.1s;
}

/* 夜间模式下的emoji选择器 */
.dark-mode .emoji-picker {
    background: #2a2a2a;
    color: #e0e0e0;
}

.dark-mode .emoji-picker-header {
    background: #3a3a3a;
    border-bottom: 1px solid #555;
}

.dark-mode .emoji-picker-header h4 {
    color: #e0e0e0;
}

.dark-mode .emoji-close-btn {
    color: #b0b0b0;
}

.dark-mode .emoji-close-btn:hover {
    background: #4a4a4a;
    color: #e0e0e0;
}

.dark-mode .emoji-categories {
    background: #3a3a3a;
    border-bottom: 1px solid #555;
}

.dark-mode .emoji-category-btn:hover {
    background: #4a4a4a;
}

.dark-mode .emoji-category-btn.active {
    background: #64b5f6;
}

.dark-mode .emoji-item:hover {
    background: #4a4a4a;
}

/* 数学公式选择器样式 */
.formula-picker {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    border: 1px solid #ddd;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    width: 480px;
    max-height: 600px;
    display: flex;
    flex-direction: column;
    animation: formulaPickerFadeIn 0.3s ease-out;
}

@keyframes formulaPickerFadeIn {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

.formula-picker-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #eee;
    background: #f8f9fa;
    border-radius: 12px 12px 0 0;
}

.formula-picker-header h4 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: #333;
}

.formula-close-btn {
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: #666;
    padding: 4px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: all 0.2s;
}

.formula-close-btn:hover {
    background: #e9ecef;
    color: #333;
}

.formula-categories {
    display: flex;
    padding: 1rem;
    border-bottom: 1px solid #eee;
    gap: 8px;
    flex-wrap: wrap;
    background: #fafbfc;
}

.formula-category-btn {
    background: white;
    border: 1px solid #ddd;
    padding: 8px 16px;
    border-radius: 20px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.2s;
    color: #666;
}

.formula-category-btn:hover {
    background: #f0f8ff;
    border-color: #007bff;
    color: #007bff;
}

.formula-category-btn.active {
    background: #007bff;
    color: white;
    border-color: #007bff;
}

.formula-content {
    flex: 1;
    overflow-y: auto;
    background: white;
}

.formula-grid {
    padding: 1rem;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    max-height: 320px;
    overflow-y: auto;
}

.formula-item {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    padding: 16px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
    min-height: 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
}

.formula-item:hover {
    background: #e3f2fd;
    border-color: #007bff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 123, 255, 0.15);
}

.formula-item .formula-display {
    font-family: 'Times New Roman', serif;
    font-size: 18px;
    margin-bottom: 6px;
    color: #333;
    font-weight: 500;
}

.formula-item .formula-latex {
    font-size: 10px;
    color: #666;
    font-family: 'Courier New', monospace;
    background: rgba(0, 0, 0, 0.05);
    padding: 2px 6px;
    border-radius: 3px;
}

.formula-input {
    padding: 1rem 1.5rem;
    border-top: 1px solid #eee;
    background: #f8f9fa;
    border-radius: 0 0 12px 12px;
}

.formula-input label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #333;
    margin-bottom: 8px;
}

.formula-input input {
    width: calc(100% - 90px);
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 14px;
    font-family: 'Courier New', monospace;
    background: white;
}

.formula-input button {
    width: 80px;
    padding: 10px 12px;
    background: #007bff;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    margin-left: 8px;
    transition: background-color 0.2s;
}

.formula-input button:hover {
    background: #0056b3;
}

/* 夜间模式下的数学公式选择器 */
.dark-mode .formula-picker {
    background: #2a2a2a;
    color: #e0e0e0;
    border-color: #555;
}

.dark-mode .formula-picker-header {
    background: #3a3a3a;
    border-bottom: 1px solid #555;
}

.dark-mode .formula-picker-header h4 {
    color: #e0e0e0;
}

.dark-mode .formula-close-btn {
    color: #b0b0b0;
}

.dark-mode .formula-close-btn:hover {
    background: #4a4a4a;
    color: #e0e0e0;
}

.dark-mode .formula-categories {
    background: #333;
    border-bottom: 1px solid #555;
}

.dark-mode .formula-category-btn {
    background: #4a4a4a;
    border-color: #666;
    color: #b0b0b0;
}

.dark-mode .formula-category-btn:hover {
    background: #5a5a5a;
    border-color: #64b5f6;
    color: #64b5f6;
}

.dark-mode .formula-category-btn.active {
    background: #64b5f6;
    color: #2a2a2a;
    border-color: #64b5f6;
}

.dark-mode .formula-content {
    background: #2a2a2a;
}

.dark-mode .formula-item {
    background: #3a3a3a;
    border-color: #555;
}

.dark-mode .formula-item:hover {
    background: #4a4a4a;
    border-color: #64b5f6;
}

.dark-mode .formula-item .formula-display {
    color: #e0e0e0;
}

.dark-mode .formula-item .formula-latex {
    color: #b0b0b0;
    background: rgba(255, 255, 255, 0.1);
}

.dark-mode .formula-input {
    background: #333;
    border-top: 1px solid #555;
}

.dark-mode .formula-input label {
    color: #e0e0e0;
}

.dark-mode .formula-input input {
    background: #4a4a4a;
    border-color: #666;
    color: #e0e0e0;
}

.dark-mode .formula-input button {
    background: #64b5f6;
    color: #2a2a2a;
}

.dark-mode .formula-input button:hover {
    background: #42a5f5;
}

/* 数学公式渲染样式 */
.math-inline {
    font-family: 'Times New Roman', serif;
    font-style: italic;
    font-size: 1.1em;
    color: #2c3e50;
    background: rgba(52, 152, 219, 0.1);
    padding: 2px 4px;
    border-radius: 3px;
    margin: 0 2px;
}

.math-block {
    font-family: 'Times New Roman', serif;
    font-style: italic;
    font-size: 1.3em;
    color: #2c3e50;
    background: rgba(52, 152, 219, 0.05);
    padding: 12px 16px;
    border-radius: 6px;
    margin: 16px 0;
    text-align: center;
    border-left: 4px solid #3498db;
}

.fraction {
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    margin: 0 4px;
}

.fraction .numerator {
    display: block;
    border-bottom: 1px solid currentColor;
    padding-bottom: 2px;
    font-size: 0.9em;
}

.fraction .denominator {
    display: block;
    padding-top: 2px;
    font-size: 0.9em;
}

/* 夜间模式下的数学公式样式 */
.dark-mode .math-inline {
    color: #e8f4fd;
    background: rgba(100, 181, 246, 0.2);
}

.dark-mode .math-block {
    color: #e8f4fd;
    background: rgba(100, 181, 246, 0.1);
    border-left-color: #64b5f6;
}

/* 夜间模式下的滚动条样式 */
.dark-mode .card-content::-webkit-scrollbar,
.dark-mode #markdown-editor::-webkit-scrollbar,
.dark-mode .editor-toolbar::-webkit-scrollbar,
.dark-mode .preview-container::-webkit-scrollbar,
.dark-mode .settings-column::-webkit-scrollbar,
.dark-mode .CodeMirror-scroll::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.dark-mode .card-content::-webkit-scrollbar-track,
.dark-mode #markdown-editor::-webkit-scrollbar-track,
.dark-mode .editor-toolbar::-webkit-scrollbar-track,
.dark-mode .preview-container::-webkit-scrollbar-track,
.dark-mode .settings-column::-webkit-scrollbar-track,
.dark-mode .CodeMirror-scroll::-webkit-scrollbar-track {
    background: rgba(148, 163, 184, 0.1);
    border-radius: 4px;
}

.dark-mode .card-content::-webkit-scrollbar-thumb,
.dark-mode #markdown-editor::-webkit-scrollbar-thumb,
.dark-mode .editor-toolbar::-webkit-scrollbar-thumb,
.dark-mode .preview-container::-webkit-scrollbar-thumb,
.dark-mode .settings-column::-webkit-scrollbar-thumb,
.dark-mode .CodeMirror-scroll::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.4);
    border-radius: 4px;
    transition: background 0.2s ease;
}

.dark-mode .card-content::-webkit-scrollbar-thumb:hover,
.dark-mode #markdown-editor::-webkit-scrollbar-thumb:hover,
.dark-mode .editor-toolbar::-webkit-scrollbar-thumb:hover,
.dark-mode .preview-container::-webkit-scrollbar-thumb:hover,
.dark-mode .settings-column::-webkit-scrollbar-thumb:hover,
.dark-mode .CodeMirror-scroll::-webkit-scrollbar-thumb:hover {
    background: rgba(148, 163, 184, 0.6);
}

/* ========== 991Markdown 主题样式 ========== */

/* 苹果备忘录风格 */
.card.apple {
    background: linear-gradient(135deg, #ffcc02 0%, #ffb700 100%);
    color: #1d1d1f;
    border-radius: 12px;
    box-shadow:
        0 4px 20px rgba(255, 204, 2, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    position: relative;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.card.apple::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 40px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, transparent 100%);
    border-radius: 12px 12px 0 0;
}



/* 删除重复的notebook主题定义，保留后面更完整的版本 */

/* 波普艺术风格 */
.card.pop {
    background: linear-gradient(45deg, #ff6b6b 0%, #4ecdc4 50%, #ffe66d 100%);
    color: white;
    text-shadow: 2px 2px 0px #000;
    font-weight: bold;
    border: 4px solid #000;
}

/* 字节范风格 */
.card.bytedance {
    background:
        linear-gradient(135deg, #161823 0%, #1f2937 100%);
    color: white;
    border-radius: 8px;
    border: 1px solid #374151;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
    position: relative;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.card.bytedance::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(180deg, #fe2c55 0%, #25f4ee 100%);
    border-radius: 8px 0 0 8px;
}



/* 阿里橙风格 */
.card.alibaba {
    background:
        radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.2) 0%, transparent 50%),
        linear-gradient(135deg, #ff6600 0%, #ff8533 50%, #ffaa66 100%);
    color: white;
    border-radius: 16px;
    border: 3px solid #ff8533;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    box-shadow: 0 6px 20px rgba(255, 102, 0, 0.4);
}

/* 艺术装饰风格 */
.card.artdeco {
    background: linear-gradient(135deg, #2d3436 0%, #636e72 100%);
    color: #fdcb6e;
    border: 2px solid #fdcb6e;
}

/* 玻璃拟态风格 - 增强版 */
.card.glass {
    background:
        /* 玻璃表面反射层 */
        linear-gradient(135deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.05) 100%),
        /* 主背景渐变 */
        linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%),
        /* 底层颜色 */
        linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);

    /* 玻璃效果 */
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px); /* Safari兼容 */

    /* 边框和阴影 */
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 20px;

    /* 玻璃质感阴影 */
    box-shadow:
        0 8px 32px 0 rgba(31, 38, 135, 0.37),
        0 2px 16px 0 rgba(31, 38, 135, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.4),
        inset 0 -1px 0 rgba(255, 255, 255, 0.1);

    color: #2d3436;
    text-shadow: 0 1px 3px rgba(255, 255, 255, 0.8), 0 0 10px rgba(255, 255, 255, 0.5);
    position: relative;
    overflow: hidden;
}

/* 玻璃表面光泽效果 */
.card.glass::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, transparent 100%);
    border-radius: 20px 20px 0 0;
    pointer-events: none;
}

/* 动态光线效果 */
.card.glass::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background:
        radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.15) 0%, transparent 50%);
    animation: glassShine 8s ease-in-out infinite;
    pointer-events: none;
}

@keyframes glassShine {
    0%, 100% {
        transform: translate(-50%, -50%) rotate(0deg);
        opacity: 0.6;
    }
    50% {
        transform: translate(-30%, -30%) rotate(180deg);
        opacity: 0.3;
    }
}

/* 温暖柔和风格 */
.card.warm {
    background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
    color: #8b4513;
}

/* 简约高级灰风格 */
.card.minimal {
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    color: #2c3e50;
}

/* 极简黑白风格 */
.card.monochrome {
    background: #ffffff;
    color: #000000;
    border: 1px solid #ddd;
}

/* 梦幻渐变风格 */
.card.gradient {
    background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 50%, #fecfef 100%);
    color: #2c3e50;
}

/* 清新自然风格 */
.card.nature {
    background: linear-gradient(135deg, #a8e6cf 0%, #dcedc1 100%);
    color: #2d5016;
}

/* 紫色小红书风格 */
.card.xiaohongshu {
    background: linear-gradient(135deg, #a29bfe 0%, #6c5ce7 100%);
    color: white;
    border-radius: 16px;
}





/* 日本杂志风格 */
.card.japanese {
    background:
        linear-gradient(0deg, rgba(253, 121, 168, 0.1) 0%, rgba(253, 121, 168, 0.1) 2px, transparent 2px, transparent 100%),
        linear-gradient(90deg, rgba(253, 121, 168, 0.1) 0%, rgba(253, 121, 168, 0.1) 2px, transparent 2px, transparent 100%),
        linear-gradient(135deg, #ffffff 0%, #fef7f0 100%);
    background-size: 100% 20px, 20px 100%, 100% 100%;
    color: #2d3436;
    border: 3px solid #fd79a8;
    border-radius: 0;
    position: relative;
}



/* 暗黑科技风格 */
.card.darktech {
    background: linear-gradient(135deg, #000000 0%, #2d3436 100%);
    color: #00cec9;
    border: 1px solid #00cec9;
}

/* 复古打字机风格 */
.card.typewriter {
    background: linear-gradient(135deg, #f5f3f0 0%, #e8e4e0 100%);
    color: #2d3436;
    font-family: 'Courier New', monospace;
    border: 1px solid #8b7355;
}

/* 水彩艺术风格 */
.card.watercolor {
    background: linear-gradient(135deg, #a8edea 0%, #fed6e3 50%, #d299c2 100%);
    color: #2d3436;
    border-radius: 20px;
}

/* 中国传统风格 */
.card.traditional {
    background: linear-gradient(135deg, #ff7675 0%, #fdcb6e 100%);
    color: #2d3436;
    border: 2px solid #d63031;
}

/* 儿童童话风格 */
.card.fairytale {
    background: linear-gradient(135deg, #fab1a0 0%, #fd79a8 50%, #fdcb6e 100%);
    color: white;
    border-radius: 20px;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}

/* 赛博朋克风格 */
.card.cyberpunk {
    background:
        linear-gradient(45deg, transparent 25%, rgba(0, 255, 255, 0.1) 25%, rgba(0, 255, 255, 0.1) 50%, transparent 50%),
        linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 50%, #16213e 100%);
    background-size: 20px 20px, 100% 100%;
    color: #00ffff;
    border: 2px solid #00ffff;
    border-radius: 0;
    box-shadow:
        0 0 20px rgba(0, 255, 255, 0.5),
        inset 0 0 20px rgba(0, 255, 255, 0.1);
    position: relative;
    font-family: 'Courier New', monospace;
    text-shadow: 0 0 10px #00ffff;
}



.card.cyberpunk::after {
    content: '⚡';
    position: absolute;
    bottom: 8px;
    right: 8px;
    font-size: 16px;
    color: #ff0080;
    text-shadow: 0 0 10px #ff0080;
    animation: cyberpunkPulse 2s ease-in-out infinite;
}

@keyframes cyberpunkPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(1.1); }
}

/* ========== 特殊主题的数学公式优化 ========== */

/* 波普艺术主题的数学公式 */
.card.pop .math-inline,
.card.pop .math-block {
    background: rgba(255, 255, 255, 0.95) !important;
    color: #2d3436 !important;
    border: 2px solid #000 !important;
    border-radius: 4px !important;
    padding: 4px 8px !important;
    font-weight: normal !important;
    text-shadow: none !important;
    box-shadow: 2px 2px 0px #000 !important;
}

.card.pop .math-block {
    margin: 10px 0 !important;
    padding: 12px !important;
}

/* 字节范主题的数学公式 */
.card.bytedance .math-inline,
.card.bytedance .math-block {
    background: rgba(255, 255, 255, 0.95) !important;
    color: #1f2937 !important;
    border: 1px solid #374151 !important;
    border-radius: 6px !important;
    padding: 4px 8px !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}

.card.bytedance .math-block {
    margin: 10px 0 !important;
    padding: 12px !important;
    border-left: 3px solid #fe2c55 !important;
}

/* 赛博朋克主题的数学公式 */
.card.cyberpunk .math-inline,
.card.cyberpunk .math-block {
    background: rgba(0, 0, 0, 0.8) !important;
    color: #00ffff !important;
    border: 1px solid #00ffff !important;
    border-radius: 2px !important;
    padding: 4px 8px !important;
    font-family: 'Courier New', monospace !important;
    text-shadow: 0 0 5px #00ffff !important;
    box-shadow: 0 0 10px rgba(0, 255, 255, 0.3) !important;
}

.card.cyberpunk .math-block {
    margin: 10px 0 !important;
    padding: 12px !important;
    border-left: 3px solid #00ff00 !important;
}



/* ========== 兼容旧主题样式 ========== */

/* 科技蓝调 */
.card.tech {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

/* 保留优雅紫调，更新为独特的紫色渐变 */
.card.elegant {
    background: linear-gradient(135deg, #a8caba 0%, #5d4e75 100%);
    color: white;
}

/* 保留日落黄昏，确保与其他主题区别 */
.card.sunset {
    background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
    color: #8b4513;
}

/* 删除重复主题：ocean和aurora已删除，因为与tech和elegant重复 */

/* 删除重复主题：rose已删除，因为与warm重复 */

/* 森林绿意 */
.card.forest {
    background: linear-gradient(135deg, #134e5e 0%, #71b280 100%);
    color: white;
}

/* 删除重复主题：sky与ice重复，lavender与xiaohongshu重复 */



/* 企业蓝 */
.card.corporate {
    background: linear-gradient(135deg, #2d3436 0%, #636e72 100%);
    color: white;
}





/* 金融绿 */
.card.finance {
    background: linear-gradient(135deg, #00b894 0%, #00cec9 100%);
    color: white;
}

/* 霓虹粉 */
.card.neon {
    background: linear-gradient(135deg, #fd79a8 0%, #e84393 100%);
    color: white;
}

/* 删除重复主题：retro、pastel与gold重复，galaxy与tech重复 */





/* 保留奢华金作为金色系代表 */
.card.gold {
    background: linear-gradient(135deg, #fdcb6e 0%, #e17055 100%);
    color: white;
}

/* 删除重复主题：midnight与executive重复 */

/* ========== 艺术主题样式 ========== */

/* 杂志封面风格 - 简化版确保导出一致性 */
.card.magazine {
    background: linear-gradient(135deg, #ffffff 0%, #f1f3f4 100%);
    color: #2d3436;
    border: 5px solid #007bff;
    border-radius: 4px;
    position: relative;
    box-shadow:
        0 8px 25px rgba(0, 123, 255, 0.2),
        inset 0 0 30px rgba(0, 123, 255, 0.05);
}









/* 几何图案风格 */
.card.geometric {
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
    color: white;
    text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.8);
    border: 3px solid #a855f7;
    position: relative;
    overflow: hidden;
}

.card.geometric::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background:
        linear-gradient(45deg, transparent 40%, rgba(255, 255, 255, 0.05) 42%, rgba(255, 255, 255, 0.05) 58%, transparent 60%),
        linear-gradient(-45deg, transparent 40%, rgba(255, 255, 255, 0.05) 42%, rgba(255, 255, 255, 0.05) 58%, transparent 60%);
    background-size: 60px 60px;
    animation: geometricMove 20s linear infinite;
    pointer-events: none;
}

@keyframes geometricMove {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* 复古装饰风格 */
.card.vintage {
    background:
        radial-gradient(circle at center, rgba(139, 69, 19, 0.1) 0%, transparent 70%),
        linear-gradient(135deg, #f4e4bc 0%, #d4af37 100%);
    color: #8b4513;
    border: 8px solid #d4af37;
    border-style: double;
    position: relative;
}

.card.vintage::before {
    content: '❦';
    position: absolute;
    top: 10px;
    left: 10px;
    font-size: 24px;
    color: #d4af37;
}

.card.vintage::after {
    content: '❦';
    position: absolute;
    bottom: 10px;
    right: 10px;
    font-size: 24px;
    color: #d4af37;
    transform: rotate(180deg);
}

/* 现代艺术风格 */
.card.modern {
    background:
        linear-gradient(90deg, #ff6b6b 0%, #ff6b6b 33%, #4ecdc4 33%, #4ecdc4 66%, #45b7d1 66%);
    color: white;
    position: relative;
    overflow: hidden;
}

.card.modern::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    border-left: 100px solid transparent;
    border-top: 100px solid rgba(255, 255, 255, 0.2);
}





/* 笔记本风格 */
.card.notebook {
    background: #fafafa;
    color: #333;
    border-left: 4px solid #007bff;
    border-top: 1px solid #ddd;
    border-right: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    border-radius: 0;
    position: relative;
    font-family: 'Georgia', serif;
    line-height: 1.8;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.card.notebook::before {
    content: '';
    position: absolute;
    left: 40px;
    top: 0;
    bottom: 0;
    width: 1px;
    background: rgba(0, 123, 255, 0.3);
}

/* 纸质纹理风格 */
.card.paper {
    background:
        radial-gradient(circle at 25% 25%, rgba(139, 69, 19, 0.05) 0%, transparent 50%),
        radial-gradient(circle at 75% 75%, rgba(139, 69, 19, 0.05) 0%, transparent 50%),
        linear-gradient(135deg, #faf0e6 0%, #f5deb3 100%);
    color: #8b4513;
    box-shadow:
        inset 0 0 20px rgba(139, 69, 19, 0.1),
        0 4px 8px rgba(0, 0, 0, 0.1);
    position: relative;
}

.card.paper::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        repeating-linear-gradient(
            45deg,
            transparent,
            transparent 1px,
            rgba(139, 69, 19, 0.02) 1px,
            rgba(139, 69, 19, 0.02) 2px
        );
    pointer-events: none;
}

/* 水墨画风格 */
.card.ink {
    background:
        radial-gradient(circle at 20% 30%, rgba(0, 0, 0, 0.1) 0%, transparent 40%),
        radial-gradient(circle at 80% 70%, rgba(0, 0, 0, 0.05) 0%, transparent 50%),
        linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    color: #2d3436;
    border: none;
    border-radius: 8px;
    position: relative;
    font-family: 'STKaiti', 'KaiTi', serif;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}

.card.ink::before {
    content: '';
    position: absolute;
    top: 10px;
    right: 15px;
    width: 60px;
    height: 60px;
    background:
        radial-gradient(circle at 30% 30%, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.3) 40%, transparent 70%),
        radial-gradient(circle at 70% 60%, rgba(0, 0, 0, 0.4) 0%, transparent 50%);
    border-radius: 50%;
    opacity: 0.6;
    pointer-events: none;
}