:root{--bg-primary:#1e1e2e;--bg-secondary:#181825;--bg-tertiary:#313244;--bg-hover:#45475a;--text-primary:#cdd6f4;--text-secondary:#a6adc8;--text-muted:#6c7086;--accent:#89b4fa;--accent-hover:#74c7ec;--accent-dim:#89b4fa33;--danger:#f38ba8;--success:#a6e3a1;--warning:#f9e2af;--border:#45475a;--editor-bg:#1e1e2e;--preview-bg:#1e1e2e;--sidebar-width:280px;--topbar-height:42px}*{box-sizing:border-box;margin:0;padding:0}body{background:var(--bg-primary);color:var(--text-primary);height:100vh;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,sans-serif;overflow:hidden}#root{flex-direction:column;height:100vh;display:flex}.login-container{background:var(--bg-secondary);justify-content:center;align-items:center;height:100vh;display:flex}.login-card{background:var(--bg-tertiary);border:1px solid var(--border);border-radius:12px;width:360px;padding:32px}.login-card h1{text-align:center;color:var(--accent);margin-bottom:8px;font-size:24px}.login-card p{text-align:center;color:var(--text-muted);margin-bottom:24px;font-size:14px}.login-card label{color:var(--text-secondary);margin-bottom:4px;font-size:13px;display:block}.login-card input{background:var(--bg-primary);border:1px solid var(--border);width:100%;color:var(--text-primary);border-radius:6px;outline:none;margin-bottom:16px;padding:10px 12px;font-size:14px}.login-card input:focus{border-color:var(--accent)}.login-card button{background:var(--accent);width:100%;color:var(--bg-primary);cursor:pointer;border:none;border-radius:6px;padding:10px;font-size:14px;font-weight:600}.login-card button:hover{background:var(--accent-hover)}.login-error{color:var(--danger);text-align:center;margin-bottom:12px;font-size:13px}.app-layout{height:100vh;display:flex;overflow:hidden}.sidebar{width:var(--sidebar-width);min-width:var(--sidebar-width);background:var(--bg-secondary);border-right:1px solid var(--border);flex-direction:column;display:flex;overflow:hidden}.sidebar-header{border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;padding:12px 16px;display:flex}.sidebar-header h2{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px;font-size:14px;font-weight:600}.sidebar-actions{gap:6px;display:flex}.sidebar-actions button{color:var(--text-muted);cursor:pointer;background:0 0;border:none;border-radius:4px;padding:4px 6px;font-size:16px}.sidebar-actions button:hover{color:var(--text-primary);background:var(--bg-hover)}.sidebar-search{border-bottom:1px solid var(--border);padding:8px 12px}.sidebar-search input{background:var(--bg-primary);border:1px solid var(--border);width:100%;color:var(--text-primary);border-radius:4px;outline:none;padding:6px 10px;font-size:13px}.sidebar-search input:focus{border-color:var(--accent)}.sidebar-tree{flex:1;padding:4px 0;overflow-y:auto}.tree-item{cursor:pointer;-webkit-user-select:none;user-select:none}.tree-item-content{color:var(--text-secondary);align-items:center;gap:6px;padding:3px 16px;font-size:14px;transition:background .15s;display:flex}.tree-item-content:hover{background:var(--bg-hover);color:var(--text-primary)}.tree-item-content.active{background:var(--accent-dim);color:var(--accent)}.tree-item-content .icon{text-align:center;flex-shrink:0;width:16px;font-size:12px}.tree-item-content .name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.tree-children{padding-left:12px}.main-content{flex-direction:column;flex:1;display:flex;overflow:hidden}.topbar{height:var(--topbar-height);background:var(--bg-secondary);border-bottom:1px solid var(--border);align-items:center;gap:12px;padding:0 16px;display:flex}.topbar-title{color:var(--text-secondary);text-overflow:ellipsis;white-space:nowrap;flex:1;font-size:14px;overflow:hidden}.topbar button{background:var(--bg-tertiary);border:1px solid var(--border);color:var(--text-secondary);cursor:pointer;border-radius:4px;padding:4px 12px;font-size:13px}.topbar button:hover{background:var(--bg-hover);color:var(--text-primary)}.topbar button.active{background:var(--accent);color:var(--bg-primary);border-color:var(--accent)}.content-area{flex:1;display:flex;overflow:hidden}.editor-pane,.preview-pane{flex:1;overflow:auto}.editor-pane{border-right:1px solid var(--border)}.editor-pane .cm-editor{height:100%}.editor-pane .cm-editor .cm-scroller{font-family:JetBrains Mono,Fira Code,monospace;font-size:14px;line-height:1.6}.preview-pane{background:var(--preview-bg);padding:24px 32px}.markdown-preview{color:var(--text-primary);line-height:1.7}.markdown-preview h1{border-bottom:1px solid var(--border);margin:.8em 0 .4em;padding-bottom:.3em;font-size:2em}.markdown-preview h2{border-bottom:1px solid var(--border);margin:.8em 0 .4em;padding-bottom:.3em;font-size:1.5em}.markdown-preview h3{margin:.8em 0 .4em;font-size:1.25em}.markdown-preview h4{margin:.6em 0 .3em;font-size:1.1em}.markdown-preview p{margin:.5em 0}.markdown-preview a{color:var(--accent);text-decoration:none}.markdown-preview a:hover{text-decoration:underline}.markdown-preview a.wikilink{color:var(--accent);cursor:pointer;background:var(--accent-dim);border-radius:3px;padding:1px 4px}.markdown-preview a.wikilink:hover{background:var(--accent);color:var(--bg-primary)}.markdown-preview a.wikilink.broken{color:var(--danger);background:#f38ba81a}.markdown-preview code{background:var(--bg-tertiary);border-radius:3px;padding:2px 6px;font-size:.9em}.markdown-preview pre{background:var(--bg-tertiary);border-radius:6px;margin:1em 0;padding:16px;overflow-x:auto}.markdown-preview pre code{background:0 0;padding:0}.markdown-preview blockquote{border-left:3px solid var(--accent);color:var(--text-secondary);margin:1em 0;padding-left:16px}.markdown-preview ul,.markdown-preview ol{margin:.5em 0;padding-left:24px}.markdown-preview li{margin:.2em 0}.markdown-preview img{border-radius:6px;max-width:100%;margin:1em 0}.markdown-preview table{border-collapse:collapse;width:100%;margin:1em 0}.markdown-preview th,.markdown-preview td{border:1px solid var(--border);text-align:left;padding:8px 12px}.markdown-preview th{background:var(--bg-tertiary)}.markdown-preview .tag{background:var(--accent-dim);color:var(--accent);cursor:pointer;border-radius:12px;margin:0 2px;padding:2px 8px;font-size:.85em;display:inline-block}.markdown-preview .tag:hover{background:var(--accent);color:var(--bg-primary)}.backlinks-section{border-top:1px solid var(--border);background:var(--bg-secondary);padding:16px}.backlinks-section h3{color:var(--text-muted);margin-bottom:8px;font-size:14px}.backlink-item{padding:4px 0}.backlink-item a{color:var(--accent);font-size:14px;text-decoration:none}.backlink-item a:hover{text-decoration:underline}.graph-container{background:var(--bg-primary);z-index:1000;flex-direction:column;display:flex;position:fixed;inset:0}.graph-header{border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;padding:12px 16px;display:flex}.graph-header h2{color:var(--text-primary);font-size:16px}.graph-header button{color:var(--text-muted);cursor:pointer;background:0 0;border:none;font-size:20px}.graph-header button:hover{color:var(--text-primary)}.graph-svg{flex:1}.graph-tooltip{background:var(--bg-tertiary);border:1px solid var(--border);pointer-events:none;z-index:1001;border-radius:4px;padding:6px 10px;font-size:12px;position:fixed}.welcome{color:var(--text-muted);text-align:center;flex:1;justify-content:center;align-items:center;display:flex}.welcome h2{color:var(--text-secondary);margin-bottom:8px;font-size:20px}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--bg-primary)}::-webkit-scrollbar-thumb{background:var(--bg-hover);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}.context-menu{background:var(--bg-tertiary);border:1px solid var(--border);z-index:2000;border-radius:6px;min-width:160px;padding:4px 0;position:fixed;box-shadow:0 8px 24px #0006}.context-menu-item{color:var(--text-secondary);cursor:pointer;padding:6px 16px;font-size:13px}.context-menu-item:hover{background:var(--accent);color:var(--bg-primary)}.context-menu-item.danger:hover{background:var(--danger)}.autocomplete-panel{background:var(--bg-tertiary);border:1px solid var(--border);z-index:1500;border-radius:6px;max-height:200px;padding:4px 0;position:absolute;overflow-y:auto;box-shadow:0 8px 24px #0006}.autocomplete-item{color:var(--text-secondary);cursor:pointer;padding:6px 12px;font-size:13px}.autocomplete-item:hover,.autocomplete-item.selected{background:var(--accent);color:var(--bg-primary)}@media (width<=768px){.sidebar{width:220px;min-width:220px}.preview-pane{padding:16px}}
