:root{--bg:#f7f8fb;--panel:#fff;--text:#1f2a37;--border:#d3d8df;--button:#eef1f5;--button-active:#c9ddff}*{box-sizing:border-box}body{background:var(--bg);color:var(--text);margin:0;font-family:Arial,Helvetica,sans-serif}.page{background:var(--bg);--topbar-sticky-top:0px;--topbar-sticky-height:66px;--panel-header-sticky-top:calc(var(--topbar-sticky-top) + var(--topbar-sticky-height));min-height:100vh;padding:16px}.page.dark{--bg:#12161d;--panel:#1c2230;--text:#eef4ff;--border:#364155;--button:#273247;--button-active:#3f629a}.page.dark,.page.dark .workspace,.page.dark .left-pane,.page.dark .right-pane{background:var(--bg)}.topbar{top:var(--topbar-sticky-top);z-index:30;background:var(--bg);border-bottom:1px solid var(--border);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;margin-bottom:0;padding-top:6px;padding-bottom:6px;padding-right:52px;display:flex;position:sticky}h1,h3{margin:0}h1{color:var(--text)}.actions,.toolbar{flex-wrap:wrap;gap:8px;display:flex}button{border:1px solid var(--border);background:var(--button);color:var(--text);cursor:pointer;border-radius:8px;padding:8px 10px}button.active{background:var(--button-active)}button:hover{filter:brightness(1.04)}.theme-toggle{z-index:10;border-radius:999px;justify-content:center;align-items:center;width:36px;height:36px;padding:0;font-size:18px;display:inline-flex;position:absolute;top:0;right:0}select{border:1px solid var(--border);background:var(--button);color:var(--text);border-radius:6px;padding:6px 8px}.workspace{grid-template-columns:1fr 1fr;gap:12px;margin-top:12px;display:grid}.left-pane,.right-pane{border:1px solid var(--border);background:var(--panel);border-radius:12px;min-height:70vh;padding:0}.editor-panel-header{border-bottom:1px solid var(--border);background:var(--panel);padding:10px 12px 6px}.panel-title{color:var(--text);font-size:14px;font-weight:600}.toolbar.compact{border-bottom:1px solid var(--border);background:var(--panel);gap:6px;padding:8px 12px}.pane-sticky{top:var(--panel-header-sticky-top);z-index:20;background:var(--panel);position:sticky}.toolbar.compact button{border-radius:6px;min-width:30px;padding:4px 8px;font-size:13px}.tool-icon{width:14px;height:14px;color:var(--text);justify-content:center;align-items:center;font-size:14px;line-height:1;display:inline-flex}.text-bold{font-weight:700}.text-italic{font-style:italic}.text-strike{text-decoration:line-through}.icon-list-bullet,.icon-list-ordered,.icon-link,.icon-table,.icon-add-row,.icon-add-col,.icon-delete-table{background-repeat:no-repeat;background-size:100% 100%}.icon-list-bullet{background-image:radial-gradient(circle, var(--text) 1.2px, transparent 1.3px), radial-gradient(circle, var(--text) 1.2px, transparent 1.3px), radial-gradient(circle, var(--text) 1.2px, transparent 1.3px), linear-gradient(var(--text), var(--text)), linear-gradient(var(--text), var(--text)), linear-gradient(var(--text), var(--text));background-position:0 1px,0,0 calc(100% - 1px),right 1px,100%,right calc(100% - 1px);background-size:3px 3px,3px 3px,3px 3px,8px 1.4px,8px 1.4px,8px 1.4px;width:14px}.icon-list-ordered{background-image:linear-gradient(var(--text), var(--text)), linear-gradient(var(--text), var(--text)), linear-gradient(var(--text), var(--text));background-position:right 1px,100%,right calc(100% - 1px);background-size:8px 1.4px,8px 1.4px,8px 1.4px;width:14px;position:relative}.icon-list-ordered:before{content:"1";font-size:8px;font-weight:700;position:absolute;top:-1px;left:0}.icon-link{width:14px;position:relative}.icon-link:before,.icon-link:after{content:"";border:1.6px solid var(--text);border-radius:6px;width:7px;height:4px;position:absolute;top:50%}.icon-link:before{left:0;transform:translateY(-50%)rotate(-14deg)}.icon-link:after{right:0;transform:translateY(-50%)rotate(-14deg)}.icon-table{border:1.4px solid var(--text);background-image:linear-gradient(var(--text), var(--text)), linear-gradient(var(--text), var(--text));background-position:50%,50%;background-size:1px 100%,100% 1px;border-radius:1px;width:14px}.icon-add-row{border:1.4px solid var(--text);border-radius:1px;width:14px;position:relative}.icon-add-row:before,.icon-add-col:before{content:"";background:var(--text);position:absolute}.icon-add-row:before{width:8px;height:1.4px;top:50%;left:50%;transform:translate(-50%,-50%)}.icon-add-row:after,.icon-add-col:after,.icon-delete-table:after{content:"";background:var(--text);position:absolute}.icon-add-row:after{width:1.4px;height:8px;top:50%;left:50%;transform:translate(-50%,-50%)}.icon-add-col{border:1.4px solid var(--text);border-radius:1px;width:14px;position:relative}.icon-add-col:before{width:8px;height:1.4px;top:50%;left:50%;transform:translate(-50%,-50%)}.icon-add-col:after{width:1.4px;height:8px;top:50%;left:50%;transform:translate(-50%,-50%)}.icon-delete-table{border:1.4px solid var(--text);border-radius:1px;width:14px;position:relative}.icon-delete-table:before{content:"";background:var(--text);height:1.4px;position:absolute;top:50%;left:2px;right:2px;transform:rotate(45deg)}.icon-delete-table:after{height:1.4px;top:50%;left:2px;right:2px;transform:rotate(-45deg)}.toolbar-divider{background:var(--border);width:1px;height:24px;margin:0 2px}.align-btn{justify-content:center;align-items:center;width:32px;height:30px;padding:0;display:inline-flex}.align-lines{background-repeat:no-repeat;background-size:100% 100%;width:14px;height:10px;display:block}.align-lines.left{background-image:linear-gradient(var(--text), var(--text)), linear-gradient(var(--text), var(--text)), linear-gradient(var(--text), var(--text));background-position:0 1px,0,0 calc(100% - 1px);background-size:100% 1.5px,72% 1.5px,90% 1.5px}.align-lines.center{background-image:linear-gradient(var(--text), var(--text)), linear-gradient(var(--text), var(--text)), linear-gradient(var(--text), var(--text));background-position:50% 1px,50%,50% calc(100% - 1px);background-size:100% 1.5px,72% 1.5px,90% 1.5px}.align-lines.right{background-image:linear-gradient(var(--text), var(--text)), linear-gradient(var(--text), var(--text)), linear-gradient(var(--text), var(--text));background-position:right 1px,100%,right calc(100% - 1px);background-size:100% 1.5px,72% 1.5px,90% 1.5px}.toolbar.compact .align-btn.active{background:var(--button-active);border-color:color-mix(in srgb, var(--button-active) 70%, var(--text))}.editor{min-height:58vh;color:var(--text);background:0 0;outline:none;padding:12px}.editor *{color:var(--text)}.editor p{margin:10px 0}.editor blockquote{background:#6ea8ff1f;border-left:4px solid #6ea8ff;border-radius:0 8px 8px 0;margin:12px 0;padding:10px 12px;font-style:italic}.page.dark .editor blockquote{background:#8fc1ff2e;border-left-color:#8fc1ff}.editor table{border-collapse:collapse;width:100%;margin:8px 0}.editor td,.editor th{border:1px solid var(--border);color:var(--text);background:0 0;padding:6px}.editor a{color:#5a9dff;cursor:pointer}textarea{border:1px solid var(--border);width:100%;min-height:62vh;color:var(--text);resize:vertical;background:0 0;border-radius:10px;margin-top:10px;padding:12px}.right-pane{flex-direction:column;padding:0;display:flex}.output-code{border:1px solid var(--border);width:calc(100% - 24px);height:100%;min-height:0;color:var(--text);background:#78829614;border-radius:10px;flex:1;margin:12px;padding:0;font-family:Consolas,Courier New,monospace;font-size:13px;line-height:1.45;display:block;overflow:auto}.output-code .cm-editor{border-radius:10px;height:100%;font-size:13px}.output-code .cm-scroller{font-family:Consolas,Courier New,monospace;line-height:1.45;overflow-x:hidden}.output-code .cm-content{white-space:pre-wrap;word-break:break-word}.output-code .cm-gutters{border-right:1px solid var(--border)}.page.dark .topbar{box-shadow:0 1px #ffffff0a}.page.dark .editor-panel-header,.page.dark .toolbar.compact,.page.dark .pane-sticky{background:#1f2736}.page.dark .output-code{color:#f1f6ff;background:#171d29;border-color:#3a475f}.page.dark .editor a{color:#8fc1ff}.page.dark button,.page.dark select,.page.dark .link-preview input{color:#eef4ff}.page.dark .left-pane,.page.dark .right-pane,.page.dark .link-preview{background:#1c2230}.page.dark .editor{background:#1b2230}.page.dark textarea,.page.dark .output-code,.page.dark .link-preview input{background-color:#171d29}.page.dark .output-code .cm-gutters{background:#131927;border-right-color:#3a475f}.right-pane-header{justify-content:space-between;align-items:center;gap:10px;display:flex}.right-toolbar{justify-content:flex-end}.right-pane-actions{justify-content:flex-end;margin-top:8px;display:flex}.toast{color:#fff;background:#2f8f57;border-radius:10px;padding:10px 14px;position:fixed;bottom:16px;right:16px}.link-preview{background:var(--panel);border:1px solid var(--border);z-index:60;border-radius:10px;width:360px;max-width:calc(100vw - 24px);padding:10px;position:fixed;box-shadow:0 12px 28px #0000002e}.link-preview-title{margin-bottom:8px;font-size:14px;font-weight:700}.link-preview label{flex-direction:column;gap:4px;margin-bottom:8px;font-size:12px;display:flex}.link-preview input{border:1px solid var(--border);color:var(--text);background:0 0;border-radius:7px;padding:8px}.link-preview-actions{justify-content:flex-end;gap:8px;display:flex}@media (max-width:980px){.workspace{grid-template-columns:1fr}}