*{margin:0;padding:0;box-sizing:border-box}:root{--bg-dark: #F8F0E3;--bg-light: #F8F0E3;--bg-lighter: #F8F0E3;--text-white: #0A192F;--text-gray: #4A6B8C;--border-color: #C6DBF0;--accent: #106EBE;--shadow-main: 0 10px 30px rgba(16, 110, 190, .08);--shadow-card: 0 4px 15px rgba(16, 110, 190, .05)}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:var(--bg-dark);color:var(--text-white);overflow:hidden;height:100vh;height:100dvh}.screen{display:none;width:100%;height:100vh;height:100dvh}.screen.active{display:flex}.login-container{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:var(--bg-dark);padding:20px}.login-card{max-width:400px;width:100%;padding:40px 30px;background:linear-gradient(135deg,#0000000f,#00000008);border:1px solid rgba(0,0,0,.12);border-radius:16px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:var(--shadow-main);animation:cardSlideUp .6s cubic-bezier(.34,1.56,.64,1)}@keyframes cardSlideUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.login-card h1{font-size:clamp(24px,5vw,32px);font-weight:700;letter-spacing:3px;margin-bottom:8px;color:var(--text-white)}.subtitle{color:var(--text-gray);font-size:clamp(12px,2vw,13px);margin-bottom:32px;letter-spacing:1px}input[type=password],input[type=text]{width:100%;padding:14px;background:#fafafa80;border:1px solid rgba(0,0,0,.12);border-radius:8px;color:var(--text-white);font-size:16px;margin-bottom:16px;font-family:inherit;transition:all .25s ease}input::placeholder{color:#a0a0a080}input:focus{outline:none;border-color:#0006;background:#0000000d;box-shadow:0 0 0 2px #00000014}.primary-btn{width:100%;padding:14px;background:var(--accent);color:#fff;border:none;border-radius:8px;font-weight:700;font-size:13px;letter-spacing:1.5px;cursor:pointer;font-family:inherit;box-shadow:0 4px 15px #0000001a;transition:all .25s ease;-webkit-tap-highlight-color:transparent;margin-bottom:12px}.primary-btn:active{transform:scale(.98)}.secondary-btn{width:100%;padding:12px;background:transparent;color:var(--text-gray);border:1px solid rgba(0,0,0,.15);border-radius:8px;font-weight:600;font-size:12px;letter-spacing:1px;cursor:pointer;font-family:inherit;transition:all .25s ease;-webkit-tap-highlight-color:transparent}.secondary-btn:hover{background:#0000000d;border-color:#00000040}.secondary-btn:active{transform:scale(.98)}.app-layout{display:flex;width:100%;height:100vh;height:100dvh;position:relative;box-shadow:var(--shadow-main);border:1px solid var(--border-color)}.sidebar{width:280px;background:linear-gradient(180deg,#f8f0e3,#f8f0e3);border-right:1px solid rgba(0,0,0,.08);display:flex;flex-direction:column;transition:transform .3s ease;z-index:200}.sidebar-header{padding:20px;border-bottom:1px solid rgba(0,0,0,.08);font-size:14px;font-weight:700;letter-spacing:1.5px}.new-note-btn,.new-folder-btn{margin:8px 16px;padding:12px;background:var(--accent);color:#fff;border:none;border-radius:8px;font-weight:700;font-size:12px;letter-spacing:1.2px;cursor:pointer;font-family:inherit;box-shadow:0 4px 12px #0000001a;transition:all .25s ease;-webkit-tap-highlight-color:transparent}.new-folder-btn{background:#0000001a;color:var(--text-white);margin-top:0}.new-note-btn:active,.new-folder-btn:active{transform:scale(.98)}.notes-list{flex:1;overflow-y:auto;overflow-x:hidden;padding:4px 8px;-webkit-overflow-scrolling:touch}.empty-message{padding:12px;text-align:center;color:#a0a0a080;font-size:12px}.folder-section{margin-bottom:4px}.folder-header{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;margin-bottom:0;background:transparent;border-radius:8px;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:all .2s ease;border:2px solid transparent}.folder-header:hover{background:#00000014}.folder-header.drag-over{background:#64c8ff26;border:2px solid rgba(100,200,255,.5);transform:scale(1.03);box-shadow:0 0 20px #64c8ff4d}.folder-header:active{transform:scale(.98)}.folder-header-left{display:flex;align-items:center;gap:8px;flex:1;min-width:0}.folder-icon{font-size:12px;transition:transform .15s ease;flex-shrink:0;color:var(--text-gray)}.folder-header.collapsed .folder-icon{transform:rotate(-90deg)}.folder-name{font-weight:500;font-size:13px;color:var(--text-white);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.folder-actions{display:none;gap:4px;flex-shrink:0}.folder-header:hover .folder-actions{display:flex}.folder-action-btn{padding:3px 6px;background:#0000001a;border:none;border-radius:3px;color:var(--text-gray);font-size:9px;cursor:pointer;transition:all .15s ease;font-weight:600;letter-spacing:.3px}.folder-action-btn:hover{background:#0003;color:var(--text-white)}.folder-notes{padding-left:20px;max-height:2000px;overflow:hidden;transition:max-height .2s ease}.folder-notes.collapsed{max-height:0}.uncategorized-section{margin-top:8px;padding:8px 0;border-top:1px solid rgba(0,0,0,.05);border-radius:8px;transition:all .2s ease;border:2px solid transparent}.uncategorized-section.drag-over{background:#9664ff26;border:2px solid rgba(150,100,255,.5);box-shadow:0 0 20px #9664ff4d}.uncategorized-header{padding:8px 12px;font-size:12px;font-weight:600;color:var(--text-gray);letter-spacing:.8px}.note-item{padding:10px 12px;margin-bottom:2px;background:transparent;border:none;border-radius:6px;cursor:move;transition:all .15s ease;position:relative;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;touch-action:none;box-shadow:0 2px 5px #00000005}.note-item:hover{background:#0000000f;box-shadow:var(--shadow-card);transform:translateY(-1px)}.note-item.dragging{opacity:.4;cursor:grabbing;background:#0000001a}.note-item.ghost-dragging{opacity:.8;box-shadow:0 8px 32px #0009;transform:rotate(2deg);background:#00000026;border:2px solid rgba(0,0,0,.3)}.note-item:active{transform:scale(.98)}.note-item.active{background:#0000001f}.note-item-title{font-weight:500;color:var(--text-white);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px;pointer-events:none}.sidebar-footer{padding:12px;border-top:1px solid rgba(0,0,0,.08)}.settings-btn{width:100%;padding:12px;background:#00000014;border:1px solid rgba(0,0,0,.2);border-radius:6px;color:var(--text-white);font-weight:700;font-size:11px;letter-spacing:1px;cursor:pointer;font-family:inherit;transition:all .25s ease;-webkit-tap-highlight-color:transparent;margin-bottom:8px}.settings-btn:active{transform:scale(.98)}.logout-btn{width:100%;padding:12px;background:transparent;border:1px solid rgba(0,0,0,.15);border-radius:6px;color:var(--text-gray);font-weight:700;font-size:11px;letter-spacing:1px;cursor:pointer;font-family:inherit;transition:all .25s ease;-webkit-tap-highlight-color:transparent}.logout-btn:active{transform:scale(.98)}.main-content{flex:1;background:linear-gradient(135deg,#f8f0e3,#f8f0e3);overflow:hidden;display:flex;flex-direction:column;position:relative}.empty-state{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;position:relative}.empty-state-header{position:absolute;top:0;left:0;right:0;padding:16px;display:none}@media (max-width: 768px){.empty-state-header{display:block}}.empty-state h2{color:var(--text-gray);font-size:clamp(14px,3vw,16px);letter-spacing:1px;font-weight:500;text-align:center}.hint-text{margin-top:12px;font-size:13px;color:#a0a0a099;font-weight:400;text-align:center}.note-editor{flex:1;display:flex;flex-direction:column;animation:fadeIn .3s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.editor-header{padding:16px;border-bottom:1px solid rgba(0,0,0,.08);display:flex;justify-content:space-between;align-items:center;gap:12px;background:transparent}.menu-toggle{display:none;width:42px;height:42px;background:linear-gradient(135deg,#000000f2,#000000d9);border:2px solid rgba(0,0,0,.5);border-radius:10px;color:#000;cursor:pointer;flex-shrink:0;transition:all .2s ease;-webkit-tap-highlight-color:transparent;box-shadow:0 4px 20px #0000004d;align-items:center;justify-content:center}.menu-toggle svg{pointer-events:none;stroke:#000}.menu-toggle:active{background:#000c;transform:scale(.95);box-shadow:0 2px 10px #0006}.note-title-input{flex:1;background:transparent;border:none;font-size:clamp(18px,4vw,24px);font-weight:700;color:var(--text-white);outline:none;font-family:inherit;padding-bottom:4px;border-bottom:2px solid transparent;transition:all .2s ease}.note-title-input:focus{border-bottom-color:#0000004d}.note-title-input::placeholder{color:#a0a0a066}.editor-actions{display:flex;gap:8px}.folder-select{padding:8px 14px;background:#00000014;border:1px solid rgba(0,0,0,.2);border-radius:6px;color:var(--text-white);font-weight:600;font-size:11px;letter-spacing:.8px;font-family:inherit;cursor:pointer;transition:all .2s ease}.folder-select:hover{background:#0000001f;border-color:#0000004d}.folder-popup-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#000000b3;display:none;align-items:center;justify-content:center;z-index:1001;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:fadeIn .2s ease}.folder-popup-overlay.active{display:flex}.folder-popup{background:linear-gradient(135deg,#f8f0e3,#f8f0e3);border:1px solid rgba(0,0,0,.15);border-radius:16px;padding:24px;max-width:400px;width:90%;box-shadow:0 20px 60px #00000080;animation:popupSlideUp .3s cubic-bezier(.34,1.56,.64,1)}@keyframes popupSlideUp{0%{opacity:0;transform:translateY(30px) scale(.9)}to{opacity:1;transform:translateY(0) scale(1)}}.folder-popup h3{font-size:18px;font-weight:700;letter-spacing:1.5px;margin-bottom:20px;color:var(--text-white)}#folderPopupList{max-height:400px;overflow-y:auto;padding-right:8px;margin-right:-8px;-webkit-overflow-scrolling:touch}#folderPopupList::-webkit-scrollbar{width:4px}#folderPopupList::-webkit-scrollbar-track{background:transparent}#folderPopupList::-webkit-scrollbar-thumb{background:#0000001a;border-radius:10px}.folder-option{padding:14px 16px;background:#0000000a;border:1px solid rgba(0,0,0,.12);border-radius:8px;margin-bottom:8px;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;gap:12px;-webkit-tap-highlight-color:transparent}.folder-option:hover{background:#00000014;border-color:#00000040;transform:translate(4px)}.folder-option:active{transform:scale(.98)}.folder-option-icon{font-size:16px}.folder-option-text{font-size:14px;font-weight:600;color:var(--text-white)}.folder-option.no-folder{border-color:#00000026}.folder-option.no-folder .folder-option-text{color:var(--text-gray)}.folder-popup-close{margin-top:16px;width:100%;padding:12px;background:#0000000f;border:1px solid rgba(0,0,0,.15);border-radius:8px;color:var(--text-gray);font-weight:700;font-size:12px;letter-spacing:1px;cursor:pointer;transition:all .2s ease}.folder-popup-close:hover{background:#0000001a}.folder-popup-close:active{transform:scale(.98)}#noteContent{flex:1;padding:20px;background:transparent;border:none;font-size:15px;line-height:1.8;color:var(--text-white);resize:none;outline:none;font-family:Menlo,Monaco,Courier New,monospace;overflow-y:auto;-webkit-overflow-scrolling:touch}#noteContent::placeholder{color:#a0a0a066}.editor-footer{padding:12px 20px;border-top:1px solid rgba(0,0,0,.08);display:flex;align-items:center;justify-content:flex-end;gap:12px;background:linear-gradient(180deg,#ffffff80,#f8f0e3);font-size:12px;color:var(--text-gray);letter-spacing:1px}#syncStatusDot{font-size:11px;letter-spacing:.5px;opacity:.6;padding-left:12px;border-left:1px solid rgba(0,0,0,.12)}.icon-btn{padding:8px 14px;background:#0000000a;border:1px solid rgba(0,0,0,.12);border-radius:6px;color:var(--text-white);cursor:pointer;font-weight:700;font-size:11px;letter-spacing:.8px;font-family:inherit;transition:all .2s ease;-webkit-tap-highlight-color:transparent}.icon-btn:active{transform:scale(.95)}.icon-btn.danger{border-color:#fca5a5;color:#dc2626}.icon-btn.danger:active{border-color:#ef4444;background:#fee2e2}.loading-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#f8f0e3;display:none;align-items:center;justify-content:center;z-index:1000;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.loading-overlay.active{display:flex}.spinner{width:40px;height:40px;border:3px solid rgba(0,0,0,.2);border-top-color:#000c;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:#fafafa4d}::-webkit-scrollbar-thumb{background:#00000026;border-radius:3px}::-webkit-scrollbar-thumb:hover{background:#00000040}.sidebar-overlay{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:#0009;z-index:150;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.sidebar-overlay.active{display:block}@media (max-width: 768px){.menu-toggle{display:flex}.sidebar{position:fixed;left:0;top:0;height:100%;width:280px;transform:translate(-100%);box-shadow:2px 0 20px #00000080;background:#fff}.sidebar.mobile-open{transform:translate(0)}.main-content{width:100%;margin-left:0}.editor-header{padding:12px;gap:8px;background:transparent}#noteContent{padding:16px;font-size:14px}.editor-footer{padding:10px 16px;font-size:11px}.icon-btn{padding:6px 10px;font-size:10px}}@media (max-width: 480px){.sidebar{width:260px;background:#fff}.login-card{padding:32px 24px}.new-note-btn,.new-folder-btn{margin:8px 12px;padding:10px;font-size:11px}#noteContent{padding:14px;font-size:14px}.editor-footer{padding:8px 14px}.menu-toggle{width:40px;height:40px}}.sidebar-tabs{display:flex;border-bottom:1px solid rgba(0,0,0,.08)}.tab-btn{flex:1;padding:16px 12px;background:transparent;border:none;color:var(--text-gray);font-size:12px;font-weight:700;letter-spacing:1.5px;cursor:pointer;font-family:inherit;transition:all .2s ease;position:relative}.tab-btn:hover{color:var(--text-white);background:#0000000d}.tab-btn.active{color:var(--text-white)}.tab-btn.active:after{content:"";position:absolute;bottom:0;left:20%;right:20%;height:2px;background:var(--text-white);border-radius:2px 2px 0 0}.tab-content{display:none;flex-direction:column;flex:1;overflow:hidden}.tab-content.active{display:flex}.files-list{flex:1;overflow-y:auto;overflow-x:hidden;padding:8px;-webkit-overflow-scrolling:touch;min-height:0}.file-item{display:flex;align-items:center;justify-content:space-between;padding:12px;margin-bottom:4px;background:#0000000a;border-radius:8px;transition:all .2s ease}.file-item:hover{background:#00000014}.file-info{display:flex;align-items:center;gap:10px;flex:1;min-width:0}.file-icon{font-size:20px;flex-shrink:0}.file-details{flex:1;min-width:0}.file-name{font-size:13px;font-weight:500;color:var(--text-white);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.file-size{font-size:11px;color:var(--text-gray);margin-top:2px}.file-actions{display:flex;gap:6px;flex-shrink:0}.file-action-btn{padding:6px 10px;background:#00000014;border:none;border-radius:4px;color:var(--text-white);font-size:10px;font-weight:600;cursor:pointer;transition:all .2s ease}.file-action-btn:hover{background:#00000026}.file-action-btn.danger{color:#dc2626}.file-action-btn.danger:hover{background:#fee2e2}.files-view{flex:1;display:flex;flex-direction:column;animation:fadeIn .3s ease;min-height:0}.files-view-header{padding:16px 20px;border-bottom:1px solid rgba(0,0,0,.08);display:flex;align-items:center;gap:12px}.files-view-header h2{font-size:20px;font-weight:700;letter-spacing:1px;color:var(--text-white)}.files-grid{flex:1;padding:20px 20px 100px;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;gap:12px;-webkit-overflow-scrolling:touch;min-height:0;scrollbar-gutter:stable}.files-grid::-webkit-scrollbar{width:6px}.files-grid::-webkit-scrollbar-track{background:transparent}.files-grid::-webkit-scrollbar-thumb{background:#0000001a;border-radius:10px}.folder-grid-header{font-size:14px;font-weight:700;color:var(--text-gray);letter-spacing:1px;margin:20px 0 10px;padding-bottom:8px;border-bottom:1px solid rgba(0,0,0,.05);text-transform:uppercase}.folder-grid-header:first-child{margin-top:0}.file-card{display:flex;align-items:center;justify-content:space-between;padding:16px;background:#00000008;border:1px solid rgba(0,0,0,.08);border-radius:12px;transition:all .3s cubic-bezier(.4,0,.2,1);cursor:grab}.file-card:hover{background:#0000000f;border-color:#00000026;transform:translateY(-2px);box-shadow:0 4px 12px #0003}.file-card:active{cursor:grabbing}.file-card.dragging{opacity:.5;transform:scale(.98)}.file-card-info{display:flex;align-items:center;gap:14px;flex:1;min-width:0}.file-card-icon{font-size:28px;flex-shrink:0}.file-card-details{flex:1;min-width:0}.file-card-name{font-size:14px;font-weight:600;color:var(--text-white);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.file-card-meta{font-size:12px;color:var(--text-gray);margin-top:4px}.file-card-actions{display:flex;gap:8px}.file-card-btn{padding:8px 14px;background:#0000001a;border:none;border-radius:6px;color:var(--text-white);font-size:11px;font-weight:600;letter-spacing:.5px;cursor:pointer;transition:all .2s ease}.file-card-btn:hover{background:#0003}.file-card-btn.danger{color:#dc2626}.file-card-btn.danger:hover{background:#fee2e2}.upload-progress{display:none;position:fixed;bottom:20px;left:50%;transform:translate(-50%);background:#1e1e1ef2;border:1px solid rgba(0,0,0,.15);border-radius:12px;padding:16px 24px;min-width:280px;z-index:1000;box-shadow:0 10px 40px #00000080}.upload-progress.active{display:block;animation:slideUp .3s ease}@keyframes slideUp{0%{opacity:0;transform:translate(-50%) translateY(20px)}to{opacity:1;transform:translate(-50%) translateY(0)}}.upload-progress-bar{height:4px;background:#0000001a;border-radius:2px;margin-bottom:10px;overflow:hidden;position:relative}.upload-progress-bar:after{content:"";position:absolute;left:0;top:0;height:100%;width:30%;background:var(--text-white);border-radius:2px;animation:progressMove 1s ease infinite}@keyframes progressMove{0%{left:-30%}to{left:100%}}#uploadProgressText{font-size:12px;color:var(--text-gray);letter-spacing:.5px}.primary-btn:hover{transform:translateY(-2px);box-shadow:0 8px 25px #106ebe33;background:#0c5799}