.todo-item{display:flex;align-items:center;justify-content:space-between;padding:16px;background:#f9f9f9;border:2px solid #e0e0e0;border-radius:8px;transition:all .2s}.todo-item:hover{border-color:#667eea;box-shadow:0 2px 8px #667eea1a}.todo-item.completed{opacity:.7;background:#f0f0f0}.todo-content{display:flex;align-items:center;gap:12px;flex:1;min-width:0}.todo-checkbox{width:20px;height:20px;cursor:pointer;flex-shrink:0}.todo-text-wrapper{display:flex;flex-direction:column;gap:4px;flex:1;min-width:0}.todo-title{font-size:1rem;color:#333;word-wrap:break-word}.todo-item.completed .todo-title{text-decoration:line-through;color:#999}.todo-date{font-size:.75rem;color:#999}.todo-edit-input{flex:1;padding:8px 12px;border:2px solid #667eea;border-radius:4px;font-size:1rem;min-width:0}.todo-edit-input:focus{outline:none;border-color:#5568d3}.todo-edit-input:disabled{background:#f5f5f5;cursor:not-allowed}.todo-actions{display:flex;gap:8px;flex-shrink:0}.todo-button{background:none;border:none;font-size:1.2rem;cursor:pointer;padding:4px 8px;border-radius:4px;transition:background .2s;display:flex;align-items:center;justify-content:center}.todo-button:hover:not(:disabled){background:#e0e0e0}.todo-button:disabled{opacity:.5;cursor:not-allowed}.edit-button:hover:not(:disabled){background:#e3f2fd}.delete-button:hover:not(:disabled){background:#ffebee}.save-button:hover:not(:disabled){background:#e8f5e9}.cancel-button:hover:not(:disabled){background:#ffebee}.todo-list{display:flex;flex-direction:column;gap:12px}.empty-state{text-align:center;padding:40px;color:#999;font-size:1.1rem}.todo-form{display:flex;gap:10px;margin-bottom:20px}.todo-input{flex:1;padding:12px 16px;border:2px solid #e0e0e0;border-radius:6px;font-size:1rem;transition:border-color .2s}.todo-input:focus{outline:none;border-color:#667eea}.todo-input:disabled{background:#f5f5f5;cursor:not-allowed}.add-button{padding:12px 24px;background:#667eea;color:#fff;border:none;border-radius:6px;font-size:1rem;font-weight:600;cursor:pointer;transition:background .2s}.add-button:hover:not(:disabled){background:#5568d3}.add-button:disabled{background:#ccc;cursor:not-allowed}.filter-bar{display:flex;gap:10px;margin-bottom:20px;justify-content:center}.filter-button{padding:8px 16px;background:#f5f5f5;color:#666;border:2px solid transparent;border-radius:6px;font-size:.9rem;cursor:pointer;transition:all .2s}.filter-button:hover{background:#e0e0e0}.filter-button.active{background:#667eea;color:#fff;border-color:#667eea}.app{display:flex;justify-content:center;align-items:flex-start;min-height:100vh;padding:20px}.container{background:#fff;border-radius:12px;box-shadow:0 10px 40px #0003;padding:30px;max-width:600px;width:100%}.title{text-align:center;color:#333;margin-bottom:30px;font-size:2.5rem}.error-message{background:#fee;color:#c33;padding:12px;border-radius:6px;margin-bottom:20px;border:1px solid #fcc}.loading{text-align:center;padding:40px;color:#666;font-size:1.1rem}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:linear-gradient(135deg,#667eea,#764ba2);min-height:100vh;padding:20px}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}