@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes slideIn{0%{transform:translateX(100%)}to{transform:translateX(0)}}:root{--primary:#6366f1;--primary-dark:#4f46e5;--secondary:#64748b;--background:#ffffff;--surface:#f8fafc;--surface-hover:#f1f5f9;--border:#e2e8f0;--text-primary:#0f172a;--text-secondary:#64748b;--text-muted:#94a3b8;--success:#10b981;--warning:#f59e0b;--danger:#ef4444;--shadow:0 1px 3px 0 rgb(0 0 0 / 0.1);--shadow-lg:0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);--shadow-xl:0 20px 25px -5px rgb(0 0 0 / 0.1), 0 10px 10px -5px rgb(0 0 0 / 0.04);--radius:12px;--radius-sm:8px;--font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--transition:all 0.2s cubic-bezier(0.4, 0, 0.2, 1)}[data-theme=dark]{--background:#0f172a;--surface:#1e293b;--surface-hover:#334155;--border:#334155;--text-primary:#f8fafc;--text-secondary:#cbd5e1;--text-muted:#64748b}*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}.search-container input,body{background:var(--background);color:var(--text-primary)}body{font-family:var(--font-family);line-height:1.6;overflow:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;touch-action:manipulation}.app-container{height:100vh;height:100dvh;display:flex;flex-direction:column;position:relative}.app-locked{filter:blur(5px);pointer-events:none}.app-title,.top-bar{display:flex;align-items:center}.top-bar{height:64px;background:var(--surface);border-bottom:1px solid var(--border);justify-content:space-between;padding:0 24px;flex-shrink:0;backdrop-filter:blur(10px);z-index:100}.app-title{gap:12px;font-weight:600;font-size:20px}.app-title i{color:var(--primary);font-size:24px}.top-controls{display:flex;gap:8px}.search-bar{background:var(--surface);border-bottom:1px solid var(--border);padding:16px 24px;transform:translateY(-100%);transition:var(--transition);position:absolute;top:64px;left:0;right:0;z-index:99}.search-bar.show{transform:translateY(0)}.search-container{position:relative;max-width:600px;margin:0 auto}.search-container i{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:var(--text-muted);pointer-events:none}.search-container input{width:100%;padding:12px 16px 12px 48px;border:2px solid var(--border);border-radius:var(--radius);font-size:16px;transition:var(--transition)}.search-container input:focus{outline:0;border-color:var(--primary);box-shadow:0 0 0 3px rgb(99 102 241/.1)}.btn-clear{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:32px;height:32px;border:0;background:0 0;color:var(--text-muted);border-radius:var(--radius-sm);cursor:pointer;transition:var(--transition)}.btn-clear:hover{background:var(--surface-hover);color:var(--text-primary)}.main-content{flex:1;overflow:hidden;position:relative}.welcome-screen{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:var(--background);z-index:10;opacity:1;transition:var(--transition)}.welcome-screen.hidden{opacity:0;pointer-events:none}.welcome-content{text-align:center;max-width:480px;padding:48px 24px}.welcome-icon{width:120px;height:120px;margin:0 auto 32px;background:linear-gradient(135deg,var(--primary),var(--primary-dark));border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-xl)}.welcome-icon i{font-size:48px;color:#fff}.welcome-content h1{font-size:32px;font-weight:700;margin-bottom:16px;background:linear-gradient(135deg,var(--text-primary),var(--text-secondary));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.welcome-content p{font-size:18px;color:var(--text-secondary);margin-bottom:32px;line-height:1.6}.notes-container{position:absolute;inset:0;padding:24px;overflow-y:auto;opacity:0;pointer-events:none;transition:var(--transition)}.notes-container.show{opacity:1;pointer-events:all}.notes-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}.notes-header h2{font-size:28px;font-weight:700;color:var(--text-primary)}.sort-controls select{padding:8px 16px;border-radius:var(--radius-sm);color:var(--text-primary);font-size:14px}.notes-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px;padding-bottom:100px}.note-card,.sort-controls select{background:var(--surface);border:1px solid var(--border);cursor:pointer}.note-card{border-radius:var(--radius);padding:20px;transition:var(--transition);position:relative;overflow:hidden}.note-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);border-color:var(--primary)}.note-card:active{transform:translateY(0)}.note-card.favorite::before{content:"";position:absolute;top:0;right:0;width:0;height:0;border-left:20px solid transparent;border-top:20px solid var(--warning)}.note-card.favorite::after{content:"★";position:absolute;top:4px;right:4px;color:#fff;font-size:10px}.note-card.locked::before{content:"";position:absolute;top:0;left:0;width:0;height:0;border-right:20px solid transparent;border-top:20px solid var(--danger)}.note-card.locked::after{content:"🔒";position:absolute;top:4px;left:4px;font-size:10px}.note-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:12px}.note-title{font-size:18px;font-weight:600;color:var(--text-primary);line-height:1.4;flex:1;margin-right:12px}.note-menu,.note-preview{color:var(--text-secondary)}.note-menu{width:32px;height:32px;border:0;background:var(--surface-hover);border-radius:var(--radius-sm);cursor:pointer;transition:var(--transition);display:flex;align-items:center;justify-content:center;opacity:1;flex-shrink:0}.note-menu:hover{background:var(--primary);color:#fff;transform:scale(1.1)}.note-menu:active{transform:scale(.95)}.note-preview{font-size:14px;line-height:1.5;margin-bottom:12px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.note-meta{display:flex;align-items:center;justify-content:space-between;font-size:12px;color:var(--text-muted)}.attachment-count,.note-attachments{display:flex;align-items:center;gap:4px}.note-attachments{margin-top:8px}.attachment-count{font-size:12px;color:var(--text-muted);background:var(--surface-hover);padding:2px 6px;border-radius:4px}.editor-container{position:absolute;inset:0;background:var(--background);display:flex;flex-direction:column;transform:translateX(100%);transition:var(--transition);z-index:20}.editor-container.show{transform:translateX(0)}.btn-back,.editor-header{display:flex;align-items:center}.editor-header{height:64px;background:var(--surface);border-bottom:1px solid var(--border);padding:0 24px;gap:16px}.btn-back{width:40px;height:40px;border:0;background:0 0;color:var(--text-secondary);border-radius:var(--radius-sm);cursor:pointer;transition:var(--transition);justify-content:center;flex-shrink:0}.btn-back:hover{background:var(--surface-hover);color:var(--text-primary)}.btn-back:active{transform:scale(.95)}.note-title-input{flex:1;font-size:20px;font-weight:600;border:0;background:0 0;color:var(--text-primary);outline:0;min-width:0}.note-title-input::placeholder{color:var(--text-muted)}.editor-actions{display:flex;gap:8px;align-items:center}.more-menu-container{position:relative}.toolbar{background:var(--surface);border-bottom:1px solid var(--border);padding:12px 24px;display:flex;align-items:center;gap:16px;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}.toolbar::-webkit-scrollbar{display:none}.toolbar-group{display:flex;gap:4px;flex-shrink:0}.toolbar-separator{width:1px;height:24px;background:var(--border);flex-shrink:0}.btn-tool{width:36px;height:36px;border:0;background:0 0;color:var(--text-secondary);border-radius:var(--radius-sm);cursor:pointer;transition:var(--transition);display:flex;align-items:center;justify-content:center;flex-shrink:0}.btn-tool:hover{background:var(--surface-hover);color:var(--text-primary)}.btn-tool:active{transform:scale(.95)}.btn-tool.active{background:var(--primary);color:#fff}.editor-content{flex:1;padding:32px 24px;overflow-y:auto}.editor{min-height:100%;outline:0;font-size:16px;line-height:1.7;color:var(--text-primary);word-wrap:break-word}.editor:empty::before{content:attr(data-placeholder);color:var(--text-muted);pointer-events:none}.editor img,.editor-image-wrapper img{max-width:100%;height:auto;border-radius:var(--radius-sm)}.editor img,.editor-image-wrapper{margin:16px 0;display:block}.editor-image-wrapper{position:relative;text-align:center}.editor-image-wrapper img{margin:0}.image-delete-btn{position:absolute;top:8px;right:8px;width:28px;height:28px;background:rgba(239,68,68,.9);color:#fff;border:0;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:12px;transition:var(--transition);z-index:10}.image-delete-btn:hover{background:var(--danger);transform:scale(1.1)}.editor-audio-wrapper{position:relative;display:block;margin:16px 0;padding:16px;background:var(--surface);border-radius:var(--radius);border:1px solid var(--border)}.editor-audio-wrapper .audio-info{display:flex;align-items:center;gap:12px;margin-bottom:12px}.audio-delete-btn,.editor-audio-wrapper .audio-icon{color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center}.editor-audio-wrapper .audio-icon{width:40px;height:40px;background:var(--primary);font-size:16px}.editor-audio-wrapper .audio-title{font-weight:600;color:var(--text-primary)}.editor-audio-wrapper audio{width:100%;height:40px}.audio-delete-btn{position:absolute;top:8px;right:8px;width:28px;height:28px;background:rgba(239,68,68,.9);border:0;cursor:pointer;font-size:12px;transition:var(--transition);z-index:10}.audio-delete-btn:hover{background:var(--danger);transform:scale(1.1)}.editor blockquote,.editor-attachment-wrapper{margin:16px 0;background:var(--surface);padding:16px}.editor-attachment-wrapper{position:relative;display:block;border-radius:var(--radius);border:1px solid var(--border);cursor:pointer;transition:var(--transition)}.editor-attachment-wrapper:hover{background:var(--surface-hover)}.editor-attachment-wrapper .attachment-info{display:flex;align-items:center;gap:12px}.editor-attachment-wrapper .attachment-icon{width:40px;height:40px;background:var(--secondary);color:#fff;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;font-size:16px}.editor-attachment-wrapper .attachment-details{flex:1}.editor-attachment-wrapper .attachment-name{font-weight:600;color:var(--text-primary);margin-bottom:4px}.editor-attachment-wrapper .attachment-size{font-size:12px;color:var(--text-muted)}.attachment-delete-btn{position:absolute;top:8px;right:8px;width:28px;height:28px;background:rgba(239,68,68,.9);color:#fff;border:0;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:12px;z-index:10}.attachment-delete-btn:hover{background:var(--danger);transform:scale(1.1)}.editor blockquote{border-left:4px solid var(--primary);color:var(--text-secondary);font-style:italic;border-radius:var(--radius-sm)}.editor ol,.editor ul{padding-left:24px;margin:16px 0}.attachment-delete-btn,.editor a,.fab{transition:var(--transition)}.editor a,.editor code{border-radius:4px;color:var(--primary)}.editor a{text-decoration:none;padding:2px 4px}.editor a:hover{background:rgba(99,102,241,.1);text-decoration:underline}.editor code{background:var(--surface);padding:4px 8px;font-family:"Courier New",monospace;font-size:.9em;border:1px solid var(--border)}.fab{position:fixed;bottom:24px;right:24px;width:56px;height:56px;background:var(--primary);color:#fff;border:0;border-radius:50%;cursor:pointer;box-shadow:var(--shadow-lg);justify-content:center;font-size:20px;z-index:1000}.fab:hover{background:var(--primary-dark);transform:scale(1.1)}.fab:active{transform:scale(.95)}.fab.hidden{transform:scale(0);opacity:0;pointer-events:none}.btn-primary,.fab,.status-bar{display:flex;align-items:center}.status-bar{height:40px;background:var(--surface);border-top:1px solid var(--border);justify-content:space-between;padding:0 24px;font-size:12px;color:var(--text-secondary);flex-shrink:0}.status-bar.editor-only{display:none}.editor-container.show~.status-bar.editor-only{display:flex}.btn-primary{background:var(--primary);color:#fff;border:0;padding:12px 24px;border-radius:var(--radius);font-size:16px;font-weight:500;gap:8px}.btn-primary:hover{background:var(--primary-dark);transform:translateY(-1px)}.btn-primary:active{transform:translateY(0)}.btn-danger,.btn-icon,.btn-primary,.btn-secondary{cursor:pointer;transition:var(--transition)}.btn-secondary{background:var(--surface);color:var(--text-primary);border:1px solid var(--border);padding:12px 24px;border-radius:var(--radius);font-size:14px;font-weight:500}.btn-secondary:hover{background:var(--surface-hover)}.btn-secondary:active{transform:scale(.98)}.btn-danger,.btn-icon{border:0}.btn-danger{background:var(--danger);color:#fff;padding:12px 24px;border-radius:var(--radius);font-size:14px;font-weight:500}.btn-danger:hover{background:#dc2626}.btn-danger:active{transform:scale(.98)}.btn-icon{width:40px;height:40px;background:0 0;color:var(--text-secondary);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;flex-shrink:0}.btn-icon:hover{background:var(--surface-hover);color:var(--text-primary)}.btn-icon:active{transform:scale(.95)}.btn-icon.active{background:var(--primary);color:#fff}.save-btn,.save-btn:hover{color:var(--success)!important}.save-btn:hover{background:rgba(16,185,129,.1)!important}.context-menu{position:fixed;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-xl);padding:8px;z-index:2000;opacity:0;transform:scale(.95);pointer-events:none;flex-direction:column;gap:4px;min-width:48px}.context-menu.show{opacity:1;transform:scale(1);pointer-events:all}.context-item,.context-menu,.dropdown-menu{transition:var(--transition);display:flex}.context-item{width:40px;height:40px;align-items:center;justify-content:center;border-radius:var(--radius-sm);cursor:pointer;color:var(--text-secondary)}.context-item:hover{background:var(--surface-hover);color:var(--text-primary)}.context-item:active{transform:scale(.95)}.context-item.danger{color:var(--danger)}.context-item.danger:hover,.menu-item.danger:hover{background:rgba(239,68,68,.1);color:var(--danger)}.dropdown-menu{position:absolute;top:100%;right:0;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-lg);padding:8px;z-index:1000;opacity:0;transform:translateY(-8px);pointer-events:none;flex-direction:column;gap:4px;min-width:48px}.dropdown-menu.show{opacity:1;transform:translateY(0);pointer-events:all}.menu-item{width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);cursor:pointer;color:var(--text-secondary)}.menu-item:hover{background:var(--surface-hover);color:var(--text-primary)}.menu-item:active{transform:scale(.95)}.menu-item.danger{color:var(--danger)}.menu-item,.modal,.modal-content{transition:var(--transition)}.modal{position:fixed;inset:0;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;z-index:3000;opacity:0;pointer-events:none}.modal.show{opacity:1;pointer-events:all}.modal-content{background:var(--background);border-radius:var(--radius);box-shadow:var(--shadow-xl);width:90%;max-width:480px;max-height:80vh;overflow:hidden;transform:scale(.95)}.modal.show .modal-content{transform:scale(1)}.modal-header{padding:24px 24px 0;display:flex;align-items:center;justify-content:space-between}.modal-header h3{font-size:20px;font-weight:600}.btn-close{width:32px;height:32px;border:0;background:0 0;color:var(--text-muted);border-radius:var(--radius-sm);cursor:pointer;transition:var(--transition)}.btn-close:hover{background:var(--surface-hover);color:var(--text-primary)}.btn-close:active{transform:scale(.95)}.modal-body{padding:24px}.modal-footer{padding:0 24px 24px;display:flex;gap:12px;justify-content:flex-end}.input-group{margin-bottom:20px}.input-group:last-child{margin-bottom:0}.input-group label,.setting-group label{display:block;margin-bottom:8px;font-weight:500;color:var(--text-primary)}.modal-input{width:100%;padding:12px 16px;border:2px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);color:var(--text-primary);font-size:14px;transition:var(--transition)}.modal-input:focus{outline:0;border-color:var(--primary);box-shadow:0 0 0 3px rgb(99 102 241/.1)}.confirm-modal .modal-header{flex-direction:column;text-align:center;gap:16px}.confirm-icon,.lock-icon{width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:24px}.confirm-icon{background:rgba(239,68,68,.1);color:var(--danger)}.lock-icon{background:rgba(99,102,241,.1);color:var(--primary);margin:0 auto}.unlock-error{color:var(--danger);font-size:14px;text-align:center;margin-top:8px;padding:8px;background:rgba(239,68,68,.1);border-radius:var(--radius-sm)}.confirm-modal .modal-body{text-align:center;padding:0 24px 24px}.setting-group{margin-bottom:24px}.setting-group:last-child{margin-bottom:0}.setting-group input[type=text],.setting-group select{width:100%;padding:12px 16px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);color:var(--text-primary);font-size:14px}.setting-group input[type=checkbox]{margin-right:8px}.audio-recorder{text-align:center}.record-controls{margin-bottom:20px}.btn-record{width:80px;height:80px;border:0;border-radius:50%;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:12px;font-weight:500;transition:var(--transition)}.btn-record:not(.stop){background:var(--danger);color:#fff}.btn-record.stop{background:var(--secondary);color:#fff}.btn-record:hover{transform:scale(1.05)}.btn-record i{font-size:24px}.record-status{margin-bottom:20px;color:var(--text-secondary);font-size:14px}.record-status.recording{color:var(--danger);font-weight:600}.audio-preview{margin-top:20px}.audio-preview audio{width:100%;max-width:300px}.file-drop-zone{border:2px dashed var(--border);border-radius:var(--radius);padding:40px 20px;text-align:center;cursor:pointer;transition:var(--transition);margin-bottom:20px}.file-drop-zone.dragover,.file-drop-zone:hover{border-color:var(--primary);background:rgba(99,102,241,.05)}.drop-zone-content i{font-size:48px;margin-bottom:16px}.drop-zone-content p{font-size:16px;color:var(--text-primary);margin-bottom:8px}.drop-zone-content i,.drop-zone-content small{color:var(--text-muted)}.attached-files{max-height:200px;overflow-y:auto}.attached-file{display:flex;align-items:center;gap:12px;padding:12px;background:var(--surface);border-radius:var(--radius-sm);margin-bottom:8px;border:1px solid var(--border)}.attached-file:last-child{margin-bottom:0}.file-icon{width:32px;height:32px;background:var(--secondary);color:#fff;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0}.file-details{flex:1;min-width:0}.file-name{font-weight:500;color:var(--text-primary);margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.file-size{font-size:12px;color:var(--text-muted)}.file-remove{width:24px;height:24px;border:0;background:0 0;color:var(--text-muted);border-radius:50%;cursor:pointer;transition:var(--transition);display:flex;align-items:center;justify-content:center;flex-shrink:0}.file-remove:hover{background:rgba(239,68,68,.1);color:var(--danger)}.notification{position:fixed;top:24px;right:24px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-lg);padding:16px 20px;z-index:4000;transition:transform .3s cubic-bezier(.4,0,.2,1);max-width:320px}.notification.show{transform:translateX(0)}.notification,.notification.hide{transform:translateX(calc(100% + 48px))}.notification-content{display:flex;align-items:center;gap:12px}.notification-icon{font-size:18px;flex-shrink:0}.notification-text{font-size:14px;font-weight:500}.notification.success{border-color:var(--success)}.notification.success .notification-icon{color:var(--success)}.notification.error{border-color:var(--danger)}.notification.error .notification-icon{color:var(--danger)}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:var(--surface)}::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}@media (max-width:768px){.top-bar{padding:0 16px;height:56px}.app-title{font-size:18px}.search-bar{top:56px}.notes-container,.search-bar{padding:16px}.notes-grid{grid-template-columns:1fr;gap:16px}.editor-header{padding:0 16px;height:56px}.note-title-input{font-size:18px}.toolbar{padding:12px 16px;gap:12px}.toolbar-group{gap:2px}.btn-tool{width:32px;height:32px}.editor-content{padding:24px 16px}.editor{font-size:16px}.fab{bottom:16px;right:16px;width:48px;height:48px;font-size:18px}.status-bar{padding:0 16px;height:36px;font-size:11px}.notification{top:16px;right:16px;max-width:calc(100vw - 32px)}.modal-content{width:95%;margin:16px}.context-menu{padding:6px;gap:2px;min-width:44px}.context-item{width:36px;height:36px}.dropdown-menu{min-width:44px}.menu-item{width:36px;height:36px}}@media (max-width:480px){.welcome-content{padding:32px 16px}.welcome-icon{width:80px;height:80px;margin-bottom:24px}.welcome-icon i{font-size:32px}.notes-header h2,.welcome-content h1{font-size:24px}.welcome-content p{font-size:16px}.notes-header{flex-direction:column;gap:16px;align-items:flex-start}}@media (hover:none) and (pointer:coarse){.btn-icon:hover,.btn-tool:hover,.context-item:hover,.menu-item:hover,.note-menu:hover{background:0 0;color:inherit;transform:none}.btn-icon:active,.btn-tool:active,.context-item:active,.menu-item:active,.note-menu:active{background:var(--surface-hover);color:var(--text-primary)}.note-card:hover{transform:none;box-shadow:none;border-color:var(--border)}.note-card:active{transform:scale(.98);background:var(--surface-hover)}}.note-card{animation:fadeIn .3s ease-out}.saving{color:var(--warning)}.saved{color:var(--success)}.error{color:var(--danger)}.hidden{display:none!important}@media (prefers-contrast:high){:root{--border:#000000;--text-muted:#666666}[data-theme=dark]{--border:#ffffff;--text-muted:#cccccc}}@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}