.sidebar { width: 310px; background: var(--bg-sidebar); border-right: 1px solid var(--border-subtle); display: flex; flex-direction: column; }
.brand { padding: 16px; font-weight: 700; color: var(--text-primary); border-bottom: 1px solid var(--border-subtle); font-size: 14px; letter-spacing: 1px; }
.brand span { color: var(--accent); font-size: 11px; margin-left: 6px; font-weight: 600; }

.search-bar { padding: 10px 12px; border-bottom: 1px solid var(--border-subtle); }
.search-bar input { width: 100%; background: var(--bg-surface); border: 1px solid var(--border-subtle); color: var(--text-primary); padding: 8px 12px; border-radius: 4px; font-size: 12.5px; outline: none; transition: 0.15s; }
.search-bar input:focus { border-color: var(--accent); }

.nav-tabs { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; padding: 8px 12px; border-bottom: 1px solid var(--border-subtle); }
.tab-btn { background: transparent; color: var(--text-muted); border: 1px solid transparent; padding: 7px; cursor: pointer; border-radius: 3px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
.tab-btn:hover { color: var(--text-primary); }
.tab-btn.active { color: var(--accent); border-color: var(--accent); background: var(--accent-glow); }

.folder-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 8px 12px; border-bottom: 1px solid var(--border-subtle); }
.folder-actions button { background: var(--bg-surface); color: var(--text-primary); border: 1px solid var(--border-subtle); padding: 7px; cursor: pointer; border-radius: 3px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
.folder-actions button:hover { border-color: var(--accent); color: var(--accent); }

.sidebar-content { flex: 1; overflow-y: auto; padding: 10px; }
.tree-folder { margin-bottom: 3px; }
.tree-folder-header { font-size: 12.5px; font-weight: 600; color: var(--text-primary); cursor: pointer; padding: 5px 8px; border-radius: 4px; display: flex; align-items: center; gap: 6px; user-select: none; transition: 0.15s; }
.tree-folder-header:hover { background: var(--bg-surface-hover); }
.tree-folder-header.active { background: var(--accent-glow); color: var(--accent); }
.tree-folder-header.drag-over { background: var(--accent-glow) !important; border: 1px dashed var(--accent) !important; color: var(--accent) !important; }

.chevron { font-size: 11px; color: var(--text-muted); width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; border-radius: 3px; transition: 0.1s; }
.chevron:hover { color: var(--accent); background: var(--bg-surface-hover); }
.folder-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.tree-folder-children { margin-left: 12px; padding-left: 8px; border-left: 1px solid var(--border-subtle); }
.tree-folder-children.collapsed { display: none; }

.tree-note-item { padding: 5px 8px; margin: 2px 0; border-radius: 4px; cursor: grab; font-size: 12.5px; color: var(--text-secondary); display: flex; align-items: center; gap: 8px; transition: 0.1s; border-left: 2px solid transparent; }
.tree-note-item:active { cursor: grabbing; }
.tree-note-item.dragging { opacity: 0.4; }
.tree-note-item:hover { background: var(--bg-surface-hover); color: var(--text-primary); }
.tree-note-item.active { background: var(--accent-glow) !important; color: var(--accent) !important; font-weight: 600; border-left: 2px solid var(--accent) !important; }
.note-bullet { color: var(--text-muted); font-size: 8px; }
.note-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }

.context-menu { position: fixed; display: none; background: var(--bg-surface); border: 1px solid var(--border-focus); border-radius: 4px; padding: 5px 0; min-width: 180px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6); z-index: 1000; }
.context-item { padding: 7px 14px; font-size: 12px; color: var(--text-secondary); cursor: pointer; }
.context-item:hover { background: var(--accent-glow); color: var(--accent); }
.context-item.danger { color: var(--danger); }
.context-item.danger:hover { background: rgba(255, 83, 112, 0.15); color: var(--danger); }