:root{--bg: #f2f2f2;--panel: #fbfbfa;--ink: #1f2328;--muted: #6b7280;--line: #e3e3e0;--hover: #efefec;--selected: #e6e9f2;--accent: #3b5bdb;--accent-ink: #fff;--danger: #c2362e;--ok: #2b8a3e;--warn: #b7791f;--radius: 8px;--sidebar: 288px;font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif;color-scheme:light}*{box-sizing:border-box}html,body{height:100%;margin:0;background:var(--bg);color:var(--ink);overflow:hidden}::-webkit-scrollbar{display:none}html{scrollbar-width:none}button{font:inherit;color:inherit}#app{display:flex;height:100%}#sidebar{width:var(--sidebar);flex:none;display:flex;flex-direction:column;background:var(--panel);border-right:1px solid var(--line);min-height:0}.sidebar-head{display:flex;align-items:center;gap:8px;padding:14px 12px 8px 16px}.brand{font-weight:700;letter-spacing:.01em;flex:1}.badge{font-size:11px;padding:2px 8px;border-radius:99px;background:#fdf0d5;color:var(--warn)}.tree{flex:1;overflow-y:auto;padding:4px 6px 12px;min-height:0}.tree .empty{color:var(--muted);font-size:14px;padding:8px 10px}.row{display:flex;align-items:center;gap:4px;height:32px;padding-right:6px;border-radius:6px;cursor:pointer;position:relative;user-select:none}.row:hover{background:var(--hover)}.row.selected{background:var(--selected)}.row .toggle{width:18px;height:18px;flex:none;border:0;background:none;padding:0;color:var(--muted);font-size:11px;cursor:pointer;transition:transform .12s}.row .toggle.open{transform:rotate(90deg)}.row .toggle.invisible{visibility:hidden}.row .icon{flex:none;width:20px;text-align:center}.row .label{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:14px}.row .label.untitled{color:var(--muted)}.row .actions{display:none;gap:2px}.row:hover .actions,.row.selected .actions{display:flex}.row input.rename{flex:1;min-width:0;font:inherit;font-size:14px;padding:2px 6px;border:1px solid var(--accent);border-radius:4px;outline:none;background:#fff}.row.drop-inside{background:var(--selected);outline:2px solid var(--accent);outline-offset:-2px}.row.drop-before:before,.row.drop-after:after{content:"";position:absolute;left:8px;right:8px;height:2px;background:var(--accent)}.row.drop-before:before{top:-1px}.row.drop-after:after{bottom:-1px}.sidebar-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 16px;border-top:1px solid var(--line);font-size:13px}.user-name{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.icon-btn{width:28px;height:28px;border:0;border-radius:6px;background:none;cursor:pointer;font-size:18px;line-height:1;color:var(--muted)}.icon-btn.small{width:22px;height:22px;font-size:15px}.icon-btn:hover{background:#00000012;color:var(--ink)}.link-btn{border:0;background:none;padding:0;color:var(--accent);cursor:pointer;font-size:13px}.link-btn:hover{text-decoration:underline}#main{flex:1;min-width:0;display:flex;flex-direction:column}#topbar{flex:none;background:var(--panel);border-bottom:1px solid var(--line)}.topbar-row{display:flex;align-items:center;gap:8px;height:52px;padding:0 16px;position:relative}.note-icon{width:32px;height:32px;border:0;border-radius:6px;background:none;font-size:20px;cursor:pointer}.note-icon:hover:not([disabled]){background:var(--hover)}.note-title{flex:1;min-width:0;border:0;background:none;font:inherit;font-size:18px;font-weight:600;outline:none;padding:4px 6px;border-radius:6px}.note-title:focus{background:#fff;box-shadow:0 0 0 2px var(--selected)}.status{font-size:13px;color:var(--muted);white-space:nowrap}.status[data-state=saved]{color:var(--ok)}.status[data-state=conflict],.status[data-state=error],.status[data-state=auth]{color:var(--danger)}.status[data-state=offline],.status[data-state=unsaved]{color:var(--warn)}.no-note .status{display:none}.menu-wrap{position:relative}.menu{position:absolute;right:0;top:34px;z-index:20;min-width:240px;padding:4px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 8px 24px #0000001f}.menu button{display:block;width:100%;text-align:left;border:0;background:none;padding:8px 10px;border-radius:6px;cursor:pointer;font-size:14px}.menu button:hover{background:var(--hover)}.popover{position:absolute;top:46px;left:16px;z-index:20;width:264px;display:flex;flex-wrap:wrap;gap:2px;padding:8px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 8px 24px #0000001f}.popover .emoji{width:36px;height:36px;border:0;background:none;border-radius:6px;font-size:20px;cursor:pointer}.popover .emoji:hover{background:var(--hover)}.popover .wide{width:100%;text-align:left;padding:6px 4px 2px}.banner{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;padding:10px 16px;background:#fdecea;color:#7a1f19;font-size:14px;border-top:1px solid #f3c9c5}.banner[hidden]{display:none}#editor-container{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;position:relative}.btn{display:inline-block;padding:8px 14px;border:1px solid var(--line);border-radius:var(--radius);background:#fff;cursor:pointer;font-size:14px;text-decoration:none;color:var(--ink)}.btn:hover{background:var(--hover)}.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}.btn.primary:hover{filter:brightness(1.08)}.screen{flex:1;display:flex;align-items:center;justify-content:center;padding:16px}.card{width:min(420px,100%);padding:32px;background:var(--panel);border:1px solid var(--line);border-radius:14px;display:flex;flex-direction:column;gap:14px;align-items:flex-start}.card h1{margin:0;font-size:28px}.card .lead{margin:0;color:var(--muted)}.card .error{margin:0;color:var(--danger)}.card .hint{margin:0;color:var(--muted);font-size:13px}#toast{position:fixed;left:50%;top:16px;transform:translate(-50%);z-index:50;padding:10px 16px;background:#1f2328;color:#fff;border-radius:var(--radius);font-size:14px;max-width:calc(100vw - 32px)}#toast[hidden]{display:none}[hidden],.main-menu-container{display:none!important}.searchbar{display:flex;align-items:center;gap:6px;padding:6px 16px 8px;border-top:1px solid var(--line)}.search-input{flex:1;min-width:0;max-width:320px;font:inherit;font-size:14px;padding:5px 10px;border:1px solid var(--line);border-radius:6px;background:#fff;outline:none}.search-input:focus{border-color:var(--accent)}.searchbar.empty .search-input{border-color:var(--danger)}.search-count{min-width:72px;font-size:13px;color:var(--muted)}