:root[data-theme=dark]{--bg-primary: #1a1a1a;--bg-secondary: #2a2a2a;--bg-tertiary: #3a3a3a;--text-primary: #ffffff;--text-secondary: #a0a0a0;--accent: #0088cc;--accent-hover: #0099dd;--border: #444444;--success: #4caf50;--danger: #f44336;--shadow: rgba(0, 0, 0, .3)}:root[data-theme=light]{--bg-primary: #ffffff;--bg-secondary: #f5f5f5;--bg-tertiary: #e0e0e0;--text-primary: #000000;--text-secondary: #666666;--accent: #0088cc;--accent-hover: #0099dd;--border: #e0e0e0;--success: #4caf50;--danger: #f44336;--shadow: rgba(0, 0, 0, .1)}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;background:var(--bg-primary);color:var(--text-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.app{min-height:100vh;padding-bottom:20px}.header{position:sticky;top:0;background:var(--bg-primary);padding:16px 20px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;z-index:10}.header h1{font-size:20px;font-weight:600}.user-name{font-size:12px;color:var(--text-secondary);margin-top:4px}.header-actions{display:flex;gap:8px;align-items:center}.icon-btn{background:var(--accent);color:#fff;border:none;border-radius:50%;width:40px;height:40px;font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s}.icon-btn:active{transform:scale(.95);background:var(--accent-hover)}.theme-toggle{background:var(--bg-secondary);border:none;border-radius:50%;width:40px;height:40px;font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .2s}.theme-toggle:active{transform:scale(.95)}.main{padding:16px}.loading{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;gap:16px}.spinner{width:40px;height:40px;border:3px solid var(--bg-tertiary);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.error-state{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;padding:20px;text-align:center}.error-state h2{font-size:24px;margin-bottom:16px;color:var(--danger)}.error-message{padding:16px;background:var(--bg-secondary);border-radius:8px;border:1px solid var(--danger);margin-bottom:20px;word-break:break-word;max-width:400px}.retry-btn{padding:14px 32px;background:var(--accent);color:#fff;border:none;border-radius:8px;font-size:16px;cursor:pointer;transition:background .2s}.retry-btn:active{background:var(--accent-hover)}.empty-state{text-align:center;padding:60px 20px;color:var(--text-secondary)}.empty-state p{font-size:18px;margin-bottom:8px}.empty-state .hint{font-size:14px;opacity:.7}.categories{display:flex;flex-direction:column;gap:12px}.category{background:var(--bg-secondary);border-radius:12px;overflow:hidden;border:1px solid var(--border)}.category-header{padding:16px;display:flex;justify-content:space-between;align-items:center;cursor:pointer;-webkit-user-select:none;user-select:none;transition:background .2s}.category-header:active{background:var(--bg-tertiary)}.category-info{display:flex;align-items:center;gap:12px;flex:1}.category-info h2{font-size:16px;font-weight:600}.task-count{font-size:14px;color:var(--text-secondary);background:var(--bg-tertiary);padding:4px 8px;border-radius:12px}.category-actions{display:flex;align-items:center;gap:8px}.icon-btn-small{background:transparent;border:none;font-size:18px;cursor:pointer;padding:4px;opacity:.7;transition:opacity .2s}.icon-btn-small:active{opacity:1}.chevron{font-size:24px;color:var(--text-secondary);transition:transform .3s;transform:rotate(0)}.chevron.expanded{transform:rotate(90deg)}.tasks{border-top:1px solid var(--border);padding:8px}.add-task{display:flex;gap:8px;padding:12px;background:var(--bg-tertiary);border-radius:8px;margin-bottom:8px}.task-input{flex:1;background:var(--bg-primary);border:1px solid var(--border);border-radius:6px;padding:10px 12px;color:var(--text-primary);font-size:15px;outline:none}.task-input::placeholder{color:var(--text-secondary)}.add-task-btn{background:var(--accent);color:#fff;border:none;border-radius:6px;width:40px;font-size:18px;cursor:pointer;transition:all .2s}.add-task-btn:disabled{opacity:.5;cursor:not-allowed}.add-task-btn:active:not(:disabled){transform:scale(.95);background:var(--accent-hover)}.task{display:flex;justify-content:space-between;align-items:center;padding:12px;border-radius:8px;margin-bottom:4px;transition:background .2s;cursor:grab}.task:active{cursor:grabbing;background:var(--bg-tertiary)}.task:last-child{margin-bottom:0}.task-content{display:flex;align-items:center;gap:12px;flex:1}.checkbox{width:24px;height:24px;border:2px solid var(--text-secondary);border-radius:50%;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:14px;color:#fff;transition:all .2s;flex-shrink:0}.checkbox.checked{background:var(--success);border-color:var(--success)}.task-text{font-size:15px;line-height:1.4;word-break:break-word;flex:1}.task-text.completed{text-decoration:line-through;opacity:.6}.drag-handle{color:var(--text-secondary);font-size:16px;cursor:grab;-webkit-user-select:none;user-select:none}.task-actions{display:flex;gap:4px}.task-edit{flex:1}.task-edit-input{width:100%;background:var(--bg-primary);border:1px solid var(--accent);border-radius:6px;padding:10px 12px;color:var(--text-primary);font-size:15px;outline:none}.no-tasks{padding:12px;text-align:center;color:var(--text-secondary);font-size:14px}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px}.modal{background:var(--bg-secondary);border-radius:12px;padding:24px;width:100%;max-width:400px;box-shadow:0 4px 20px var(--shadow)}.modal h3{font-size:18px;margin-bottom:16px}.input{width:100%;background:var(--bg-primary);border:1px solid var(--border);border-radius:8px;padding:12px;color:var(--text-primary);font-size:16px;outline:none;margin-bottom:16px}.input::placeholder{color:var(--text-secondary)}.input:focus{border-color:var(--accent)}.modal-actions{display:flex;gap:12px}.btn-primary,.btn-secondary{flex:1;padding:12px;border:none;border-radius:8px;font-size:16px;cursor:pointer;transition:all .2s}.btn-primary{background:var(--accent);color:#fff}.btn-primary:active{background:var(--accent-hover)}.btn-secondary{background:var(--bg-tertiary);color:var(--text-primary)}.btn-secondary:active{background:var(--border)}@media (max-width: 375px){.header h1{font-size:18px}.task-text{font-size:14px}.icon-btn,.theme-toggle{width:36px;height:36px;font-size:18px}}body{margin:0;-webkit-tap-highlight-color:transparent;overscroll-behavior:none}button{-webkit-tap-highlight-color:transparent;outline:none}#root{min-height:100vh}