*{box-sizing:border-box}:root{--bg:#fff;--nav-bg:#f0efe9;--list-bg:#f7f7f5;--border:#e5e5e0;--text:#2b2b2b;--muted:#8a8a82;--accent:#2f9e44;--accent-hover:#268a3a;--danger:#e03131;--selected:#e6f4ea}html,body{height:100%;color:var(--text);background:var(--bg);margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Hiragino Sans,Yu Gothic UI,Meiryo,sans-serif}.app{height:100vh;display:flex;overflow:hidden}.mobile-menu-btn,.mobile-back-btn,.nav-backdrop{display:none}.nav{background:var(--nav-bg);border-right:1px solid var(--border);flex-direction:column;width:220px;min-width:220px;display:flex;overflow-y:auto}.nav-brand{align-items:center;gap:6px;padding:16px 16px 10px;font-size:17px;font-weight:800;display:flex}.brand-text{background:linear-gradient(135deg,#8b5cf6,#ec4899);color:#0000;-webkit-background-clip:text;background-clip:text}.nav-section{padding:8px 8px 4px}.nav-section-header{color:var(--muted);text-transform:uppercase;letter-spacing:.04em;justify-content:space-between;align-items:center;padding:6px 8px;font-size:12px;font-weight:700;display:flex}.nav-item{cursor:pointer;border-radius:6px;justify-content:space-between;align-items:center;gap:6px;padding:7px 10px;font-size:14px;display:flex}.nav-item:hover{background:#0000000d}.nav-item.selected{background:var(--selected);font-weight:600}.nav-item-label{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.nav-count{color:var(--muted);flex-shrink:0;font-size:12px}.nav-empty{color:var(--muted);padding:4px 12px;font-size:13px}.nb-row{position:relative}.nb-row .nav-item-label{flex:1;min-width:0}.nb-toggle{cursor:pointer;color:var(--muted);background:0 0;border:none;flex-shrink:0;width:14px;padding:0;font-size:11px;line-height:1}.nb-menu-btn{opacity:.55;flex-shrink:0}@media (hover:hover){.nb-menu-btn{opacity:0}.nb-row:hover .nb-menu-btn{opacity:1}}.nb-row.drop-hover{outline:2px solid var(--accent);outline-offset:-2px;background:var(--selected)}.nb-row.dragging{opacity:.5}.nb-droproot.drop-hover{background:var(--selected);border-radius:6px}.nb-menu{z-index:60;background:var(--bg);border:1px solid var(--border);border-radius:8px;flex-direction:column;min-width:190px;padding:4px;display:flex;position:absolute;top:100%;right:6px;box-shadow:0 6px 20px #00000026}.nb-menu button{text-align:left;cursor:pointer;color:var(--text);background:0 0;border:none;border-radius:6px;padding:8px 10px;font-size:13px}.nb-menu button:hover{background:var(--list-bg)}.nb-menu .nb-menu-danger{color:var(--danger)}.menu-backdrop{z-index:55;position:fixed;inset:0}.trash-actions{gap:8px;margin-top:8px;display:flex}.trash-btn{border:1px solid var(--border);color:var(--text);cursor:pointer;background:#fff;border-radius:6px;padding:4px 8px;font-size:12px}.trash-btn-danger{color:var(--danger)}.nav-footer{border-top:1px solid var(--border);margin-top:auto;padding:12px}.icon-btn{cursor:pointer;color:var(--muted);background:0 0;border:none;border-radius:4px;padding:2px 6px;font-size:16px;line-height:1}.icon-btn:hover{color:var(--text);background:#00000014}.list{background:var(--list-bg);border-right:1px solid var(--border);flex-direction:column;width:300px;min-width:300px;display:flex}.offline-banner{color:#664d03;text-align:center;background:#fff3bf;border-bottom:1px solid #ffe066;padding:6px 10px;font-size:12.5px;font-weight:600}.list-header{border-bottom:1px solid var(--border);flex-direction:column;gap:8px;padding:12px;display:flex}.list-title-row{justify-content:space-between;align-items:center;display:flex}.list-title{white-space:nowrap;text-overflow:ellipsis;flex:1;font-size:15px;font-weight:700;overflow:hidden}.search-input{border:1px solid var(--border);background:#fff;border-radius:8px;outline:none;width:100%;padding:8px 10px;font-size:14px}.search-input:focus{border-color:var(--accent)}.btn{cursor:pointer;background:var(--accent);color:#fff;border:none;border-radius:6px;padding:7px 11px;font-size:13px;font-weight:600}.btn:hover{background:var(--accent-hover)}.note-list{flex:1;padding:8px;overflow-y:auto}.note-item{cursor:pointer;border-radius:8px;margin-bottom:4px;padding:12px}.note-item:hover{background:#0000000a}.note-item.selected{background:var(--selected)}.note-item-title{overflow-wrap:anywhere;word-break:break-word;font-size:15px;font-weight:600}.note-item-preview{color:var(--muted);white-space:nowrap;text-overflow:ellipsis;margin-top:2px;font-size:13px;overflow:hidden}.note-item-row{align-items:flex-start;gap:10px;display:flex}.note-item-text{flex:1;min-width:0}.note-thumb{object-fit:cover;border:1px solid var(--border);background:var(--list-bg);border-radius:6px;flex-shrink:0;width:56px;height:56px}.note-item-meta{flex-wrap:wrap;align-items:center;gap:6px;margin-top:6px;display:flex}.note-item-date{color:var(--muted);font-size:11px}.mini-tag{color:#555;background:#e3e3dc;border-radius:10px;padding:1px 7px;font-size:11px}.empty-list{color:var(--muted);text-align:center;padding:32px 16px;font-size:14px}.editor-pane{flex-direction:column;flex:1;display:flex;overflow:hidden}.editor-topbar{border-bottom:1px solid var(--border);flex-wrap:wrap;align-items:center;gap:10px;padding:10px 24px;display:flex}.notebook-select{border:1px solid var(--border);background:#fff;border-radius:6px;padding:6px 8px;font-size:13px}.tags-input{border:1px solid var(--border);border-radius:6px;outline:none;flex:1;min-width:160px;padding:6px 10px;font-size:13px}.tags-input:focus{border-color:var(--accent)}.save-status{color:var(--muted);min-width:84px;font-size:12px}.btn-danger{border:1px solid var(--border);color:var(--danger);cursor:pointer;background:#fff;border-radius:6px;padding:6px 10px;font-size:13px}.btn-danger:hover{background:#e0313114}.editor-toolbar{border-bottom:1px solid var(--border);align-items:center;gap:6px;padding:8px 24px;display:flex}.tool-btn{border:1px solid var(--border);cursor:pointer;background:#fff;border-radius:6px;min-width:34px;height:32px;font-size:14px}.tool-btn:hover{background:#f0f0ee}.tool-btn.active{background:var(--selected);border-color:var(--accent);color:var(--accent)}.note-view{flex-direction:column;flex:1;min-height:0;display:flex}.note-view-topbar{border-bottom:1px solid var(--border);align-items:center;gap:10px;padding:10px 24px;display:flex}.note-view-nb{color:var(--muted);white-space:nowrap;text-overflow:ellipsis;font-size:13px;overflow:hidden}.note-view-spacer{flex:1}.note-view-scroll{flex:1;justify-content:center;display:flex;overflow-y:auto}.note-view-inner{width:100%;max-width:760px;padding:28px 24px 80px}.note-view-title{word-break:break-word;margin:0 0 10px;font-size:28px;font-weight:700;line-height:1.3}.note-view-meta{flex-wrap:wrap;align-items:center;gap:6px;margin-bottom:18px;display:flex}.note-view-date{color:var(--muted);font-size:12px}.note-view-empty{color:var(--muted)}.note-view-content{word-break:break-word;font-size:16px;line-height:1.7}.note-view-content .ProseMirror{min-height:0;line-height:1.45}.note-view-content .ProseMirror p{margin:0 0 4px}.note-view-content .ProseMirror h1,.note-view-content .ProseMirror h2{margin:12px 0 4px}.note-view-content .ProseMirror ul,.note-view-content .ProseMirror ol{margin:0 0 4px}.note-view-content .ProseMirror li,.note-view-content .ProseMirror li p{margin:0}.note-view-content .ProseMirror img{margin:6px 0}.note-find-bar{background:var(--nav-bg);border-bottom:1px solid var(--border);flex-wrap:nowrap;flex-shrink:0;align-items:center;gap:6px;padding:8px 12px;display:flex}.note-find-input{border:1px solid var(--border);background:#fff;border-radius:8px;outline:none;flex:1;min-width:0;padding:8px 10px;font-size:16px}.note-find-input:focus{border-color:var(--accent)}.note-find-count{color:var(--muted);white-space:nowrap;text-align:right;min-width:42px;font-size:12px}.note-find-btn{border:1px solid var(--border);cursor:pointer;color:var(--text);background:#fff;border-radius:6px;padding:6px 9px;font-size:14px}.note-find-btn:disabled{opacity:.4;cursor:default}::highlight(mn-find){background-color:#fde68a}::highlight(mn-find-current){color:#111;background-color:#fb923c}.icon-btn.active{background:var(--selected);color:var(--text)}.icon-btn-danger:hover{background:#e031311a}.app.dashboard-open .list{display:none}.dash{background:radial-gradient(1100px 380px at 12% -8%, #8b5cf61a, transparent 60%), radial-gradient(900px 340px at 100% 0%, #0ea5e91a, transparent 55%), var(--bg);flex-direction:column;flex:1;min-height:0;display:flex}.dash-topbar{border-bottom:1px solid var(--border);align-items:center;gap:10px;padding:12px 24px;display:flex}.dash-title{background:linear-gradient(135deg,#8b5cf6,#ec4899);color:#0000;-webkit-background-clip:text;background-clip:text;font-size:17px;font-weight:800}.dash-scroll{flex:1;overflow-y:auto}.dash-inner{width:100%;max-width:920px;margin:0 auto;padding:22px 24px 80px}.dash-section{margin-bottom:30px}.dash-h{color:var(--text);justify-content:space-between;align-items:center;gap:8px;margin:0 0 12px;font-size:15px;font-weight:800;display:flex}.dash-tiles{grid-template-columns:1fr 1fr;gap:14px;margin-bottom:28px;display:grid}.dash-tile{color:#fff;cursor:pointer;text-align:left;border:none;border-radius:16px;align-items:center;gap:14px;padding:18px 20px;transition:transform .12s,box-shadow .12s,filter .12s;display:flex;box-shadow:0 6px 18px #0000001f}.dash-tile:hover{filter:saturate(1.1);transform:translateY(-2px);box-shadow:0 12px 28px #0003}.dash-tile:active{transform:translateY(0)}.dash-tile-note{background:linear-gradient(135deg,#10b981,#0ea5e9)}.dash-tile-book{background:linear-gradient(135deg,#8b5cf6,#ec4899)}.dash-tile-icon{filter:drop-shadow(0 2px 3px #00000040);font-size:30px;line-height:1}.dash-tile-text{flex-direction:column;gap:3px;min-width:0;display:flex}.dash-tile-label{font-size:16px;font-weight:800}.dash-tile-sub{opacity:.92;font-size:12px;font-weight:500}.dash-scratch-status{color:var(--muted);font-size:12px;font-weight:400}.dash-recent-select{border:1px solid var(--border);color:var(--text);cursor:pointer;background:#fff;border-radius:8px;outline:none;padding:4px 8px;font-size:12px;font-weight:600}.dash-recent-select:focus{border-color:var(--accent)}.dash-empty{color:var(--muted);padding:8px 0;font-size:13px}.dash-cards{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px;display:grid}.dash-card{text-align:left;border:1px solid var(--border);cursor:pointer;background:#fff;border-radius:12px;align-items:flex-start;gap:10px;padding:12px;transition:transform .12s,box-shadow .12s,border-color .12s;display:flex;box-shadow:0 1px 3px #0000000d}.dash-card:hover{border-color:#8b5cf6;transform:translateY(-2px);box-shadow:0 8px 20px #8b5cf626}.dash-card-thumb{object-fit:cover;border:1px solid var(--border);border-radius:6px;flex-shrink:0;width:48px;height:48px}.dash-card-body{flex:1;min-width:0}.dash-card-title{white-space:nowrap;text-overflow:ellipsis;font-size:14px;font-weight:600;overflow:hidden}.dash-card-preview{color:var(--muted);white-space:nowrap;text-overflow:ellipsis;margin-top:2px;font-size:12px;overflow:hidden}.dash-card-date{color:var(--muted);margin-top:6px;font-size:11px}.dash-scratch{resize:vertical;background:linear-gradient(#fffdf3,#fff9e6);border:1px solid #f0e6c8;border-radius:12px;outline:none;width:100%;min-height:180px;padding:14px 16px;font-family:inherit;font-size:15px;line-height:1.6;box-shadow:0 2px 8px #eab3081f}.dash-scratch:focus{border-color:#f5c518;box-shadow:0 4px 14px #eab30833}.note-view-content p{margin:0 0 12px}.note-view-content h1{font-size:24px}.note-view-content h2{font-size:20px}.note-view-content ul,.note-view-content ol{padding-left:24px}.note-view-content blockquote{border-left:3px solid var(--border);color:var(--muted);margin-left:0;padding-left:14px}.note-view-content img{border-radius:6px;max-width:100%;height:auto;margin:4px 0}.note-view-content a{color:var(--accent)}.editor-scroll{flex:1;justify-content:center;display:flex;overflow-y:auto}.editor-inner{width:100%;max-width:760px;padding:28px 24px 80px}.title-input{width:100%;color:var(--text);resize:none;white-space:pre-wrap;overflow-wrap:anywhere;background:0 0;border:none;outline:none;margin-bottom:14px;font-family:inherit;font-size:28px;font-weight:700;line-height:1.3;display:block;overflow:hidden}.title-input::placeholder{color:#ccccc6}.ProseMirror{outline:none;min-height:300px;font-size:16px;line-height:1.45}.ProseMirror p{margin:0 0 4px}.ProseMirror h1{margin:12px 0 4px;font-size:24px}.ProseMirror h2{margin:12px 0 4px;font-size:20px}.ProseMirror ul,.ProseMirror ol{margin:0 0 4px;padding-left:24px}.ProseMirror li,.ProseMirror li p{margin:0}.ProseMirror blockquote{border-left:3px solid var(--border);color:var(--muted);margin-left:0;padding-left:14px}.ProseMirror img{border-radius:6px;max-width:100%;height:auto;margin:4px 0}.ProseMirror img.ProseMirror-selectednode{outline:2px solid var(--accent)}.ProseMirror p.is-editor-empty:first-child:before{content:attr(data-placeholder);color:#ccccc6;float:left;pointer-events:none;height:0}.no-selection{color:var(--muted);flex:1;justify-content:center;align-items:center;font-size:15px;display:flex}.lock-btn{border:1px solid var(--border);cursor:pointer;white-space:nowrap;background:#fff;border-radius:6px;padding:6px 10px;font-size:13px}.lock-btn:hover{background:#f0f0ee}.lock-btn.active{color:#e8590c;background:#fff4e6;border-color:#f08c00}.locked-view{text-align:center;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:12px;padding:24px;display:flex}.locked-icon{font-size:48px}.locked-title{font-size:20px;font-weight:700}.locked-desc{color:var(--muted);margin:0}.locked-alt{border:1px solid var(--border);color:var(--text);cursor:pointer;background:#fff;border-radius:6px;padding:9px 14px;font-size:14px}.locked-alt:hover{background:#f0f0ee}.locked-back{color:var(--muted);cursor:pointer;background:0 0;border:none;font-size:13px}.locked-back:hover{color:var(--text)}.pp-overlay{z-index:100;background:#00000073;justify-content:center;align-items:center;padding:20px;display:flex;position:fixed;inset:0}.pp-card{background:#fff;border-radius:14px;flex-direction:column;gap:12px;width:100%;max-width:380px;padding:24px;display:flex;box-shadow:0 10px 40px #00000040}.pp-title{font-size:17px;font-weight:700}.pp-desc{color:var(--muted);margin:0;font-size:13px;line-height:1.6}.pp-input{border:1px solid var(--border);border-radius:8px;outline:none;padding:11px 12px;font-size:16px}.pp-input:focus{border-color:var(--accent)}.pp-error{color:var(--danger);font-size:13px}.pp-actions{justify-content:flex-end;gap:8px;margin-top:4px;display:flex}.pp-cancel{border:1px solid var(--border);cursor:pointer;background:#fff;border-radius:6px;padding:8px 14px;font-size:14px}.pp-cancel:hover{background:#f0f0ee}.pane-toggles{display:none}.pane-toggle-btn{border:1px solid var(--border);cursor:pointer;background:#fff;border-radius:6px;padding:5px 10px;font-size:13px}.pane-toggle-btn:hover{background:#f0f0ee}.pane-toggle-btn.active{background:var(--selected);border-color:var(--accent);color:var(--accent)}@media (min-width:769px){.pane-toggles{border-bottom:1px solid var(--border);align-items:center;gap:6px;padding:8px 12px;display:flex}.app.nav-hidden .nav,.app.list-hidden .list{display:none}}.login-wrap{background:var(--nav-bg);justify-content:center;align-items:center;height:100vh;padding:20px;display:flex}.login-card{border:1px solid var(--border);background:#fff;border-radius:14px;flex-direction:column;gap:14px;width:100%;max-width:360px;padding:32px 28px;display:flex;box-shadow:0 8px 30px #0000000f}.login-brand{text-align:center;font-size:22px;font-weight:700}.login-desc{text-align:center;color:var(--muted);margin:0;font-size:14px}.login-input{border:1px solid var(--border);border-radius:8px;outline:none;padding:12px 14px;font-size:16px}.login-input:focus{border-color:var(--accent)}.login-btn{background:var(--accent);color:#fff;cursor:pointer;border:none;border-radius:8px;padding:12px;font-size:15px;font-weight:600}.login-btn:hover{background:var(--accent-hover)}.login-btn:disabled{opacity:.6;cursor:default}.login-error{color:var(--danger);text-align:center;font-size:13px}.login-bio-btn{border:1px solid var(--accent);color:var(--accent);cursor:pointer;background:0 0;border-radius:8px;padding:11px;font-size:15px;font-weight:600}.login-bio-btn:hover{background:#0000000a}.login-bio-btn:disabled{opacity:.6;cursor:default}.login-switch{text-align:center;color:var(--muted);font-size:13px}.login-link{color:var(--accent);cursor:pointer;background:0 0;border:none;padding:0;font-size:13px;font-weight:600}.login-link:hover{text-decoration:underline}.nav-user{color:var(--muted);text-align:center;text-overflow:ellipsis;white-space:nowrap;margin-top:8px;font-size:13px;overflow:hidden}.logout-link{border:1px solid var(--border);width:100%;color:var(--muted);cursor:pointer;background:0 0;border-radius:6px;margin-top:8px;padding:7px;font-size:13px;display:block}.logout-link:hover{color:var(--text);background:#0000000d}@media (max-width:768px){.nav{z-index:50;width:82%;max-width:300px;transition:transform .25s;position:fixed;top:0;bottom:0;left:0;transform:translate(-100%)}.app.nav-open .nav{transform:translate(0);box-shadow:0 0 40px #00000059}.app.nav-open .nav-backdrop{z-index:40;background:#0006;display:block;position:fixed;inset:0}.list{border-right:none;width:100%;min-width:0}.editor-pane{background:var(--bg);z-index:30;transition:transform .25s;position:fixed;inset:0;transform:translate(100%)}.app.editor-open .editor-pane,.app.dashboard-open .editor-pane{transform:translate(0)}.app.dashboard-open .pane-toggles{display:none}.dash-topbar{padding:10px 12px}.dash-inner{padding:16px 14px 80px}.dash-tile{gap:10px;padding:14px}.dash-tile-icon{font-size:24px}.dash-tile-label{font-size:14px}.dash-tile-sub{display:none}.mobile-menu-btn,.mobile-back-btn{cursor:pointer;color:var(--text);background:0 0;border:none;border-radius:6px;align-items:center;gap:4px;padding:4px 8px;font-size:20px;line-height:1;display:inline-flex}.mobile-back-btn{color:var(--accent);font-size:15px;font-weight:600}.note-item{padding:14px 12px}.editor-inner{padding:20px 16px 80px}.title-input{font-size:24px}.editor-topbar{gap:8px;padding:10px 12px}.editor-toolbar{padding:8px 12px;overflow-x:auto}.search-input,.tags-input,.notebook-select{font-size:16px}}