*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#f8fafc}#root{height:100vh;width:100vw}.container{display:flex;height:100vh;background:#fff}.sidebar{width:350px;background:#f8fafc;border-right:1px solid #e2e8f0;padding:24px;overflow-y:auto}.main-content{flex:1;display:flex;flex-direction:column}.editor-container{display:flex;flex:1;height:calc(100vh - 60px);position:relative}.editor-pane{flex:1;display:flex;flex-direction:column;border-right:1px solid #e2e8f0}.preview-pane{flex:1;display:flex;flex-direction:column;background:#fff}.pane-header{padding:12px 16px;background:#f8fafc;border-bottom:1px solid #e2e8f0;font-weight:600;color:#374151;font-size:14px;display:flex;justify-content:space-between;align-items:center}.toggle-preview-btn{background:none;border:none;cursor:pointer;padding:4px 8px;border-radius:4px;font-size:16px;transition:background-color .2s;display:flex;align-items:center;justify-content:center}.toggle-preview-btn:hover{background:#e2e8f0}.editor-pane.full-width{flex:1;width:100%}.textarea{flex:1;border:none;outline:none;padding:16px;font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:14px;line-height:1.6;resize:none;background:#fff}.preview-content{flex:1;padding:16px;overflow-y:auto;background:#fff}.preview-content h1,.preview-content h2,.preview-content h3,.preview-content h4,.preview-content h5,.preview-content h6{margin-top:24px;margin-bottom:16px;font-weight:600;line-height:1.25}.preview-content h1{font-size:2em;border-bottom:1px solid #e2e8f0;padding-bottom:8px}.preview-content h2{font-size:1.5em;border-bottom:1px solid #e2e8f0;padding-bottom:8px}.preview-content h3{font-size:1.25em}.preview-content p{margin-bottom:16px;line-height:1.6}.preview-content ul,.preview-content ol{margin-bottom:16px;padding-left:24px}.preview-content li{margin-bottom:4px}.preview-content blockquote{margin:16px 0;padding:0 16px;border-left:4px solid #e2e8f0;color:#6b7280}.preview-content code{background:#f1f5f9;padding:2px 4px;border-radius:3px;font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:.9em}.preview-content pre{background:#f8fafc;padding:16px;border-radius:6px;overflow-x:auto;margin:16px 0}.preview-content pre code{background:none;padding:0}.form-group{margin-bottom:16px}.form-label{display:block;margin-bottom:6px;font-weight:500;color:#374151;font-size:14px}.form-input{width:100%;padding:8px 12px;border:1px solid #d1d5db;border-radius:6px;font-size:14px;transition:border-color .2s}.form-input:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.form-textarea{width:100%;padding:8px 12px;border:1px solid #d1d5db;border-radius:6px;font-size:14px;min-height:80px;resize:vertical;transition:border-color .2s}.form-textarea:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.form-select{width:100%;padding:8px 12px;border:1px solid #d1d5db;border-radius:6px;font-size:14px;background:#fff;transition:border-color .2s}.form-select:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.tag-input{display:flex;flex-wrap:wrap;gap:6px;padding:8px 12px;border:1px solid #d1d5db;border-radius:6px;min-height:40px;align-items:center}.tag-input:focus-within{border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.tag{background:#3b82f6;color:#fff;padding:4px 8px;border-radius:4px;font-size:12px;display:flex;align-items:center;gap:4px}.tag-remove{background:none;border:none;color:#fff;cursor:pointer;font-size:14px;line-height:1}.tag-input input{border:none;outline:none;flex:1;min-width:100px;font-size:14px}.btn{padding:8px 16px;border:none;border-radius:6px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s;display:inline-flex;align-items:center;gap:8px}.btn-primary{background:#3b82f6;color:#fff}.btn-primary:hover{background:#2563eb}.btn-secondary{background:#6b7280;color:#fff}.btn-secondary:hover{background:#4b5563}.btn-success{background:#10b981;color:#fff}.btn-success:hover{background:#059669}.image-upload{border:2px dashed #d1d5db;border-radius:6px;padding:24px;text-align:center;cursor:pointer;transition:border-color .2s}.image-upload:hover{border-color:#3b82f6}.image-upload.dragover{border-color:#3b82f6;background:#f0f9ff}.image-preview{max-width:100%;max-height:200px;border-radius:6px;margin-top:12px}.export-section{margin-top:24px;padding-top:24px;border-top:1px solid #e2e8f0}.author-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px}.toolbar{padding:12px 16px;background:#f8fafc;border-bottom:1px solid #e2e8f0;display:flex;justify-content:space-between;align-items:center}.toolbar-title{font-weight:600;color:#374151}.toolbar-actions{display:flex;gap:8px}.editor-toolbar{display:flex;align-items:center;gap:4px;padding:8px 12px;background:#f8fafc;border-bottom:1px solid #e2e8f0;flex-wrap:wrap}.toolbar-btn{padding:6px 10px;border:1px solid #d1d5db;background:#fff;border-radius:4px;font-size:12px;font-weight:500;cursor:pointer;transition:all .2s;display:flex;align-items:center;gap:4px}.toolbar-btn:hover{background:#f3f4f6;border-color:#9ca3af}.toolbar-btn-image{background:#3b82f6;color:#fff;border-color:#3b82f6}.toolbar-btn-image:hover{background:#2563eb;border-color:#2563eb}.toolbar-separator{width:1px;height:20px;background:#d1d5db;margin:0 4px}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:9999;width:100vw;height:100vh}.modal-content{background:#fff;border-radius:8px;box-shadow:0 20px 25px -5px #0000001a;max-width:500px;width:90%;max-height:80vh;overflow:hidden}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid #e2e8f0}.modal-header h3{margin:0;font-size:18px;font-weight:600;color:#374151}.modal-close{background:none;border:none;font-size:24px;cursor:pointer;color:#6b7280;padding:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center}.modal-close:hover{color:#374151}.modal-body{padding:20px}.image-upload-area{border:2px dashed #d1d5db;border-radius:8px;padding:40px 20px;text-align:center;cursor:pointer;transition:all .2s;background:#fafafa}.image-upload-area:hover,.image-upload-area.drag-over{border-color:#3b82f6;background:#f0f9ff}.image-upload-area.uploading{border-color:#10b981;background:#f0fdf4}.upload-prompt{display:flex;flex-direction:column;align-items:center;gap:12px}.upload-icon{font-size:48px;opacity:.6}.upload-prompt p{margin:0;color:#6b7280}.upload-hint{font-size:12px;color:#9ca3af}.upload-status{display:flex;flex-direction:column;align-items:center;gap:12px}.spinner{width:24px;height:24px;border:2px solid #e2e8f0;border-top:2px solid #3b82f6;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.settings-modal{max-width:600px;width:95%}.provider-options{display:flex;gap:16px;margin-top:8px}.provider-option{display:flex;align-items:center;gap:8px;cursor:pointer;padding:8px 12px;border:1px solid #d1d5db;border-radius:6px;transition:all .2s}.provider-option:hover{background:#f3f4f6;border-color:#9ca3af}.provider-option input[type=radio]{margin:0}.provider-option input[type=radio]:checked+span{font-weight:600;color:#3b82f6}.provider-option:has(input:checked){background:#f0f9ff;border-color:#3b82f6}.form-hint{font-size:12px;color:#6b7280;margin-top:4px;margin-bottom:0}.modal-footer{padding:16px 20px;border-top:1px solid #e2e8f0;display:flex;justify-content:flex-end;gap:8px}