:root{--color-bg:#f7f6f2;--color-surface:#f9f8f5;--color-surface-2:#fbfbf9;--color-surface-offset:#f3f0ec;--color-surface-dynamic:#e6e4df;--color-divider:#dcd9d5;--color-border:#d4d1ca;--color-text:#28251d;--color-text-muted:#7a7974;--color-text-faint:#bab9b4;--color-primary:#01696f;--color-primary-hover:#0c4e54;--color-primary-active:#0f3638;--color-primary-hi:#cedcd8;--color-error:#a12c7b;--color-success:#437a22;--color-warning:#964219;--radius-sm:.375rem;--radius-md:.5rem;--radius-lg:.75rem;--radius-xl:1rem;--radius-full:9999px;--space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-5:1.25rem;--space-6:1.5rem;--space-8:2rem;--space-10:2.5rem;--text-xs:clamp(.75rem,.7rem + .25vw,.875rem);--text-sm:clamp(.875rem,.8rem + .35vw,1rem);--text-base:clamp(1rem,.95rem + .25vw,1.125rem);--text-lg:clamp(1.125rem,1rem + .75vw,1.5rem);--text-xl:clamp(1.5rem,1.2rem + 1.25vw,2.25rem);--font-body:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;--shadow-sm:0 1px 2px oklch(.2 .01 80/.06);--shadow-md:0 4px 12px oklch(.2 .01 80/.08);--transition:.18s cubic-bezier(.16,1,.3,1);--sidebar-w:260px}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body{overflow:hidden;height:100%}body{font-family:var(--font-body);font-size:var(--text-sm);color:var(--color-text);background:var(--color-bg);-webkit-font-smoothing:antialiased}button{cursor:pointer;font:inherit;color:inherit;background:0 0;border:none}input,textarea{font:inherit;color:inherit}:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px;border-radius:var(--radius-sm)}.app{display:grid;grid-template-columns:var(--sidebar-w)1fr;grid-template-rows:1fr;height:100dvh}.sidebar{display:flex;background:var(--color-surface);border-right:1px solid var(--color-divider);overflow:hidden;grid-row:1;grid-column:1;flex-direction:column;height:100dvh}.sidebar-header{display:flex;padding:var(--space-3)var(--space-4);border-bottom:1px solid var(--color-divider);flex-shrink:0;justify-content:space-between;align-items: center;height:52px}.logo{display:flex;align-items: center;gap:var(--space-2);font-weight:600;font-size:var(--text-base);color:var(--color-text)}.logo svg{color:var(--color-primary)}.header-actions{display:flex;gap:var(--space-1)}.icon-btn{display:flex;border-radius:var(--radius-md);color:var(--color-text-muted);transition:background var(--transition),color var(--transition);justify-content:center;align-items: center;width:32px;height:32px}.icon-btn:hover{background:var(--color-surface-dynamic);color:var(--color-text)}.new-note-btn{display:inline-flex;align-items: center;gap:var(--space-2);padding:var(--space-2)var(--space-3);background:var(--color-primary);color:#fff;border-radius:var(--radius-md);font-size:var(--text-xs);transition:background var(--transition);white-space:nowrap;font-weight:600}.new-note-btn:hover{background:var(--color-primary-hover)}.search-wrap{padding:var(--space-3)var(--space-4);flex-shrink:0}.search-box{display:flex;align-items: center;gap:var(--space-2);background:var(--color-surface-offset);border-radius:var(--radius-md);padding:var(--space-2)var(--space-3);transition:border-color var(--transition),background var(--transition);border:1px solid #0000}.search-box:focus-within{border-color:var(--color-primary);background:var(--color-surface-2)}.search-box svg{color:var(--color-text-faint);flex-shrink:0}.search-box input{outline:none;font-size:var(--text-sm);color:var(--color-text);background:0 0;border:none;width:100%}.search-box input::placeholder{color:var(--color-text-faint)}.notes-list{overflow-y:auto;padding:0 var(--space-2)var(--space-4);overscroll-behavior:contain;flex:1}.notes-list::-webkit-scrollbar{width:4px}.notes-list::-webkit-scrollbar-track{background:0 0}.notes-list::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:var(--radius-full)}.section-label{font-size:var(--text-xs);letter-spacing:.06em;text-transform:uppercase;color:var(--color-text-faint);padding:var(--space-3)var(--space-2)var(--space-1);font-weight:600}.note-item{display:flex;padding:var(--space-3)var(--space-3);border-radius:var(--radius-md);cursor:pointer;transition:background var(--transition);position:relative;flex-direction:column;gap:2px}.note-item:hover{background:var(--color-surface-offset)}.note-item.active{background:var(--color-primary-hi);color:var(--color-text)}.note-item-title{font-weight:500;font-size:var(--text-sm);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.note-item-preview{font-size:var(--text-xs);color:var(--color-text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.note-item.active .note-item-preview{color:var(--color-text-muted)}.note-item-meta{font-size:var(--text-xs);color:var(--color-text-faint)}.empty-list{display:flex;padding:var(--space-10)var(--space-4);text-align:center;justify-content:center;align-items: center;gap:var(--space-3);color:var(--color-text-muted);flex-direction:column}.empty-list svg{color:var(--color-text-faint)}.empty-list p{font-size:var(--text-xs);max-width:20ch}.sidebar-footer{border-top:1px solid var(--color-divider);padding:var(--space-3)var(--space-4);display:flex;flex-shrink:0;justify-content:space-between;align-items: center;height:40px}.sync-status{display:flex;align-items: center;gap:var(--space-2);font-size:var(--text-xs);color:var(--color-text-muted)}.sync-dot{border-radius:var(--radius-full);background:var(--color-text-faint);transition:background var(--transition);flex-shrink:0;width:7px;height:7px}.sync-dot.synced{background:var(--color-success)}.sync-dot.syncing{background:var(--color-warning);animation:pulse 1.2s ease-in-out infinite}.sync-dot.error{background:var(--color-error)}@keyframes pulse{0%,to{opacity:1}50%{opacity:.35}}.editor-pane{display:flex;background:var(--color-bg);overflow:hidden;grid-column:2;grid-row:1;flex-direction:column;height:100dvh}.editor-toolbar{display:flex;padding:var(--space-3)var(--space-6);border-bottom:1px solid var(--color-divider);flex-shrink:0;justify-content:space-between;align-items: center;height:52px}.toolbar-left{display:flex;align-items: center;gap:var(--space-2);flex:1;min-width:0}.toolbar-right{display:flex;align-items: center;gap:var(--space-1)}.note-date{font-size:var(--text-xs);color:var(--color-text-faint)}.note-title-input{display:block;padding:var(--space-6)var(--space-8)var(--space-3);font-size:var(--text-xl);outline:none;color:var(--color-text);background:0 0;border:none;flex-shrink:0;width:100%;font-weight:600;line-height:1.2}.note-title-input::placeholder{color:var(--color-text-faint)}.note-body-input{display:block;padding:var(--space-2)var(--space-8)var(--space-8);outline:none;resize:none;font-size:var(--text-base);color:var(--color-text);overflow-y:auto;overscroll-behavior:contain;background:0 0;border:none;flex:1;width:100%;line-height:1.75}.note-body-input::placeholder{color:var(--color-text-faint)}.note-body-input::-webkit-scrollbar{width:6px}.note-body-input::-webkit-scrollbar-track{background:0 0}.note-body-input::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:var(--radius-full)}.editor-footer{display:flex;padding:var(--space-2)var(--space-8);border-top:1px solid var(--color-divider);font-size:var(--text-xs);color:var(--color-text-faint);justify-content:space-between;align-items: center;gap:var(--space-4);flex-shrink:0;height:40px}.welcome{display:flex;justify-content:center;align-items: center;gap:var(--space-4);color:var(--color-text-muted);text-align:center;padding:var(--space-8);flex-direction:column;flex:1}.welcome svg{color:var(--color-text-faint);margin-bottom:var(--space-2)}.welcome h2{font-size:var(--text-lg);color:var(--color-text);font-weight:600}.welcome p{font-size:var(--text-sm);max-width:36ch}.welcome kbd{display:inline-flex;background:var(--color-surface-offset);border:1px solid var(--color-border);border-radius:var(--radius-sm);font-size:var(--text-xs);color:var(--color-text-muted);align-items: center;gap:4px;padding:1px 6px}.modal-overlay{position:fixed;background:oklch(.1 0 0/.5);display:flex;z-index:100;opacity:0;pointer-events:none;transition:opacity var(--transition);justify-content:center;align-items: center;inset:0}.modal-overlay.open{opacity:1;pointer-events:all}.modal{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:var(--space-8);width:min(480px,calc(100vw - var(--space-8)));box-shadow:var(--shadow-md);transition:transform var(--transition);transform:translateY(8px)}.modal-overlay.open .modal{transform:translateY(0)}.modal h2{font-size:var(--text-lg);margin-bottom:var(--space-6);font-weight:600}.form-row{display:flex;gap:var(--space-2);margin-bottom:var(--space-5);flex-direction:column}.form-label{font-size:var(--text-xs);color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.05em;font-weight:600}.form-input{background:var(--color-surface-offset);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-3)var(--space-4);font-size:var(--text-sm);color:var(--color-text);outline:none;transition:border-color var(--transition);width:100%}.form-input:focus{border-color:var(--color-primary)}.form-input::placeholder{color:var(--color-text-faint)}.form-help{font-size:var(--text-xs);color:var(--color-text-faint)}.modal-actions{display:flex;gap:var(--space-3);margin-top:var(--space-6);justify-content:flex-end}.btn{display:inline-flex;align-items: center;gap:var(--space-2);padding:var(--space-2)var(--space-5);border-radius:var(--radius-md);font-size:var(--text-sm);transition:background var(--transition),color var(--transition);border:1px solid #0000;font-weight:500}.btn-primary{background:var(--color-primary);color:#fff}.btn-primary:hover{background:var(--color-primary-hover)}.btn-ghost{border-color:var(--color-border);color:var(--color-text-muted);background:0 0}.btn-ghost:hover{background:var(--color-surface-offset);color:var(--color-text)}.btn-danger{border-color:var(--color-error);color:var(--color-error);background:0 0}.btn-danger:hover{background:var(--color-error);color:#fff}.shortcut-section-label{font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.06em;color:var(--color-text-faint);padding:var(--space-1)0;font-weight:600}.shortcut-row{display:flex;padding:var(--space-2)var(--space-3);border-radius:var(--radius-md);transition:background var(--transition);justify-content:space-between;align-items: center}.shortcut-row:hover{background:var(--color-surface-offset)}.shortcut-desc{font-size:var(--text-sm);color:var(--color-text-muted)}.shortcut-keys{display:flex;gap:var(--space-1);align-items: center}kbd{display:inline-flex;padding:0 var(--space-2);background:var(--color-surface-offset);border:1px solid var(--color-border);border-radius:var(--radius-sm);font-size:var(--text-xs);color:var(--color-text-muted);white-space:nowrap;border-bottom-width:2px;justify-content:center;align-items: center;min-width:24px;height:22px;font-family:inherit}.confirm-dialog{position:fixed;background:oklch(.1 0 0/.5);display:flex;z-index:200;opacity:0;pointer-events:none;transition:opacity var(--transition);justify-content:center;align-items: center;inset:0}.confirm-dialog.open{opacity:1;pointer-events:all}.confirm-box{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:var(--space-6);width:min(360px,calc(100vw - var(--space-8)));box-shadow:var(--shadow-md)}.confirm-box h3{font-size:var(--text-base);margin-bottom:var(--space-2);font-weight:600}.confirm-box p{font-size:var(--text-sm);color:var(--color-text-muted);margin-bottom:var(--space-6)}.confirm-actions{display:flex;gap:var(--space-3);justify-content:flex-end}.toast-container{position:fixed;bottom:var(--space-6);right:var(--space-6);display:flex;gap:var(--space-2);z-index:300;flex-direction:column}.toast{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-3)var(--space-4);font-size:var(--text-sm);box-shadow:var(--shadow-md);display:flex;align-items: center;gap:var(--space-3);animation:slideIn .2s ease forwards;max-width:320px}.toast.success .toast-icon{color:var(--color-success)}.toast.error .toast-icon{color:var(--color-error)}.toast.info .toast-icon{color:var(--color-primary)}@keyframes slideIn{0%{opacity:0;transform:translate(12px)}to{opacity:1;transform:translate(0)}}@media (max-width:700px){.app{grid-template-columns:1fr}.sidebar{position:fixed;width:var(--sidebar-w);z-index:50;transition:transform var(--transition);top:0;bottom:0;left:0;transform:translate(-100%)}.sidebar.open{transform:translate(0)}.editor-pane{grid-column:1}.note-title-input{padding:var(--space-4)var(--space-4)var(--space-2)}.note-body-input{padding:var(--space-2)var(--space-4)var(--space-4)}.editor-toolbar{padding:var(--space-3)var(--space-4)}.mobile-menu-btn{display:flex!important}}.mobile-menu-btn{display:none}