:root{--bg: #ffffff;--bg-soft: #f5f6f8;--bg-hover: #eef0f4;--border: #e3e5ea;--text: #1d2129;--text-soft: #6b7280;--accent: #3b6fe0;--accent-soft: #e6eeff;--danger: #d14343;--bar-bg: #262b36;--bar-text: #f3f4f6;font-family:Segoe UI,Malgun Gothic,system-ui,sans-serif;font-size:14px;color:var(--text)}@media (prefers-color-scheme: dark){:root{--bg: #1c1f26;--bg-soft: #22262e;--bg-hover: #2a2f39;--border: #333844;--text: #e6e8ec;--text-soft: #9aa1ad;--accent: #7aa2ff;--accent-soft: #26324d;--danger: #f07070;--bar-bg: #3a4150}}*{box-sizing:border-box}html,body,#root{margin:0;height:100%}body{background:var(--bg)}button,input,textarea{font:inherit;color:inherit}button{cursor:pointer}html.is-note,html.is-note body,html.is-tip,html.is-tip body{background:transparent;overflow:hidden;-webkit-user-select:none;user-select:none}.tip{height:100vh;display:flex;align-items:center;gap:8px;padding:0 10px;background:var(--bg);border:1px solid var(--accent);border-radius:8px;font-size:12.5px;line-height:1.35;cursor:pointer}.tip-text{flex:1;word-break:keep-all}.tip-ok{flex:none;border:0;border-radius:6px;padding:4px 8px;background:var(--accent);color:#fff;font-size:12px}.bar{height:100%;display:flex;align-items:center;gap:6px;padding:0 8px;background:var(--note-bar, var(--bar-bg));color:var(--note-text, var(--bar-text));box-shadow:inset 0 -1px #00000024,inset -1px 0 #00000024;cursor:default}.bar-label{flex:1;font-size:11.5px;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bar-tag{font-size:10px;opacity:.7;white-space:nowrap;max-width:50px;overflow:hidden;text-overflow:ellipsis}.hidden-mark{padding:0 5px;border-radius:4px;background:var(--bg-hover)}.panel{height:100%;display:flex;flex-direction:column;background:var(--note-tint, var(--bg));border:1px solid var(--note-bar, var(--border));overflow:hidden}.panel .rich-body{background:transparent}.panel .tag-input{border-top-color:#00000014}.panel-head{display:flex;align-items:center;gap:2px;height:32px;padding:0 4px 0 10px;background:var(--note-bar, var(--bar-bg));color:var(--note-text, var(--bar-text));cursor:default;flex:none}.rich{flex:1;display:flex;flex-direction:column;min-height:0}.rich-body{flex:1;overflow-y:auto;min-height:0;cursor:text}.rich-body .ProseMirror{min-height:100%;padding:10px 16px 14px;outline:none;line-height:1.6;font-size:var(--editor-font-size, 14px);word-break:break-word}.ProseMirror p{margin:0}.ProseMirror h2{font-size:1.25em;margin:.3em 0 .2em;line-height:1.3}.ProseMirror ul,.ProseMirror ol{margin:.2em 0;padding-left:1.4em}.ProseMirror mark{border-radius:2px;padding:0 1px;color:inherit}.ProseMirror a{color:var(--accent)}.ProseMirror ul[data-type=taskList]{list-style:none;padding-left:.1em}.ProseMirror ul[data-type=taskList] li{display:flex;align-items:flex-start;gap:6px}.ProseMirror ul[data-type=taskList] li>label{flex:none;margin-top:.3em;-webkit-user-select:none;user-select:none}.ProseMirror ul[data-type=taskList] li>label input{width:14px;height:14px;margin:0;accent-color:var(--accent);cursor:pointer}.ProseMirror ul[data-type=taskList] li>div{flex:1;min-width:0}.ProseMirror ul[data-type=taskList] li[data-checked=true]>div{text-decoration:line-through;opacity:.55}.ProseMirror p.is-editor-empty:first-child:before{content:attr(data-placeholder);float:left;height:0;color:var(--text-soft);pointer-events:none}.toolbar-rich{display:flex;align-items:center;flex-wrap:wrap;gap:1px;padding:4px 8px;border-bottom:1px solid rgba(0,0,0,.08);flex:none}.tb{min-width:26px;height:24px;padding:0 5px;border:0;background:transparent;color:var(--text-soft);font-size:13px}.tb:hover{background:#00000012;color:var(--text)}.tb.on{background:#0000001a;color:var(--text)}.tb.b{font-weight:700}.tb.i{font-style:italic}.tb.u{text-decoration:underline}.tb.s{text-decoration:line-through}.tb-sep{width:1px;height:14px;margin:0 4px;background:#0000001f}.pen-wrap{position:relative;display:inline-flex}.pen-icon{display:inline-block;width:14px;height:10px;border:1px solid rgba(0,0,0,.25);vertical-align:middle}.pens{position:absolute;top:100%;left:0;z-index:10;display:flex;gap:3px;padding:4px;background:var(--bg);border:1px solid var(--border);box-shadow:0 4px 12px #00000026}.pen{width:20px;height:20px;padding:0;border:1px solid rgba(0,0,0,.2);line-height:1;font-size:13px}.pen.none{background:var(--bg);color:var(--text-soft)}.panel-title{flex:1;font-weight:600;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.icon{width:26px;height:26px;border:0;background:transparent;font-size:16px;line-height:1}.icon:hover,.icon.on{background:#0000001f}.more-backdrop{position:absolute;top:0;right:0;bottom:0;left:0;z-index:9}.more-pop{position:absolute;top:34px;right:6px;z-index:10;display:flex;flex-direction:column;gap:8px;padding:10px;background:var(--bg);border:1px solid var(--border);border-radius:8px;box-shadow:0 4px 14px #0000002e}.more-pop .swatch{width:18px;height:18px}.more-pop .color-picker{gap:6px}.more-actions{display:flex;justify-content:space-between}.color-picker{display:flex;align-items:center;gap:4px}.swatch{width:14px;height:14px;padding:0;border:1px solid rgba(0,0,0,.2)}.swatch.on{outline:2px solid var(--text);outline-offset:1px}.search-row{display:flex;gap:8px;padding:10px 10px 6px;flex:none}.search{flex:1;min-width:0;padding:6px 10px;border:1px solid var(--border);border-radius:8px;background:var(--bg-soft);outline:none}.search:focus{border-color:var(--accent)}.tag-filter{display:flex;flex-wrap:wrap;gap:5px;padding:0 10px 8px;flex:none}.chip{display:inline-flex;align-items:center;gap:4px;padding:1px 8px;border:1px solid var(--border);border-radius:999px;background:var(--bg);color:var(--text-soft);font-size:12px;line-height:20px}.chip:hover{background:var(--bg-hover)}.chip.on{background:var(--accent-soft);border-color:transparent;color:var(--accent)}.chip .count{font-size:10px;opacity:.7}.chip .x{border:0;background:none;padding:0 0 0 2px;color:inherit;font-size:13px;line-height:1}.nl-title{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:6px}.dot{width:8px;height:8px;flex:none}.pin-label{font-size:10px;font-weight:600;color:var(--accent);flex:none}.nl-preview{color:var(--text-soft);font-size:13px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.nl-meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px;font-size:11px;color:var(--text-soft)}.mini-tag{color:var(--accent)}.nl-meta .time{margin-left:auto}.editor{flex:1;display:flex;flex-direction:column;min-height:0}.tag-input{display:flex;flex-wrap:wrap;align-items:center;gap:5px;padding:8px 12px;border-top:1px solid var(--border);flex:none}.tag-input input{flex:1;min-width:80px;border:0;outline:none;background:transparent;font-size:12px;padding:2px 0}.text-btn{border:0;background:none;padding:4px 8px;border-radius:6px;color:var(--text-soft);font-size:13px}.text-btn:hover{background:var(--bg-hover);color:var(--text)}.text-btn.on{color:var(--accent)}.text-btn.danger:hover{color:var(--danger)}.primary{border:0;border-radius:8px;padding:6px 12px;background:var(--accent);color:#fff;white-space:nowrap}.empty{margin:auto;padding:24px;color:var(--text-soft);text-align:center}.error{margin:6px 10px;padding:6px 10px;border-radius:6px;background:#fde8e8;color:#9b1c1c;font-size:12px}.library{position:relative;height:100%;display:grid;grid-template-columns:210px minmax(0,1fr);overflow:hidden}.library.has-selection{grid-template-columns:210px minmax(260px,1fr) minmax(360px,46%)}.sidebar{display:flex;flex-direction:column;gap:2px;padding:14px 8px;background:var(--bg-soft);border-right:1px solid var(--border);overflow-y:auto;min-height:0}.brand{font-weight:700;font-size:15px;padding:0 10px 12px}.nav{display:flex;justify-content:space-between;align-items:center;border:0;background:none;text-align:left;padding:7px 10px;border-radius:8px}.nav:hover{background:var(--bg-hover)}.nav.on{background:var(--accent-soft);color:var(--accent)}.nav .count{color:var(--text-soft);font-size:12px}.side-label{margin:16px 10px 8px;font-size:11px;font-weight:600;color:var(--text-soft);letter-spacing:.04em}.sidebar .tag-filter{padding:0 6px}.side-hint{padding:0 10px;font-size:12px;color:var(--text-soft)}.list-col{position:relative;display:flex;flex-direction:column;min-height:0;min-width:0}.has-selection .list-col{border-right:1px solid var(--border)}.list-head{display:flex;align-items:center;gap:6px;padding:10px 12px 4px;flex:none}.list-title{flex:1;min-width:0;margin:0;font-size:17px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.list-col .search-row{padding:6px 12px 8px}.list-scroll{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column}.icon-btn{flex:none;min-width:32px;height:32px;padding:0 6px;border:0;border-radius:8px;background:transparent;color:var(--text-soft);font-size:17px;line-height:1}.icon-btn:hover{background:var(--bg-hover);color:var(--text)}.menu-btn,.fab{display:none}.sync-badge{display:inline-flex;align-items:center;gap:5px;border:0;background:none;padding:4px 6px;border-radius:8px;font-size:12px;color:var(--text-soft);white-space:nowrap}.sync-badge:hover{background:var(--bg-hover)}.sync-badge.out{color:var(--accent)}.sync-dot.idle{background:#3bb273}.note-list{padding:0 6px 12px}.nl-item{padding:8px 10px;border-radius:8px;cursor:pointer;background:var(--bg);touch-action:pan-y;transition:transform .18s}.nl-item:hover{background:var(--bg-hover)}.nl-item.sel{background:var(--accent-soft)}.tasks{color:var(--text)}.tasks.done{color:#2f9e5f}.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px;padding:2px 12px 16px;align-content:start}.card{display:flex;flex-direction:column;gap:6px;min-height:120px;padding:10px 12px;cursor:pointer;background:color-mix(in srgb,var(--card) 38%,var(--bg));border-top:4px solid var(--card);box-shadow:0 1px 2px #00000014;touch-action:pan-y;transition:transform .18s,box-shadow .15s}.card:hover{box-shadow:0 3px 10px #0000001f}.card.sel{outline:2px solid var(--accent);outline-offset:1px}.card-title{font-weight:700;display:flex;align-items:center;gap:6px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.card-body{flex:1;font-size:13px;line-height:1.45;color:var(--text-soft);white-space:pre-line;overflow:hidden;display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;word-break:break-word}.card .nl-meta{margin-top:auto}@media (prefers-color-scheme: dark){.card{background:color-mix(in srgb,var(--card) 18%,var(--bg))}}.swipe-wrap{position:relative}.swipe-bg{position:absolute;top:0;right:0;bottom:0;left:0;display:none;align-items:center;padding:0 18px;font-size:13px;font-weight:600;color:#fff;border-radius:8px}.swipe-bg.left{justify-content:flex-end;background:var(--danger)}.swipe-bg.right{justify-content:flex-start;background:var(--accent)}.swipe-wrap.to-left .swipe-bg.left,.swipe-wrap.to-right .swipe-bg.right{display:flex}.editor-col{position:relative;display:flex;flex-direction:column;min-height:0;min-width:0;background:var(--bg)}.editor-head{position:relative;display:flex;align-items:center;gap:4px;padding:6px 8px;border-bottom:1px solid var(--border);flex:none}.editor-head .spacer{flex:1}.menu-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:20}.more-menu{position:absolute;top:100%;right:8px;z-index:21;display:flex;flex-direction:column;min-width:210px;padding:8px;background:var(--bg);border:1px solid var(--border);border-radius:10px;box-shadow:0 8px 24px #0000002e}.more-label{font-size:11px;font-weight:600;color:var(--text-soft);padding:2px 6px 6px}.more-menu .color-picker{padding:0 6px 8px;flex-wrap:wrap}.more-menu button[role=menuitem]{border:0;background:none;text-align:left;padding:8px;border-radius:6px}.more-menu button[role=menuitem]:hover{background:var(--bg-hover)}.more-menu .danger{color:var(--danger)}.welcome{display:flex;flex-direction:column;align-items:center;gap:12px}.welcome-note{display:flex;flex-direction:column;gap:6px;max-width:260px;padding:16px;background:#fff9d6;color:#3a2f00;border-top:4px solid #fbe27a;box-shadow:0 1px 3px #0000001a;text-align:left}.welcome-note span{font-size:13px}.link{border:0;background:none;color:var(--accent);font-size:13px;padding:4px}.spinner{display:inline-block;width:14px;height:14px;margin-right:6px;vertical-align:-2px;border:2px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%);z-index:60;display:flex;align-items:center;gap:14px;padding:10px 16px;background:#262b36;color:#f3f4f6;border-radius:10px;box-shadow:0 8px 24px #00000040;font-size:14px;white-space:nowrap}.toast button{border:0;background:none;color:#9cc0ff;font-weight:700;padding:2px 4px}@media (max-width: 720px){.library,.library.has-selection{grid-template-columns:minmax(0,1fr)}.menu-btn{display:inline-flex;align-items:center;justify-content:center}.new-btn{display:none}.fab{position:absolute;right:18px;bottom:calc(18px + env(safe-area-inset-bottom));z-index:5;display:flex;align-items:center;justify-content:center;width:56px;height:56px;border:0;border-radius:50%;background:var(--accent);color:#fff;font-size:28px;line-height:1;box-shadow:0 6px 16px #00000040}.cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:2px 10px 90px}.note-list{padding-bottom:90px}.card{min-height:110px}.sidebar{position:absolute;inset:0 auto 0 0;width:min(280px,82vw);z-index:40;transform:translate(-100%);transition:transform .22s;box-shadow:4px 0 24px #0003;padding-top:calc(14px + env(safe-area-inset-top))}.drawer-open .sidebar{transform:none}.drawer-backdrop{position:absolute;top:0;right:0;bottom:0;left:0;z-index:39;background:#00000059}.has-selection .list-col{display:none}.editor-col{height:100%}.editor-head{padding-top:calc(6px + env(safe-area-inset-top))}.editor-head .icon-btn:first-child{font-size:26px}.editor-col .rich{display:contents}.editor-col .rich-body{order:1}.editor-col .tag-input{order:2}.editor-col .toolbar-rich{order:3;border-bottom:0;border-top:1px solid var(--border);padding-bottom:calc(4px + env(safe-area-inset-bottom));flex-wrap:nowrap;overflow-x:auto}.editor-col .pens{top:auto;bottom:100%}.toast{bottom:calc(90px + env(safe-area-inset-bottom))}}@media (pointer: coarse){.tb{min-width:40px;height:40px;font-size:16px}.pen{width:34px;height:34px}.swatch{width:28px;height:28px}.icon-btn{min-width:40px;height:40px;font-size:20px}.nav{padding:11px 12px}.chip{line-height:28px;padding:1px 12px;font-size:13px}.text-btn{padding:8px 12px}.search{padding:10px 12px;font-size:16px}.tag-input input{font-size:16px;padding:6px 0}.more-menu button[role=menuitem]{padding:12px 10px}.nl-item{padding:12px}}@media (prefers-color-scheme: dark){.panel{background:var(--bg)}}.bar-tiny,.bar-square{padding:0;justify-content:center}.bar-initial{font-size:12px;font-weight:700;line-height:1}.bar-square{align-items:flex-start;padding:6px 7px}.bar-square-text{font-size:11px;line-height:1.3;white-space:pre-wrap;word-break:break-all;overflow:hidden;display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical}.bar-medium .bar-label{font-size:12.5px}.settings{padding:20px 24px 28px;overflow-y:auto;height:100%}.settings h1{font-size:18px;margin:0 0 16px}.settings h2{font-size:12px;font-weight:600;color:var(--text-soft);margin:0 0 10px;letter-spacing:.04em}.settings section{padding:14px 0;border-top:1px solid var(--border)}.settings .row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 0;cursor:pointer}.settings .row input{width:16px;height:16px;accent-color:var(--accent)}.settings .field{display:flex;flex-direction:column;gap:6px;padding:6px 0 10px}.settings small{color:var(--text-soft);font-size:12px}.settings small.err{display:block;color:var(--danger)}.seg{display:flex;flex-wrap:wrap;gap:4px}.seg button{border:1px solid var(--border);background:var(--bg);padding:4px 10px;font-size:13px}.seg button:hover{background:var(--bg-hover)}.seg button.on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}.swatch.big{width:22px;height:22px}.settings .buttons{display:flex;gap:8px;margin-top:8px}.settings .buttons button{border:1px solid var(--border);background:var(--bg-soft);padding:6px 12px}.settings .buttons button:hover{background:var(--bg-hover)}.sidebar .side-bottom{margin-top:auto}.panel{position:relative}.panel .tag-input{padding-right:18px}.resize-grip{position:absolute;right:0;bottom:0;width:14px;height:14px;cursor:nwse-resize;background:linear-gradient(135deg,transparent 50%,rgba(0,0,0,.25) 50%,rgba(0,0,0,.25) 60%,transparent 60%,transparent 75%,rgba(0,0,0,.25) 75%,rgba(0,0,0,.25) 85%,transparent 85%)}.crash{padding:16px;font-size:13px;background:var(--bg);height:100%;overflow:auto}.crash button{border:1px solid var(--border);background:var(--bg-soft);padding:4px 10px}.crash pre{margin-top:10px;color:var(--text-soft);font-size:11px;white-space:pre-wrap}.sidebar .side-bottom{margin-top:auto;display:flex;flex-direction:column;gap:2px}.sync-line{justify-content:flex-start!important;gap:8px;font-size:12px;color:var(--text-soft);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.sync-dot{width:8px;height:8px;border-radius:50%;flex:none;background:#3bb273}.sync-dot.syncing{background:var(--accent)}.sync-dot.offline,.sync-dot.out{background:#b0b5bd}.sync-dot.error{background:var(--danger)}.account{display:flex;flex-direction:column;gap:8px}.account form{display:flex;flex-direction:column;gap:6px}.account input{padding:7px 10px;border:1px solid var(--border);background:var(--bg);outline:none}.account input:focus{border-color:var(--accent)}.account .primary{padding:7px 12px}.account .google{display:flex;align-items:center;justify-content:center;gap:8px;padding:7px 12px;border:1px solid var(--border);background:var(--bg);font-weight:600}.account .google:hover{background:var(--bg-hover)}.account .g{font-weight:800;color:#4285f4}.account .or{text-align:center;font-size:12px;color:var(--text-soft)}.account .link{border:0;background:none;color:var(--accent);font-size:12px;padding:0;align-self:flex-start}.account-user{display:flex;flex-direction:column;gap:2px}.sync-state{font-size:12px;color:var(--text-soft)}.sync-state.error{color:var(--danger)}.account .buttons{display:flex;gap:8px}.account .buttons button{border:1px solid var(--border);background:var(--bg-soft);padding:6px 12px}.account .buttons button:disabled{opacity:.5}.muted{color:var(--text-soft);font-size:12px;margin:0}.msg{font-size:12px;margin:0;color:#2f7d4f}.msg.err{color:var(--danger)}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#00000059;display:grid;place-items:center;z-index:50;padding:16px}.modal{width:min(360px,100%);background:var(--bg);border:1px solid var(--border);padding:16px;box-shadow:0 12px 32px #00000040}.modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.policy a{color:var(--text-soft)}a.nav{text-decoration:none;color:inherit;font-size:14px}.bar:active,.panel-head:active{cursor:grabbing}.settings small.block{display:block;margin-top:2px}.empty-trash{white-space:nowrap}