:root{--color-bg-primary:#f2f2f7;--color-bg-secondary:#fff;--color-bg-tertiary:#f9f9fb;--color-bg-elevated:#fff;--color-bg-grouped:#f2f2f7;--color-sidebar-bg:#ffffffb8;--color-sidebar-hover:#0000000a;--color-sidebar-active:#007aff1f;--color-text-primary:#1c1c1e;--color-text-secondary:#8e8e93;--color-text-tertiary:#aeaeb2;--color-text-placeholder:#c7c7cc;--color-accent:#007aff;--color-accent-hover:#0066d6;--color-accent-light:#007aff1f;--color-red:#ff3b30;--color-orange:#ff9500;--color-yellow:#fc0;--color-green:#34c759;--color-blue:#007aff;--color-purple:#5856d6;--color-pink:#ff2d55;--color-teal:#5ac8fa;--color-priority-high:#ff3b30;--color-priority-medium:#ff9500;--color-priority-low:#007aff;--color-priority-none:transparent;--color-separator:#3c3c431f;--color-border:#3c3c432e;--shadow-sm:0 1px 2px #0000000a;--shadow-md:0 2px 8px #00000014;--shadow-lg:0 8px 32px #0000001f;--shadow-xl:0 16px 48px #00000029;--shadow-card:0 .5px 0 #0000000a, 0 1px 3px #0000000f;--font-family:"Inter", -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, sans-serif;--font-size-xs:11px;--font-size-sm:13px;--font-size-base:15px;--font-size-md:17px;--font-size-lg:20px;--font-size-xl:24px;--font-size-2xl:28px;--font-size-3xl:34px;--font-weight-regular:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--line-height-tight:1.2;--line-height-normal:1.47;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;--space-10:40px;--space-12:48px;--radius-sm:6px;--radius-md:10px;--radius-lg:14px;--radius-xl:20px;--radius-full:9999px;--transition-fast:.15s cubic-bezier(.25, .1, .25, 1);--transition-normal:.25s cubic-bezier(.25, .1, .25, 1);--transition-spring:.35s cubic-bezier(.34, 1.56, .64, 1);--transition-slow:.45s cubic-bezier(.25, .1, .25, 1);--sidebar-width:280px;--detail-width:360px;--header-height:52px;--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px);--safe-left:env(safe-area-inset-left,0px);--safe-right:env(safe-area-inset-right,0px);--z-sidebar:100;--z-header:200;--z-detail:150;--z-modal:500;--z-toast:600}@media (prefers-color-scheme:dark){:root{--color-bg-primary:#000;--color-bg-secondary:#1c1c1e;--color-bg-tertiary:#2c2c2e;--color-bg-elevated:#2c2c2e;--color-bg-grouped:#000;--color-sidebar-bg:#1c1c1ee0;--color-sidebar-hover:#ffffff0f;--color-sidebar-active:#007aff33;--color-text-primary:#fff;--color-text-secondary:#98989d;--color-text-tertiary:#636366;--color-text-placeholder:#48484a;--color-accent:#0a84ff;--color-accent-hover:#409cff;--color-accent-light:#0a84ff2e;--color-separator:#5454585c;--color-border:#5454587a;--shadow-sm:0 1px 2px #0003;--shadow-md:0 2px 8px #0000004d;--shadow-lg:0 8px 32px #0006;--shadow-xl:0 16px 48px #00000080;--shadow-card:0 .5px 0 #0003, 0 1px 3px #0000004d}}*,:before,:after{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0;padding:0}html{-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizelegibility;font-size:16px}body{font-family:var(--font-family);font-size:var(--font-size-base);line-height:var(--line-height-normal);color:var(--color-text-primary);background-color:var(--color-bg-primary);width:100vw;height:100dvh;position:fixed;top:0;left:0;overflow:hidden}#root{width:100%;height:100%}button{font-family:inherit;font-size:inherit;cursor:pointer;color:inherit;background:0 0;border:none;outline:none}input,textarea,select{font-family:inherit;font-size:inherit;color:inherit;background:0 0;border:none;outline:none}a{color:var(--color-accent);text-decoration:none}ul,ol{list-style:none}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--color-text-tertiary);border-radius:var(--radius-full)}::-webkit-scrollbar-thumb:hover{background:var(--color-text-secondary)}::selection{background:var(--color-accent-light);color:var(--color-accent)}:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px;border-radius:var(--radius-sm)}@media (width<=480px){:root{--font-size-xs:13px;--font-size-sm:16px;--font-size-base:18px;--font-size-md:20px;--font-size-lg:24px;--font-size-xl:28px;--space-3:14px;--space-4:18px;--space-5:22px}button,[role=button],input[type=checkbox],input[type=radio],select,label[for],a{min-height:44px}.sidebar-item-options-btn,.note-list-new-btn,.note-card-delete-btn,.share-modal-close,.task-detail-close,.header-menu-btn,.header-search-clear{min-height:unset}}.share-overlay{z-index:var(--z-modal,1000);padding:var(--space-4);background:#00000073;justify-content:center;align-items:center;animation:.15s fadeIn;display:flex;position:fixed;inset:0}.share-modal{background:var(--color-bg-secondary);border-radius:var(--radius-xl,16px);box-shadow:var(--shadow-xl);flex-direction:column;width:100%;max-width:420px;animation:.2s slideUp;display:flex;overflow:hidden}.share-modal-header{padding:var(--space-4) var(--space-5);border-bottom:1px solid var(--color-separator);justify-content:space-between;align-items:center;display:flex}.share-modal-title-row{align-items:center;gap:var(--space-2);color:var(--color-text-primary);display:flex}.share-modal-title{font-size:var(--font-size-md);font-weight:var(--font-weight-semibold);color:var(--color-text-primary)}.share-modal-close{padding:var(--space-1);border-radius:var(--radius-sm);color:var(--color-text-tertiary);transition:all var(--transition-fast)}.share-modal-close:hover{background:var(--color-sidebar-hover);color:var(--color-text-primary)}.share-modal-item-name{padding:var(--space-3) var(--space-5);font-size:var(--font-size-sm);color:var(--color-text-secondary);border-bottom:1px solid var(--color-separator);font-style:italic}.share-modal-body{padding:var(--space-5);gap:var(--space-4);flex-direction:column;display:flex}.share-modal-label{font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:.3px;margin-bottom:var(--space-1)}.share-modal-input-row{gap:var(--space-2);display:flex}.share-modal-input{padding:var(--space-2) var(--space-3);font-size:var(--font-size-sm);background:var(--color-bg-primary);border:1px solid var(--color-separator);border-radius:var(--radius-md);color:var(--color-text-primary);transition:border-color var(--transition-fast);flex:1}.share-modal-input:focus{border-color:var(--color-accent)}.share-modal-input::placeholder{color:var(--color-text-placeholder)}.share-modal-invite-btn{padding:var(--space-2) var(--space-4);font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);color:#fff;background:var(--color-accent);border-radius:var(--radius-md);transition:all var(--transition-fast);white-space:nowrap;justify-content:center;align-items:center;min-width:64px;display:flex}.share-modal-invite-btn:hover:not(:disabled){background:var(--color-accent-hover)}.share-modal-invite-btn:disabled{opacity:.4;cursor:not-allowed}.share-modal-spinner{border:2px solid #fff6;border-top-color:#fff;border-radius:50%;width:14px;height:14px;animation:.6s linear infinite spin;display:inline-block}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.share-modal-error{font-size:var(--font-size-xs);color:var(--color-red);margin-top:calc(-1 * var(--space-2))}.share-modal-users-section{gap:var(--space-2);flex-direction:column;display:flex}.share-modal-loading{font-size:var(--font-size-sm);color:var(--color-text-tertiary)}.share-modal-users-list{gap:var(--space-2);flex-direction:column;list-style:none;display:flex}.share-modal-user{align-items:center;gap:var(--space-3);padding:var(--space-2) var(--space-3);background:var(--color-bg-primary);border-radius:var(--radius-md);border:1px solid var(--color-separator);display:flex}.share-modal-avatar{background:var(--color-accent);color:#fff;width:32px;height:32px;font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;display:flex}.share-modal-user-info{flex-direction:column;flex:1;min-width:0;display:flex}.share-modal-user-name{font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-text-primary);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.share-modal-user-email{font-size:var(--font-size-xs);color:var(--color-text-tertiary);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.share-modal-remove-btn{font-size:var(--font-size-xs);font-weight:var(--font-weight-medium);color:var(--color-red);padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm);transition:all var(--transition-fast);white-space:nowrap;flex-shrink:0}.share-modal-remove-btn:hover{background:#ff3b301a}.share-modal-empty{font-size:var(--font-size-sm);color:var(--color-text-tertiary);text-align:center;padding:var(--space-2) 0}@media (width<=480px){.share-modal{border-radius:var(--radius-xl,16px) var(--radius-xl,16px) 0 0;max-width:100%;animation:.25s slideUp;position:fixed;bottom:0;left:0;right:0}.share-overlay{align-items:flex-end;padding:0}}.sidebar{width:var(--sidebar-width);background:var(--color-sidebar-bg);-webkit-backdrop-filter:blur(40px)saturate(180%);border-right:1px solid var(--color-separator);height:100%;z-index:var(--z-sidebar);transition:transform var(--transition-normal);flex-direction:column;flex-shrink:0;display:flex;overflow:hidden auto}.sidebar-profile{align-items:center;gap:var(--space-3);padding:var(--space-5) var(--space-4);padding-top:var(--space-6);display:flex}.sidebar-profile-avatar{border-radius:var(--radius-full);color:#fff;width:36px;height:36px;font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);background:linear-gradient(135deg,#007aff,#5856d6);flex-shrink:0;justify-content:center;align-items:center;display:flex;overflow:hidden}.sidebar-profile-avatar img{object-fit:cover;width:100%;height:100%}.sidebar-profile-info{flex:1;min-width:0}.sidebar-profile-name{font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);color:var(--color-text-primary);white-space:nowrap;text-overflow:ellipsis;display:block;overflow:hidden}.sidebar-profile-status{align-items:center;gap:var(--space-1);font-size:var(--font-size-xs);color:var(--color-text-tertiary);display:flex}.status-dot{border-radius:50%;width:6px;height:6px}.status-dot.synced{background:var(--color-green)}.status-dot.syncing{background:var(--color-orange);animation:1.5s infinite pulse}.status-dot.offline{background:var(--color-text-tertiary)}.status-dot.local{background:var(--color-blue)}.sidebar-signout{padding:var(--space-2);border-radius:var(--radius-sm);color:var(--color-text-tertiary);transition:all var(--transition-fast)}.sidebar-signout:hover{background:var(--color-sidebar-hover);color:var(--color-text-secondary)}.sidebar-divider{background:var(--color-separator);height:1px;margin:var(--space-2) var(--space-4)}.sidebar-section{padding:var(--space-2) var(--space-2)}.sidebar-section-header{padding-right:var(--space-2);justify-content:space-between;align-items:center;display:flex}.sidebar-section-label{font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);color:var(--color-text-tertiary);text-transform:uppercase;letter-spacing:.5px;padding:var(--space-2) var(--space-3)}.sidebar-section-add{padding:var(--space-1);border-radius:var(--radius-sm);color:var(--color-text-tertiary);transition:all var(--transition-fast)}.sidebar-section-add:hover{background:var(--color-sidebar-hover);color:var(--color-accent)}.sidebar-item{align-items:center;gap:var(--space-3);width:100%;padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-text-primary);transition:all var(--transition-fast);text-align:left;display:flex;position:relative}.sidebar-item:hover{background:var(--color-sidebar-hover)}.sidebar-item-draggable{cursor:grab}.sidebar-item-draggable:active{cursor:grabbing}.sidebar-item.drag-target{background:var(--color-accent-light);outline:1px dashed var(--color-accent);outline-offset:-1px}.sidebar-item-drag-handle{color:var(--color-text-tertiary);opacity:0;transition:opacity var(--transition-fast);flex-shrink:0;font-size:14px;line-height:1}.sidebar-item:hover .sidebar-item-drag-handle{opacity:.6}@media (hover:none){.sidebar-item-drag-handle{opacity:.5}}.sidebar-item.active{background:var(--color-accent);color:#fff}.sidebar-item-icon{text-align:center;flex-shrink:0;width:24px;font-size:18px}.sidebar-item-dot{border-radius:50%;flex-shrink:0;width:10px;height:10px}.sidebar-item-name{white-space:nowrap;text-overflow:ellipsis;flex:1;overflow:hidden}.sidebar-item-count{font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);border-radius:var(--radius-full);flex-shrink:0;padding:1px 7px}.sidebar-item-shared{opacity:.7;flex-shrink:0;font-size:11px}.sidebar-item-wrapper{position:relative}.sidebar-item-options-btn{right:var(--space-2);border-radius:var(--radius-sm);width:24px;height:24px;color:var(--color-text-tertiary);letter-spacing:-1px;opacity:0;transition:opacity var(--transition-fast), background var(--transition-fast), color var(--transition-fast);z-index:1;justify-content:center;align-items:center;font-size:18px;line-height:1;display:flex;position:absolute;top:50%;transform:translateY(-50%)}.sidebar-item-wrapper:hover .sidebar-item-options-btn{opacity:1}.sidebar-item-options-btn:hover{background:var(--color-sidebar-hover);color:var(--color-text-primary)}@media (hover:none){.sidebar-item-options-btn{opacity:1}}.sidebar-item-menu{right:var(--space-2);background:var(--color-bg-elevated);border:1px solid var(--color-separator);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);z-index:10;animation:scaleIn var(--transition-fast);min-width:140px;position:absolute;top:100%;overflow:hidden}.sidebar-item-menu-btn{width:100%;padding:var(--space-2) var(--space-3);font-size:var(--font-size-sm);text-align:left;transition:background var(--transition-fast);display:block}.sidebar-item-menu-btn:hover{background:var(--color-sidebar-hover)}.sidebar-item-menu-btn.danger{color:var(--color-red)}.sidebar-add-list{padding:var(--space-3);margin:var(--space-2) 0;background:var(--color-bg-secondary);border-radius:var(--radius-md);border:1px solid var(--color-separator);animation:fadeIn var(--transition-fast)}.sidebar-add-list-row{margin-bottom:var(--space-3)}.sidebar-add-list-input{width:100%;padding:var(--space-2);font-size:var(--font-size-sm);border-bottom:2px solid var(--color-accent);background:0 0}.sidebar-add-list-input::placeholder{color:var(--color-text-placeholder)}.sidebar-add-list-colors{gap:var(--space-2);margin-bottom:var(--space-3);flex-wrap:wrap;display:flex}.color-dot{width:20px;height:20px;transition:all var(--transition-fast);cursor:pointer;border:2px solid #0000;border-radius:50%}.color-dot.selected{border-color:var(--color-text-primary);transform:scale(1.15)}.sidebar-add-list-icons{gap:var(--space-1);margin-bottom:var(--space-3);flex-wrap:wrap;display:flex}.icon-btn{border-radius:var(--radius-sm);width:28px;height:28px;transition:all var(--transition-fast);justify-content:center;align-items:center;font-size:14px;display:flex}.icon-btn.selected{background:var(--color-accent-light);transform:scale(1.1)}.sidebar-add-list-actions{gap:var(--space-2);justify-content:flex-end;display:flex}.btn-cancel{padding:var(--space-1) var(--space-3);font-size:var(--font-size-xs);font-weight:var(--font-weight-medium);color:var(--color-text-secondary);border-radius:var(--radius-sm);transition:all var(--transition-fast)}.btn-cancel:hover{background:var(--color-sidebar-hover)}.btn-add{padding:var(--space-1) var(--space-3);font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);color:#fff;background:var(--color-accent);border-radius:var(--radius-sm);transition:all var(--transition-fast)}.btn-add:hover{background:var(--color-accent-hover)}.sidebar-empty-add{align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);font-size:var(--font-size-sm);color:var(--color-text-tertiary);border-radius:var(--radius-md);width:100%;transition:all var(--transition-fast);display:flex}.sidebar-empty-add:hover{background:var(--color-sidebar-hover);color:var(--color-accent)}.sidebar-mode-switcher{gap:var(--space-1);padding:var(--space-4) var(--space-3) var(--space-2);padding-top:calc(var(--space-4) + max(var(--safe-top), 0px));display:flex}.sidebar-mode-btn{padding:var(--space-2) var(--space-2);font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);border-radius:var(--radius-sm);color:var(--color-text-secondary);background:var(--color-sidebar-hover);transition:background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);white-space:nowrap;text-align:center;border:1px solid #0000;flex:1}.sidebar-mode-btn:hover{background:var(--color-bg-secondary);color:var(--color-text-primary)}.sidebar-mode-btn.active{background:var(--color-accent);color:#fff;border-color:var(--color-accent)}@media (width<=1024px){.sidebar{height:100%;box-shadow:var(--shadow-xl);padding-bottom:var(--safe-bottom);position:fixed;top:0;left:0;transform:translate(-100%)}.sidebar.open{transform:translate(0)}}.header{height:var(--header-height);padding:0 var(--space-5);background:var(--color-bg-secondary);border-bottom:1px solid var(--color-separator);z-index:var(--z-header);justify-content:space-between;align-items:center;gap:var(--space-4);flex-shrink:0;display:flex}.header-left{align-items:center;gap:var(--space-3);min-width:0;display:flex}.header-menu-btn{padding:var(--space-2);border-radius:var(--radius-sm);color:var(--color-text-secondary);transition:all var(--transition-fast);display:none}.header-menu-btn:hover{background:var(--color-sidebar-hover);color:var(--color-text-primary)}.header-title{align-items:center;gap:var(--space-2);min-width:0;display:flex}.header-title-icon{flex-shrink:0;font-size:20px}.header-title-text{font-size:var(--font-size-lg);font-weight:var(--font-weight-bold);color:var(--color-text-primary);white-space:nowrap;text-overflow:ellipsis;letter-spacing:-.3px;overflow:hidden}.header-right{align-items:center;gap:var(--space-3);display:flex}.header-search{align-items:center;display:flex;position:relative}.header-search-icon{left:var(--space-3);color:var(--color-text-tertiary);pointer-events:none;position:absolute}.header-search-input{width:220px;padding:var(--space-2) var(--space-3);font-size:var(--font-size-sm);background:var(--color-bg-primary);border-radius:var(--radius-lg);transition:all var(--transition-normal);color:var(--color-text-primary);border:1px solid #0000;padding-left:36px}.header-search-input::placeholder{color:var(--color-text-placeholder)}.header-search-input:focus{border-color:var(--color-accent);background:var(--color-bg-secondary);width:280px;box-shadow:0 0 0 3px var(--color-accent-light)}.header-search-clear{right:var(--space-2);padding:var(--space-1);border-radius:var(--radius-full);color:var(--color-text-tertiary);transition:all var(--transition-fast);position:absolute}.header-search-clear:hover{background:var(--color-separator);color:var(--color-text-secondary)}.header-mode-switcher{gap:var(--space-1);flex-shrink:0;display:none}.header-mode-btn{padding:var(--space-1) var(--space-3);font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);border-radius:var(--radius-sm);color:var(--color-text-secondary);background:var(--color-bg-primary);border:1px solid var(--color-separator);transition:background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);white-space:nowrap}.header-mode-btn.active{background:var(--color-accent);color:#fff;border-color:var(--color-accent)}@media (width<=1024px){.header-mode-switcher,.header-menu-btn{display:flex}.header{padding-top:var(--safe-top);height:calc(var(--header-height) + var(--safe-top))}.header-search-input{width:160px}.header-search-input:focus{width:200px}}@media (width<=768px){.header-search-input{width:130px}.header-search-input:focus{width:170px}}@media (width<=480px){.header{padding-left:calc(var(--space-4) + var(--safe-left));padding-right:calc(var(--space-4) + var(--safe-right))}.header-search{display:none}.header-title-text{font-size:var(--font-size-lg)}.header-mode-btn{padding:var(--space-2) var(--space-4);font-size:var(--font-size-sm);border-radius:var(--radius-md)}}.task-item{align-items:flex-start;gap:var(--space-3);padding:var(--space-3) var(--space-4);margin:0 var(--space-3);border-radius:var(--radius-lg);cursor:pointer;transition:all var(--transition-fast);animation:.3s fadeIn;display:flex;position:relative}.task-item:hover{background:var(--color-bg-tertiary)}.task-item.selected{background:var(--color-accent-light)}.task-item:after{content:"";bottom:0;left:52px;right:var(--space-4);background:var(--color-separator);height:1px;position:absolute}.task-item:last-child:after{display:none}.task-checkbox{border-radius:var(--radius-full);border:2px solid var(--color-border);width:22px;height:22px;transition:all var(--transition-fast);flex-shrink:0;justify-content:center;align-items:center;margin-top:1px;display:flex;position:relative}.task-checkbox:hover{border-color:var(--color-accent);background:var(--color-accent-light);transform:scale(1.05)}.task-checkbox.checked{background:var(--color-green);border-color:var(--color-green)}.task-checkbox.checking{background:var(--color-green);border-color:var(--color-green);animation:.4s checkmark}.task-checkbox-icon{animation:.3s checkmark}.task-content{flex:1;min-width:0}.task-title-row{align-items:baseline;gap:var(--space-1);display:flex}.task-priority{font-weight:var(--font-weight-bold);font-size:var(--font-size-sm);letter-spacing:-1px;flex-shrink:0}.task-title{font-size:var(--font-size-base);font-weight:var(--font-weight-medium);color:var(--color-text-primary);word-break:break-word;transition:all var(--transition-fast);line-height:1.4}.task-item.completed .task-title{color:var(--color-text-tertiary);text-decoration:line-through}.task-meta{align-items:center;gap:var(--space-3);margin-top:var(--space-1);flex-wrap:wrap;display:flex}.task-due,.task-reminder{font-size:var(--font-size-xs);color:var(--color-text-secondary);align-items:center;gap:3px;display:flex}.task-due.overdue{color:var(--color-red);font-weight:var(--font-weight-medium)}.task-reminder{color:var(--color-accent)}.task-notes-preview{font-size:var(--font-size-xs);color:var(--color-text-tertiary);white-space:nowrap;text-overflow:ellipsis;max-width:200px;overflow:hidden}.task-chevron{color:var(--color-text-tertiary);opacity:0;transition:opacity var(--transition-fast);flex-shrink:0;margin-top:3px}.task-item:hover .task-chevron,.task-item.selected .task-chevron{opacity:1}.task-item.completed{opacity:.6}.task-item.completed:hover{opacity:.8}@media (width<=480px){.task-item{margin:0 var(--space-4);padding:var(--space-4) var(--space-3);border-radius:var(--radius-xl)}.task-item:after{left:calc(var(--space-3) + 26px + var(--space-3));right:0}.task-checkbox{width:26px;height:26px}.task-notes-preview{display:none}}.add-task{padding:0 var(--space-5);padding-bottom:var(--space-4);flex-shrink:0}.add-task-trigger{align-items:center;gap:var(--space-3);width:100%;padding:var(--space-3) var(--space-4);border-radius:var(--radius-lg);color:var(--color-accent);font-weight:var(--font-weight-medium);font-size:var(--font-size-base);transition:all var(--transition-fast);border:2px dashed var(--color-separator);display:flex}.add-task-trigger:hover{background:var(--color-accent-light);border-color:var(--color-accent);border-style:solid}.add-task-trigger-icon{border-radius:var(--radius-full);background:var(--color-accent);color:#fff;width:24px;height:24px;transition:transform var(--transition-spring);flex-shrink:0;justify-content:center;align-items:center;display:flex}.add-task-trigger:hover .add-task-trigger-icon{transform:rotate(90deg)}.add-task-trigger-text{text-align:left;flex:1}.add-task-form{background:var(--color-bg-secondary);border:1px solid var(--color-separator);border-radius:var(--radius-lg);padding:var(--space-4);box-shadow:var(--shadow-md);animation:.2s fadeInUp}.add-task-title{width:100%;font-size:var(--font-size-md);font-weight:var(--font-weight-medium);padding:var(--space-1) 0;margin-bottom:var(--space-2);color:var(--color-text-primary)}.add-task-title::placeholder{color:var(--color-text-placeholder)}.add-task-notes{width:100%;font-size:var(--font-size-sm);padding:var(--space-1) 0;margin-bottom:var(--space-3);color:var(--color-text-secondary);resize:none;min-height:36px}.add-task-notes::placeholder{color:var(--color-text-placeholder)}.add-task-options{justify-content:space-between;align-items:center;gap:var(--space-3);border-top:1px solid var(--color-separator);padding-top:var(--space-3);display:flex}.add-task-options-left{align-items:center;gap:var(--space-2);display:flex}.add-task-option{align-items:center;gap:var(--space-1);padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm);color:var(--color-text-secondary);font-size:var(--font-size-xs);cursor:pointer;transition:all var(--transition-fast);display:flex;position:relative}.add-task-option:hover{background:var(--color-sidebar-hover);color:var(--color-text-primary)}.add-task-date-input{opacity:0;cursor:pointer;width:100%;font-size:16px;position:absolute;inset:0}.add-task-list-picker{color:var(--color-accent)}.add-task-option-label{font-weight:var(--font-weight-medium)}.add-task-option-active{background:var(--color-accent-light);color:var(--color-accent)}.add-task-reminder-picker-row{align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-1);margin-bottom:var(--space-2);border-bottom:1px solid var(--color-separator);animation:.15s fadeIn;display:flex}.add-task-reminder-date-input,.add-task-reminder-time-input{padding:var(--space-1) var(--space-2);font-size:var(--font-size-sm);background:var(--color-bg-primary);border:1px solid var(--color-separator);border-radius:var(--radius-md);color:var(--color-text-primary);transition:border-color var(--transition-fast);font-size:16px}.add-task-reminder-date-input{flex:1}.add-task-reminder-time-input{flex-shrink:0;width:110px}.add-task-reminder-date-input:focus,.add-task-reminder-time-input:focus{border-color:var(--color-accent)}.add-task-reminder-ok-btn{padding:var(--space-1) var(--space-3);font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);color:#fff;background:var(--color-accent);border-radius:var(--radius-md);transition:background var(--transition-fast);white-space:nowrap;flex-shrink:0}.add-task-reminder-ok-btn:hover{background:var(--color-accent-hover)}.add-task-reminder-cancel{color:var(--color-text-tertiary);border-radius:var(--radius-sm);transition:color var(--transition-fast);flex-shrink:0;padding:2px 4px;font-size:18px;line-height:1}.add-task-reminder-cancel:hover{color:var(--color-text-primary)}.add-task-reminder-chip{align-items:center;gap:var(--space-1);padding:var(--space-1) var(--space-2);background:var(--color-accent-light);color:var(--color-accent);border-radius:var(--radius-full);font-size:var(--font-size-xs);font-weight:var(--font-weight-medium);white-space:nowrap;display:flex}.add-task-reminder-clear{color:var(--color-accent);opacity:.7;transition:opacity var(--transition-fast);padding:0 2px;font-size:15px;line-height:1}.add-task-reminder-clear:hover{opacity:1}.add-task-options-right{align-items:center;gap:var(--space-2);display:flex}.add-task-cancel{padding:var(--space-2) var(--space-3);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-text-secondary);border-radius:var(--radius-md);transition:all var(--transition-fast)}.add-task-cancel:hover{background:var(--color-sidebar-hover)}.add-task-submit{padding:var(--space-2) var(--space-5);font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);color:#fff;background:var(--color-accent);border-radius:var(--radius-md);transition:all var(--transition-fast)}.add-task-submit:hover:not(:disabled){background:var(--color-accent-hover);box-shadow:var(--shadow-md);transform:translateY(-1px)}.add-task-submit:disabled{opacity:.4;cursor:not-allowed}@media (width<=1024px){.add-task{padding-bottom:calc(var(--space-4) + var(--safe-bottom))}}@media (width<=480px){.add-task{padding-left:calc(var(--space-4) + var(--safe-left));padding-right:calc(var(--space-4) + var(--safe-right));padding-bottom:calc(var(--space-4) + var(--safe-bottom))}.add-task-trigger{border-radius:var(--radius-xl);padding:var(--space-4)}.add-task-form{border-radius:var(--radius-xl)}.add-task-options{flex-wrap:wrap}}.task-list{background:var(--color-bg-secondary);flex-direction:column;height:100%;display:flex;overflow:hidden}.task-list-scroll{padding-bottom:var(--space-8);flex:1;overflow:hidden auto}@media (width<=1024px){.task-list-scroll{padding-bottom:calc(var(--space-8) + 52px + var(--safe-bottom))}}@media (width<=480px){.task-list-group-header{padding-left:calc(var(--space-4) + var(--space-3));padding-right:calc(var(--space-4) + var(--space-3))}}.task-list-items{padding:var(--space-1) 0}.task-list-count{padding:var(--space-2) var(--space-5);font-size:var(--font-size-xs);color:var(--color-text-tertiary);text-align:center;border-top:1px solid var(--color-separator);flex-shrink:0}.task-list-group{margin-bottom:var(--space-2)}.task-list-group-header{align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-5) var(--space-1);background:var(--color-bg-secondary);z-index:1;border-bottom:1.5px solid var(--group-color,var(--color-separator));display:flex;position:sticky;top:0}.task-list-group-icon{font-size:15px;line-height:1}.task-list-group-name{font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);color:var(--group-color,var(--color-text-primary));letter-spacing:-.1px;flex:1}.task-list-group-count{font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);color:var(--color-text-tertiary);background:var(--color-bg-primary);border-radius:var(--radius-full);padding:1px 7px}.task-detail{width:var(--detail-width);background:var(--color-bg-secondary);border-left:1px solid var(--color-separator);height:100%;z-index:var(--z-detail);flex-direction:column;flex-shrink:0;animation:.25s slideInRight;display:flex}.task-detail-header{padding:var(--space-4) var(--space-5);border-bottom:1px solid var(--color-separator);flex-shrink:0;justify-content:space-between;align-items:center;display:flex}.task-detail-heading{font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:.5px}.task-detail-close{padding:var(--space-1);border-radius:var(--radius-sm);color:var(--color-text-tertiary);transition:all var(--transition-fast)}.task-detail-close:hover{background:var(--color-sidebar-hover);color:var(--color-text-primary)}.task-detail-body{padding:var(--space-5);gap:var(--space-5);flex-direction:column;flex:1;display:flex;overflow-y:auto}.task-detail-field{gap:var(--space-2);flex-direction:column;display:flex}.task-detail-label{align-items:center;gap:var(--space-2);font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:.3px;display:flex}.task-detail-title{font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);color:var(--color-text-primary);padding:var(--space-2) 0;transition:border-color var(--transition-fast);border-bottom:2px solid #0000}.task-detail-title:focus{border-bottom-color:var(--color-accent)}.task-detail-notes{font-size:var(--font-size-sm);color:var(--color-text-primary);padding:var(--space-3);background:var(--color-bg-primary);border-radius:var(--radius-md);border:1px solid var(--color-separator);resize:vertical;min-height:80px;transition:border-color var(--transition-fast);line-height:1.6}.task-detail-notes:focus{border-color:var(--color-accent)}.task-detail-notes::placeholder{color:var(--color-text-placeholder)}.task-detail-row{align-items:center;gap:var(--space-2);display:flex}.task-detail-input{padding:var(--space-2) var(--space-3);font-size:max(var(--font-size-sm), 16px);background:var(--color-bg-primary);border:1px solid var(--color-separator);border-radius:var(--radius-md);color:var(--color-text-primary);transition:border-color var(--transition-fast);flex:1}.task-detail-input:focus{border-color:var(--color-accent)}.task-detail-input-date{flex:1}.task-detail-input-time{flex:none;width:110px}.task-detail-clear-btn,.task-detail-snooze-btn{padding:var(--space-2) var(--space-3);font-size:var(--font-size-xs);font-weight:var(--font-weight-medium);border-radius:var(--radius-md);transition:all var(--transition-fast);white-space:nowrap}.task-detail-clear-btn{color:var(--color-red);background:#ff3b3014}.task-detail-clear-btn:hover{background:#ff3b3026}.task-detail-snooze-btn{color:var(--color-accent);background:var(--color-accent-light)}.task-detail-snooze-btn:hover{background:#007aff33}.task-detail-set-reminder-btn{padding:var(--space-2) var(--space-3);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-accent);border:1px dashed var(--color-accent);border-radius:var(--radius-md);transition:all var(--transition-fast)}.task-detail-set-reminder-btn:hover{background:var(--color-accent-light)}.task-detail-ok-btn{padding:var(--space-2) var(--space-3);font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);border-radius:var(--radius-sm);color:#fff;background:var(--color-accent);transition:background var(--transition-fast);white-space:nowrap}.task-detail-ok-btn:hover{background:var(--color-accent-hover)}.task-detail-datetime-display{align-items:center;gap:var(--space-2);flex-wrap:wrap;flex:1;display:flex}.task-detail-datetime-value{font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-accent);flex:1}.task-detail-snooze-menu{gap:var(--space-2);margin-top:var(--space-2);flex-wrap:wrap;animation:.15s fadeIn;display:flex}.task-detail-snooze-menu button{padding:var(--space-1) var(--space-3);font-size:var(--font-size-xs);font-weight:var(--font-weight-medium);background:var(--color-bg-primary);border:1px solid var(--color-separator);border-radius:var(--radius-full);color:var(--color-text-secondary);transition:all var(--transition-fast)}.task-detail-snooze-menu button:hover{background:var(--color-accent-light);color:var(--color-accent);border-color:var(--color-accent)}.task-detail-priority-options{gap:var(--space-2);display:flex}.task-detail-priority-btn{padding:var(--space-2);font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);border:1.5px solid var(--color-separator);border-radius:var(--radius-md);text-align:center;transition:all var(--transition-fast);flex:1}.task-detail-priority-btn:hover{transform:translateY(-1px)}.task-detail-select{padding:var(--space-2) var(--space-3);font-size:var(--font-size-sm);background:var(--color-bg-primary);border:1px solid var(--color-separator);border-radius:var(--radius-md);color:var(--color-text-primary);cursor:pointer;transition:border-color var(--transition-fast);appearance:none;background-image:url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238E8E93' stroke-width='2' stroke-linecap='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-position:right 12px center;background-repeat:no-repeat;padding-right:32px}.task-detail-select:focus{border-color:var(--color-accent)}.task-detail-info{font-size:var(--font-size-xs);color:var(--color-text-tertiary);gap:var(--space-1)}.task-detail-footer{padding:var(--space-4) var(--space-5);border-top:1px solid var(--color-separator);flex-shrink:0}.task-detail-delete{align-items:center;gap:var(--space-2);width:100%;padding:var(--space-3);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-red);border-radius:var(--radius-md);transition:all var(--transition-fast);justify-content:center;display:flex}.task-detail-delete:hover{background:#ff3b3014}.task-detail-delete-confirm{align-items:center;gap:var(--space-3);justify-content:center;animation:.15s fadeIn;display:flex}.task-detail-delete-confirm span{font-size:var(--font-size-sm);color:var(--color-text-secondary)}.btn-confirm-delete{padding:var(--space-2) var(--space-4);font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);color:#fff;background:var(--color-red);border-radius:var(--radius-md);transition:all var(--transition-fast)}.btn-confirm-delete:hover{opacity:.9;transform:translateY(-1px)}.btn-cancel-delete{padding:var(--space-2) var(--space-4);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-text-secondary);border-radius:var(--radius-md);transition:all var(--transition-fast)}.btn-cancel-delete:hover{background:var(--color-sidebar-hover)}@media (width<=1024px){.task-detail{height:100%;width:min(var(--detail-width), 90vw);box-shadow:var(--shadow-xl);position:fixed;top:0;right:0}}@media (width<=480px){.task-detail{border-radius:var(--radius-xl) var(--radius-xl) 0 0;border-left:none;border-top:1px solid var(--color-separator);width:100%;height:88dvh;padding-bottom:var(--safe-bottom);animation:.3s cubic-bezier(.34,1.2,.64,1) slideUp;position:fixed;inset:auto 0 0}.task-detail-header:before{content:"";background:var(--color-separator);border-radius:2px;width:36px;height:4px;position:absolute;top:8px;left:50%;transform:translate(-50%)}.task-detail-header{padding-top:var(--space-5);position:relative}.task-detail-body{padding-left:var(--space-5);padding-right:var(--space-5)}}.note-list-panel{background:var(--color-bg-secondary);border-right:1px solid var(--color-separator);flex-direction:column;flex-shrink:0;width:300px;min-width:300px;height:100%;display:flex;overflow:hidden}.note-list-header{padding:var(--space-4) var(--space-4) var(--space-3);border-bottom:1px solid var(--color-separator);justify-content:space-between;align-items:center;gap:var(--space-2);flex-shrink:0;display:flex}.note-list-header-title{align-items:center;gap:var(--space-2);min-width:0;display:flex}.note-list-header-icon{flex-shrink:0;font-size:20px}.note-list-title{font-size:var(--font-size-lg);font-weight:var(--font-weight-bold);color:var(--color-text-primary)}.note-list-new-btn{border-radius:var(--radius-full);background:var(--color-accent);color:#fff;width:32px;height:32px;transition:background var(--transition-fast), transform var(--transition-fast);flex-shrink:0;justify-content:center;align-items:center;display:flex}.note-list-new-btn:hover{background:var(--color-accent-hover);transform:scale(1.08)}.note-list-new-btn:active{transform:scale(.96)}.note-list-search-wrap{padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--color-separator);flex-shrink:0;align-items:center;display:flex;position:relative}.note-list-search-icon{left:calc(var(--space-4) + var(--space-2));color:var(--color-text-tertiary);pointer-events:none;position:absolute}.note-list-search{width:100%;padding:var(--space-2) var(--space-2) var(--space-2) calc(var(--space-5) + var(--space-2));font-size:var(--font-size-sm);background:var(--color-bg-tertiary);border:1px solid var(--color-separator);border-radius:var(--radius-md);color:var(--color-text-primary);transition:border-color var(--transition-fast), box-shadow var(--transition-fast)}.note-list-search::placeholder{color:var(--color-text-placeholder)}.note-list-search:focus{border-color:var(--color-accent);box-shadow:0 0 0 3px var(--color-accent-light)}.note-list-search-clear{right:calc(var(--space-4) + var(--space-2));color:var(--color-text-tertiary);padding:var(--space-1);border-radius:var(--radius-full);transition:color var(--transition-fast), background var(--transition-fast);position:absolute}.note-list-search-clear:hover{color:var(--color-text-secondary);background:var(--color-sidebar-hover)}.note-list-scroll{padding:var(--space-2);flex:1;overflow-y:auto}.note-list-empty{padding:var(--space-8) var(--space-4);text-align:center;color:var(--color-text-tertiary);font-size:var(--font-size-sm);line-height:1.5}.note-card{text-align:left;width:100%;padding:var(--space-3) var(--space-3);border-radius:var(--radius-md);margin-bottom:var(--space-1);cursor:pointer;transition:background var(--transition-fast), border-color var(--transition-fast);align-items:flex-start;gap:var(--space-2);border:1px solid #0000;border-left-width:3px;display:flex;position:relative}.note-card:hover{background:var(--color-sidebar-hover)}.note-card.selected{background:var(--color-accent-light);border-left-color:var(--color-accent);border-color:var(--color-accent-light)}.note-card-content{gap:var(--space-1);flex-direction:column;flex:1;min-width:0;display:flex}.note-card-delete-btn{border-radius:var(--radius-full);width:28px;height:28px;color:var(--color-text-tertiary);opacity:0;transition:opacity var(--transition-fast), background var(--transition-fast), color var(--transition-fast);flex-shrink:0;justify-content:center;align-items:center;margin-top:1px;display:flex}.note-card:hover .note-card-delete-btn{opacity:1}.note-card-delete-btn:hover{color:var(--color-red);background:#ff3b301a}.note-card-delete-btn.confirming{opacity:1;background:var(--color-red);color:#fff}@media (hover:none){.note-card-delete-btn{opacity:.5}}.note-card-title{font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);color:var(--color-text-primary);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.note-card-meta{flex-direction:column;gap:2px;display:flex}.note-card-time{font-size:var(--font-size-xs);color:var(--color-text-tertiary);white-space:nowrap}.note-card-folder{font-size:var(--font-size-xs);font-weight:var(--font-weight-medium);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.note-card-preview{font-size:var(--font-size-xs);color:var(--color-text-secondary);white-space:nowrap;text-overflow:ellipsis;line-height:1.4;overflow:hidden}@media (width<=768px){.note-list-panel{width:100%;min-width:0}}@media (width<=480px){.note-list-scroll{padding:var(--space-2) var(--space-3)}.note-card{border-radius:var(--radius-xl);box-shadow:var(--shadow-card);background:var(--color-bg-secondary);border:1px solid var(--color-separator);margin-bottom:var(--space-2)}.note-card.selected{box-shadow:0 0 0 2px var(--color-accent)}.note-list-search-wrap{padding-left:var(--space-4);padding-right:var(--space-4)}.note-list-new-btn{width:38px;height:38px}}.note-editor{background:var(--color-bg-primary);flex-direction:column;flex:1;height:100%;display:flex;overflow:hidden}.note-editor-empty{justify-content:center;align-items:center}.note-editor-empty-state{align-items:center;gap:var(--space-3);padding:var(--space-8);text-align:center;flex-direction:column;animation:.4s fadeIn;display:flex}.note-editor-empty-icon{opacity:.4;font-size:52px}.note-editor-empty-title{font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);color:var(--color-text-primary)}.note-editor-empty-sub{font-size:var(--font-size-sm);color:var(--color-text-secondary)}.note-editor-header{justify-content:space-between;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--color-separator);background:var(--color-bg-secondary);flex-shrink:0;min-height:56px;display:flex}.note-editor-header-left{align-items:center;gap:var(--space-2);flex:1;min-width:0;display:flex}.note-editor-header-right{align-items:center;gap:var(--space-2);flex-shrink:0;display:flex}.note-editor-back{align-items:center;gap:var(--space-1);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-accent);padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm);white-space:nowrap;transition:background var(--transition-fast);flex-shrink:0;display:none}.note-editor-back:hover{background:var(--color-accent-light)}.note-editor-title-row{flex-direction:column;flex:1;gap:2px;min-width:0;display:flex}.note-editor-title-input{font-size:var(--font-size-md);font-weight:var(--font-weight-semibold);color:var(--color-text-primary);min-width:0;padding:var(--space-1) 0;background:0 0;border:none;outline:none;flex:1}.note-editor-title-input::placeholder{color:var(--color-text-placeholder)}.note-editor-folder-picker{align-self:flex-start;align-items:center;display:inline-flex;position:relative}.note-editor-folder-label{font-size:var(--font-size-xs);color:var(--color-text-tertiary);cursor:pointer;padding:1px var(--space-1);border-radius:var(--radius-sm);transition:background var(--transition-fast), color var(--transition-fast);white-space:nowrap}.note-editor-folder-picker:hover .note-editor-folder-label{background:var(--color-sidebar-hover);color:var(--color-text-secondary)}.note-editor-folder-select{opacity:0;cursor:pointer;font-size:var(--font-size-sm);width:100%;position:absolute;inset:0}.note-editor-mode-toggle{border:1px solid var(--color-separator);border-radius:var(--radius-sm);display:flex;overflow:hidden}.note-editor-mode-btn{padding:var(--space-1) var(--space-3);font-size:var(--font-size-xs);font-weight:var(--font-weight-medium);color:var(--color-text-secondary);transition:background var(--transition-fast), color var(--transition-fast);background:0 0}.note-editor-mode-btn:first-child{border-right:1px solid var(--color-separator)}.note-editor-mode-btn.active{background:var(--color-accent);color:#fff}.note-editor-mode-btn:not(.active):hover{background:var(--color-sidebar-hover);color:var(--color-text-primary)}.note-editor-delete-btn{border-radius:var(--radius-sm);width:32px;height:32px;color:var(--color-text-tertiary);transition:background var(--transition-fast), color var(--transition-fast);justify-content:center;align-items:center;display:flex}.note-editor-delete-btn:hover{color:var(--color-red);background:#ff3b301a}.note-editor-toolbar{align-items:center;gap:var(--space-1);padding:var(--space-1) var(--space-3);border-bottom:1px solid var(--color-separator);background:var(--color-bg-secondary);scrollbar-width:none;-ms-overflow-style:none;flex-shrink:0;display:flex;overflow:auto hidden}.note-editor-toolbar::-webkit-scrollbar{display:none}.note-editor-tb-btn{min-width:28px;height:28px;padding:0 var(--space-2);border-radius:var(--radius-sm);font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);color:var(--color-text-secondary);transition:background var(--transition-fast), color var(--transition-fast);white-space:nowrap;background:0 0;flex-shrink:0;justify-content:center;align-items:center;display:flex}.note-editor-tb-btn:hover{background:var(--color-sidebar-hover);color:var(--color-text-primary)}.note-editor-tb-btn:active{background:var(--color-accent-light);color:var(--color-accent)}.note-editor-tb-sep{background:var(--color-separator);width:1px;height:18px;margin:0 var(--space-1);flex-shrink:0}.note-editor-body{flex:1;display:flex;overflow:hidden}.note-editor-textarea{width:100%;padding:var(--space-6) var(--space-8);font-family:SF Mono,Fira Code,Fira Mono,Cascadia Code,Menlo,Monaco,Courier New,monospace;font-size:var(--font-size-sm);color:var(--color-text-primary);background:var(--color-bg-primary);resize:none;border:none;outline:none;flex:1;line-height:1.7;overflow-y:auto}.note-editor-textarea::placeholder{color:var(--color-text-placeholder)}.note-editor-preview{padding:var(--space-6) var(--space-8);color:var(--color-text-primary);font-size:var(--font-size-base);line-height:var(--line-height-normal);flex:1;overflow-y:auto}.note-editor-preview-empty{font-style:italic;color:var(--color-text-tertiary)!important}.note-editor-preview .md-h1,.note-editor-preview .md-h2,.note-editor-preview .md-h3,.note-editor-preview .md-h4,.note-editor-preview .md-h5,.note-editor-preview .md-h6{font-weight:var(--font-weight-bold);color:var(--color-text-primary);line-height:var(--line-height-tight);margin-top:1.4em;margin-bottom:.5em}.note-editor-preview .md-h1:first-child,.note-editor-preview .md-h2:first-child,.note-editor-preview .md-h3:first-child{margin-top:0}.note-editor-preview .md-h1{font-size:var(--font-size-2xl)}.note-editor-preview .md-h2{font-size:var(--font-size-xl)}.note-editor-preview .md-h3{font-size:var(--font-size-lg)}.note-editor-preview .md-h4{font-size:var(--font-size-md)}.note-editor-preview .md-h5{font-size:var(--font-size-base)}.note-editor-preview .md-h6{font-size:var(--font-size-sm);color:var(--color-text-secondary)}.note-editor-preview .md-p{color:var(--color-text-primary);margin-bottom:.9em;line-height:1.65}.note-editor-preview .md-ul,.note-editor-preview .md-ol{margin-bottom:.9em;padding-left:1.6em}.note-editor-preview .md-ul{list-style:outside}.note-editor-preview .md-ol{list-style:decimal}.note-editor-preview .md-ul li,.note-editor-preview .md-ol li{color:var(--color-text-primary);margin-bottom:.3em;line-height:1.55;display:list-item}.note-editor-preview .md-code{background:var(--color-bg-tertiary);border:1px solid var(--color-separator);border-radius:var(--radius-sm);color:var(--color-red);padding:1px 5px;font-family:SF Mono,Fira Code,Menlo,Monaco,Courier New,monospace;font-size:.875em}.note-editor-preview .md-code-block{background:var(--color-bg-tertiary);border:1px solid var(--color-separator);border-radius:var(--radius-md);padding:var(--space-4);margin-bottom:.9em;overflow-x:auto}.note-editor-preview .md-code-block code{font-family:SF Mono,Fira Code,Menlo,Monaco,Courier New,monospace;font-size:var(--font-size-sm);color:var(--color-text-primary);white-space:pre;display:block}.note-editor-preview .md-blockquote{border-left:3px solid var(--color-accent);padding:var(--space-2) var(--space-4);background:var(--color-accent-light);border-radius:0 var(--radius-sm) var(--radius-sm) 0;color:var(--color-text-secondary);margin-bottom:.9em;margin-left:0;font-style:italic}.note-editor-preview .md-blockquote .md-p{margin-bottom:0}.note-editor-preview .md-hr{border:none;border-top:1px solid var(--color-separator);margin:1.4em 0}.note-editor-preview .md-link{color:var(--color-accent);text-underline-offset:2px;transition:color var(--transition-fast);text-decoration:underline}.note-editor-preview .md-link:hover{color:var(--color-accent-hover)}@media (width<=768px){.note-editor{width:100%}.note-editor-back{display:flex}.note-editor-textarea,.note-editor-preview{padding:var(--space-4)}}.auth-screen{width:100%;height:100%;padding:var(--space-5);background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);justify-content:center;align-items:center;display:flex}.auth-card{background:var(--color-bg-secondary);border-radius:var(--radius-xl);width:100%;max-width:400px;padding:var(--space-10);box-shadow:var(--shadow-xl);text-align:center;animation:.4s scaleIn}.auth-logo{margin-bottom:var(--space-5)}.auth-logo img{border-radius:var(--radius-lg);box-shadow:var(--shadow-md)}.auth-title{font-size:var(--font-size-2xl);font-weight:var(--font-weight-bold);color:var(--color-text-primary);margin-bottom:var(--space-2);letter-spacing:-.5px}.auth-subtitle{font-size:var(--font-size-sm);color:var(--color-text-secondary);margin-bottom:var(--space-6)}.auth-error{color:var(--color-red);padding:var(--space-3);border-radius:var(--radius-md);font-size:var(--font-size-sm);margin-bottom:var(--space-4);background:#ff3b301a;animation:.2s fadeIn}.auth-form{gap:var(--space-3);flex-direction:column;display:flex}.auth-input{padding:var(--space-3) var(--space-4);font-size:var(--font-size-base);background:var(--color-bg-primary);border:1.5px solid var(--color-separator);border-radius:var(--radius-md);color:var(--color-text-primary);transition:all var(--transition-fast)}.auth-input:focus{border-color:var(--color-accent);box-shadow:0 0 0 3px var(--color-accent-light)}.auth-input::placeholder{color:var(--color-text-placeholder)}.auth-submit{padding:var(--space-3) var(--space-5);font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);color:#fff;background:var(--color-accent);border-radius:var(--radius-md);transition:all var(--transition-fast);margin-top:var(--space-2)}.auth-submit:hover:not(:disabled){background:var(--color-accent-hover);transform:translateY(-1px);box-shadow:0 4px 12px #007aff4d}.auth-submit:disabled{opacity:.6;cursor:not-allowed}.auth-divider{align-items:center;gap:var(--space-4);margin:var(--space-6) 0;color:var(--color-text-tertiary);font-size:var(--font-size-sm);display:flex}.auth-divider:before,.auth-divider:after{content:"";background:var(--color-separator);flex:1;height:1px}.auth-google{justify-content:center;align-items:center;gap:var(--space-3);width:100%;padding:var(--space-3);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-text-primary);background:var(--color-bg-primary);border:1.5px solid var(--color-separator);border-radius:var(--radius-md);transition:all var(--transition-fast);display:flex}.auth-google:hover:not(:disabled){background:var(--color-bg-tertiary);border-color:var(--color-border)}.auth-toggle{margin-top:var(--space-6);font-size:var(--font-size-sm);color:var(--color-text-secondary)}.auth-toggle button{color:var(--color-accent);font-weight:var(--font-weight-semibold);margin-left:var(--space-1)}.auth-toggle button:hover{text-decoration:underline}.app-loading{justify-content:center;align-items:center;gap:var(--space-4);height:100%;color:var(--color-text-secondary);font-size:var(--font-size-sm);flex-direction:column;display:flex}.app-loading-spinner{border:3px solid var(--color-separator);border-top-color:var(--color-accent);border-radius:50%;width:32px;height:32px;animation:.8s linear infinite spin}.install-banner{bottom:calc(var(--space-5) + var(--safe-bottom));left:var(--space-4);right:var(--space-4);z-index:var(--z-toast);align-items:center;gap:var(--space-3);background:var(--color-bg-elevated);border:1px solid var(--color-separator);border-radius:var(--radius-xl);padding:var(--space-4);box-shadow:var(--shadow-xl);animation:.35s cubic-bezier(.34,1.56,.64,1) slideUp;display:flex;position:fixed}.install-banner-icon{border-radius:var(--radius-lg);background:var(--color-accent-light);width:44px;height:44px;color:var(--color-accent);flex-shrink:0;justify-content:center;align-items:center;display:flex}.install-banner-body{flex:1;min-width:0}.install-banner-title{font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);color:var(--color-text-primary);margin-bottom:2px}.install-banner-subtitle{font-size:var(--font-size-xs);color:var(--color-text-secondary);line-height:1.45}.install-banner-actions{align-items:center;gap:var(--space-2);flex-shrink:0;display:flex}.install-banner-btn-install{padding:var(--space-2) var(--space-4);font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);color:#fff;background:var(--color-accent);border-radius:var(--radius-full);transition:background var(--transition-fast);white-space:nowrap}.install-banner-btn-install:hover{background:var(--color-accent-hover)}.install-banner-btn-close{border-radius:var(--radius-full);width:28px;height:28px;color:var(--color-text-tertiary);transition:all var(--transition-fast);flex-shrink:0;justify-content:center;align-items:center;display:flex}.install-banner-btn-close:hover{background:var(--color-sidebar-hover);color:var(--color-text-secondary)}.list-nav-wrapper{box-sizing:border-box;display:none}.list-nav{display:none}@media (width<=1024px){.list-nav-wrapper{left:50%;right:auto;bottom:calc(104px + var(--safe-bottom,0px));z-index:calc(var(--z-detail) - 5);width:max-content;max-width:calc(100vw - 48px - var(--safe-left,0px) - var(--safe-right,0px));transition:opacity var(--transition-fast), transform var(--transition-fast);display:block;position:fixed;transform:translate(-50%)}.list-nav{-webkit-backdrop-filter:blur(20px)saturate(180%);border:1px solid var(--color-separator);border-radius:var(--radius-full);width:100%;box-shadow:var(--shadow-lg);background:#ffffffd1;align-items:center;animation:.25s cubic-bezier(.34,1.56,.64,1) both listNavIn;display:flex;overflow:hidden}@media (prefers-color-scheme:dark){.list-nav{background:#1c1c1ee0}}}.list-nav-arrow{min-width:48px;color:var(--color-text-secondary);transition:color var(--transition-fast), background var(--transition-fast);flex-shrink:0;justify-content:center;align-items:center;gap:4px;padding:8px 10px;display:flex}.list-nav-arrow:active{color:var(--color-accent);background:var(--color-accent-light)}.list-nav-arrow-hint{opacity:.55;text-align:center;width:14px;font-size:13px;line-height:1}.list-nav-center{border-left:1px solid var(--color-separator);border-right:1px solid var(--color-separator);min-width:120px;min-height:44px;transition:background-color var(--transition-fast), color var(--transition-fast);flex:1;justify-content:center;align-items:center;gap:8px;padding:9px 10px;display:flex}.list-nav-center:active,.list-nav-center.open{background:#007aff14}.list-nav-icon{font-size:15px;line-height:1}.list-nav-center-copy{flex-direction:column;align-items:flex-start;min-width:0;display:flex}.list-nav-name{font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);color:var(--color-text-primary);white-space:nowrap;text-overflow:ellipsis;max-width:120px;overflow:hidden}.list-nav-caption{color:var(--color-text-tertiary);letter-spacing:.02em;font-size:11px;line-height:1.1}@keyframes listNavIn{0%{opacity:0;transform:translateY(12px)scale(.96)}to{opacity:1;transform:translateY(0)scale(1)}}.list-nav-wrapper.hidden{opacity:0;pointer-events:none;visibility:hidden;transition:all var(--transition-fast);transform:translateY(20px)}.list-nav-popup{-webkit-backdrop-filter:blur(24px)saturate(170%);background:#fffffff0;border:1px solid #0f172a14;border-radius:24px;max-height:min(60vh,360px);padding:10px;animation:.18s ease-out listPopupIn;position:absolute;bottom:calc(100% + 12px);left:0;right:0;overflow-y:auto;box-shadow:0 24px 48px #0f172a2e}.list-nav-popup-section-label{font-size:11px;font-weight:var(--font-weight-semibold);letter-spacing:.08em;text-transform:uppercase;color:var(--color-text-tertiary);padding:4px 8px 8px}.list-nav-popup-item{text-align:left;width:100%;min-height:48px;color:var(--color-text-primary);transition:background-color var(--transition-fast), transform var(--transition-fast);border-radius:16px;align-items:center;gap:10px;padding:0 12px;display:flex}.list-nav-popup-item+.list-nav-popup-item{margin-top:4px}.list-nav-popup-item:hover,.list-nav-popup-item:focus-visible{background:#007aff14}.list-nav-popup-item.active{background:linear-gradient(135deg,#007aff24,#5ac8fa2e)}.list-nav-popup-icon{text-align:center;flex-shrink:0;width:22px}.list-nav-popup-name{min-width:0;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);flex:1}.list-nav-popup-check{color:var(--color-accent);flex-shrink:0}.list-nav-popup-divider{background:var(--color-separator);height:1px;margin:10px 4px}@keyframes listPopupIn{0%{opacity:0;transform:translateY(8px)scale(.98)}to{opacity:1;transform:translateY(0)scale(1)}}@media (prefers-color-scheme:dark){.list-nav-popup{background:#1c1c1ef0;border-color:#ffffff14;box-shadow:0 24px 48px #00000057}}@media (width<=480px){.list-nav-wrapper{bottom:calc(120px + var(--safe-bottom,0px));width:max-content;max-width:calc(100vw - 32px - var(--safe-left,0px) - var(--safe-right,0px))}.list-nav{border-radius:22px}.list-nav-arrow{min-width:44px;padding:8px}.list-nav-center{min-width:0}.list-nav-name{max-width:96px}}.app{background:var(--color-bg-primary);width:100%;height:100%;display:flex;position:relative;overflow:hidden}.app-main{min-width:0;height:100%;transition:margin-left var(--transition-normal);flex-direction:column;flex:1;display:flex;position:relative}.app-content{flex:1;display:flex;position:relative;overflow:hidden}.app-task-area{flex-direction:column;flex:1;min-width:0;display:flex;overflow:hidden}.notes-layout{width:100%;height:100%;display:flex;overflow:hidden}@media (width<=768px){.notes-layout{position:relative}.notes-layout .note-list-panel{width:100%;transition:transform var(--transition-normal);z-index:1;position:absolute;inset:0;transform:translate(0)}.notes-layout.notes-has-selection .note-list-panel{pointer-events:none;transform:translate(-100%)}.notes-layout .note-editor{width:100%;transition:transform var(--transition-normal);z-index:2;position:absolute;inset:0;transform:translate(100%)}.notes-layout.notes-has-selection .note-editor{transform:translate(0)}}.sidebar-overlay{z-index:calc(var(--z-sidebar) - 1);opacity:0;transition:opacity var(--transition-normal);-webkit-backdrop-filter:blur(2px);background:#0000004d;display:none;position:fixed;inset:0}.sidebar-overlay.visible{opacity:1}.detail-overlay{z-index:calc(var(--z-detail) - 1);opacity:0;transition:opacity var(--transition-normal);pointer-events:none;background:#0000004d;display:none;position:fixed;inset:0}.detail-overlay.visible{opacity:1;pointer-events:auto}.empty-state{height:100%;padding:var(--space-8);text-align:center;flex-direction:column;justify-content:center;align-items:center;animation:.5s fadeIn;display:flex}.empty-state-icon{margin-bottom:var(--space-6);opacity:.5;font-size:64px}.empty-state-title{font-size:var(--font-size-xl);font-weight:var(--font-weight-semibold);color:var(--color-text-primary);margin-bottom:var(--space-2)}.empty-state-subtitle{font-size:var(--font-size-base);color:var(--color-text-secondary);max-width:300px;line-height:1.5}.toast{bottom:var(--space-8);background:var(--color-bg-elevated);padding:var(--space-3) var(--space-5);border-radius:var(--radius-full);box-shadow:var(--shadow-lg);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);z-index:var(--z-toast);opacity:0;transition:all var(--transition-spring);border:1px solid var(--color-separator);position:fixed;left:50%;transform:translate(-50%)translateY(100px)}.toast.visible{opacity:1;transform:translate(-50%)translateY(0)}.sync-indicator{align-items:center;gap:var(--space-2);font-size:var(--font-size-xs);color:var(--color-text-tertiary);padding:var(--space-2) var(--space-4);display:flex}.sync-dot{background:var(--color-green);border-radius:50%;width:6px;height:6px}.sync-dot.syncing{background:var(--color-orange);animation:1.5s infinite pulse}.sync-dot.offline{background:var(--color-text-tertiary)}@keyframes fadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}@keyframes slideInRight{0%{opacity:0;transform:translate(20px)}to{opacity:1;transform:translate(0)}}@keyframes slideInLeft{0%{opacity:0;transform:translate(-20px)}to{opacity:1;transform:translate(0)}}@keyframes scaleIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes checkmark{0%{transform:scale(0)}50%{transform:scale(1.2)}to{transform:scale(1)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.4}}@keyframes slideUp{0%{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}@media (width<=1024px){.sidebar-overlay{pointer-events:none;display:block}.sidebar-overlay.visible{pointer-events:auto}}@media (width<=480px){.detail-overlay{display:block}:root{--header-height:52px}.app-task-area,.notes-layout{width:100%;max-width:600px;margin:0 auto}}