:root{--bg:#fff;--bg-side:#f4f5f3;--bg-hover:#eceeeb;--bg-active:#dcefe4;--fg:#1d201e;--fg-dim:#6b716d;--border:#e0e3e0;--accent:#1f7a4d;--accent-fg:#fff;--danger:#c0392b;--shadow:0 8px 30px #00000026;--radius:8px;color:var(--fg);background:var(--bg);-webkit-text-size-adjust:100%;font-family:system-ui,-apple-system,Segoe UI,Hiragino Sans,Noto Sans JP,Meiryo,sans-serif;font-size:15px}@media (prefers-color-scheme:dark){:root{--bg:#1b1d1c;--bg-side:#222524;--bg-hover:#2b2f2d;--bg-active:#23402f;--fg:#e6e8e6;--fg-dim:#9aa19c;--border:#353a37;--accent:#3fae75;--shadow:0 8px 30px #00000080}}*{box-sizing:border-box}html,body,#app,.app-root{height:100%;margin:0}body{background:var(--bg);overscroll-behavior:none}button,input,select{font:inherit;color:inherit}a{color:var(--accent)}.btn{border:1px solid var(--border);background:var(--bg);border-radius:var(--radius);cursor:pointer;padding:8px 14px}.btn:hover{background:var(--bg-hover)}.btn.primary{background:var(--accent);color:var(--accent-fg);border-color:var(--accent)}.btn.primary:hover{filter:brightness(1.08)}.btn.danger{color:var(--danger);border-color:var(--danger)}.btn.small{padding:4px 10px;font-size:13px}.btn.wide{width:100%}.btn.dim{opacity:.5}.btn:disabled{opacity:.6;cursor:default}.icon-btn{cursor:pointer;color:var(--fg-dim);background:0 0;border:none;border-radius:6px;padding:6px 8px;font-size:18px;line-height:1}.icon-btn:hover{background:var(--bg-hover);color:var(--fg)}.icon-btn.small{padding:4px 6px;font-size:14px}.error{color:var(--danger);font-size:14px}.ok{color:var(--accent);font-size:14px}.note-text{color:var(--fg-dim);font-size:13px;line-height:1.6}.row{display:flex}.gap{gap:8px}.mobile-only{display:none}.splash{height:100%;color:var(--fg-dim);flex-direction:column;justify-content:center;align-items:center;display:flex}.spinner{border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;width:32px;height:32px;animation:1s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.toast{left:50%;bottom:calc(24px + env(safe-area-inset-bottom));color:#fff;border-radius:var(--radius);box-shadow:var(--shadow);z-index:100;cursor:pointer;background:#2b2f2d;max-width:calc(100vw - 32px);padding:10px 18px;font-size:14px;position:fixed;transform:translate(-50%)}.toast.error{background:var(--danger)}.auth{background:var(--bg-side);justify-content:center;align-items:center;min-height:100%;padding:16px;display:flex}.auth-card{background:var(--bg);width:100%;max-width:400px;box-shadow:var(--shadow);border-radius:12px;padding:28px}.auth-logo{align-items:center;gap:10px;margin-bottom:8px;font-size:22px;font-weight:700;display:flex}.auth h1{margin:12px 0;font-size:20px}.auth label,.modal label{color:var(--fg-dim);margin:12px 0;font-size:13px;display:block}.auth input[type=email],.auth input[type=password],.auth input[type=text],.modal input[type=password]{border:1px solid var(--border);border-radius:var(--radius);background:var(--bg);width:100%;color:var(--fg);margin-top:4px;padding:10px;font-size:16px;display:block}.auth .btn.wide{margin-top:12px;padding:12px}.links{justify-content:space-between;margin-top:16px;font-size:13px;display:flex}.check{align-items:center;gap:8px;color:var(--fg)!important;font-size:15px!important;display:flex!important}.recovery-key{letter-spacing:1px;background:var(--bg-side);border-radius:var(--radius);word-break:break-all;-webkit-user-select:all;user-select:all;margin:12px 0;padding:14px;font-family:ui-monospace,Consolas,monospace;font-size:17px;line-height:1.8}.main{grid-template-columns:240px 340px 1fr;height:100%;display:grid}.col-nav,.col-list,.col-editor{min-width:0;min-height:0}.sidebar{background:var(--bg-side);border-right:1px solid var(--border);flex-direction:column;display:flex}.side-head{padding:12px}.side-scroll{flex:1;padding:0 6px 12px;overflow-y:auto}.side-section{color:var(--fg-dim);justify-content:space-between;align-items:center;padding:14px 8px 4px;font-size:12px;font-weight:600;display:flex}.side-row{align-items:center;display:flex}.side-row .side-item{flex:1}.side-row .icon-btn{visibility:hidden}.side-row:hover .icon-btn{visibility:visible}.side-item{cursor:pointer;text-align:left;background:0 0;border:none;border-radius:6px;justify-content:space-between;gap:8px;width:100%;padding:7px 10px;display:flex}.side-item span:first-child{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.side-item:hover{background:var(--bg-hover)}.side-item.active{background:var(--bg-active);font-weight:600}.count{color:var(--fg-dim);flex-shrink:0;font-size:12px}.side-foot{padding:8px 10px calc(8px + env(safe-area-inset-bottom));border-top:1px solid var(--border);align-items:center;display:flex}.sync-state{color:var(--fg-dim);flex:1;font-size:12px}.notelist{border-right:1px solid var(--border);flex-direction:column;display:flex}.list-head{align-items:center;gap:8px;padding:14px 14px 6px;display:flex}.list-head h2{text-overflow:ellipsis;white-space:nowrap;flex:1;margin:0;font-size:18px;overflow:hidden}.list-tools{border-bottom:1px solid var(--border);gap:6px;padding:6px 12px 10px;display:flex}.search{border:1px solid var(--border);border-radius:var(--radius);background:var(--bg);flex:1;min-width:0;padding:8px 10px;font-size:15px}.sort{border:1px solid var(--border);border-radius:var(--radius);background:var(--bg);padding:0 6px}.trash-bar{border-bottom:1px solid var(--border);padding:8px 12px}.list-scroll{flex:1;overflow-y:auto}.empty,.more{color:var(--fg-dim);text-align:center;padding:24px 12px;font-size:14px}.note-card{text-align:left;border:none;border-bottom:1px solid var(--border);cursor:pointer;background:0 0;width:100%;padding:12px 14px;display:block}.note-card:hover{background:var(--bg-hover)}.note-card.active{background:var(--bg-active)}.card-title{text-overflow:ellipsis;white-space:nowrap;font-weight:600;overflow:hidden}.card-snippet{color:var(--fg-dim);-webkit-line-clamp:2;-webkit-box-orient:vertical;margin:4px 0;font-size:13px;line-height:1.5;display:-webkit-box;overflow:hidden}.card-meta{color:var(--fg-dim);gap:10px;font-size:12px;display:flex}.card-nb{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.editor{background:var(--bg);flex-direction:column;display:flex}.editor-empty{color:var(--fg-dim);text-align:center;flex:1;justify-content:center;align-items:center;padding:24px;display:flex}.editor-head{border-bottom:1px solid var(--border);align-items:center;gap:8px;min-height:48px;padding:8px 14px;display:flex}.nb-select{cursor:pointer;background:0 0;border:none;border-radius:6px;max-width:50%;padding:4px}.nb-select:hover{background:var(--bg-hover)}.spacer{flex:1}.saved-at{color:var(--fg-dim);font-size:12px}.trash-note{color:var(--danger);font-size:14px}.toolbar{border-bottom:1px solid var(--border);flex-wrap:wrap;gap:2px;padding:6px 10px;display:flex}.toolbar button{cursor:pointer;min-width:34px;height:32px;color:var(--fg);background:0 0;border:none;border-radius:6px}.toolbar button:hover{background:var(--bg-hover)}.toolbar .sep{background:var(--border);width:1px;margin:4px}.editor-scroll{flex:1;padding:18px 28px 80px;overflow-y:auto}.title-input{background:0 0;border:none;outline:none;width:100%;padding:4px 0;font-size:26px;font-weight:700}.tags-row{flex-wrap:wrap;align-items:center;gap:6px;margin:6px 0 14px;display:flex}.tag-chip{background:var(--bg-side);border-radius:12px;align-items:center;padding:2px 4px 2px 10px;font-size:13px;display:inline-flex}.tag-chip button{cursor:pointer;color:var(--fg-dim);background:0 0;border:none;padding:0 6px}.tag-input{background:0 0;border:none;outline:none;width:120px;padding:4px;font-size:13px}.note-body{overflow-wrap:anywhere;outline:none;min-height:50vh;font-size:16px;line-height:1.75}.note-body img{border-radius:4px;max-width:100%;height:auto}.note-body img:not([src]){background:var(--bg-side);min-width:120px;min-height:80px;display:inline-block}.note-body table{border-collapse:collapse;max-width:100%}.note-body td,.note-body th{border:1px solid var(--border);padding:4px 8px}.note-body pre{background:var(--bg-side);border-radius:6px;padding:10px;overflow-x:auto}.note-body blockquote{border-left:3px solid var(--border);color:var(--fg-dim);margin-left:0;padding-left:12px}ul.checklist{padding-left:4px;list-style:none}ul.checklist>li{padding-left:28px;position:relative}ul.checklist>li:before{content:"";border:2px solid var(--fg-dim);cursor:pointer;border-radius:4px;width:16px;height:16px;position:absolute;top:.35em;left:2px}ul.checklist>li[data-checked=true]{color:var(--fg-dim);text-decoration:line-through}ul.checklist>li[data-checked=true]:before{background:var(--accent);border-color:var(--accent)}ul.checklist>li[data-checked=true]:after{content:"✓";color:#fff;font-size:14px;font-weight:700;position:absolute;top:.05em;left:5px}.attachments{border-top:1px solid var(--border);margin-top:28px;padding-top:12px}.att-head{color:var(--fg-dim);margin-bottom:6px;font-size:13px}.att-row{align-items:center;gap:8px;padding:6px 0;display:flex}.att-name{text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;overflow:hidden}.att-size{color:var(--fg-dim);font-size:12px}.uploading{color:var(--fg-dim);font-size:13px}.modal-back{z-index:50;background:#0006;justify-content:center;align-items:center;padding:16px;display:flex;position:fixed;inset:0}.modal{background:var(--bg);width:100%;max-width:440px;max-height:90vh;box-shadow:var(--shadow);border-radius:12px;padding:8px 22px 22px;overflow-y:auto}.modal-head{justify-content:space-between;align-items:center;display:flex}.modal h2{font-size:18px}.modal h3{margin:20px 0 6px;font-size:14px}.modal section+section{border-top:1px solid var(--border)}@media (width<=800px){.mobile-only{display:inline-block}.main{display:block;position:relative}.col-nav,.col-list,.col-editor{display:none;position:absolute;inset:0}.pane-nav .col-nav,.pane-list .col-list,.pane-editor .col-editor{display:flex}.sidebar,.notelist{border-right:none}.side-row .icon-btn{visibility:visible}.editor-scroll{padding:14px 16px 80px}.title-input{font-size:22px}.list-head{padding-top:calc(14px + env(safe-area-inset-top))}.editor-head{padding-top:calc(8px + env(safe-area-inset-top))}.side-head{padding-top:calc(12px + env(safe-area-inset-top))}}@media (width>=801px) and (width<=1100px){.main{grid-template-columns:200px 280px 1fr}}