:root{--bg:#f7f7fb;--surface:#fff;--surface2:#f0f1f6;--text:#202124;--muted:#6d7078;--line:#dfe1e7;--accent:#536dfe;--danger:#b3261e;--shadow:0 12px 36px rgba(20,25,40,.16);font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;color-scheme:light}
:root[data-theme="dark"]{--bg:#15161a;--surface:#202126;--surface2:#2a2c32;--text:#f2f3f5;--muted:#b0b3bc;--line:#383b44;--accent:#9aa8ff;--shadow:0 14px 40px rgba(0,0,0,.5);color-scheme:dark}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text)}button,input,textarea,select{font:inherit}.hidden{display:none!important}.app-shell{min-height:100vh;padding-bottom:110px}.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:10px;padding:12px 16px;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(18px)}.brand-block{display:flex;align-items:center;gap:10px;min-width:0;flex:1}.brand-mark{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(145deg,#536dfe,#8d6cff);color:#fff;font-weight:900}.eyebrow{font-size:.67rem;letter-spacing:.12em;margin:0;color:var(--muted)}h1{font-size:1.35rem;margin:1px 0 0}.icon-btn{border:0;background:transparent;color:inherit;width:44px;height:44px;border-radius:50%;font-size:1.45rem}.icon-btn:active{background:var(--surface2)}.compact{width:40px;height:40px}.toolbar{display:flex;gap:8px;padding:4px 16px 12px}.search-box{flex:1;display:flex;align-items:center;gap:9px;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:0 14px;box-shadow:0 2px 10px rgba(20,25,40,.05)}.search-box input{width:100%;border:0;outline:0;background:transparent;color:inherit;padding:13px 0;font-size:1rem}.filter-bar{display:flex;gap:8px;overflow:auto;padding:0 16px 12px}.filter-bar select{border:1px solid var(--line);background:var(--surface);color:inherit;border-radius:14px;padding:10px 12px}.status-bar{display:flex;justify-content:space-between;padding:4px 18px 10px;color:var(--muted);font-size:.88rem}.active-filter{color:var(--accent)}.notes-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:0 12px}.note{position:relative;min-height:120px;border:1px solid rgba(0,0,0,.09);border-radius:18px;padding:14px;box-shadow:0 3px 12px rgba(0,0,0,.06);overflow:hidden;color:#202124}.note h2{margin:0 26px 8px 0;font-size:1.03rem;line-height:1.25}.note p{margin:0;white-space:pre-wrap;display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden;line-height:1.35}.note footer{margin-top:12px;font-size:.72rem;opacity:.66}.note-pin{position:absolute;right:12px;top:10px}.note-labels{display:flex;gap:5px;flex-wrap:wrap;margin-top:10px}.mini-label{font-size:.67rem;padding:3px 7px;border-radius:999px;background:rgba(255,255,255,.55)}.note-reminder{font-size:.72rem;margin-top:8px}.note.paper{background:#fff}.note.coral{background:#ff9aa7}.note.orange{background:#ffb25b}.note.yellow{background:#ffe47a}.note.green{background:#a8dc75}.note.blue{background:#98b7ff}.note.violet{background:#c19ae8}.note.grey{background:#d3d3d3}.note.charcoal{background:#343434;color:#fff}.list-view{grid-template-columns:1fr}.list-view .note{min-height:92px}.detail-view{grid-template-columns:1fr}.detail-view .note{min-height:160px}.detail-view .note p{-webkit-line-clamp:12}.hide-preview .note p{display:none}.hide-note-date .note footer{display:none}.empty{grid-column:1/-1;text-align:center;padding:80px 20px;color:var(--muted)}.empty strong{display:block;color:var(--text);font-size:1.15rem;margin:12px}.fab{position:fixed;right:20px;bottom:24px;z-index:30;border:0;border-radius:19px;background:var(--accent);color:#fff;padding:14px 19px;box-shadow:var(--shadow);display:flex;align-items:center;gap:8px;font-weight:800}.fab span{font-size:1.6rem}.drawer-backdrop,.sheet-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.42);z-index:60}.drawer{height:100%;width:min(86vw,360px);background:var(--surface);padding:18px 12px;overflow:auto;box-shadow:var(--shadow)}.drawer-head{display:flex;align-items:center;gap:12px;padding:10px 12px 22px}.drawer-head small{display:block;color:var(--muted)}.nav-item{width:100%;border:0;background:transparent;color:inherit;display:flex;align-items:center;gap:15px;padding:13px 16px;border-radius:14px;text-align:left;font-size:1rem}.nav-item span{width:24px;text-align:center}.nav-item.active{background:color-mix(in srgb,var(--accent) 15%,var(--surface));color:var(--accent);font-weight:700}.nav-divider{height:1px;background:var(--line);margin:10px}.nav-caption{display:flex;justify-content:space-between;align-items:center;padding:5px 16px;color:var(--muted);font-size:.75rem;font-weight:800}.nav-caption button{border:0;background:transparent;color:inherit;font-size:1.4rem}.sheet{position:absolute;left:0;right:0;bottom:0;background:var(--surface);border-radius:24px 24px 0 0;padding:16px;max-height:88vh;overflow:auto;box-shadow:var(--shadow)}.settings-sheet h3{font-size:1.05rem;margin:22px 4px 8px;color:var(--accent)}.sheet-title-row{display:flex;justify-content:space-between;align-items:center}.sheet-title-row h2{margin:4px}.setting-row{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:13px 4px;border-bottom:1px solid var(--line)}.setting-row small,.sheet-action small{display:block;color:var(--muted);margin-top:3px}.setting-row select{max-width:140px;border:1px solid var(--line);background:var(--surface2);color:inherit;border-radius:11px;padding:8px}.switch input{display:none}.switch span{display:block;width:48px;height:28px;border-radius:999px;background:#a8abb2;position:relative}.switch span:after{content:"";position:absolute;width:22px;height:22px;border-radius:50%;background:white;top:3px;left:3px;transition:.2s}.switch input:checked+span{background:var(--accent)}.switch input:checked+span:after{transform:translateX(20px)}.sheet-action{width:100%;display:flex;gap:14px;align-items:center;text-align:left;border:0;background:transparent;color:inherit;padding:14px 6px}.sheet-action>span{font-size:1.3rem;width:28px;text-align:center}.danger-action{color:var(--danger)}.version{text-align:center;color:var(--muted);font-size:.8rem;margin:22px}.editor{position:fixed;inset:0;background:var(--bg);z-index:50;display:flex;flex-direction:column}.editor-header{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;background:var(--surface);border-bottom:1px solid var(--line)}.editor-actions{display:flex}.editor-body{flex:1;overflow:auto;padding:20px;transition:background .2s;color:#202124}.editor-body.paper{background:#fff}.editor-body.coral{background:#ff9aa7}.editor-body.orange{background:#ffb25b}.editor-body.yellow{background:#ffe47a}.editor-body.green{background:#a8dc75}.editor-body.blue{background:#98b7ff}.editor-body.violet{background:#c19ae8}.editor-body.grey{background:#d3d3d3}.editor-body.charcoal{background:#343434;color:#fff}.title-input,#text{width:100%;border:0;outline:0;background:transparent;color:inherit}.title-input{font-size:1.55rem;font-weight:800;padding:5px 0 14px}#text{min-height:52vh;resize:none;font-size:1.08rem;line-height:1.55}.checklist-editor{display:flex;flex-direction:column;gap:8px}.check-row{display:flex;align-items:flex-start;gap:9px}.check-row input[type="text"]{flex:1;border:0;border-bottom:1px solid rgba(0,0,0,.18);background:transparent;color:inherit;padding:9px 2px;outline:0}.check-row.done input[type="text"]{text-decoration:line-through;opacity:.58}.remove-check{border:0;background:transparent;color:inherit;font-size:1.1rem}.add-check-item{border:0;background:rgba(255,255,255,.38);color:inherit;border-radius:12px;padding:11px 14px;margin:12px 0}.label-chips{display:flex;gap:7px;flex-wrap:wrap;margin:12px 0}.label-chip,.reminder-chip{display:inline-flex;align-items:center;padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.5);font-size:.8rem}.editor-footer{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:18px}.colors{display:flex;gap:8px;overflow:auto;padding:5px 0}.colors button{width:31px;height:31px;min-width:31px;border-radius:50%;border:2px solid rgba(0,0,0,.14)}.colors button.active{outline:3px solid rgba(0,0,0,.35);outline-offset:2px}.colors .paper{background:#fff}.colors .coral{background:#ff7183}.colors .orange{background:#ffa342}.colors .yellow{background:#ffda47}.colors .green{background:#8fd05b}.colors .blue{background:#7ea4ff}.colors .violet{background:#ab7ddd}.colors .grey{background:#bbb}.colors .charcoal{background:#333}.save-state,.metadata{font-size:.75rem;opacity:.65}.metadata{display:flex;justify-content:space-between;margin-top:12px}.datetime-input{width:100%;padding:13px;border:1px solid var(--line);border-radius:12px;background:var(--surface2);color:inherit;margin:12px 0}.sheet-buttons{display:flex;justify-content:flex-end;gap:10px}.primary-btn,.secondary-btn{border:0;border-radius:12px;padding:10px 16px}.primary-btn{background:var(--accent);color:#fff}.secondary-btn{background:var(--surface2);color:inherit}.label-picker-row{display:flex;align-items:center;gap:10px;padding:10px}.toast{position:fixed;left:16px;right:16px;bottom:20px;z-index:100;background:#2f3137;color:#fff;border-radius:14px;padding:13px 16px;display:flex;justify-content:space-between;align-items:center;transform:translateY(calc(100% + 160px));opacity:0;visibility:hidden;pointer-events:none;transition:transform .28s ease,opacity .2s ease,visibility 0s linear .28s;box-shadow:var(--shadow)}.toast.show{transform:translateY(0);opacity:1;visibility:visible;pointer-events:auto;transition:transform .28s ease,opacity .2s ease}.toast button{border:0;background:transparent;color:#b8c0ff;font-weight:900}@media(min-width:760px){.notes-grid{grid-template-columns:repeat(3,minmax(0,1fr));max-width:1100px;margin:auto}.list-view,.detail-view{grid-template-columns:1fr;max-width:850px}.sheet{left:50%;right:auto;width:min(620px,92vw);transform:translateX(-50%);border-radius:24px 24px 0 0}}

/* v3.1 visual audit fixes */
.icon-btn svg,.nav-item svg,.search-icon svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;display:block}
.app-shell{padding-bottom:calc(138px + env(safe-area-inset-bottom))}
.topbar{padding:10px 16px 8px;min-height:64px}.brand-block{padding-left:2px}.brand-block h1{font-size:1.28rem}.eyebrow{margin-top:2px}.brand-mark{flex:0 0 auto}
.toolbar{display:grid;grid-template-columns:1fr auto auto;gap:8px;padding:4px 16px 10px}.search-box{min-width:0}.search-icon{display:grid;place-items:center;color:var(--muted)}
.notes-grid{padding:0 14px 24px;gap:12px}.note{display:flex;flex-direction:column;min-height:168px;padding:16px;border-radius:20px}.note h2{font-size:1.08rem}.note p{flex:1}.note footer{margin-top:auto;padding-top:12px}.note-pin{right:12px;top:10px;width:40px;height:40px;display:grid;place-items:center;font-size:1.1rem}
.list-view .note{min-height:104px}.detail-view .note{min-height:190px}
.fab{right:20px;bottom:calc(22px + env(safe-area-inset-bottom));min-height:58px;padding:14px 20px;border-radius:20px}
.toast{left:16px;right:16px;bottom:calc(96px + env(safe-area-inset-bottom))}
.drawer{width:min(82vw,340px);padding:14px 12px calc(24px + env(safe-area-inset-bottom))}.drawer-head{padding:10px 12px 18px}.nav-item{min-height:54px;padding:11px 16px;border-radius:16px}.nav-item span{display:grid;place-items:center}.nav-item.active{background:color-mix(in srgb,var(--accent) 13%,var(--surface))}
.drawer-version{margin-top:auto;padding:28px 18px 8px;color:var(--muted);font-size:.72rem}
@media(max-width:420px){.toolbar{grid-template-columns:1fr auto auto}.search-box{border-radius:17px}.fab b{display:none}.fab{width:58px;justify-content:center;padding:0}.note{min-height:158px}}

.label-empty{padding:9px 18px 13px;color:var(--muted);font-size:.85rem}.empty-icon svg{width:46px;height:46px;fill:none;stroke:currentColor;stroke-width:1.5}.note.charcoal .mini-label{background:rgba(255,255,255,.18)}

/* v3.3 Keep-inspired editor */
.editor{position:fixed;inset:0;z-index:80;background:var(--surface);overflow:hidden}
.editor-canvas{position:absolute;inset:0;display:flex;flex-direction:column;background:#fff;color:#202124;transition:background .2s ease,color .2s ease}
.keep-header{position:relative;z-index:4;background:transparent;border:0;padding:calc(12px + env(safe-area-inset-top)) 18px 10px;display:flex;align-items:center;justify-content:space-between}
.keep-header .editor-actions{display:flex;gap:6px}
.keep-header .icon-btn{background:rgba(255,255,255,.34);backdrop-filter:blur(8px)}
.keep-editor-body{flex:1;min-height:0;overflow:auto;padding:28px 28px 130px;background:transparent;color:inherit}
.keep-editor-body .title-input{font-size:clamp(1.75rem,7vw,2.45rem);font-weight:500;line-height:1.2;margin-bottom:24px;color:inherit}
.keep-editor-body textarea{min-height:46vh;font-size:1.22rem;line-height:1.48;color:inherit;background:transparent}
.keep-bottom-toolbar{position:absolute;left:0;right:0;bottom:0;z-index:5;display:grid;grid-template-columns:52px 52px 1fr 52px;align-items:center;gap:4px;padding:10px 18px calc(12px + env(safe-area-inset-bottom));background:linear-gradient(to top,rgba(255,255,255,.96),rgba(255,255,255,.78));backdrop-filter:blur(14px);border-top:1px solid rgba(0,0,0,.08)}
.keep-bottom-toolbar .save-state{text-align:center;font-size:.82rem;opacity:.7}
.editor-canvas.charcoal .keep-bottom-toolbar{background:linear-gradient(to top,rgba(35,35,35,.97),rgba(35,35,35,.8));border-color:rgba(255,255,255,.12)}
.editor-canvas.charcoal .keep-header .icon-btn{background:rgba(0,0,0,.18)}
.metadata{position:absolute;left:50%;bottom:calc(68px + env(safe-area-inset-bottom));transform:translateX(-50%);font-size:.7rem;opacity:.55;display:flex;gap:12px;white-space:nowrap}
.attachment-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0 0 18px}
.attachment-card{position:relative;border-radius:18px;overflow:hidden;min-height:130px;background:rgba(0,0,0,.06)}
.attachment-card:first-child:nth-last-child(1){grid-column:1/-1;min-height:220px}
.attachment-card img{width:100%;height:100%;object-fit:cover;display:block;position:absolute;inset:0}
.remove-attachment{position:absolute;top:8px;right:8px;width:34px;height:34px;border:0;border-radius:50%;background:rgba(0,0,0,.62);color:#fff;font-size:1.25rem;display:grid;place-items:center}
.action-svg{width:28px;height:28px;display:grid;place-items:center}
.action-svg svg,.sheet-action svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.appearance-sheet{max-height:min(78vh,680px)}
.appearance-options{display:flex;gap:12px;overflow-x:auto;padding:4px 2px 14px}
.appearance-options button{flex:0 0 46px;width:46px;height:46px;border-radius:50%;border:2px solid rgba(70,70,80,.35);position:relative}
.appearance-options button.active::after,.background-options button.active .bg-preview::after{content:'✓';position:absolute;inset:0;display:grid;place-items:center;font-size:1.25rem;font-weight:800;color:#294276}
.appearance-options button.charcoal.active::after{color:#fff}
.background-options{display:flex;gap:14px;overflow-x:auto;padding:4px 2px 12px}
.background-options button{border:0;background:transparent;display:flex;flex-direction:column;align-items:center;gap:7px;color:inherit}
.bg-preview{position:relative;width:70px;height:70px;border-radius:50%;border:2px solid rgba(70,70,80,.32);display:grid;place-items:center;overflow:hidden;background-color:#f7f7f2;font-size:2rem}
.bg-lines{background-image:repeating-linear-gradient(to bottom,transparent 0 12px,rgba(65,86,125,.18) 13px 14px)}
.bg-grid{background-image:linear-gradient(rgba(65,86,125,.15) 1px,transparent 1px),linear-gradient(90deg,rgba(65,86,125,.15) 1px,transparent 1px);background-size:14px 14px}
.bg-leaf{background:radial-gradient(circle at 20% 20%,rgba(82,150,112,.23),transparent 30%),radial-gradient(circle at 75% 68%,rgba(74,135,102,.24),transparent 34%),#f2f8ef;color:#4d8765}
.bg-gradient{background:linear-gradient(135deg,#fbd5c8,#f8e6b1 48%,#cfe7db)}
.editor-canvas.bg-lines{background-image:repeating-linear-gradient(to bottom,transparent 0 35px,rgba(55,75,105,.09) 36px 37px)}
.editor-canvas.bg-grid{background-image:linear-gradient(rgba(55,75,105,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(55,75,105,.07) 1px,transparent 1px);background-size:34px 34px}
.editor-canvas.bg-leaf::before{content:'❧';position:absolute;right:-20px;bottom:80px;font-size:min(52vw,390px);line-height:1;color:rgba(48,112,76,.12);transform:rotate(-18deg);pointer-events:none}
.editor-canvas.bg-gradient{background-image:linear-gradient(145deg,rgba(255,255,255,.12),rgba(255,210,175,.34),rgba(188,225,213,.26))}
.note-thumbnail{width:100%;height:112px;object-fit:cover;border-radius:12px;margin:-2px 0 12px;display:block}
.notes-grid.list-view .note-thumbnail{width:96px;height:84px;float:right;margin:0 0 8px 12px}
.notes-grid.detail-view .note-thumbnail{height:190px}
.editor-canvas.charcoal{color:#fff}
.editor-canvas.charcoal input,.editor-canvas.charcoal textarea{color:#fff}
.editor-canvas.charcoal input::placeholder,.editor-canvas.charcoal textarea::placeholder{color:rgba(255,255,255,.62)}
@media (max-width:480px){.keep-editor-body{padding-left:22px;padding-right:22px}.attachment-card:first-child:nth-last-child(1){min-height:190px}}

/* v3.4 toolbar interaction fix */
.sheet-backdrop{z-index:120;pointer-events:auto}
.sheet-backdrop .sheet{z-index:121;pointer-events:auto}
#contentPanel,#appearancePanel,#editorMenu,#reminderPanel,#labelPanel{z-index:125}
.keep-bottom-toolbar{z-index:20;pointer-events:auto}
.keep-bottom-toolbar .icon-btn{position:relative;z-index:21;touch-action:manipulation;pointer-events:auto}
.keep-bottom-toolbar .icon-btn:active{transform:scale(.94);background:rgba(0,0,0,.08)}
.editor-canvas.charcoal .keep-bottom-toolbar .icon-btn:active{background:rgba(255,255,255,.12)}

/* v3.5 card backgrounds + label management */
.note{position:relative;overflow:hidden;background-color:var(--note-bg)}
.note.bg-lines{background-image:repeating-linear-gradient(to bottom,transparent 0 29px,rgba(55,75,105,.11) 30px 31px)}
.note.bg-grid{background-image:linear-gradient(rgba(55,75,105,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(55,75,105,.09) 1px,transparent 1px);background-size:28px 28px}
.note.bg-gradient{background-image:linear-gradient(145deg,rgba(255,255,255,.18),rgba(255,210,175,.34),rgba(188,225,213,.3))}
.note.bg-leaf::before{content:'❧';position:absolute;right:-18px;bottom:-28px;font-size:132px;line-height:1;color:rgba(48,112,76,.13);transform:rotate(-18deg);pointer-events:none}
.note.bg-leaf>*{position:relative;z-index:1}
.drawer-label-row{display:grid;grid-template-columns:minmax(0,1fr) 42px 42px;align-items:center;gap:2px;margin:2px 0}
.drawer-label-row .nav-item{width:100%;min-width:0;margin:0}
.drawer-label-row .label-name{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}
.label-action{width:40px;height:40px;border:0;border-radius:12px;background:transparent;color:var(--text);display:grid;place-items:center;touch-action:manipulation}
.label-action:active{background:color-mix(in srgb,var(--accent) 12%,transparent);transform:scale(.94)}
.label-action svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.delete-label{color:#b3261e}

/* v3.7 navigation and snackbar hardening */
.toast{bottom:calc(16px + env(safe-area-inset-bottom,0px));max-width:680px;margin-inline:auto;will-change:transform,opacity}
.toast[hidden]{display:none!important}
.sheet{padding-bottom:calc(16px + env(safe-area-inset-bottom,0px))}
.editor-toolbar{padding-bottom:env(safe-area-inset-bottom,0px)}

/* v3.8 stability and productivity */
.selection-bar{position:sticky;top:0;z-index:55;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;padding:10px 14px;background:var(--surface);border-bottom:1px solid var(--border);box-shadow:0 5px 18px rgba(30,34,45,.08)}
.selection-actions{display:flex;gap:4px}.danger-icon{color:#b3261e}.selection-mode .topbar,.selection-mode .toolbar,.selection-mode .filter-bar{display:none}.selection-mode .fab{display:none}
.selection-actions .icon-btn.active{background:color-mix(in srgb,var(--accent) 20%,transparent);color:var(--accent)}
.note.selected{outline:3px solid var(--accent);outline-offset:-3px;transform:scale(.985)}.selection-check{position:absolute;left:10px;top:10px;z-index:5;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:#fff;font-weight:800;box-shadow:0 2px 8px rgba(0,0,0,.22)}
.check-row{grid-template-columns:auto minmax(0,1fr) 34px 34px 36px}.move-check{width:32px;height:32px;border:0;border-radius:10px;background:transparent;color:inherit;font-size:1rem}.move-check:active{background:rgba(0,0,0,.08)}
.note{touch-action:pan-y;-webkit-user-select:none;user-select:none}.note h2,.note p,.note footer{-webkit-user-select:text;user-select:text}


/* v3.8.2 editor live color + background fidelity */
.editor-canvas.paper{background-color:#ffffff;color:#202124}
.editor-canvas.coral{background-color:#ff9aa7;color:#202124}
.editor-canvas.orange{background-color:#ffb25b;color:#202124}
.editor-canvas.yellow{background-color:#ffe47a;color:#202124}
.editor-canvas.green{background-color:#a8dc75;color:#202124}
.editor-canvas.blue{background-color:#98b7ff;color:#202124}
.editor-canvas.violet{background-color:#c19ae8;color:#202124}
.editor-canvas.grey{background-color:#d3d3d3;color:#202124}
.editor-canvas.charcoal{background-color:#343434;color:#ffffff}
.editor-canvas.bg-none{background-image:none}
.editor-canvas.bg-lines{background-image:repeating-linear-gradient(to bottom,transparent 0 35px,rgba(55,75,105,.12) 36px 37px)}
.editor-canvas.bg-grid{background-image:linear-gradient(rgba(55,75,105,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(55,75,105,.09) 1px,transparent 1px);background-size:34px 34px}
.editor-canvas.bg-gradient{background-image:linear-gradient(145deg,rgba(255,255,255,.20),rgba(255,210,175,.30),rgba(188,225,213,.28))}
.editor-canvas.charcoal.bg-lines{background-image:repeating-linear-gradient(to bottom,transparent 0 35px,rgba(255,255,255,.13) 36px 37px)}
.editor-canvas.charcoal.bg-grid{background-image:linear-gradient(rgba(255,255,255,.10) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.10) 1px,transparent 1px);background-size:34px 34px}
.editor-canvas.charcoal.bg-gradient{background-image:linear-gradient(145deg,rgba(255,255,255,.08),rgba(135,92,68,.24),rgba(64,110,95,.22))}
.editor-canvas.bg-leaf{background-image:radial-gradient(circle at 15% 18%,rgba(82,150,112,.16),transparent 28%),radial-gradient(circle at 82% 72%,rgba(74,135,102,.18),transparent 32%)}
.editor-canvas.charcoal.bg-leaf{background-image:radial-gradient(circle at 15% 18%,rgba(120,205,154,.13),transparent 28%),radial-gradient(circle at 82% 72%,rgba(110,190,145,.14),transparent 32%)}
.editor-canvas.bg-leaf::before{z-index:0}
.editor-canvas .keep-header,.editor-canvas .keep-editor-body,.editor-canvas .keep-bottom-toolbar{position:relative;z-index:1}
.editor-canvas:not(.charcoal) .keep-bottom-toolbar{background:linear-gradient(to top,rgba(255,255,255,.58),rgba(255,255,255,.24));border-color:rgba(0,0,0,.10)}


/* v3.9 — accessible text scaling */
:root[data-font="small"]{font-size:16px}
:root[data-font="medium"]{font-size:18px}
:root[data-font="large"]{font-size:20px}
:root[data-font="xlarge"]{font-size:22px}
:root[data-font="xxlarge"]{font-size:24px}
:root[data-font="large"] .notes-grid,
:root[data-font="xlarge"] .notes-grid,
:root[data-font="xxlarge"] .notes-grid{grid-template-columns:1fr}
:root[data-font="xlarge"] .note,
:root[data-font="xxlarge"] .note{min-height:190px}
.sheet-action svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* About */
.about-sheet{text-align:center;padding-bottom:calc(24px + env(safe-area-inset-bottom))}
.about-logo{display:block;width:min(100%,460px);max-height:270px;object-fit:cover;object-position:center;margin:14px auto 20px;border-radius:18px;background:#05070a;box-shadow:0 14px 34px rgba(0,0,0,.28)}
.about-sheet h3{font-size:1.65rem;margin:6px 0 2px}
.about-subtitle{margin:0 0 18px;color:var(--muted);letter-spacing:.08em}
.about-sheet>p:not(.about-subtitle):not(.about-motto){text-align:left;line-height:1.6;margin:16px 6px}
.about-facts{display:grid;gap:8px;margin:20px 4px;text-align:left}
.about-facts div{display:flex;justify-content:space-between;gap:18px;padding:12px 14px;border-radius:14px;background:var(--surface2)}
.about-facts span{color:var(--muted);text-align:right}
.about-motto{margin:22px 0 4px;letter-spacing:.16em;font-size:.78rem;color:var(--muted)}
@media(min-width:760px){.about-logo{max-height:340px}}


/* v3.10 Commander theme collection */
:root[data-theme="commander-blue"]{
  --bg:#eef2f7;--surface:#ffffff;--surface2:#dce3ee;--text:#202f45;--muted:#607087;--line:#b9c8de;--accent:#6082b6;--danger:#a84444;--shadow:0 12px 34px rgba(48,70,104,.20);color-scheme:light
}
:root[data-theme="steel-dark"]{
  --bg:#12151b;--surface:#202f45;--surface2:#304668;--text:#f2f4f8;--muted:#b9c8de;--line:#405e8b;--accent:#7391be;--danger:#ff9d9d;--shadow:0 14px 40px rgba(0,0,0,.55);color-scheme:dark
}
:root[data-theme="analogous-cyan"]{
  --bg:#eff5f6;--surface:#ffffff;--surface2:#dcecef;--text:#20383e;--muted:#58777d;--line:#b8d6da;--accent:#60adb6;--danger:#a54559;--shadow:0 12px 34px rgba(62,123,132,.18);color-scheme:light
}
:root[data-theme="commander-green"]{
  --bg:#f0f5ec;--surface:#ffffff;--surface2:#e0ecd7;--text:#243024;--muted:#61705a;--line:#c6d9b8;--accent:#81b660;--danger:#a24646;--shadow:0 12px 34px rgba(75,111,54,.17);color-scheme:light
}
:root[data-theme="commander-burgundy"]{
  --bg:#f6eef1;--surface:#ffffff;--surface2:#eddce3;--text:#37262d;--muted:#765665;--line:#dec0cc;--accent:#b66081;--danger:#a93737;--shadow:0 12px 34px rgba(126,58,84,.17);color-scheme:light
}
:root[data-theme="commander-gold"]{
  --bg:#f6f1e8;--surface:#ffffff;--surface2:#eee3d0;--text:#352d22;--muted:#76684f;--line:#dfcfb4;--accent:#b69460;--danger:#a3443d;--shadow:0 12px 34px rgba(115,87,45,.18);color-scheme:light
}
:root[data-theme="monochrome-blue"]{
  --bg:#dce3ee;--surface:#f8fafc;--surface2:#b9c8de;--text:#202f45;--muted:#5075ae;--line:#96acce;--accent:#405e8b;--danger:#9b3f49;--shadow:0 12px 34px rgba(32,47,69,.22);color-scheme:light
}
:root[data-theme="steel-dark"] .topbar,
:root[data-theme="steel-dark"] .keep-bottom-toolbar{background:color-mix(in srgb,var(--surface) 92%,transparent)}
.theme-setting select{min-width:168px}
.theme-preview{display:grid;grid-template-columns:repeat(4,1fr);height:54px;margin:-2px 0 18px;border-radius:15px;overflow:hidden;border:1px solid var(--line);box-shadow:0 5px 16px rgba(30,42,66,.10)}
.theme-preview span{display:block}
.theme-preview[data-theme-preview="commander-blue"] span:nth-child(1){background:#6082b6}.theme-preview[data-theme-preview="commander-blue"] span:nth-child(2){background:#405e8b}.theme-preview[data-theme-preview="commander-blue"] span:nth-child(3){background:#dce3ee}.theme-preview[data-theme-preview="commander-blue"] span:nth-child(4){background:#202f45}
.theme-preview[data-theme-preview="steel-dark"] span:nth-child(1){background:#304668}.theme-preview[data-theme-preview="steel-dark"] span:nth-child(2){background:#202f45}.theme-preview[data-theme-preview="steel-dark"] span:nth-child(3){background:#7391be}.theme-preview[data-theme-preview="steel-dark"] span:nth-child(4){background:#12151b}
.theme-preview[data-theme-preview="analogous-cyan"] span:nth-child(1){background:#60adb6}.theme-preview[data-theme-preview="analogous-cyan"] span:nth-child(2){background:#6082b6}.theme-preview[data-theme-preview="analogous-cyan"] span:nth-child(3){background:#6960b6}.theme-preview[data-theme-preview="analogous-cyan"] span:nth-child(4){background:#eff5f6}
.theme-preview[data-theme-preview="commander-green"] span:nth-child(1){background:#6082b6}.theme-preview[data-theme-preview="commander-green"] span:nth-child(2){background:#81b660}.theme-preview[data-theme-preview="commander-green"] span:nth-child(3){background:#e0ecd7}.theme-preview[data-theme-preview="commander-green"] span:nth-child(4){background:#243024}
.theme-preview[data-theme-preview="commander-burgundy"] span:nth-child(1){background:#6082b6}.theme-preview[data-theme-preview="commander-burgundy"] span:nth-child(2){background:#b66081}.theme-preview[data-theme-preview="commander-burgundy"] span:nth-child(3){background:#eddce3}.theme-preview[data-theme-preview="commander-burgundy"] span:nth-child(4){background:#37262d}
.theme-preview[data-theme-preview="commander-gold"] span:nth-child(1){background:#6082b6}.theme-preview[data-theme-preview="commander-gold"] span:nth-child(2){background:#b69460}.theme-preview[data-theme-preview="commander-gold"] span:nth-child(3){background:#eee3d0}.theme-preview[data-theme-preview="commander-gold"] span:nth-child(4){background:#352d22}
.theme-preview[data-theme-preview="monochrome-blue"] span:nth-child(1){background:#dce3ee}.theme-preview[data-theme-preview="monochrome-blue"] span:nth-child(2){background:#96acce}.theme-preview[data-theme-preview="monochrome-blue"] span:nth-child(3){background:#5075ae}.theme-preview[data-theme-preview="monochrome-blue"] span:nth-child(4){background:#202f45}

/* v3.11 checklist selection */
.check-selection-bar{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px;padding:7px 10px;background:var(--surface);border-bottom:1px solid var(--line);z-index:4}.check-selection-actions{display:flex;align-items:center;gap:2px}.check-selection-actions .icon-btn{width:40px;height:40px}.check-selection-actions svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2}.check-row{position:relative;align-items:center;min-height:52px;padding:2px 0;border-radius:10px;touch-action:pan-y}.check-row input[type="checkbox"]{width:23px;height:23px;flex:0 0 23px;accent-color:var(--accent)}.check-select-indicator{display:none;flex:0 0 26px;width:26px;height:26px;border-radius:50%;place-items:center;border:2px solid rgba(0,0,0,.28);font-weight:800}.check-row.selected{background:color-mix(in srgb,var(--accent) 18%,transparent);outline:2px solid var(--accent);outline-offset:-2px;padding-left:6px;padding-right:6px}.check-row.selected .check-select-indicator{display:grid;background:var(--accent);border-color:var(--accent);color:#fff}.check-row.selected input[type="checkbox"]{display:none}.check-selection-mode .keep-bottom-toolbar{opacity:.45;pointer-events:none}.check-selection-mode .add-check-item{display:none!important}.check-selection-mode .check-row input[type="text"]{pointer-events:none;user-select:none}.check-selection-mode .check-row input[type="checkbox"]{pointer-events:none}.editor-body{overflow-x:hidden}.checklist-editor{min-width:0}.check-row input[type="text"]{min-width:0}.metadata{padding:0 16px 6px;background:var(--surface);position:relative;z-index:2}.add-check-item{margin-bottom:20px}


/* v3.13 Stabilization Candidate */
.notes-grid{padding:0 8px calc(92px + env(safe-area-inset-bottom));gap:8px}
.note{min-height:184px;padding:15px 14px;border-radius:16px}
.note h2{font-size:1.16rem;line-height:1.22;margin-right:32px}
.note p{font-size:.96rem;line-height:1.42}
.note footer{font-size:.76rem;padding-top:9px}
.note-pin{right:7px;top:7px;width:34px;height:34px;font-size:0}
.note-pin svg{width:21px;height:21px;fill:currentColor;stroke:currentColor;stroke-width:1.2}
.note-reminder,.reminder-chip{display:flex;align-items:center;gap:6px}
.note-reminder svg,.reminder-chip svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.keep-editor-body{padding:24px 22px calc(176px + env(safe-area-inset-bottom))}
.keep-bottom-toolbar{grid-template-columns:48px 48px 1fr 48px;padding:7px 12px calc(8px + env(safe-area-inset-bottom));gap:2px}
.keep-bottom-toolbar .save-state{font-size:.76rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.metadata{position:absolute;left:0;right:0;bottom:calc(64px + env(safe-area-inset-bottom));padding:5px 14px;font-size:.68rem;background:color-mix(in srgb,var(--surface) 82%,transparent);backdrop-filter:blur(10px);pointer-events:none}
.add-check-item{margin-bottom:46px;min-height:48px;font-size:1rem}
.toast{bottom:calc(84px + env(safe-area-inset-bottom))}
.sheet-action:disabled{opacity:.52;cursor:not-allowed}
.app-busy::after{content:'Memproses…';position:fixed;inset:auto 50% calc(104px + env(safe-area-inset-bottom)) auto;transform:translateX(50%);z-index:1000;background:#2f3137;color:#fff;padding:10px 16px;border-radius:999px;box-shadow:var(--shadow);font-size:.86rem}
.fab{bottom:calc(20px + env(safe-area-inset-bottom));right:16px}
@media(max-width:480px){.notes-grid{padding-left:6px;padding-right:6px;gap:7px}.note{padding:14px 12px;min-height:180px}.keep-editor-body{padding-left:18px;padding-right:18px;padding-bottom:calc(184px + env(safe-area-inset-bottom))}}


/* v3.13.1 navigation + standard push-pin audit fix */
.drawer{width:min(80vw,340px)}
.note h2{padding-right:34px;margin-right:0}
.note-pin{right:9px;top:8px;width:30px;height:30px;display:grid;place-items:center;opacity:.78;pointer-events:none}
.note-pin svg{width:18px;height:18px;fill:currentColor;stroke:none}
.drawer-label-row{grid-template-columns:minmax(0,1fr) 38px 38px}
.drawer-label-row .nav-item{padding-left:12px;padding-right:8px}
.label-action{width:36px;height:36px}
.editor-body,.keep-editor-body{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.22) transparent}
.editor-body::-webkit-scrollbar,.keep-editor-body::-webkit-scrollbar{width:4px}
.editor-body::-webkit-scrollbar-thumb,.keep-editor-body::-webkit-scrollbar-thumb{background:rgba(0,0,0,.22);border-radius:999px}

/* v3.14.1 data recovery hardening */
.data-warning{display:flex;gap:10px;align-items:flex-start;margin:8px 0 12px;padding:12px 14px;border:1px solid color-mix(in srgb,var(--danger) 38%,var(--line));border-radius:14px;background:color-mix(in srgb,var(--danger) 8%,var(--surface));font-size:.86rem;line-height:1.4}.data-warning strong{color:var(--danger);min-width:max-content}.storage-status{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 4px;border-bottom:1px solid var(--line)}.storage-status small{display:block;color:var(--muted);margin-top:3px}.storage-status .secondary-btn{min-width:86px}.empty-actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:22px}.empty-actions button{border:0;border-radius:13px;padding:11px 15px;font-weight:750}.empty-actions .recover-primary{background:var(--accent);color:#fff}.empty-actions .recover-secondary{background:var(--surface);color:var(--text);border:1px solid var(--line)}.empty-note{display:block;max-width:420px;margin:14px auto 0;font-size:.82rem;line-height:1.45}.origin-warning{color:var(--danger);font-weight:700}


/* v3.14.3 attachment integrity fallback */
.attachment-card.attachment-unavailable{display:grid;place-items:center;min-height:120px;background:rgba(255,255,255,.56);border:1px dashed rgba(25,55,62,.28)}
.attachment-recovery{padding:16px;text-align:center;font-size:.88rem;line-height:1.35;color:var(--muted)}
.attachment-card img{cursor:zoom-in}
.image-viewer{position:fixed;inset:0;z-index:150;background:rgba(0,0,0,.92);display:grid;place-items:center;padding:24px}
.image-viewer.hidden{display:none}
.image-viewer img{max-width:100%;max-height:100%;object-fit:contain;border-radius:12px}
.image-viewer-close{position:absolute;top:calc(16px + env(safe-area-inset-top,0px));right:16px;background:rgba(255,255,255,.14);color:#fff}

/* v3.18 release-candidate polish and commit integrity */
.skip-link{position:fixed;left:12px;top:8px;z-index:3000;transform:translateY(-160%);padding:10px 14px;border-radius:12px;background:var(--accent);color:#fff;font-weight:800;text-decoration:none;box-shadow:var(--shadow)}
.skip-link:focus{transform:translateY(0)}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
button,a,input,textarea,select{touch-action:manipulation}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid color-mix(in srgb,var(--accent) 82%,white);outline-offset:3px}
.icon-btn,.label-action,.move-check{min-width:44px;min-height:44px}
.sheet-action{min-height:58px}
.action-svg svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.appearance-options button,.background-options button{min-width:48px;min-height:48px}
.note{cursor:pointer}
.note:focus-visible{outline:4px solid var(--accent);outline-offset:2px}
@media (min-width:700px){
  .app-shell{max-width:1100px;margin-inline:auto}
  .topbar,.toolbar,.filter-bar{padding-left:24px;padding-right:24px}
  .status-bar{padding-left:28px;padding-right:28px}
  .notes-grid{grid-template-columns:repeat(3,minmax(0,1fr));padding-left:18px;padding-right:18px;gap:12px}
  .drawer{width:min(420px,56vw)}
  .sheet{max-width:620px;margin-inline:auto;border-radius:24px 24px 0 0}
  .keep-editor{max-width:900px;margin-inline:auto;box-shadow:0 0 0 1px var(--line),var(--shadow)}
}
@media (min-width:1050px){
  .notes-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}
@media (forced-colors:active){
  .note,.sheet,.drawer,.search-box,.filter-bar select{border:1px solid CanvasText}
  .note.selected{outline:3px solid Highlight}
}


/* v3.18.1 label visibility and dual-grid modes */
.notes-grid.grid-large-view{grid-template-columns:repeat(2,minmax(0,1fr))}
.notes-grid.grid-small-view{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding-left:6px;padding-right:6px}
.grid-small-view .note{min-height:142px;padding:10px 9px;border-radius:14px}
.grid-small-view .note h2{font-size:.88rem;line-height:1.18;margin-right:20px;margin-bottom:6px}
.grid-small-view .note p{font-size:.78rem;line-height:1.25;-webkit-line-clamp:4}
.grid-small-view .note footer,.grid-small-view .note-reminder{font-size:.62rem}
.grid-small-view .note-thumbnail{height:82px;border-radius:10px;margin-bottom:8px}
.grid-small-view .note-pin{width:27px;height:27px;right:5px;top:5px}
.grid-small-view .note-pin svg{width:15px;height:15px}
.grid-small-view .note-labels{gap:3px;margin-top:7px}
.grid-small-view .mini-label{max-width:100%;font-size:.58rem;padding:3px 5px}
.note-labels{order:3;display:flex;gap:6px;flex-wrap:nowrap;margin-top:10px;min-height:24px;overflow:hidden}
.mini-label{display:inline-flex;align-items:center;max-width:calc(50% - 3px);min-height:24px;padding:4px 9px;border:1px solid rgba(20,55,45,.18);background:rgba(255,255,255,.76);color:#29463d;font-weight:700;box-shadow:0 1px 3px rgba(0,0,0,.06);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.note.charcoal .mini-label{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.28);color:#fff}
.label-more{flex:0 0 auto;max-width:none}
.drawer-label-row{grid-template-columns:minmax(0,1fr) 40px 40px}
.drawer-label-row .label-name{font-weight:600}
@media(min-width:760px){.notes-grid.grid-large-view{grid-template-columns:repeat(3,minmax(0,1fr))}.notes-grid.grid-small-view{grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}}
@media(min-width:1120px){.notes-grid.grid-large-view{grid-template-columns:repeat(4,minmax(0,1fr))}.notes-grid.grid-small-view{grid-template-columns:repeat(5,minmax(0,1fr))}}
:root[data-font="large"] .notes-grid.grid-small-view,
:root[data-font="xlarge"] .notes-grid.grid-small-view,
:root[data-font="xxlarge"] .notes-grid.grid-small-view{grid-template-columns:repeat(2,minmax(0,1fr))}


/* v3.18.2 drawer label layout + explicit view selector */
.drawer{padding-bottom:calc(42px + env(safe-area-inset-bottom,0px));scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--text) 24%,transparent) transparent}
.drawer::-webkit-scrollbar{width:4px}.drawer::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--text) 24%,transparent);border-radius:999px}
.drawer-label-row{display:grid;grid-template-columns:minmax(0,1fr) 40px 40px;align-items:center;gap:4px;width:100%}
.drawer-label-row .nav-item{display:grid;grid-template-columns:28px minmax(0,1fr);gap:12px;width:100%;min-width:0;padding-left:12px;padding-right:8px}
.drawer-label-row .nav-item>span:first-child{width:28px;min-width:28px}
.drawer-label-row .nav-item>.label-name{width:auto;min-width:0;display:block;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.drawer-label-row .label-action{width:40px;height:40px;flex:0 0 40px}
.view-sheet{max-width:520px}.view-options{display:grid;gap:8px;margin-top:10px}.view-option{width:100%;display:grid;grid-template-columns:46px minmax(0,1fr) 28px;align-items:center;gap:12px;border:0;border-radius:16px;background:transparent;color:inherit;padding:12px;text-align:left;min-height:64px}.view-option:active{background:var(--surface2)}.view-option.active{background:color-mix(in srgb,var(--accent) 14%,var(--surface));color:var(--accent)}.view-option svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.8}.view-option .view-copy strong{display:block;font-size:1rem}.view-option .view-copy small{display:block;color:var(--muted);margin-top:3px}.view-option.active .view-copy small{color:currentColor;opacity:.72}.view-check{font-size:1.25rem;font-weight:900;text-align:center}
@media(max-width:420px){.drawer{width:min(80vw,336px)}.drawer-label-row{grid-template-columns:minmax(0,1fr) 38px 38px}.drawer-label-row .label-action{width:38px;height:38px}}

/* v3.19 feature hardening */
.audit-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:12px 0}.audit-grid>div{padding:14px;border:1px solid var(--line);border-radius:14px;background:var(--surface-soft);display:flex;flex-direction:column}.audit-grid b{font-size:1.25rem}.audit-grid span,.muted-copy{font-size:.86rem;color:var(--muted)}.full-width{width:100%;margin-top:12px}.revision-item{width:100%;text-align:left}.revision-item small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}@media(max-width:430px){.filter-bar{display:grid;grid-template-columns:1fr 1fr}.filter-bar select:last-child{grid-column:1/-1}}