:root{--accent:#0891b2;--accent-2:#10b981;--accent-soft:#e0f4f8;--accent-rgb:8, 145, 178;--top-bg:linear-gradient(100deg, #0b1220 0%, #10233a 55%, #0f3b40 100%);--nav-bg:#f3f6f8;--list-bg:#fafcfd;--border:#dde5eb;--text:#1f2933;--muted:#64748b;--desk:#e5ebf0;color:var(--text);font-family:Segoe UI,system-ui,-apple-system,BlinkMacSystemFont,Roboto,Noto Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{overscroll-behavior:none;background:#fff}button{font:inherit}.app{grid-template-rows:44px 1fr;grid-template-columns:220px 220px minmax(0,1fr);height:100%;display:grid}.app.nav-closed{grid-template-columns:minmax(0,1fr)}.topbar{background:var(--top-bg);color:#fff;z-index:2;grid-column:1/-1;align-items:center;gap:10px;padding:0 10px;display:flex;position:relative;box-shadow:inset 0 1px #ffffff0f,0 2px 8px #0000002e}.topbar:after{content:"";opacity:.85;background:linear-gradient(90deg,#22d3ee,#10b981,#a3e635);height:2px;position:absolute;bottom:0;left:0;right:0}.brand{align-items:center;gap:9px;min-width:0;display:flex}.brand-name{letter-spacing:.2px;background:linear-gradient(90deg,#67e8f9,#6ee7b7);color:#0000;-webkit-background-clip:text;background-clip:text;font-size:17px;font-weight:700}.brand-by{color:#e2f0f5b8;white-space:nowrap;text-overflow:ellipsis;font-size:11.5px;overflow:hidden}@media (max-width:700px){.brand-by{display:none}}@media (max-width:1000px){.app{grid-template-columns:170px 170px minmax(0,1fr)}}.main{flex-direction:column;min-width:0;min-height:0;display:flex;overflow:hidden}.nav,.pagelist{border-right:1px solid var(--border);min-height:0;padding-bottom:16px;overflow-y:auto}.nav{background:var(--nav-bg)}.pagelist{background:var(--list-bg)}.nav-head{text-transform:uppercase;letter-spacing:.5px;color:var(--muted);justify-content:space-between;align-items:center;padding:10px 12px 6px;font-size:12px;font-weight:600;display:flex}.nav-item{cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;gap:8px;padding:8px 12px;font-size:14px;display:flex}.nav-item:hover{background:rgba(var(--accent-rgb), .06)}.nav-item.on{background:var(--accent-soft);font-weight:600}.nav-item.section{border-left:5px solid #0000;margin-left:12px;padding-left:22px}.nav-item.page.on{box-shadow:inset 3px 0 0 var(--accent)}.nav-label{text-overflow:ellipsis;white-space:nowrap;flex:1;overflow:hidden}.del-btn{visibility:hidden;cursor:pointer;opacity:.6;background:0 0;border:none;padding:0 2px;font-size:13px}.nav-item:hover .del-btn,.nav-item.on .del-btn{visibility:visible}.del-btn:hover{opacity:1}.sections{padding-bottom:6px}.add-link{color:var(--accent);cursor:pointer;background:0 0;border:none;padding:6px 12px 6px 30px;font-size:13px}.pagelist .add-link{padding-left:12px}.icon-btn{cursor:pointer;color:var(--accent);background:0 0;border:none;border-radius:6px;padding:2px 8px;font-size:16px}.icon-btn:hover{background:rgba(var(--accent-rgb), .1)}.icon-btn.light{color:#fff;font-size:18px}.icon-btn.light:hover{background:#ffffff26}.icon-btn:disabled{opacity:.3;cursor:default}.empty-cta{border:1px dashed var(--accent);width:calc(100% - 24px);color:var(--accent);cursor:pointer;background:#fff;border-radius:8px;margin:8px 12px;padding:10px}.nav-hint{color:var(--muted);padding:16px 12px 0;font-size:11px}.editor{flex-direction:column;flex:1;min-height:0;display:flex}.editor-empty{color:var(--muted);margin:auto}.toolbar{border-bottom:1px solid var(--border);background:#fff;flex-wrap:wrap;align-items:center;gap:6px 14px;padding:6px 10px;display:flex}.tb-group{align-items:center;gap:4px;display:flex}.tb-right{margin-left:auto}.tb-btn{cursor:pointer;color:var(--text);background:0 0;border:1px solid #0000;border-radius:6px;align-items:center;gap:6px;padding:5px 9px;font-size:13px;display:flex}.tb-btn:hover{background:#f3f3f3}.tb-btn.on{background:var(--accent-soft);border-color:#b6e3ee}.tb-btn.small{justify-content:center;min-width:32px;padding:5px 7px}.tb-icon{font-size:16px}.zoom-val{min-width:52px!important}.width-dot{background:var(--text);border-radius:50%;display:inline-block}.swatch{cursor:pointer;border:2px solid #fff;border-radius:50%;width:22px;height:22px;padding:0;box-shadow:0 0 0 1px #ccc}.swatch.on{box-shadow:0 0 0 2px var(--accent)}.toolbar select{font:inherit;border:1px solid var(--border);background:#fff;border-radius:6px;padding:4px 6px;font-size:13px}.page-scroll{background:var(--desk);flex:1;min-height:0;padding:24px;overflow:auto}.sheet{-webkit-touch-callout:none;touch-action:none;-webkit-user-select:none;user-select:none;cursor:crosshair;background:#fff;margin:0 auto;position:relative;box-shadow:0 1px 4px #0000001f}.sheet.tool-text{cursor:text}.sheet.tool-eraser{cursor:cell}.ink{display:block;position:absolute;top:0;bottom:0;left:0;right:0}.page-title{color:var(--text);background:0 0;border:none;border-bottom:1px solid #ddd;outline:none;padding:0 0 4px;font-family:inherit;font-weight:300;position:absolute}.page-title:focus{border-bottom-color:var(--accent)}.page-date{color:var(--muted);pointer-events:none;position:absolute}.text-layer{position:absolute;top:0;bottom:0;left:0;right:0}.textbox{border:1px solid #0000;border-radius:3px;position:absolute}.textbox:hover,.textbox:focus-within{border-color:#a8dbe7}.textbox-handle{cursor:move;touch-action:none;height:8px}.textbox:hover .textbox-handle,.textbox:focus-within .textbox-handle{background:#d3eef4}.textbox textarea{resize:none;width:100%;color:var(--text);-webkit-user-select:text;user-select:text;background:0 0;border:none;outline:none;padding:2px 6px 4px;font-family:inherit;line-height:1.5;display:block;overflow:hidden}.pdf-page{background:#fff;display:block;position:absolute;left:0;box-shadow:0 0 0 1px #e2e2e2}.pdf-error{color:#a4262c;background:#fde7e9;border-radius:6px;padding:12px;position:absolute;left:24px;right:24px}.add-link:disabled{color:var(--muted);cursor:default}.pdf-label{color:var(--muted);white-space:nowrap;align-items:center;gap:6px;display:flex;position:absolute;left:0}.pdf-label button{cursor:pointer;color:var(--muted);font-size:inherit;background:0 0;border:none;border-radius:4px;padding:0 4px}.pdf-label button:hover{color:#a4262c;background:#fde7e9}.tb-btn.busy{opacity:.6;cursor:default}.nav-item.group{color:var(--text);gap:6px}.caret{width:10px;color:var(--muted);font-size:11px}.more-btn{visibility:hidden;cursor:pointer;color:var(--muted);background:0 0;border:none;border-radius:4px;padding:0 4px;font-size:15px;line-height:1}.nav-item:hover .more-btn,.nav-item.on .more-btn{visibility:visible}@media (hover:none){.more-btn,.del-btn{visibility:visible}}.more-btn:hover{background:rgba(var(--accent-rgb), .12);color:var(--accent)}.ctx-menu{z-index:50;border:1px solid var(--border);background:#fff;border-radius:8px;flex-direction:column;min-width:220px;max-width:320px;max-height:70vh;padding:6px;display:flex;position:fixed;overflow-y:auto;box-shadow:0 6px 24px #00000029}.ctx-menu>button{text-align:left;cursor:pointer;color:var(--text);text-overflow:ellipsis;white-space:nowrap;background:0 0;border:none;border-radius:5px;padding:7px 10px;font-size:14px;overflow:hidden}.ctx-menu>button:hover:not(:disabled){background:var(--accent-soft)}.ctx-menu>button:disabled{color:#b5b5b5;cursor:default}.ctx-menu>button.danger{color:#a4262c}.ctx-menu hr{border:none;border-top:1px solid var(--border);margin:4px 0}.menu-label{text-transform:uppercase;letter-spacing:.4px;color:var(--muted);padding:8px 10px 4px;font-size:11px}.menu-colors{grid-template-columns:repeat(6,22px);gap:8px;padding:2px 10px 6px;display:grid}.custom-color{background:conic-gradient(#e81123,#ffc83d,#6bb700,#00b7c3,#0078d4,#8764b8,#e3008c,#e81123);display:inline-block;position:relative;overflow:hidden}.custom-color input{opacity:0;cursor:pointer;border:none;width:100%;height:100%;padding:0;position:absolute;top:0;bottom:0;left:0;right:0}.toolbar .swatch{width:20px;height:20px}.topbar-spacer{flex:1}.account-btn{color:#fff;cursor:pointer;background:0 0;border:1px solid #ffffff80;border-radius:16px;align-items:center;gap:8px;padding:4px 12px;font-size:13px;display:flex}.account-btn.signed-in{border-color:#0000;padding:3px 8px 3px 3px}.account-btn:hover{background:#ffffff26}.avatar{width:26px;height:26px;color:var(--accent);background:#fff;border-radius:50%;place-items:center;font-weight:700;display:grid}.account-name{text-overflow:ellipsis;white-space:nowrap;max-width:180px;overflow:hidden}@media (max-width:700px){.account-name{display:none}}.sheet.tool-select{cursor:default}.tb-hint{color:var(--muted);padding:0 4px;font-size:12px}.tb-btn.danger:not(:disabled){color:#a4262c}.tb-btn:disabled{opacity:.4;cursor:default}.shape-icon{text-align:center;min-width:16px;font-size:16px;line-height:1}.sheet.tool-shape{cursor:crosshair}.sheet.tool-space{cursor:row-resize}.account-note{opacity:.85;font-size:12px}.modal-backdrop{z-index:100;background:#00000059;place-items:center;padding:16px;display:grid;position:fixed;top:0;bottom:0;left:0;right:0}.modal{background:#fff;border-radius:12px;flex-direction:column;width:min(640px,100%);max-height:85vh;display:flex;position:relative;overflow:hidden;box-shadow:0 12px 40px #00000040}.modal-head{border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;padding:14px 16px;display:flex}.modal-head h2{margin:0;font-size:17px;font-weight:600}.modal-body{padding:16px}.crumbs{border-bottom:1px solid var(--border);background:var(--list-bg);padding:10px 16px;font-size:13px}.crumb{color:var(--accent);cursor:pointer;background:0 0;border:none;padding:0 2px;font-size:13px}.folder-list{flex:1;min-height:200px;padding:6px 0;overflow-y:auto}.folder-row{align-items:center;gap:8px;padding:0 12px 0 0;display:flex}.folder-row:hover{background:#eef7fa}.folder-name{text-align:left;cursor:pointer;color:var(--text);background:0 0;border:none;flex:1;padding:9px 16px;font-size:14px}.folder-row.notebook .folder-name{cursor:default;font-weight:600}.tag{color:var(--accent);background:var(--accent-soft);border-radius:10px;margin-left:8px;padding:1px 8px;font-size:11px;font-weight:400}.modal-foot{border-top:1px solid var(--border);flex-wrap:wrap;align-items:center;gap:12px;padding:12px 16px;display:flex}.modal-foot .muted{flex:1}.primary-btn{background:var(--accent);color:#fff;cursor:pointer;border:none;border-radius:8px;padding:8px 16px;font-size:14px}.primary-btn.small{padding:5px 12px;font-size:13px}.primary-btn:disabled{opacity:.5;cursor:default}.ghost-btn{border:1px solid var(--border);cursor:pointer;background:#fff;border-radius:8px;padding:7px 12px;font-size:13px}.muted{color:var(--muted);padding:12px 16px}.muted.small{padding:0;font-size:12px}.modal-busy,.modal-error{padding:10px 16px;font-size:13px}.modal-busy{background:var(--accent-soft);color:var(--accent)}.modal-error{color:#a4262c;background:#fde7e9}.menu-info{color:var(--muted);word-break:break-all;padding:0 10px 6px;font-size:12px}.sync-badge{color:var(--muted);font-size:13px}.sync-badge.ok{color:#0078d4}.sync-badge.err{color:#d83b01}.sync-badge.off{opacity:.4}.sync-badge.spin{color:#0078d4;animation:1s linear infinite qn-spin;display:inline-block}@keyframes qn-spin{to{transform:rotate(360deg)}}.favorites{border-bottom:1px solid var(--border);flex-wrap:wrap;gap:6px;padding:10px 16px;display:flex}.fav-chip{border:1px solid var(--border);background:#fff;border-radius:16px;align-items:center;display:inline-flex;overflow:hidden}.fav-chip.on{border-color:var(--accent);background:var(--accent-soft)}.fav-open,.fav-pin{cursor:pointer;background:0 0;border:none;padding:5px 8px;font-size:13px}.fav-open{color:var(--accent);padding-left:11px}.fav-pin{opacity:.3;padding-right:10px}.fav-pin.on{opacity:1}.fav-toggle{cursor:pointer;color:#c19c00;vertical-align:middle;background:0 0;border:none;padding:0 8px 0 0;font-size:17px}.nav-item.section,.nav-item.page{-webkit-touch-callout:none}.nav-item.dragging{opacity:.4}.nav-item.drop-before{box-shadow:inset 0 3px 0 var(--accent)}.nav-item.drop-after{box-shadow:inset 0 -3px 0 var(--accent)}.nav-item.drop-into{background:var(--accent-soft);outline:2px dashed var(--accent);outline-offset:-2px}.drag-ghost{z-index:200;pointer-events:none;color:#fff;white-space:nowrap;text-overflow:ellipsis;background:#0f172a;border-radius:8px;max-width:260px;padding:6px 10px;font-size:13px;position:fixed;overflow:hidden;box-shadow:0 6px 18px #00000040}.drag-hint{color:#6ee7b7}