:root{--bg-primary: #ffffff;--bg-secondary: #f5f5f5;--bg-tertiary: #e8e8e8;--text-primary: #1a1a1a;--text-secondary: #666666;--text-muted: #999999;--border-color: #e0e0e0;--accent-color: #6366f1;--accent-hover: #4f46e5;--success-color: #22c55e;--warning-color: #f59e0b;--error-color: #ef4444;--shadow: 0 1px 3px rgba(0, 0, 0, .1);--shadow-lg: 0 4px 12px rgba(0, 0, 0, .15)}[data-theme=dark]{--bg-primary: #1a1a1a;--bg-secondary: #252525;--bg-tertiary: #333333;--text-primary: #e8e8e8;--text-secondary: #a0a0a0;--text-muted: #666666;--border-color: #404040;--accent-color: #818cf8;--accent-hover: #6366f1;--shadow: 0 1px 3px rgba(0, 0, 0, .3);--shadow-lg: 0 4px 12px rgba(0, 0, 0, .4);color-scheme:dark}[data-theme=dark] ::-webkit-scrollbar{width:12px;height:12px}[data-theme=dark] ::-webkit-scrollbar-track{background:var(--bg-secondary)}[data-theme=dark] ::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:6px;border:3px solid var(--bg-secondary)}[data-theme=dark] ::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}[data-theme=dark] ::-webkit-scrollbar-corner{background:var(--bg-secondary)}[data-theme=dark] *{scrollbar-color:var(--border-color) var(--bg-secondary);scrollbar-width:thin}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,sans-serif;font-size:14px;line-height:1.5;background:var(--bg-primary);color:var(--text-primary);transition:background-color .2s,color .2s}#app{height:100vh}.app{display:flex;flex-direction:column;height:100vh;overflow:hidden}.toolbar{display:flex;align-items:center;justify-content:space-between;padding:.5rem 1rem;background:var(--bg-secondary);border-bottom:1px solid var(--border-color);flex-shrink:0}.toolbar-left,.toolbar-center,.toolbar-right{display:flex;align-items:center;gap:1rem}.logo{font-size:1.25rem;font-weight:700;color:var(--accent-color);margin:0}.room-info{display:flex;align-items:center;gap:.5rem;padding:.25rem .75rem;background:var(--bg-tertiary);border-radius:4px;font-size:.875rem}.room-label{color:var(--text-muted)}.room-name{font-family:Monaco,Menlo,monospace;color:var(--text-primary)}.peers-indicator{display:flex;align-items:center;gap:.375rem;padding:.25rem .75rem;background:var(--bg-tertiary);border-radius:4px}.peers-count{font-weight:600;color:var(--accent-color)}.peers-label{color:var(--text-secondary);font-size:.875rem}.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.5rem 1rem;font-size:.875rem;font-weight:500;color:var(--text-primary);background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:4px;cursor:pointer;transition:all .15s}.btn:hover{background:var(--border-color)}.btn-icon{padding:.5rem;width:36px;height:36px}.btn-icon svg{flex-shrink:0}.export-dropdown{position:relative}.dropdown-menu{position:absolute;top:100%;right:0;margin-top:.25rem;min-width:160px;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:4px;box-shadow:var(--shadow-lg);opacity:0;visibility:hidden;transform:translateY(-4px);transition:all .15s;z-index:100}.export-dropdown:hover .dropdown-menu,.dropdown-menu:hover{opacity:1;visibility:visible;transform:translateY(0)}.dropdown-item{display:block;width:100%;padding:.5rem 1rem;text-align:left;font-size:.875rem;color:var(--text-primary);background:transparent;border:none;cursor:pointer;transition:background .15s}.dropdown-item:hover{background:var(--bg-tertiary)}.dropdown-item:first-child{border-radius:4px 4px 0 0}.dropdown-item:last-child{border-radius:0 0 4px 4px}.editor-container{display:flex;flex:1;overflow:hidden}.panel{display:flex;flex-direction:column;flex:1;min-width:0;overflow:hidden}.panel-header{display:flex;align-items:center;justify-content:space-between;padding:.5rem 1rem;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);background:var(--bg-secondary);border-bottom:1px solid var(--border-color);flex-shrink:0}.divider{width:4px;background:var(--border-color);cursor:col-resize;flex-shrink:0;transition:background .15s}.divider:hover{background:var(--accent-color)}.editor{flex:1;overflow:auto}.editor :global(.cm-editor){height:100%;background:var(--bg-primary)}.editor :global(.cm-scroller){font-family:Monaco,Menlo,Consolas,monospace;font-size:14px;line-height:1.6}.editor :global(.cm-content){padding:1rem}.editor :global(.cm-gutters){background:var(--bg-secondary);border-right:1px solid var(--border-color);color:var(--text-muted)}.editor :global(.cm-activeLineGutter){background:var(--bg-tertiary)}.editor :global(.cm-activeLine){background:var(--bg-secondary)}.editor :global(.cm-ySelectionInfo){padding:2px 6px;font-size:11px;font-weight:500;border-radius:3px 3px 3px 0;color:#fff;opacity:1;z-index:10;pointer-events:none}.editor :global(.cm-ySelection){opacity:.3}.editor :global(.cm-yLineSelection){opacity:.15}.editor :global(.cm-widgetBuffer){margin-bottom:0}.editor :global(.cm-ySelectionCaret){position:relative;border-left:2px solid;margin-left:-1px;margin-right:-1px;box-sizing:border-box}.editor :global(.cm-ySelectionCaretDot){position:absolute;width:6px;height:6px;border-radius:50%;top:-4px;left:-3px}.preview{flex:1;padding:1.5rem;overflow:auto;background:var(--bg-primary)}.markdown-body{font-size:15px;line-height:1.7;color:var(--text-primary)}.markdown-body :global(h1),.markdown-body :global(h2),.markdown-body :global(h3),.markdown-body :global(h4),.markdown-body :global(h5),.markdown-body :global(h6){margin-top:1.5em;margin-bottom:.5em;font-weight:600;line-height:1.3}.markdown-body :global(h1){font-size:2em;border-bottom:1px solid var(--border-color);padding-bottom:.3em}.markdown-body :global(h2){font-size:1.5em;border-bottom:1px solid var(--border-color);padding-bottom:.3em}.markdown-body :global(h3){font-size:1.25em}.markdown-body :global(h4){font-size:1em}.markdown-body :global(h5){font-size:.875em}.markdown-body :global(h6){font-size:.85em;color:var(--text-secondary)}.markdown-body :global(p){margin-top:0;margin-bottom:1em}.markdown-body :global(a){color:var(--accent-color);text-decoration:none}.markdown-body :global(a:hover){text-decoration:underline}.markdown-body :global(ul),.markdown-body :global(ol){margin-bottom:1em;padding-left:2em}.markdown-body :global(li){margin-bottom:.25em}.markdown-body :global(blockquote){margin:1em 0;padding:0 1em;border-left:4px solid var(--border-color);color:var(--text-secondary)}.markdown-body :global(pre){margin:1em 0;padding:1em;overflow:auto;background:var(--bg-secondary);border-radius:4px;font-family:Monaco,Menlo,Consolas,monospace;font-size:.9em}.markdown-body :global(code){padding:.2em .4em;background:var(--bg-secondary);border-radius:3px;font-family:Monaco,Menlo,Consolas,monospace;font-size:.9em}.markdown-body :global(pre code){padding:0;background:transparent}.markdown-body :global(table){width:100%;margin:1em 0;border-collapse:collapse}.markdown-body :global(th),.markdown-body :global(td){padding:.5em 1em;border:1px solid var(--border-color)}.markdown-body :global(th){background:var(--bg-secondary);font-weight:600}.markdown-body :global(img){max-width:100%;height:auto}.markdown-body :global(hr){margin:2em 0;border:none;border-top:1px solid var(--border-color)}.user-info{display:flex;align-items:center}.username-display{display:flex;align-items:center;gap:.5rem;padding:.25rem .5rem;background:var(--bg-tertiary);border:2px solid;border-radius:4px;cursor:pointer;font-size:.875rem;color:var(--text-primary);transition:all .15s}.username-display:hover{background:var(--border-color)}.username-display svg{opacity:.5}.username-display:hover svg{opacity:1}.username-avatar{width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.625rem;font-weight:600;color:#fff;text-transform:uppercase}.username-text{max-width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.username-input{padding:.25rem .5rem;font-size:.875rem;background:var(--bg-primary);border:2px solid var(--accent-color);border-radius:4px;color:var(--text-primary);outline:none;width:120px}.awareness-cursors{display:flex;gap:.25rem}.awareness-cursor{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.625rem;font-weight:600;color:#fff;text-transform:uppercase}.connection-status{position:fixed;bottom:1rem;left:1rem;display:flex;align-items:center;gap:.5rem;padding:.5rem 1rem;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:4px;box-shadow:var(--shadow);font-size:.75rem;color:var(--text-secondary);z-index:50;transition:opacity .3s}.connection-status.connected{opacity:0;pointer-events:none}.status-dot{width:8px;height:8px;border-radius:50%;background:var(--warning-color);animation:pulse 1.5s infinite}.connection-status.connected .status-dot{background:var(--success-color);animation:none}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.toast{position:fixed;bottom:1rem;right:1rem;padding:.75rem 1rem;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:4px;box-shadow:var(--shadow-lg);font-size:.875rem;color:var(--text-primary);z-index:200;animation:slideIn .2s ease}.toast.success{border-left:3px solid var(--success-color)}.toast.error{border-left:3px solid var(--error-color)}@keyframes slideIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.view-toggle{display:flex;gap:2px;background:var(--bg-tertiary);border-radius:4px;padding:2px}.btn-sm{padding:.375rem;width:30px;height:30px}.btn-sm svg{width:14px;height:14px}.btn.active{background:var(--accent-color);color:#fff;border-color:var(--accent-color)}.btn.active:hover{background:var(--accent-hover)}.editor-container.view-editor .editor-panel,.editor-container.view-preview .preview-panel{flex:1 1 100%}.modal-overlay{position:fixed;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:200;animation:fadeIn .15s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.modal{background:var(--bg-secondary);border-radius:8px;box-shadow:var(--shadow-lg);width:90%;max-width:400px;max-height:80vh;display:flex;flex-direction:column;animation:modalSlideIn .2s ease}@keyframes modalSlideIn{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}.modal-header{display:flex;align-items:center;justify-content:space-between;padding:1rem;border-bottom:1px solid var(--border-color)}.modal-header h2{font-size:1rem;font-weight:600;margin:0}.modal-body{padding:1rem;overflow-y:auto}.doc-search{display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;background:var(--bg-primary);border:1px solid var(--border-color);border-radius:6px;margin-bottom:1rem}.doc-search:focus-within{border-color:var(--accent-color);box-shadow:0 0 0 2px var(--accent-color-light)}.doc-search-icon{color:var(--text-muted);flex-shrink:0}.doc-search-input{flex:1;border:none;background:transparent;font-size:.875rem;color:var(--text-primary);outline:none}.doc-search-input::placeholder{color:var(--text-muted)}.doc-search-clear{display:flex;align-items:center;justify-content:center;background:transparent;border:none;padding:.25rem;cursor:pointer;color:var(--text-muted);border-radius:4px;transition:all .15s}.doc-search-clear:hover{background:var(--bg-tertiary);color:var(--text-primary)}.doc-list{display:flex;flex-direction:column;gap:.5rem;max-height:60vh;overflow-y:auto}.doc-item{display:flex;align-items:flex-start;gap:.75rem;padding:.75rem;background:var(--bg-primary);border:1px solid var(--border-color);border-radius:6px;cursor:pointer;transition:all .15s;text-decoration:none;color:inherit}.doc-item:hover{border-color:var(--accent-color);background:var(--bg-tertiary)}.doc-item.active{border-color:var(--accent-color);background:var(--accent-color);color:#fff}.doc-item.active .doc-date,.doc-item.active .doc-preview,.doc-item.active .doc-subtitle{color:#fffc}.doc-item.active .doc-tag{background:#fff3;color:#fff}.doc-new{border-style:dashed;align-items:center;background:transparent;font-family:inherit;font-size:inherit;text-align:left;width:100%}.doc-new .doc-icon{font-size:1.25rem;color:var(--accent-color)}.doc-link{display:flex;align-items:flex-start;gap:.75rem;flex:1;text-decoration:none;color:inherit;min-width:0;background:transparent;border:none;font-family:inherit;font-size:inherit;text-align:left;cursor:pointer;padding:0}.doc-icon{font-size:1rem;flex-shrink:0;line-height:1.5}.doc-info{display:flex;flex-direction:column;gap:.25rem;flex:1;min-width:0}.doc-title{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.doc-subtitle{font-size:.75rem;color:var(--text-muted)}.doc-meta{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}.doc-tags{display:flex;gap:.25rem;flex-wrap:wrap}.doc-tag{display:inline-block;padding:.125rem .375rem;background:var(--bg-tertiary);border-radius:4px;font-size:.625rem;color:var(--text-secondary);font-weight:500}.doc-tag-more{background:transparent;color:var(--text-muted)}.doc-date{font-size:.75rem;color:var(--text-muted);flex-shrink:0}.doc-preview{font-size:.75rem;color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.4}.doc-name{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}.doc-delete{opacity:0;transition:opacity .15s;flex-shrink:0;margin-top:.125rem}.doc-item:hover .doc-delete{opacity:1}.doc-empty{text-align:center;padding:2rem;color:var(--text-muted)}@media (max-width: 768px){.toolbar{flex-wrap:wrap;gap:.5rem}.toolbar-center{order:3;width:100%;justify-content:center}.editor-container{flex-direction:column}.divider{width:100%;height:4px;cursor:row-resize}.room-info,.view-toggle{display:none}}