:root {
            --primary: #07c160; /* 默认微信绿 */
            --bg: #f5f5f7;
            --border: #e0e0e0;
        }

        body { margin: 0; display: flex; flex-direction: column; height: 100vh; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background: var(--bg); -webkit-tap-highlight-color: transparent; }
        
        /* 移动端基础优化 */
        * {
            -webkit-tap-highlight-color: transparent;
            -webkit-touch-callout: none;
        }
        
        button, select {
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
        }
        
        /* 顶部工具栏 */
        .toolbar {
            height: 60px; background: #fff; border-bottom: none;
            display: flex; align-items: center; justify-content: space-between; padding: 0 20px;
            box-shadow: none; z-index: 10;
        }
        .toolbar h1 { font-size: 18px; margin: 0; display: flex; align-items: center; gap: 10px; }
        .toolbar .actions { display: flex; gap: 10px; }
        
        /* 移动端菜单收纳按钮 */
        .mobile-menu-collapse-btn {
            display: none;
            width: 32px;
            height: 32px;
            border: none;
            background: transparent;
            cursor: pointer;
            padding: 4px;
            border-radius: 4px;
            transition: all 0.2s;
        }
        .mobile-menu-collapse-btn:hover {
            background: #f0f0f0;
        }
        .mobile-menu-collapse-btn svg {
            width: 24px;
            height: 24px;
        }
        
        select, button {
            padding: 8px 12px; border: 1px solid #ddd; border-radius: 6px; cursor: pointer;
            font-size: 14px; background: #fff; transition: all 0.2s;
        }
        button:hover { background: #f0f0f0; }
        .btn-primary { 
            background: #07c160; 
            color: white; 
            border-color: #07c160; 
            font-weight: 500; 
        }
        .btn-primary:hover { 
            opacity: 0.9; 
            background: #07c160; 
        }
        
        /* AI按钮样式 - 圆形、渐变彩色边框、旋转动画 */
        .ai-btn {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: #000000;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            position: relative;
            padding: 0;
            border: 3px solid transparent;
            background-clip: padding-box;
            margin-right: 15px;
        }
        
        .ai-btn::before {
            content: '';
            position: absolute;
            top: -3px;
            left: -3px;
            right: -3px;
            bottom: -3px;
            border-radius: 50%;
            background: linear-gradient(45deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #9400d3, #ff0000);
            background-size: 400% 400%;
            z-index: -1;
            animation: gradientRotate 8s ease infinite;
        }
        
        @keyframes gradientRotate {
            0% {
                background-position: 0% 50%;
                transform: rotate(0deg);
            }
            50% {
                background-position: 100% 50%;
            }
            100% {
                background-position: 0% 50%;
                transform: rotate(360deg);
            }
        }
        
        .ai-btn svg {
            width: 24px;
            height: 24px;
        }
        
        .ai-btn:hover {
            opacity: 0.9;
        }
        
        /* 导入导出按钮特定样式 */
        .import-export-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 2px;
        }
        
        /* 导入导出按钮和平台选择按钮的SVG图标样式 */
        .import-export-btn svg, 
        button[onclick="showPlatformSelector()"] svg {
            max-width: 24px;
            max-height: 24px;
        }
        .btn-no-color {
            background: transparent !important;
            color: #333 !important;
            border: 1px solid #ddd !important;
        }
        .btn-no-color:hover {
            background: #f0f0f0 !important;
        }

        /* 主体区域 */
        .main { flex: 1; display: flex; overflow: hidden; position: relative; }
        
        /* 标签页头部 - 默认隐藏，仅移动端显示 */
        .tab-header {
            display: none;
        }
        
        .editor-box, .preview-box { width: 50%; height: 100%; display: flex; flex-direction: column; overflow: hidden; }
        .editor-box { border-right: 1px solid var(--border); background: #282c34; position: relative; }
        
        /* 目录面板样式 */
        .toc-panel {
            width: 0;
            background: #21252b;
            border-right: 1px solid #3e4451;
            overflow-y: auto;
            transition: width 0.3s ease;
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            z-index: 5;
            /* 隐藏滚动条 */
            scrollbar-width: none; /* Firefox */
            -ms-overflow-style: none; /* IE and Edge */
        }
        
        /* 隐藏Webkit浏览器的滚动条 */
        .toc-panel::-webkit-scrollbar {
            display: none; /* Chrome, Safari, Opera */
        }
        
        .toc-panel.expanded {
            width: 250px;
        }
        
        .toc-toggle-btn {
            position: absolute;
            top: 50%;
            left: 0;
            transform: translateY(-50%);
            width: 24px;
            height: 40px;
            background: #3e4451;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 10;
            transition: left 0.3s ease, background 0.2s ease;
            box-shadow: 2px 0 6px rgba(0, 0, 0, 0.3);
            padding: 0;
        }
        
        .toc-toggle-btn:hover {
            background: #4b5363;
        }
        
        .toc-toggle-btn svg {
            width: 14px;
            height: 14px;
            transition: transform 0.3s ease;
        }
        
        .toc-toggle-btn.expanded svg {
            transform: rotate(180deg);
        }
        
        .toc-panel.expanded ~ .toc-toggle-btn {
            left: 250px;
        }
        
        .toc-content {
            padding: 15px;
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        
        .toc-panel.expanded .toc-content {
            opacity: 1;
        }
        
        .toc-title {
            font-size: 14px;
            font-weight: 600;
            color: #abb2bf;
            margin-bottom: 10px;
            padding-bottom: 8px;
            border-bottom: 1px solid #3e4451;
        }
        
        .toc-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        
        .toc-item {
            padding: 6px 8px;
            cursor: pointer;
            border-radius: 4px;
            margin-bottom: 2px;
            color: #788296;
            font-size: 13px;
            transition: all 0.2s ease;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        
        .toc-item:hover {
            background: #3e4451;
            color: #abb2bf;
        }
        
        .toc-item.active {
            background: #4b5363;
            color: #fff;
        }
        
        .toc-item.level-1 {
            padding-left: 8px;
            font-weight: 600;
        }
        
        .toc-item.level-2 {
            padding-left: 20px;
        }
        
        .toc-item.level-3 {
            padding-left: 32px;
        }
        
        .toc-item.level-4 {
            padding-left: 44px;
        }
        
        .toc-item.level-5 {
            padding-left: 56px;
        }
        
        .toc-item.level-6 {
            padding-left: 68px;
        }
        
        /* 编辑器隐藏时的样式 */
        .editor-hidden .editor-box { display: none; }
        .editor-hidden .preview-box { width: 100%; }
        .editor-hidden #toggleEditorBtn { 
            position: fixed; 
            top: 70px; 
            right: 20px; 
            z-index: 1000;
        }
        
        /* 预览区隐藏时的样式 */
        .preview-hidden .preview-box { display: none; }
        .preview-hidden .editor-box { width: 100%; }
        .preview-hidden #togglePreviewBtn { 
            position: fixed; 
            top: 70px; 
            right: 20px; 
            z-index: 1000;
        }
        
        /* 编辑区隐藏时的样式 */
        .editor-hidden .editor-box { display: none; }
        .editor-hidden .preview-box { width: 100%; }
        
        /* 编辑区按钮样式 */
        #togglePreviewBtn {
            background: #282c34;
            border-color: #3e4451;
            color: #abb2bf;
        }
        
        #togglePreviewBtn:hover {
            background: #3e4451;
            border-color: #434a56;
        }
        
        #togglePreviewBtn svg {
            fill: #abb2bf;
        }
        
        #togglePreviewBtn:hover svg {
            fill: #fff;
        }
        
        textarea {
            flex: 1; width: 100%; height: 100%; background: #282c34; color: #abb2bf;
            border: none; padding: 20px; resize: none; outline: none;
            font-family: 'Menlo', 'Consolas', monospace; font-size: 15px; line-height: 1.6;
            box-sizing: border-box;
            /* 编辑区白色细滚动条 */
            scrollbar-width: thin;
            scrollbar-color: #ffffff transparent;
        }
        
        /* Webkit浏览器(Chrome, Safari)的编辑区滚动条样式 */
        textarea::-webkit-scrollbar {
            width: 6px;
        }
        
        textarea::-webkit-scrollbar-track {
            background: transparent;
        }
        
        textarea::-webkit-scrollbar-thumb {
            background-color: #ffffff;
            border-radius: 3px;
        }
        
        textarea::-webkit-scrollbar-thumb:hover {
            background-color: #f0f0f0;
        }

        .preview-box { background: #fff; position: relative; }
        .preview-content {
            flex: 1; padding: 20px; overflow-y: auto;
            width: 100%;
            box-sizing: border-box;
            /* 预览区黑色细滚动条 */
            scrollbar-width: thin;
            scrollbar-color: #000000 transparent;
        }
        
        /* Webkit浏览器(Chrome, Safari)的预览区滚动条样式 */
        .preview-content::-webkit-scrollbar {
            width: 6px;
        }
        
        .preview-content::-webkit-scrollbar-track {
            background: transparent;
        }
        
        .preview-content::-webkit-scrollbar-thumb {
            background-color: #000000;
            border-radius: 3px;
        }
        
        .preview-content::-webkit-scrollbar-thumb:hover {
            background-color: #333333;
        }
        
        /* 移动端适配 */
        @media (max-width: 768px) {
            /* 工具栏适配 - 改为两行布局 */
            .toolbar {
                height: auto;
                padding: 10px 10px 0 10px;
                flex-direction: column;
                gap: 10px;
            }
            
            /* 第一行：网站标题 */
            .toolbar h1 {
                width: 100%;
                font-size: 16px;
                justify-content: space-between;
                align-items: center;
                text-align: center;
                margin: 0;
                padding: 5px 10px;
                border-bottom: 1px solid #eee;
            }
            .toolbar h1 span:first-child {
                font-size: 20px;
            }
            
            /* 显示移动端菜单收纳按钮 */
            .mobile-menu-collapse-btn {
                display: flex;
                align-items: center;
                justify-content: center;
            }
            
            /* 第二行：操作按钮 */
            .toolbar .actions {
                width: 100%;
                display: flex;
                flex-wrap: wrap;
                justify-content: center;
                gap: 8px;
                padding: 5px 0;
            }
            
            /* 按钮和选择器适配 */
            button, select {
                padding: 6px 8px;
                font-size: 12px;
            }
            
            /* AI按钮适配 */
            .ai-btn {
                width: 36px;
                height: 36px;
                margin-right: 0;
            }
            .ai-btn svg {
                width: 20px;
                height: 20px;
            }
            
            /* 导入导出按钮适配 */
            .import-export-btn, button[onclick="showPlatformSelector()"] {
                width: 36px !important;
                height: 36px !important;
            }
            .import-export-btn svg, button[onclick="showPlatformSelector()"] svg {
                max-width: 20px;
                max-height: 20px;
            }
            
            /* 颜色选择器按钮适配 */
            #colorPickerBtn {
                padding: 6px 8px;
                font-size: 16px;
            }
            
            /* 主体区域适配 */
            .main { 
                flex: 1;
                display: flex;
                flex-direction: column; 
                position: relative;
                overflow: hidden;
            }
            
            /* 锁定视图切换按钮 */
            #viewSwitchBtn {
                pointer-events: none;
                opacity: 0.5;
                cursor: not-allowed;
            }
            
            /* 工具栏和菜单栏收纳状态 */
            .toolbar-menu-collapsed .toolbar .actions,
            .toolbar-menu-collapsed .markdown-toolbar {
                display: none;
            }
            
            .toolbar-menu-collapsed .main {
                margin-top: 0;
            }
            
            /* 移动端菜单收纳状态 */
            .mobile-menu-collapsed .toolbar .actions {
                display: none;
            }
            
            .mobile-menu-collapsed .mobile-menu-collapse-btn svg {
                transform: rotate(180deg);
            }
            
            /* 标签页头部样式 - 仅移动端显示 */
            .tab-header {
                display: flex;
                background: #21252b;
                border-bottom: 1px solid #3e4451;
                position: relative;
                z-index: 1;
                flex-shrink: 0;
                height: 40px;
                margin: 0;
            }
            
            /* 预览区激活时，标签页头部变成白色 */
            .main.preview-active .tab-header {
                background: #ffffff;
                border-bottom: 1px solid #e0e0e0;
            }
            
            .tab-btn {
                flex: 1;
                padding: 6px 2px;
                background: #21252b;
                border: none;
                color: #abb2bf;
                font-size: 11px;
                cursor: pointer;
                transition: all 0.2s ease;
                border-bottom: 2px solid transparent;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                position: relative;
                outline: none;
                -webkit-tap-highlight-color: transparent;
            }
            
            .tab-btn:active {
                transform: scale(0.95);
                opacity: 0.8;
            }
            
            /* 编辑区激活时，所有按钮都是黑色 */
            .tab-btn {
                background: #21252b;
                color: #abb2bf;
            }
            
            .tab-btn.active {
                color: #61afef;
                border-bottom: 3px solid #61afef;
                background: #282c34;
                font-weight: bold;
            }
            
            .tab-btn:hover {
                background: #282c34;
            }
            
            /* 预览区激活时，所有按钮都是白色 */
            .main.preview-active .tab-btn {
                background: #ffffff;
                color: #333333;
            }
            
            .main.preview-active .tab-btn.active {
                color: #61afef;
                border-bottom: 3px solid #61afef;
                background: #f0f0f0;
                font-weight: bold;
            }
            
            .main.preview-active .tab-btn:hover {
                background: #f0f0f0;
            }
            
            /* 收纳展开按钮样式 */
            .collapse-btn {
                flex: 1;
                display: flex;
                align-items: center;
                justify-content: center;
                padding: 0;
            }
            
            .collapse-btn svg {
                transition: transform 0.3s ease;
            }
            
            .toolbar-menu-collapsed .collapse-btn svg {
                transform: rotate(180deg);
            }
            
            /* 编辑器和预览区容器 */
            .editor-box, .preview-box { 
                width: 100%; 
                height: 100%; 
                position: relative; 
                top: 0; 
                left: 0;
                box-sizing: border-box;
                overflow: hidden;
                display: flex;
                flex-direction: column;
            }
            
            /* 目录面板移动端适配 */
            .toc-panel {
                position: absolute;
                top: 0;
                left: 0;
                height: 100%;
                z-index: 100;
            }
            
            .toc-panel.expanded {
                width: 200px;
            }
            
            .toc-toggle-btn {
                left: 0;
                width: 20px;
                height: 36px;
                background: #3e4451;
                border-radius: 4px;
                box-shadow: 2px 0 6px rgba(0, 0, 0, 0.3);
                transition: left 0.3s ease, background 0.2s ease;
                padding: 0;
            }
            
            .toc-toggle-btn:hover {
                background: #4b5363;
            }
            
            .toc-toggle-btn svg {
                width: 12px;
                height: 12px;
                transition: transform 0.3s ease;
            }
            
            .toc-toggle-btn.expanded svg {
                transform: rotate(180deg);
            }
            
            .toc-panel.expanded ~ .toc-toggle-btn {
                left: 200px;
            }
            
            .toc-content {
                padding: 10px;
            }
            
            .toc-title {
                font-size: 13px;
            }
            
            .toc-item {
                font-size: 12px;
                padding: 5px 6px;
            }
            
            .toc-item.level-1 { padding-left: 6px; }
            .toc-item.level-2 { padding-left: 16px; }
            .toc-item.level-3 { padding-left: 26px; }
            .toc-item.level-4 { padding-left: 36px; }
            .toc-item.level-5 { padding-left: 46px; }
            .toc-item.level-6 { padding-left: 56px; }
            
            /* 编辑器背景色与标签页头部一致 */
            .editor-box {
                background: #21252b;
            }
            
            /* 预览区背景色与标签页头部一致 */
            .preview-box {
                background: #ffffff;
            }
            
            /* 默认显示编辑器，隐藏预览区 */
            .preview-box { display: none; }
            
            /* 当预览标签激活时显示预览区 */
            .preview-active .editor-box { display: none; }
            .preview-active .preview-box { display: flex; }
            
            /* 编辑器适配 */
            textarea {
                font-size: 14px;
                padding: 15px;
                height: 100%;
                box-sizing: border-box;
                background: #21252b;
                color: #abb2bf;
            }
            
            /* 预览区适配 */
            .preview-content {
                padding: 15px;
                height: 100%;
                overflow-y: auto;
                box-sizing: border-box;
            }
            
            /* AI聊天窗口移动端适配 - 全屏显示 */
            #ai-chat-container {
                width: 100vw !important;
                height: 100vh !important;
                top: 0 !important;
                left: 0 !important;
                transform: none !important;
                border-radius: 0 !important;
                resize: none !important;
            }
            
            #ai-chat-container.show {
                transform: none !important;
            }
            
            /* 禁用移动端的拖动和调整大小 */
            #ai-chat-container .drag-area,
            #ai-chat-container .resize-handle {
                display: none !important;
            }
            
            /* 聊天头部适配 */
            .chat-header {
                padding: 10px 15px;
            }
            .header-info h2 {
                font-size: 16px;
            }
            .header-info span {
                font-size: 12px;
            }
            
            /* 聊天消息区域适配 */
            .chat-messages {
                padding: 10px 15px;
            }
            
            /* 聊天输入区域适配 */
            .chat-input-area {
                padding: 10px 15px;
            }
            .chat-input-area textarea {
                font-size: 14px;
                padding: 10px;
            }
            .send-btn {
                padding: 10px 15px;
                font-size: 14px;
            }
            
            /* 颜色选择器移动端适配 */
            .color-picker-container {
                position: relative;
                z-index: 999999;
            }
            
            .color-picker-panel {
                position: absolute;
                top: 100%;
                left: 0;
                transform: none;
                min-width: 200px;
                max-width: 85vw;
                max-height: 70vh;
                overflow-y: auto;
                right: auto !important;
                margin: 0;
                z-index: 999999 !important;
                display: none;
                background: white;
                border: 1px solid #ddd;
                border-radius: 8px;
                padding: 12px;
                box-shadow: 0 4px 12px rgba(0,0,0,0.15);
            }
            
            .color-picker-panel.show {
                display: block;
            }
            
            .color-section {
                margin-bottom: 8px;
            }
            
            .color-section-title {
                font-size: 11px;
                margin-bottom: 4px;
            }
            
            .color-palette {
                display: flex;
                flex-wrap: wrap;
                gap: 4px;
            }
            
            .color-swatch {
                width: 28px !important;
                height: 28px !important;
            }
            
            .panel-header {
                font-size: 13px;
                margin-bottom: 8px;
                padding-bottom: 5px;
            }
            
            .panel-actions button {
                padding: 5px 10px;
                font-size: 11px;
            }
            
            /* 编辑器和预览区额外优化 */
            /* 优化移动端滚动条 */
            textarea::-webkit-scrollbar,
            .preview-content::-webkit-scrollbar {
                width: 4px;
                height: 4px;
            }
            
            textarea::-webkit-scrollbar-thumb,
            .preview-content::-webkit-scrollbar-thumb {
                border-radius: 2px;
            }
            
            /* 优化移动端触摸体验 */
            textarea,
            .preview-content {
                -webkit-overflow-scrolling: touch;
                overscroll-behavior: contain;
            }
            
            /* 预览区内容优化 */
            #preview-render {
                font-size: 15px;
                line-height: 1.6;
            }
            
            #preview-render h1 {
                font-size: 20px;
                margin: 30px 0 15px;
            }
            
            #preview-render h2 {
                font-size: 17px;
                margin: 25px 0 12px;
            }
            
            #preview-render h3 {
                font-size: 15px;
                margin: 20px 0 10px;
            }
            
            #preview-render img {
                max-width: 100%;
                margin: 15px auto;
            }
            
            #preview-render pre {
                font-size: 13px;
                padding: 12px;
                overflow-x: auto;
            }
            
            #preview-render code {
                font-size: 13px;
            }
            
            /* 优化移动端按钮点击区域 */
            button,
            select,
            .ai-btn,
            .color-swatch {
                -webkit-tap-highlight-color: transparent;
            }
            
            /* AI回复对话框移动端适配 */
            #ai-response-dialog .response-content {
                width: 95vw;
                max-width: 95vw;
            }
            
            #ai-response-dialog .title-bar {
                padding: 12px 15px;
            }
            
            #ai-response-dialog .drag-area {
                flex: 1;
                min-width: 0;
                margin-right: 10px;
            }
            
            #ai-response-dialog .drag-area h3 {
                font-size: 14px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
        }
        
        /* 小屏幕设备额外适配 (iPhone SE等) */
        @media (max-width: 375px) {
            .toolbar {
                height: 45px;
                padding: 0 8px;
            }
            .toolbar h1 {
                font-size: 12px;
            }
            .toolbar h1 span:first-child {
                font-size: 16px;
            }
            .toolbar .actions {
                gap: 3px;
            }
            
            button, select {
                padding: 5px 6px;
                font-size: 11px;
            }
            
            .ai-btn {
                width: 32px;
                height: 32px;
                margin-right: 3px;
            }
            .ai-btn svg {
                width: 18px;
                height: 18px;
            }
            
            .import-export-btn, button[onclick="showPlatformSelector()"] {
                width: 32px !important;
                height: 32px !important;
            }
            .import-export-btn svg, button[onclick="showPlatformSelector()"] svg {
                max-width: 18px;
                max-height: 18px;
            }
            
            #colorPickerBtn {
                width: 32px;
                height: 32px;
                font-size: 14px;
            }
            
            textarea {
                font-size: 13px;
                padding: 12px;
            }
            
            .preview-content {
                padding: 12px;
            }
            
            #preview-render {
                font-size: 14px;
            }
        }

        /* ---------------------------------------------------- */
        /* === 主题样式定义 (CSS Variables managed by JS) === */
        /* 基础重置 */
        #preview-render { color: #333; font-size: 16px; line-height: 1.75; text-align: justify; }
        #preview-render p { margin: 0 0 16px; letter-spacing: 0.5px; }
        #preview-render img { max-width: 100%; height: auto; display: block; margin: 20px auto; border-radius: 4px; }
        #preview-render pre { overflow-x: auto; padding: 15px; background: #f6f8fa; border-radius: 5px; margin-bottom: 20px; font-size: 14px; }
        
        /* 这些样式会被 JS 动态替换以实现“换肤” */
        .theme-style-h1 { font-size: 22px; font-weight: bold; margin: 40px 0 20px; border-bottom: 2px solid var(--primary); display: inline-block; padding-bottom: 5px; }
        .theme-style-h2 { font-size: 18px; font-weight: bold; margin: 30px 0 15px; padding-left: 10px; border-left: 4px solid var(--primary); }
        .theme-style-h3 { font-size: 16px; font-weight: bold; margin: 20px 0 10px; color: var(--primary); }
        .theme-style-quote { font-style: normal; margin: 20px 0; padding: 15px; background: rgba(0,0,0,0.03); border-left: 4px solid var(--primary); color: #666; border-radius: 0 4px 4px 0; }
        .theme-style-list { margin: 0 0 20px 20px; padding: 0; }
        .theme-style-link { color: var(--primary); text-decoration: none; border-bottom: 1px dashed var(--primary); }
        .theme-style-strong { color: var(--primary); font-weight: bold; }
        .theme-style-code { font-family: monospace; background: rgba(27,31,35,0.05); padding: 2px 4px; border-radius: 3px; color: #e01e5a; }
        
        /* 无样式原始风格 */
        .plain-style #preview-render { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; font-size: medium; line-height: normal; color: -webkit-text; background: transparent; padding: 0; margin: 0; }
        .plain-style .theme-style-h1 { font-size: 2em; font-weight: bold; margin: 0.67em 0; padding: 0; border: none; color: -webkit-text; }
        .plain-style .theme-style-h2 { font-size: 1.5em; font-weight: bold; margin: 0.83em 0; padding: 0; border: none; color: -webkit-text; }
        .plain-style .theme-style-h3 { font-size: 1.17em; font-weight: bold; margin: 1em 0; padding: 0; border: none; color: -webkit-text; }
        .plain-style .theme-style-quote { margin: 1em 40px; padding: 0; color: -webkit-text; border-left: none; }
        .plain-style .theme-style-list { margin: 1em 0; padding-left: 40px; }
        .plain-style .theme-style-link { color: -webkit-link; text-decoration: underline; cursor: auto; }
        .plain-style .theme-style-link:hover { color: -webkit-link; text-decoration: underline; }
        .plain-style .theme-style-strong { font-weight: bold; color: -webkit-text; }
        .plain-style .theme-style-code { font-family: monospace; background: transparent; padding: 0; border-radius: 0; font-size: medium; color: -webkit-text; }
        .plain-style .code-block { font-family: monospace; background: transparent; padding: 0; margin: 1em 0; white-space: pre-wrap; word-wrap: break-word; font-size: medium; color: -webkit-text; }
        .plain-style .inline-code { font-family: monospace; background: transparent; padding: 0; font-size: medium; color: -webkit-text; }
        .plain-style p { margin: 1em 0; }
        .plain-style #preview-render button:not(.btn-no-color) { background: buttonface; color: buttontext; border: medium outset; padding: 1px 6px; }
        .plain-style #preview-render button:not(.btn-no-color):hover { background: buttonface; color: buttontext; }
        .plain-style #preview-render .btn-primary { background: buttonface; color: buttontext; border: medium outset; padding: 1px 6px; }
        .plain-style #preview-render .btn-primary:hover { background: buttonface; color: buttontext; }
        
        /* 纯白空间风格 */
        .minimal-style #preview-render { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; font-size: medium; line-height: normal; color: inherit; background: transparent; padding: 20px; margin: 0; }
        .minimal-style .theme-style-h1 { font-size: 2em; font-weight: bold; margin: 0.67em 0; padding: 0; border: none; color: inherit; line-height: 1.2; }
        .minimal-style .theme-style-h2 { font-size: 1.5em; font-weight: bold; margin: 0.83em 0; padding: 0; border: none; color: inherit; line-height: 1.3; }
        .minimal-style .theme-style-h3 { font-size: 1.17em; font-weight: bold; margin: 20px 0 10px; padding: 0; border: none; color: inherit; }
        .minimal-style .theme-style-quote { margin: 1em 40px; padding: 0; color: inherit; border-left: none; }
        .minimal-style .theme-style-list { margin: 1em 0; padding-left: 40px; }
        .minimal-style .theme-style-link { color: inherit; text-decoration: underline; cursor: auto; }
        .minimal-style .theme-style-link:hover { color: inherit; text-decoration: underline; }
        .minimal-style .theme-style-strong { font-weight: bold; color: inherit; }
        .minimal-style .theme-style-code { font-family: monospace; background: transparent; padding: 0; border-radius: 0; font-size: medium; color: inherit; }
        .minimal-style .code-block { font-family: monospace; background: transparent; padding: 0; margin: 1em 0; white-space: pre-wrap; word-wrap: break-word; font-size: medium; color: inherit; }
        .minimal-style .inline-code { font-family: monospace; background: transparent; padding: 0; font-size: medium; color: inherit; }
        .minimal-style p { margin: 1em 0; }
        .minimal-style #preview-render button:not(.btn-no-color) { background: buttonface; color: buttontext; border: medium outset; padding: 1px 6px; }
        .minimal-style #preview-render button:not(.btn-no-color):hover { background: buttonface; color: buttontext; }
        .minimal-style #preview-render .btn-primary { background: buttonface; color: buttontext; border: medium outset; padding: 1px 6px; }
        .minimal-style #preview-render .btn-primary:hover { background: buttonface; color: buttontext; }
        
        /* 学术论文风格 */
        .academic-style #preview-render { font-family: 'Times New Roman', serif; font-size: 16px; line-height: 1.8; text-align: justify; color: #333; }
        .academic-style .theme-style-h1 { font-size: 24px; font-weight: bold; text-align: center; margin: 30px 0 20px; color: #000; border-bottom: none; padding-bottom: 0; }
        .academic-style .theme-style-h2 { font-size: 20px; font-weight: bold; margin: 25px 0 15px; color: #000; border-left: none; padding-left: 0; border-bottom: 1px solid #ccc; }
        .academic-style .theme-style-h3 { font-size: 18px; font-weight: bold; margin: 20px 0 10px; color: #000; }
        .academic-style .theme-style-quote { font-style: italic; margin: 20px 0; padding: 15px 20px; background: #f9f9f9; border-left: 3px solid #666; color: #555; font-size: 15px; }
        .academic-style .theme-style-list { margin: 0 0 20px 30px; }
        .academic-style .theme-style-link { color: #0066cc; text-decoration: underline; border-bottom: none; }
        .academic-style .theme-style-strong { color: #000; font-weight: bold; }
        .academic-style .theme-style-code { font-family: 'Courier New', monospace; background: #f5f5f5; padding: 2px 4px; border-radius: 2px; color: #333; font-size: 14px; }
        .academic-style .code-block { font-family: 'Courier New', monospace; background: #f5f5f5; padding: 10px; margin: 1em 0; white-space: pre-wrap; word-wrap: break-word; font-size: 14px; color: #333; }
        .academic-style .inline-code { font-family: 'Courier New', monospace; background: #f5f5f5; padding: 2px 4px; font-size: 14px; color: #333; }
        .academic-style p { text-indent: 2em; margin: 0 0 16px; }
        .academic-style #preview-render button:not(.btn-no-color) { background: var(--primary); color: #ffffff; border-color: var(--primary); }
        .academic-style #preview-render button:not(.btn-no-color):hover { opacity: 0.9; background: var(--primary); }
        .academic-style #preview-render .btn-primary { background: var(--primary); color: #ffffff; border-color: var(--primary); font-weight: 500; }
        .academic-style #preview-render .btn-primary:hover { opacity: 0.9; background: var(--primary); }
        
        /* 文艺清新风格 */
        .literary-style #preview-render { font-family: 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif; font-size: 17px; line-height: 1.8; text-align: justify; color: #444; background: linear-gradient(to bottom, #ffffff, #fafafa); padding: 20px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.05); }
        .literary-style .theme-style-h1 { font-size: 28px; font-weight: 300; text-align: center; margin: 40px 0 25px; color: #5d4037; position: relative; padding-bottom: 15px; }
        .literary-style .theme-style-h1:after { content: ""; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 80px; height: 2px; background: linear-gradient(to right, transparent, #8d6e63, transparent); }
        .literary-style .theme-style-h2 { font-size: 22px; font-weight: 400; margin: 30px 0 20px; color: #6d4c41; padding-left: 15px; border-left: 3px solid #a1887f; background: linear-gradient(to right, rgba(161, 136, 127, 0.1), transparent); padding-top: 8px; padding-bottom: 8px; }
        .literary-style .theme-style-h3 { font-size: 18px; font-weight: 500; margin: 25px 0 15px; color: #795548; position: relative; }
        .literary-style .theme-style-h3:before { content: "◆"; position: absolute; left: -15px; color: #a1887f; font-size: 14px; }
        .literary-style .theme-style-quote { font-style: italic; margin: 25px 0; padding: 20px 25px; background: linear-gradient(to right, #f5f5f5, #ffffff); border-left: none; border-right: 4px solid #bcaaa4; color: #5d4037; font-size: 16px; position: relative; border-radius: 0 8px 8px 0; }
        .literary-style .theme-style-quote:before { content: '"'; position: absolute; top: 5px; left: 10px; font-size: 40px; color: rgba(161, 136, 127, 0.3); font-family: Georgia; }
        .literary-style .theme-style-list { margin: 0 0 20px 25px; list-style-type: none; }
        .literary-style .theme-style-list li { position: relative; padding-left: 25px; margin-bottom: 12px; }
        .literary-style .theme-style-list li:before { content: "✧"; position: absolute; left: 0; color: #a1887f; }
        .literary-style .theme-style-link { color: #795548; text-decoration: none; border-bottom: 1px solid rgba(121, 85, 72, 0.3); transition: all 0.2s ease; }
        .literary-style .theme-style-link:hover { color: #5d4037; border-bottom-color: #5d4037; }
        .literary-style .theme-style-strong { color: #5d4037; font-weight: 600; }
        .literary-style .theme-style-code { font-family: 'Fira Code', 'Consolas', monospace; background: linear-gradient(to right, #efebe9, #ffffff); padding: 4px 8px; border-radius: 4px; color: #5d4037; font-size: 15px; border: 1px solid rgba(161, 136, 127, 0.2); }
        .literary-style .code-block { font-family: 'Fira Code', 'Consolas', monospace; background: linear-gradient(to right, #efebe9, #ffffff); padding: 10px; margin: 1em 0; white-space: pre-wrap; word-wrap: break-word; font-size: 15px; color: #5d4037; border: 1px solid rgba(161, 136, 127, 0.2); border-radius: 4px; }
        .literary-style .inline-code { font-family: 'Fira Code', 'Consolas', monospace; background: linear-gradient(to right, #efebe9, #ffffff); padding: 4px 8px; font-size: 15px; color: #5d4037; border: 1px solid rgba(161, 136, 127, 0.2); border-radius: 4px; }
        .literary-style #preview-render button:not(.btn-no-color) { background: var(--primary); color: #ffffff; border-color: var(--primary); }
        .literary-style #preview-render button:not(.btn-no-color):hover { opacity: 0.9; background: var(--primary); }
        .literary-style #preview-render .btn-primary { background: var(--primary); color: #ffffff; border-color: var(--primary); font-weight: 500; }
        .literary-style #preview-render .btn-primary:hover { opacity: 0.9; background: var(--primary); }
        
        /* 商务报告风格 */
        .business-style #preview-render { font-family: 'Arial', sans-serif; font-size: 16px; line-height: 1.7; text-align: justify; color: #333; }
        .business-style .theme-style-h1 { font-size: 22px; font-weight: bold; margin: 30px 0 20px; color: #1a3a5f; border-bottom: 3px solid #1a3a5f; padding-bottom: 8px; }
        .business-style .theme-style-h2 { font-size: 18px; font-weight: bold; margin: 25px 0 15px; color: #1a3a5f; background: #f0f5f9; padding: 8px 12px; border-left: 5px solid #1a3a5f; border-radius: 0 4px 4px 0; }
        .business-style .theme-style-h3 { font-size: 16px; font-weight: bold; margin: 20px 0 10px; color: #1a3a5f; }
        .business-style .theme-style-quote { font-style: normal; margin: 20px 0; padding: 15px 20px; background: #eef2f7; border-left: 4px solid #1a3a5f; color: #444; }
        .business-style .theme-style-list { margin: 0 0 20px 25px; }
        .business-style .theme-style-link { color: #1a3a5f; text-decoration: none; border-bottom: 1px solid #1a3a5f; }
        .business-style .theme-style-strong { color: #1a3a5f; font-weight: bold; }
        .business-style .theme-style-code { font-family: 'Consolas', monospace; background: #eef2f7; padding: 2px 5px; border-radius: 3px; color: #1a3a5f; font-size: 14px; }
        .business-style .code-block { font-family: 'Consolas', monospace; background: #eef2f7; padding: 10px; margin: 1em 0; white-space: pre-wrap; word-wrap: break-word; font-size: 14px; color: #1a3a5f; border-radius: 3px; }
        .business-style .inline-code { font-family: 'Consolas', monospace; background: #eef2f7; padding: 2px 5px; font-size: 14px; color: #1a3a5f; border-radius: 3px; }
        .business-style #preview-render button:not(.btn-no-color) { background: var(--primary); color: #ffffff; border-color: var(--primary); }
        .business-style #preview-render button:not(.btn-no-color):hover { opacity: 0.9; background: var(--primary); }
        .business-style #preview-render .btn-primary { background: var(--primary); color: #ffffff; border-color: var(--primary); font-weight: 500; }
        .business-style #preview-render .btn-primary:hover { opacity: 0.9; background: var(--primary); }
        
        /* 教程指南风格 */
        .tutorial-style #preview-render { font-family: 'Inter', 'Segoe UI', Tahoma, sans-serif; font-size: 16px; line-height: 1.7; text-align: left; color: #2d3748; background: #f7fafc; padding: 25px; border-radius: 8px; border: 1px solid #e2e8f0; }
        .tutorial-style .theme-style-h1 { font-size: 28px; font-weight: 600; margin: 25px 0 20px; color: #2c3e50; border-bottom: 2px solid #3498db; padding-bottom: 10px; }
        .tutorial-style .theme-style-h2 { font-size: 22px; font-weight: 600; margin: 20px 0 15px; color: #2c3e50; border-left: 4px solid #3498db; padding-left: 15px; }
        .tutorial-style .theme-style-h3 { font-size: 18px; font-weight: 600; margin: 15px 0 10px; color: #2c3e50; }
        .tutorial-style .theme-style-quote { font-style: normal; margin: 20px 0; padding: 15px 20px; background: #e8f4fc; border-left: 4px solid #3498db; color: #2c5282; font-size: 16px; }
        .tutorial-style .theme-style-list { margin: 0 0 20px 0; padding-left: 20px; }
        .tutorial-style .theme-style-list li { margin-bottom: 8px; font-size: 16px; }
        .tutorial-style .theme-style-link { color: #3498db; text-decoration: none; font-weight: 500; }
        .tutorial-style .theme-style-link:hover { text-decoration: underline; }
        .tutorial-style .theme-style-strong { color: #2c3e50; font-weight: 600; }
        .tutorial-style .theme-style-code { font-family: 'Consolas', monospace; background: #f1f5f9; color: #e74c3c; padding: 2px 6px; border-radius: 4px; font-size: 15px; }
        .tutorial-style .code-block { font-family: 'Consolas', monospace; background: #f1f5f9; padding: 15px; margin: 1em 0; white-space: pre-wrap; word-wrap: break-word; font-size: 15px; border-radius: 4px; color: #333; }
        .tutorial-style .inline-code { font-family: 'Consolas', monospace; background: #f1f5f9; padding: 2px 6px; font-size: 15px; border-radius: 4px; color: #e74c3c; }
        .tutorial-style #preview-render button:not(.btn-no-color) { background: var(--primary); color: #ffffff; border-color: var(--primary); }
        .tutorial-style #preview-render button:not(.btn-no-color):hover { opacity: 0.9; }
        .tutorial-style #preview-render .btn-primary { background: var(--primary); color: #ffffff; border-color: var(--primary); font-weight: 500; }
        .tutorial-style #preview-render .btn-primary:hover { opacity: 0.9; }
        
        /* 新闻资讯风格 */
        .news-style #preview-render { font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 16px; line-height: 1.8; text-align: justify; color: #333; }
        .news-style .theme-style-h1 { font-size: 28px; font-weight: bold; text-align: center; margin: 20px 0 15px; color: #222; line-height: 1.3; }
        .news-style .theme-style-h2 { font-size: 20px; font-weight: bold; margin: 25px 0 15px; color: #222; border-top: 1px solid #ddd; padding-top: 15px; border-left: none; padding-left: 0; }
        .news-style .theme-style-h3 { font-size: 18px; font-weight: bold; margin: 20px 0 10px; color: #222; }
        .news-style .theme-style-quote { font-style: italic; margin: 20px 0; padding: 15px 20px; background: #f5f5f5; border-left: none; border-right: 3px solid #ccc; color: #555; font-size: 16px; }
        .news-style .theme-style-list { margin: 0 0 20px 25px; }
        .news-style .theme-style-link { color: #0066cc; text-decoration: underline; border-bottom: none; }
        .news-style .theme-style-strong { color: #222; font-weight: bold; }
        .news-style .theme-style-code { font-family: 'Monaco', monospace; background: #f5f5f5; padding: 2px 4px; border-radius: 2px; color: #333; font-size: 14px; }
        .news-style .code-block { font-family: 'Monaco', monospace; background: #f5f5f5; padding: 10px; margin: 1em 0; white-space: pre-wrap; word-wrap: break-word; font-size: 14px; color: #333; border-radius: 2px; }
        .news-style .inline-code { font-family: 'Monaco', monospace; background: #f5f5f5; padding: 2px 4px; font-size: 14px; color: #333; border-radius: 2px; }
        .news-style #preview-render button:not(.btn-no-color) { background: var(--primary); color: #ffffff; border-color: var(--primary); }
        .news-style #preview-render button:not(.btn-no-color):hover { opacity: 0.9; background: var(--primary); }
        .news-style #preview-render .btn-primary { background: var(--primary); color: #ffffff; border-color: var(--primary); font-weight: 500; }
        .news-style #preview-render .btn-primary:hover { opacity: 0.9; background: var(--primary); }

        /* 颜色选择器样式 */
        .color-picker-container {
            position: relative;
            display: inline-block;
        }
        
        #colorPickerBtn {
            width: 40px;
            height: 40px;
            padding: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
        }
        
        
        /* 大屏幕设备颜色选择器样式 */
        @media (min-width: 769px) {
            .color-picker-panel {
                position: absolute;
                top: 100%;
                right: 0;
                background: white;
                border: 1px solid #ddd;
                border-radius: 8px;
                padding: 12px;
                box-shadow: 0 4px 12px rgba(0,0,0,0.15);
                z-index: 1000;
                min-width: 260px;
                display: none;
            }
            
            .color-picker-panel.show {
                display: block;
            }
            
            .color-section {
                margin-bottom: 10px;
            }
            
            .color-section-title {
                font-size: 12px;
                font-weight: bold;
                margin-bottom: 6px;
                color: #333;
            }
            
            .color-palette {
                display: flex;
                flex-wrap: wrap;
                gap: 5px;
                margin-bottom: 10px;
            }
            
            .color-swatch {
                width: 36px;
                height: 36px;
                border-radius: 4px;
                cursor: pointer;
                border: 2px solid transparent;
                transition: all 0.2s ease;
                position: relative;
            }
            
            .color-swatch:hover {
                transform: scale(1.1);
                box-shadow: 0 2px 8px rgba(0,0,0,0.2);
            }
            
            .color-swatch.selected {
                border-color: #333;
            }
            
            .color-swatch.selected::after {
                content: '✓';
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                color: white;
                font-weight: bold;
                text-shadow: 0 0 2px rgba(0,0,0,0.5);
            }
            
            .panel-header {
                font-size: 16px;
                font-weight: bold;
                margin-bottom: 15px;
                padding-bottom: 8px;
                border-bottom: 1px solid #eee;
            }
            
            .panel-actions {
                display: flex;
                justify-content: space-between;
                margin-top: 15px;
                padding-top: 10px;
                border-top: 1px solid #eee;
            }
            
            .panel-actions button {
                font-size: 12px;
                padding: 6px 10px;
            }
        }
        
        /* Markdown编辑工具栏样式 */
        .markdown-toolbar {
            background: linear-gradient(to bottom, #ffffff, #f8f9fa);
            border-top: none;
            border-bottom: 1px solid #d1d5db;
            border-left: 1px solid #d1d5db;
            border-right: 1px solid #d1d5db;
            border-radius: 0 0 6px 6px;
            padding: 6px 8px;
            margin: 0 0 10px 0;
            display: flex;
            flex-wrap: wrap;
            gap: 0;
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
            transition: all 0.2s ease;
            align-items: center;
            min-height: 44px;
        }
        
        .markdown-toolbar:hover {
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        }
        
        .toolbar-group {
            display: flex;
            gap: 1px;
            padding: 0;
            margin: 0;
            position: relative;
        }
        
        .toolbar-group:not(:last-child)::after {
            content: '';
            position: absolute;
            right: -1px;
            top: 8px;
            bottom: 8px;
            width: 1px;
            background: linear-gradient(to bottom, transparent, #d1d5db, transparent);
        }
        
        .toolbar-group:first-child {
            margin-left: 4px;
        }
        
        .toolbar-group:not(:first-child) {
            margin-left: 8px;
        }
        
        .toolbar-group:last-child {
            margin-right: 4px;
        }
        
        .toolbar-btn {
            background: transparent;
            border: 1px solid transparent;
            border-radius: 4px;
            padding: 0;
            margin: 2px;
            cursor: pointer;
            font-size: 14px;
            color: #374151;
            transition: all 0.2s ease;
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            position: relative;
            overflow: hidden;
        }
        
        .toolbar-btn:hover {
            background: #f3f4f6;
            border-color: #d1d5db;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            position: relative;
            top: -1px;
        }
        
        .toolbar-btn:active {
            background: #e5e7eb;
            border-color: #9ca3af;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
            position: relative;
            top: 0;
        }
        
        .toolbar-btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }
        
        .toolbar-btn:disabled .undo-icon,
        .toolbar-btn:disabled .redo-icon {
            fill: #999999;
        }
        
        .toolbar-btn:not(:disabled) .undo-icon,
        .toolbar-btn:not(:disabled) .redo-icon {
            fill: #333333;
        }
        
        .toolbar-btn svg {
            max-width: 18px;
            max-height: 18px;
            transition: all 0.2s ease;
        }
        
        /* 视图切换按钮的图标放大 */
        #viewSwitchBtn svg {
            max-width: 24px;
            max-height: 24px;
        }
        
        /* 表情按钮的图标放大 */
        button[onclick="showEmojiPicker()"] svg {
            max-width: 28px !important;
            max-height: 28px !important;
        }
        
        .toolbar-btn:hover svg {
            transform: scale(1.1);
        }
        
        /* 调整工具栏按钮内的文本大小和居中 */
        .toolbar-btn strong,
        .toolbar-btn em,
        .toolbar-btn s,
        .toolbar-btn:not(:has(svg)) {
            font-size: 16px;
            line-height: 1;
        }
        
        /* 一键排版按钮特殊样式 - 解除宽度约束 */
        .autoformat-btn {
            width: auto !important;
            min-width: 90px;
            padding: 0 10px !important;
            gap: 4px;
        }
        
        .autoformat-btn svg {
            width: 14px !important;
            height: 14px !important;
        }
        
        .autoformat-btn span {
            font-size: 12px;
            white-space: nowrap;
        }
        
        /* 润色按钮特殊样式 */
        .polish-btn {
            width: 32px !important;
            height: 32px !important;
            padding: 0 !important;
        }
        
        .polish-btn svg {
            width: 14px !important;
            height: 14px !important;
        }
        
        /* 链接按钮图标放大 */
        button[onclick="insertMarkdown('link')"] svg {
            width: 22px !important;
            height: 22px !important;
        }
        
        /* 清空按钮图标放大 */
        button[onclick="clearEditor()"] svg {
            width: 22px !important;
            height: 22px !important;
        }
        
        /* 工具栏收纳动画样式 - 简化版本 */
        .markdown-toolbar {
            transition: all 0.3s ease;
        }
        
        .toolbar-group {
            transition: all 0.3s ease;
            overflow: hidden;
        }
        
        /* 展开/收起按钮图标旋转效果 */
        #toggleEditorBtn svg {
            transition: transform 0.3s ease;
        }
        
        .toolbar-collapsed #expandIcon {
            transform: rotate(180deg);
        }
        
        /* 平台选择弹窗样式 */
        .platform-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 1000;
            justify-content: center;
            align-items: center;
        }
        
        .platform-content {
            background-color: white;
            border-radius: 8px;
            width: 400px;
            max-width: 90%;
            padding: 20px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
            animation: modalFadeIn 0.3s ease;
        }
        
        @keyframes modalFadeIn {
            from { opacity: 0; transform: translateY(-20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        @keyframes slideIn {
            from { opacity: 0; transform: translateX(100px); }
            to { opacity: 1; transform: translateX(0); }
        }
        
        @keyframes slideDown {
            from {
                opacity: 0;
                transform: translateY(-10px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        @keyframes modalFadeIn {
            from {
                opacity: 0;
                transform: scale(0.95);
            }
            to {
                opacity: 1;
                transform: scale(1);
            }
        }
        
        .platform-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            border-bottom: 1px solid #eee;
            padding-bottom: 10px;
        }
        
        .platform-title {
            font-size: 18px;
            font-weight: bold;
            margin: 0;
        }
        
        .platform-close {
            background: none;
            border: none;
            font-size: 24px;
            cursor: pointer;
            color: #999;
            padding: 0;
            width: 30px;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            transition: all 0.2s;
        }
        
        .platform-close:hover {
            background-color: #f5f5f5;
            color: #333;
        }
        
        .platform-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
            gap: 8px;
            margin-bottom: 20px;
        }
        
        /* 表情选择框样式 */
        .emoji-picker {
            position: absolute;
            top: 60px;
            right: 50px;
            width: 350px;
            max-height: 400px;
            background: white;
            border: 1px solid #d1d5db;
            border-radius: 8px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
            z-index: 1000;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }
        
        .emoji-picker-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 8px 12px;
            border-bottom: 1px solid #e5e7eb;
            background: #f9fafb;
        }
        
        .emoji-categories {
            display: flex;
            gap: 5px;
        }
        
        .emoji-category {
            background: transparent;
            border: none;
            border-radius: 4px;
            padding: 5px;
            cursor: pointer;
            font-size: 18px;
            transition: all 0.2s;
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .emoji-category:hover {
            background: #e5e7eb;
        }
        
        .emoji-category.active {
            background: #3b82f6;
            color: white;
        }
        
        .emoji-picker-close {
            background: transparent;
            border: none;
            font-size: 16px;
            cursor: pointer;
            color: #6b7280;
            padding: 0;
            width: 24px;
            height: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 4px;
            transition: all 0.2s;
        }
        
        .emoji-picker-close:hover {
            background: #e5e7eb;
            color: #374151;
        }
        
        .emoji-picker-content {
            flex: 1;
            overflow-y: auto;
            padding: 8px;
        }
        
        .emoji-grid {
            display: grid;
            grid-template-columns: repeat(8, 1fr);
            gap: 4px;
        }
        
        .emoji-item {
            background: transparent;
            border: none;
            border-radius: 4px;
            padding: 6px;
            cursor: pointer;
            font-size: 20px;
            transition: all 0.2s;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 36px;
            height: 36px;
            box-sizing: border-box;
        }
        
        .emoji-item:hover {
            background: #f3f4f6;
            transform: scale(1.2);
        }
        
        .emoji-item:active {
            transform: scale(0.95);
        }
        
        /* 深色主题下的表情选择框样式 */
        body.dark-theme .emoji-picker {
            background: #374151;
            border-color: #4b5563;
            color: #f9fafb;
        }
        
        body.dark-theme .emoji-picker-header {
            background: #1f2937;
            border-bottom-color: #4b5563;
        }
        
        body.dark-theme .emoji-category:hover {
            background: #4b5563;
        }
        
        body.dark-theme .emoji-item:hover {
            background: #4b5563;
        }
        
        .platform-item {
            padding: 8px 10px;
            border: 1px solid #ddd;
            border-radius: 6px;
            cursor: pointer;
            text-align: center;
            transition: all 0.2s;
            background-color: white;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-width: 50px;
            max-width: 80px;
            height: auto;
        }
        
        .platform-item:hover {
            background-color: #f5f5f5;
            border-color: #07c160;
            transform: translateY(-2px);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }
        
        .platform-icon {
            font-size: 20px;
            margin-bottom: 2px;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 24px;
        }
        
        .platform-icon svg {
            width: 24px;
            height: 24px;
        }
        
        .platform-name {
            font-size: 12px;
            font-weight: 500;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            width: 100%;
        }

        .export-tips {
            margin-top: 15px;
            padding: 12px;
            background: #f9fafb;
            border-radius: 6px;
            border-left: 3px solid #07c160;
        }

        .export-tips p {
            margin: 5px 0;
            font-size: 13px;
            color: #666;
            line-height: 1.6;
        }

        .export-tips strong {
            color: #07c160;
        }