:root{--bg-primary: #0f172a;--bg-secondary: #1e293b;--bg-muted: #334155;--text-primary: #f8fafc;--text-secondary: #94a3b8;--border-color: #334155;--accent-color: #3b82f6;--accent-hover: #60a5fa;--card-bg: rgba(30, 41, 59, .7);--code-bg: #1e293b;--font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace}@media(prefers-color-scheme:light){:root:not([data-theme=dark]){--bg-primary: #ffffff;--bg-secondary: #f8fafc;--bg-muted: #e2e8f0;--text-primary: #0f172a;--text-secondary: #64748b;--border-color: #e2e8f0;--accent-color: #2563eb;--accent-hover: #1d4ed8;--card-bg: #f8fafc;--code-bg: #f1f5f9}}[data-theme=light]{--bg-primary: #ffffff;--bg-secondary: #f8fafc;--bg-muted: #e2e8f0;--text-primary: #0f172a;--text-secondary: #64748b;--border-color: #e2e8f0;--accent-color: #2563eb;--accent-hover: #1d4ed8;--card-bg: #f8fafc;--code-bg: #f1f5f9}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-sans);background-color:var(--bg-primary);color:var(--text-primary);height:100vh;overflow:hidden;display:flex;flex-direction:column}#app{display:flex;flex-direction:column;height:100vh;width:100vw}.studio-header{height:44px;background-color:var(--bg-secondary);border-bottom:1px solid var(--border-color);display:flex;align-items:center;justify-content:space-between;padding:0 16px;user-select:none;width:100%;box-sizing:border-box}.header-left{display:flex;align-items:center;gap:12px;flex-shrink:0}.app-badge{font-weight:700;font-size:13px;letter-spacing:-.2px;white-space:nowrap}.status-indicator{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--text-secondary);white-space:nowrap}.status-dot{width:8px;height:8px;border-radius:50%;background-color:#10b981;box-shadow:0 0 8px #10b981;flex-shrink:0}.header-right{display:flex;align-items:center;gap:6px;flex-shrink:0;white-space:nowrap}.view-mode-selector{display:flex;align-items:center;gap:2px;background-color:var(--bg-primary);border:1px solid var(--border-color);padding:2px;border-radius:6px;margin-right:4px;flex-shrink:0}.view-mode-btn{background:transparent;border:none;color:var(--text-secondary);padding:4px 7px;border-radius:4px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s ease;flex-shrink:0}.view-mode-btn svg{flex-shrink:0}.view-mode-btn:hover{color:var(--text-primary);background-color:var(--bg-muted)}.view-mode-btn.active{background-color:var(--bg-muted);color:var(--text-primary);box-shadow:0 1px 2px #0000001a}.icon-btn,.text-btn{background:transparent;border:1px solid transparent;color:var(--text-secondary);padding:6px 8px;border-radius:6px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s ease;font-family:inherit;font-size:12px;flex-shrink:0}.icon-btn svg{flex-shrink:0}.icon-btn:hover,.text-btn:hover{background-color:var(--bg-muted);color:var(--text-primary)}.studio-workspace{flex:1;display:flex;overflow:hidden;height:calc(100vh - 44px)}.pane{display:flex;flex-direction:column;height:100%;overflow:hidden;transition:width .2s ease,flex .2s ease}.editor-pane{width:50%;min-width:250px}.preview-pane{flex:1;min-width:250px}.studio-workspace.view-editor-only .editor-pane{width:100%!important;max-width:100%!important;flex:1 1 100%!important}.studio-workspace.view-editor-only .preview-pane,.studio-workspace.view-editor-only .resizer{display:none!important}.studio-workspace.view-preview-only .preview-pane{width:100%!important;max-width:100%!important;flex:1 1 100%!important}.studio-workspace.view-preview-only .editor-pane,.studio-workspace.view-preview-only .resizer{display:none!important}.pane-header{height:28px;background-color:var(--bg-secondary);border-bottom:1px solid var(--border-color);display:flex;align-items:center;justify-content:space-between;padding:0 8px 0 12px;font-size:11px;font-weight:600;color:var(--text-secondary);user-select:none}.pane-actions{display:flex;align-items:center;gap:8px}.pane-btn{background:transparent;border:none;color:var(--text-secondary);padding:3px 5px;border-radius:4px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s ease}.pane-btn:hover{background-color:var(--bg-muted);color:var(--text-primary)}textarea#markdown-input{flex:1;width:100%;height:100%;background-color:var(--bg-primary);color:var(--text-primary);font-family:var(--font-mono);font-size:13px;line-height:1.6;padding:16px;border:none;resize:none;outline:none}.resizer{width:5px;background-color:var(--border-color);cursor:col-resize;transition:background-color .15s}.resizer:hover,.resizer.dragging{background-color:var(--accent-color)}.preview-scroll-container{flex:1;overflow-y:auto;padding:24px 32px;line-height:1.6}.preview-scroll-container h1,.preview-scroll-container h2,.preview-scroll-container h3{margin-top:24px;margin-bottom:12px;font-weight:600;border-bottom:1px solid var(--border-color);padding-bottom:6px}.preview-scroll-container p{margin-bottom:14px}.code-block-card{margin:18px 0;background-color:var(--code-bg);border:1px solid var(--border-color);border-radius:8px;overflow:hidden;box-shadow:0 1px 3px #0000000d}.code-block-header{display:flex;align-items:center;justify-content:space-between;padding:6px 12px;background-color:var(--bg-secondary);border-bottom:1px solid var(--border-color)}.code-block-lang{display:flex;align-items:center;gap:6px}.code-block-indicator{width:6px;height:6px;border-radius:50%;background-color:var(--accent-color)}.code-lang-badge{font-size:11px;font-weight:700;letter-spacing:.5px;color:var(--text-secondary);font-family:var(--font-mono)}.code-copy-btn{display:inline-flex;align-items:center;gap:5px;background:transparent;border:1px solid var(--border-color);color:var(--text-secondary);padding:3px 8px;border-radius:5px;font-size:11px;font-family:inherit;font-weight:500;cursor:pointer;transition:all .15s ease}.code-copy-btn:hover{background-color:var(--bg-muted);color:var(--text-primary);border-color:var(--accent-color)}.code-copy-btn.copied{color:#10b981;border-color:#10b981;background-color:#10b9811a}.preview-scroll-container pre{margin:0;padding:14px;background:transparent;overflow-x:auto}.preview-scroll-container code{font-family:var(--font-mono);font-size:12.5px;line-height:1.55}.preview-scroll-container code.hljs{padding:0;background:transparent}.preview-scroll-container table{border-collapse:collapse;width:100%;margin:16px 0}.preview-scroll-container th,.preview-scroll-container td{border:1px solid var(--border-color);padding:8px 12px;text-align:left}.preview-scroll-container th{background-color:var(--bg-secondary)}.preview-scroll-container blockquote{border-left:4px solid var(--accent-color);padding-left:14px;color:var(--text-secondary);margin:14px 0}.diagram-card{margin:20px 0;background:var(--card-bg);border:1px solid var(--border-color);border-radius:8px;padding:16px;display:flex;flex-direction:column}.diagram-card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.diagram-badge{font-size:11px;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px}.diagram-toolbar{display:flex;align-items:center;gap:6px}.diagram-canvas{display:flex;justify-content:center;align-items:center;overflow-x:auto;padding:8px 0}.diagram-canvas svg{max-width:100%;height:auto}.modal-overlay{position:fixed;inset:0;background-color:#000000a6;backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:1000}.modal-overlay.hidden{display:none}.modal-window{width:90vw;height:85vh;max-width:1200px;background-color:var(--bg-primary);border:1px solid var(--border-color);border-radius:12px;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 20px 50px #00000080}.modal-header{height:44px;background-color:var(--bg-secondary);border-bottom:1px solid var(--border-color);display:flex;align-items:center;justify-content:space-between;padding:0 16px}.modal-title{font-weight:600;font-size:13px}.modal-hud{font-size:12px;color:var(--text-secondary);width:90px}.modal-actions{display:flex;align-items:center;gap:6px}.modal-viewport{flex:1;width:100%;height:calc(100% - 44px);overflow:hidden;display:flex;align-items:center;justify-content:center;cursor:grab;user-select:none;background-color:var(--bg-primary)}.modal-viewport.dragging{cursor:grabbing}.modal-canvas{display:flex;align-items:center;justify-content:center;pointer-events:none}.modal-canvas svg{max-width:none!important;max-height:none!important;display:block}@media(max-width:768px){.status-indicator{display:none}.studio-header{padding:0 8px}.app-badge{font-size:12px}.header-right{gap:3px}.icon-btn{padding:5px}.view-mode-selector{margin-right:2px}.view-mode-btn{padding:3px 5px}.resizer{display:none!important}.studio-workspace{flex-direction:column}.editor-pane,.preview-pane{width:100%!important;min-width:100%!important;flex:1 1 50%}.preview-scroll-container{padding:16px}.diagram-card{padding:12px;margin:14px 0}.modal-window{width:96vw;height:90vh;border-radius:8px}.modal-viewport{padding:12px}}.toast-container{position:fixed;bottom:24px;right:24px;z-index:9999;display:flex;flex-direction:column;gap:10px;pointer-events:none}.toast-item{background:var(--bg-secondary);color:var(--text-primary);border:1px solid var(--border-color);border-left:4px solid var(--accent-color);padding:10px 16px;border-radius:6px;font-size:12.5px;font-weight:500;box-shadow:0 10px 25px #0000004d;opacity:0;transform:translateY(10px);transition:all .25s cubic-bezier(.16,1,.3,1);pointer-events:auto}.toast-item.show{opacity:1;transform:translateY(0)}.toast-item.toast-success{border-left-color:#10b981}.toast-item.toast-error{border-left-color:#ef4444}body.drag-over:after{content:"📂 Drop Markdown file to open";position:fixed;inset:12px;background:#0f172ad9;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:2px dashed var(--accent-color);border-radius:12px;z-index:10000;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:600;color:var(--text-primary);pointer-events:none;animation:pulse-border 1.5s infinite}[data-theme=light] body.drag-over:after{background:#f8fafce6}@keyframes pulse-border{0%,to{border-color:var(--accent-color)}50%{border-color:#38bdf8}}