:root{--color-bg-sidebar: #f5f5f5;--color-bg-editor: #ffffff;--color-bg-app: #e8e8e8;--color-text-primary: #1c1c1e;--color-text-secondary: #6c6c70;--color-text-placeholder: #aeaeb2;--color-accent: #007aff;--color-accent-bg: #e8f0fe;--color-border: #d1d1d6;--color-hover: #ebebeb;--color-selected: #ddeeff;--color-danger: #ff3b30;--color-danger-hover: #ff2d20;--font-system: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;--sidebar-width: 280px;--toolbar-height: 44px;--border-radius: 8px}@media(prefers-color-scheme:dark){:root{--color-bg-sidebar: #1c1c1e;--color-bg-editor: #000000;--color-bg-app: #111111;--color-text-primary: #f5f5f7;--color-text-secondary: #8e8e93;--color-text-placeholder: #3a3a3c;--color-accent: #0a84ff;--color-accent-bg: #0a2a4a;--color-border: #38383a;--color-hover: #2c2c2e;--color-selected: #1c3355;--color-danger: #ff453a;--color-danger-hover: #ff6961}.delete-button:hover{background-color:#2c1414!important}.delete-button:active{background-color:#3a1a1a!important}.login-card{box-shadow:0 2px 16px #0006}}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%;width:100%;overflow:hidden}body{font-family:var(--font-system);font-size:14px;color:var(--color-text-primary);background-color:var(--color-bg-app);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}button{font-family:var(--font-system);cursor:pointer;border:none;background:none}textarea{font-family:var(--font-system);border:none;outline:none;resize:none;background:transparent}.app-layout{display:flex;height:100%;width:100%}.sidebar{width:var(--sidebar-width);min-width:var(--sidebar-width);background-color:var(--color-bg-sidebar);border-right:1px solid var(--color-border);display:flex;flex-direction:column;height:100%;overflow:hidden}.note-list-container{display:flex;flex-direction:column;height:100%;overflow:hidden}.note-list-header{display:flex;align-items:center;justify-content:space-between;padding:16px 16px 10px;flex-shrink:0}.note-list-heading{font-size:20px;font-weight:700;color:var(--color-text-primary);letter-spacing:-.3px}.new-note-button{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;color:var(--color-accent);transition:background-color .15s ease}.new-note-button:hover{background-color:var(--color-hover)}.new-note-button:active{background-color:var(--color-border)}.note-list{list-style:none;overflow-y:auto;flex:1;padding:4px 8px 16px}.note-list-item{display:flex;flex-direction:column;gap:2px;padding:10px;border-radius:var(--border-radius);cursor:pointer;transition:background-color .12s ease;-webkit-user-select:none;user-select:none}.note-list-item:hover{background-color:var(--color-hover)}.note-list-item.selected{background-color:var(--color-selected)}.note-list-item-title{font-size:14px;font-weight:500;color:var(--color-text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.note-list-item.selected .note-list-item-title{color:var(--color-accent)}.note-list-item-date{font-size:11px;color:var(--color-text-secondary)}.note-list-empty{padding:16px;color:var(--color-text-secondary);font-size:13px;text-align:center}.editor-pane{flex:1;background-color:var(--color-bg-editor);display:flex;flex-direction:column;height:100%;overflow:hidden}.editor-empty{flex:1;display:flex;align-items:center;justify-content:center;color:var(--color-text-placeholder);font-size:15px;-webkit-user-select:none;user-select:none}.editor-container{display:flex;flex-direction:column;height:100%;overflow:hidden}.editor-toolbar{display:flex;align-items:center;justify-content:space-between;padding:10px 24px;height:var(--toolbar-height);flex-shrink:0;border-bottom:1px solid var(--color-border)}.back-button{display:none;align-items:center;gap:3px;font-size:14px;font-weight:500;color:var(--color-accent);padding:4px 6px;border-radius:6px;transition:background-color .15s ease}.back-button:hover{background-color:var(--color-hover)}.saving-indicator{font-size:12px;color:var(--color-text-secondary);transition:opacity .2s ease}.saving-indicator--hidden{opacity:0;pointer-events:none}.delete-button{display:flex;align-items:center;gap:5px;font-size:13px;color:var(--color-danger);padding:4px 8px;border-radius:6px;transition:background-color .15s ease,color .15s ease}.delete-button:hover{background-color:#fff0ef;color:var(--color-danger-hover)}.delete-button:active{background-color:#ffe5e4}.editor-title{width:100%;font-size:22px;font-weight:700;line-height:1.3;color:var(--color-text-primary);padding:20px 24px 8px;flex-shrink:0;overflow:hidden;letter-spacing:-.3px}.editor-title::placeholder{color:var(--color-text-placeholder)}.rich-editor-wrapper{flex:1;display:flex;flex-direction:column;overflow:hidden}.format-toolbar{display:flex;align-items:center;gap:1px;padding:4px 20px;border-bottom:1px solid var(--color-border);flex-shrink:0}.fmt-btn{display:flex;align-items:center;justify-content:center;width:32px;height:28px;border-radius:6px;font-size:13px;font-family:var(--font-system);color:var(--color-text-secondary);transition:background-color .12s ease,color .12s ease;flex-shrink:0}.fmt-btn:hover{background-color:var(--color-hover);color:var(--color-text-primary)}.fmt-btn.active{background-color:var(--color-accent-bg);color:var(--color-accent)}.fmt-italic{font-style:italic}.fmt-divider{width:1px;height:18px;background-color:var(--color-border);margin:0 4px;flex-shrink:0}.rich-editor-scroll{flex:1;overflow-y:auto;display:flex;flex-direction:column}.rich-editor-content{flex:1;font-size:15px;line-height:1.65;color:var(--color-text-primary);padding:8px 24px 24px;outline:none;min-height:200px}.rich-editor-content p{margin-bottom:4px}.rich-editor-content h1{font-size:22px;font-weight:700;letter-spacing:-.3px;margin-top:12px;margin-bottom:6px}.rich-editor-content h2{font-size:18px;font-weight:600;letter-spacing:-.2px;margin-top:10px;margin-bottom:4px}.rich-editor-content h3{font-size:15px;font-weight:600;margin-top:8px;margin-bottom:4px}.rich-editor-content strong{font-weight:700}.rich-editor-content em{font-style:italic}.rich-editor-content ul,.rich-editor-content ol{padding-left:22px;margin-bottom:6px}.rich-editor-content li{margin-bottom:2px}.rich-editor-content hr{border:none;border-top:1px solid var(--color-border);margin:16px 0}.rich-editor-content img{max-width:100%;height:auto;border-radius:8px;display:block;margin:8px 0}.rich-editor-content img.ProseMirror-selectednode{outline:2px solid var(--color-accent);border-radius:8px}.rich-editor-content blockquote{border-left:3px solid var(--color-accent);padding-left:14px;margin:8px 0;color:var(--color-text-secondary)}.rich-editor-content pre{background-color:var(--color-bg-sidebar);border-radius:8px;padding:12px 16px;overflow-x:auto;margin:8px 0;font-size:13px;line-height:1.6}.rich-editor-content pre code{font-family:SF Mono,Fira Code,Fira Mono,Roboto Mono,monospace;background:none;padding:0;font-size:inherit;color:inherit}.rich-editor-content code{font-family:SF Mono,Fira Code,Fira Mono,Roboto Mono,monospace;background-color:var(--color-bg-sidebar);padding:2px 5px;border-radius:4px;font-size:.88em}.rich-editor-content table{border-collapse:collapse;width:100%;margin:12px 0;overflow-x:auto;display:block;font-size:14px}.rich-editor-content thead{display:table-header-group}.rich-editor-content tbody{display:table-row-group}.rich-editor-content tr{display:table-row;border-bottom:1px solid var(--color-border)}.rich-editor-content th,.rich-editor-content td{padding:8px 12px;text-align:left;border:1px solid var(--color-border);vertical-align:top;min-width:80px}.rich-editor-content th{background-color:var(--color-bg-sidebar);font-weight:600;font-size:13px}.rich-editor-content td p{margin:0}.ProseMirror{-webkit-user-select:text;user-select:text}.rich-editor-content p.is-empty:first-child:before{content:attr(data-placeholder);color:var(--color-text-placeholder);pointer-events:none;float:left;height:0}.rich-editor-scroll::-webkit-scrollbar{width:5px}.rich-editor-scroll::-webkit-scrollbar-track{background:transparent}.rich-editor-scroll::-webkit-scrollbar-thumb{background-color:var(--color-border);border-radius:3px}.login-wrapper{height:100%;display:flex;align-items:center;justify-content:center;background-color:var(--color-bg-sidebar)}.login-card{background-color:var(--color-bg-editor);border-radius:12px;padding:40px 36px;width:100%;max-width:340px;box-shadow:0 2px 16px #00000014}.login-title{font-size:28px;font-weight:700;color:var(--color-text-primary);text-align:center;margin-bottom:28px;letter-spacing:-.5px}.login-form{display:flex;flex-direction:column;gap:12px}.login-input{font-family:var(--font-system);font-size:15px;padding:10px 14px;border:1.5px solid var(--color-border);border-radius:8px;background-color:var(--color-bg-editor);color:var(--color-text-primary);outline:none;transition:border-color .15s ease}.login-input:focus{border-color:var(--color-accent)}.login-input::placeholder{color:var(--color-text-placeholder)}.login-error{font-size:13px;color:var(--color-danger);text-align:center}.login-button{font-family:var(--font-system);font-size:15px;font-weight:600;padding:11px;border-radius:8px;background-color:var(--color-accent);color:#fff;margin-top:4px;transition:background-color .15s ease,opacity .15s ease}.login-button:hover{background-color:#06d}.login-button:active{background-color:#005bbf}.login-button:disabled{opacity:.6;cursor:not-allowed}@media(max-width:767px){.app-layout{flex-direction:column}.sidebar{width:100%;min-width:unset;height:50%;border-right:none;border-bottom:1px solid var(--color-border)}.editor-pane{height:50%}.app-layout.note-selected .sidebar{display:none}.app-layout.note-selected .editor-pane{height:100%}.editor-title{font-size:18px;padding:14px 16px 6px}.editor-body{font-size:14px;padding:6px 16px 16px}.note-list-header{padding:12px 12px 8px}.note-list{padding:4px 6px 12px}.editor-toolbar{padding:8px 16px}.back-button{display:flex}.rich-editor-content{padding:8px 16px 24px}.format-toolbar{padding:4px 12px}}.note-list::-webkit-scrollbar,.editor-body::-webkit-scrollbar{width:5px}.note-list::-webkit-scrollbar-track,.editor-body::-webkit-scrollbar-track{background:transparent}.note-list::-webkit-scrollbar-thumb,.editor-body::-webkit-scrollbar-thumb{background-color:var(--color-border);border-radius:3px}