.todo-app{min-height:100vh;background:linear-gradient(135deg,#667eea,#764ba2);display:flex;align-items:center;justify-content:center;padding:20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.todo-container{background:#fff;border-radius:20px;padding:40px;width:100%;max-width:600px;box-shadow:0 20px 40px #0000001a;min-height:500px}.todo-title{text-align:center;font-size:2.5rem;font-weight:700;color:#2c3e50;margin-bottom:30px;letter-spacing:-.5px}.todo-input-container{margin-bottom:30px}.input-row{display:flex;gap:12px;align-items:center}.todo-input{flex:1;padding:16px 20px;border:2px solid #e1e8ed;border-radius:12px;font-size:16px;outline:none;transition:all .3s ease;background:#f8f9fa}.todo-input:focus{border-color:#667eea;background:#fff;box-shadow:0 0 0 3px #667eea1a}.todo-input::placeholder{color:#a0aec0}.category-select{padding:16px 12px;border:2px solid #e1e8ed;border-radius:12px;font-size:14px;outline:none;background:#fff;cursor:pointer;transition:all .3s ease;min-width:120px}.category-select:focus{border-color:#667eea;box-shadow:0 0 0 3px #667eea1a}.add-btn{padding:16px 24px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:12px;font-size:16px;font-weight:600;cursor:pointer;transition:all .3s ease;min-width:80px}.add-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 20px #667eea4d}.add-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}.todo-list{display:flex;flex-direction:column;gap:12px;max-height:500px;overflow-y:auto}.todo-item{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;background:#f8f9fa;border-radius:12px;transition:all .3s ease;border:2px solid transparent}.todo-item:hover{background:#e9ecef;border-color:#dee2e6}.todo-item.completed{background:#f0f8f0;border-color:#d4edda}.todo-content{display:flex;align-items:center;gap:16px;flex:1}.todo-checkbox{width:24px;height:24px;border:2px solid #dc3545;border-radius:50%;background:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s ease;flex-shrink:0}.todo-checkbox:hover{transform:scale(1.1)}.todo-checkbox.checked{background:#28a745;border-color:#28a745}.checkmark{color:#fff;font-size:14px;font-weight:700}.todo-text{font-size:16px;color:#2c3e50;flex:1;transition:all .3s ease;word-break:break-word;white-space:normal}.todo-text.strikethrough{text-decoration:line-through;color:#dc3545;opacity:.7}.todo-category{padding:6px 12px;border-radius:20px;font-size:12px;font-weight:600;color:#fff;text-transform:uppercase;letter-spacing:.5px;flex-shrink:0;box-shadow:0 2px 4px #0000001a;-webkit-user-select:none;-ms-user-select:none;user-select:"none"!important}.delete-btn{width:32px;height:32px;border:none;background:#dc3545;color:#fff;border-radius:50%;font-size:18px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s ease;opacity:0;transform:scale(.8)}.todo-item:hover .delete-btn{opacity:1;transform:scale(1)}.delete-btn:hover{background:#c82333;transform:scale(1.1)}@media(max-width:768px){.todo-container{padding:20px;margin:10px}.todo-title{font-size:2rem}.input-row{flex-direction:column;gap:10px}.todo-input,.category-select,.add-btn{width:100%}.todo-content{gap:12px}.todo-text{font-size:14px}}@keyframes slideIn{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}.todo-item{animation:slideIn .3s ease-out}.todo-list::-webkit-scrollbar{width:3px}.todo-list::-webkit-scrollbar-track{background:transparent}.todo-list::-webkit-scrollbar-thumb{background-color:#888;border-radius:10px}.todo-list::-webkit-scrollbar-thumb:hover{background:#555}