:root{
  --bg:#fbfaf8; --side:#f3f1ec; --line:#e3e0d8; --ink:#2f2b26;
  --muted:#8a857c; --accent:#8a5a2b; --hover:#ebe7df;
}
*{box-sizing:border-box}
body{margin:0;font-family:ui-sans-serif,system-ui,'Segoe UI',sans-serif;color:var(--ink);background:var(--bg)}

/* login */
.login-body{display:grid;place-items:center;height:100vh;background:var(--side)}
.login-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:2rem;width:320px}
.login-card h1{margin:0 0 1rem;font-size:1.3rem;text-align:center}
.login-card input{width:100%;padding:.6rem;margin:.3rem 0;border:1px solid var(--line);border-radius:8px}
.login-card button{width:100%;padding:.6rem;margin-top:.6rem;border:0;border-radius:8px;background:var(--accent);color:#fff;cursor:pointer}
.err{color:#b3261e;font-size:.85rem;text-align:center}

/* layout */
.layout{display:flex;height:100vh}
.sidebar{width:260px;background:var(--side);border-right:1px solid var(--line);display:flex;flex-direction:column}
.sidebar-head{display:flex;align-items:center;justify-content:space-between;padding:.8rem}
.brand{font-weight:600}
.sidebar-head button{border:0;background:none;font-size:1.1rem;cursor:pointer;color:var(--muted)}
#searchBox{margin:0 .8rem .5rem;padding:.45rem .6rem;border:1px solid var(--line);border-radius:8px;background:#fff}
.search-results{list-style:none;margin:0 .8rem;padding:0;background:#fff;border:1px solid var(--line);border-radius:8px;max-height:40vh;overflow:auto}
.search-results li{padding:.45rem .6rem;cursor:pointer;border-bottom:1px solid var(--line);font-size:.85rem}
.search-results li:hover{background:var(--hover)}
.search-results b{background:#f6e7c9}
.tree{flex:1;overflow:auto;padding:.4rem}
.tree .node{display:flex;align-items:center;gap:.25rem;padding:.25rem .4rem;border-radius:6px;cursor:pointer;font-size:.9rem}
.tree .node:hover{background:var(--hover)}
.tree .node.active{background:var(--hover);font-weight:600}
.tree .kids{margin-left:.9rem}
.tree .caret{width:1em;color:var(--muted);cursor:pointer;user-select:none}
.tree .addchild{margin-left:auto;visibility:hidden;border:0;background:none;color:var(--muted);cursor:pointer}
.tree .node:hover .addchild{visibility:visible}
.sidebar-foot{padding:.6rem;border-top:1px solid var(--line)}
.sidebar-foot button{border:0;background:none;color:var(--muted);cursor:pointer}

/* content */
.content{flex:1;overflow:auto;padding:2rem 3rem}
.empty{color:var(--muted);display:grid;place-items:center;height:80%}
.crumbs{font-size:.8rem;color:var(--muted);margin-bottom:.4rem}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.titlebar{display:flex;align-items:center;gap:.5rem;margin-bottom:1rem}
#pageIcon{width:3rem;font-size:1.6rem;border:0;background:none;text-align:center}
#pageTitle{flex:1;font-size:1.8rem;font-weight:700;border:0;background:none;outline:none}
.save-state{font-size:.75rem;color:var(--muted)}
#deletePage{border:0;background:none;cursor:pointer;font-size:1rem}

/* editor */
.editor .ProseMirror{outline:none;min-height:60vh;line-height:1.65;font-size:1rem}
.editor h1{font-size:1.5rem}.editor h2{font-size:1.25rem}.editor h3{font-size:1.1rem}
.editor pre{background:#2f2b26;color:#f5f0e8;padding:.8rem;border-radius:8px;overflow:auto}
.editor code{font-family:ui-monospace,monospace;font-size:.9em}
.editor blockquote{border-left:3px solid var(--accent);margin:0;padding-left:1rem;color:var(--muted)}
.editor ul[data-type="taskList"]{list-style:none;padding-left:.2rem}
.editor ul[data-type="taskList"] li{display:flex;gap:.5rem}
.editor img{max-width:100%;border-radius:8px}
.editor table{border-collapse:collapse}
.editor td,.editor th{border:1px solid var(--line);padding:.3rem .5rem;min-width:4rem}
.editor hr{border:0;border-top:1px solid var(--line)}